ComponentsLumos 0.0.2NewOpen component
Marquee
A strip of items travelling steadily past, looping without a seam.
Marquee runs its items past in a continuous loop — logos, marks, a line of names. It counts what you put in it and repeats them enough times to fill the strip, so the loop closes without a visible seam whatever the width.
<Marquee label="Clients">
<Icon src={northwind} />
<Icon src={lantern} />
<Icon src={fieldnote} />
</Marquee>Two of them running opposite ways is the usual arrangement: set direction="backwards" on the second and the pair reads as movement rather than as one thing sliding off.
<Marquee>…</Marquee>
<Marquee direction="backwards">…</Marquee>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
render | boolean | true | Set to false to skip this component and everything inside it. |
label | string | "Marquee" | What the strip holds, for anyone who cannot see it. |
direction | "forwards" | "backwards" | "forwards" | Which way the items travel. forwards runs them leftwards. |
Pace is set in CSS, not here
How fast it travels is a property in the stylesheet rather than a prop, because it is a decision about the design and not about this instance of it. Change it once and every marquee on the site follows.