01 · LTR · normal velocity
data-direction="ltr" data-velocity="normal"
Nebula
·
Constellation
·
Aurora
·
Orion
·
Galaxy
·
02 · RTL · slow
data-direction="rtl" data-velocity="slow"
Helios
Polaris
Ringfield
Velum
Apex
Halo Labs
03 · Multi-row · alternating directions
two .lsd-marquee stacked, second is data-reverseLSD moved our design system from a folder of guesses to a substrate the agents could read. — Mira, design lead
The surface tiers do the colour thinking so we don't. — Devon, product
First builder where motion is a token, not a plugin. — Ivy, motion
We composed an entire pricing page from primitives in one sitting. — Sasha, founder
Surface-aware components
Container queries
Aurora timeline
Behaviour wires
Token-snap drag
Cascade actions
Responsive overrides
Style queries
04 · Vertical · up
data-direction="up" data-velocity="normal"
v0.6 · builder UX overhaul
v0.5 · Aurora timeline lands
v0.4 · Surfaces panel
v0.3 · Containers register
v0.2 · Behaviours pillar
v0.1 · Tokens-first export
Drag snaps to token
Iframe pointer overlay
Visibility utilities
Style queries shipped
Cascade fan-out
CSS-first motion
05 · Fast · hover-paused
data-velocity="fast" data-pause-on-hover
surfacescontainers
behavioursaurora
motiontokens
queriestiers
cascadestate
Usage
API surfaceAuthoring contract
A marquee is a host element with one .lsd-marquee__track rail and at least two identical .lsd-marquee__group children. The duplicate is what makes the loop seamless — mark it aria-hidden="true" so it's invisible to assistive tech.
| Hook | Values | Effect |
|---|---|---|
data-direction | ltr · rtl · up · down | Axis + initial direction. up/down auto-stack the items. |
data-reverse | boolean | Flip the computed direction without changing axis. |
data-velocity | slow · normal · fast | Pulls from --marquee-velocity-{slow,normal,fast}. Override the var to inject your own pace. |
data-pause-on-hover | boolean | Pauses the rail on :hover and :focus-within. |
--marquee-gap | length | Spacing between items. Default 28px. |
--marquee-fade | length | Edge-mask width. Set 0 for hard edges. |
prefers-reduced-motion | — | Rail becomes a snap-scrollable list. Animation is dropped, content stays reachable. |
View marquee HTML
<div class="lsd-marquee" data-direction="ltr" data-velocity="normal" data-pause-on-hover>
<div class="lsd-marquee__track">
<div class="lsd-marquee__group"><!-- items… --></div>
<div class="lsd-marquee__group" aria-hidden="true"><!-- same items, mirror copy --></div>
</div>
</div>