Marquee

react-fancy

Auto-scrolling ticker strip — seamless wrap, px/s speed, opposing directions, fade edges, reduced-motion safe.

Registry JSON
Why
Auto-scrolling ticker strips — client logos, capability words, telemetry lines — are a signature of kinetic design, and every hand-rolled one carries the same footguns: a manually duplicated item list for the seamless wrap, mask-fade CSS, keyframe math that changes pace with content width, and (almost always forgotten) aria-hidden + the prefers-reduced-motion gate. The Kinetic style in the Inspiration Gallery specified its marquees as hand-rolled, so every project that adopted the look re-implemented the same ~40 lines. That boilerplate — and its accessibility traps — belongs in the kit, solved once.
What
Marquee is an edge-to-edge auto-scrolling strip with JSON-friendly items (or children), speed in px/s — the content is measured so perceived pace stays constant regardless of width (or pass an exact duration) — direction="left|right" for opposing pairs, pauseOnHover, a controlled paused prop, plus gap, a separator node, masked fade edges, and an angle tilt for the torn off-axis band look. Short content auto-repeats until the strip fills, so the wrap is always seamless. It's decorative by default (aria-hidden, duplicate loop copies always hidden) and renders a static row under prefers-reduced-motion. Stable data-react-fancy-marquee-* handles on the root, track, and every item.
How
<Marquee items={clients} separator={<span>✸</span>} /> is the whole job — typography and color inherit from className, so the Kinetic gallery's clients marquee is literally one element: direction="right" fade="8%" plus your big-type classes (the interactive demo below is that exact recreation). Stack two strips with opposite direction for the opposing-pair effect, and expose a non-decorative strip to assistive tech with decorative={false} + an aria-label.