Free React Marquee Components
The marquee earned its bad reputation honestly, then infinite-scroll logo strips rehabilitated it. These six keep the momentum and add control: a classic logo marquee with proper pause states, a focus-lens variant that magnifies what passes the centre, split lanes moving in opposition, a step rail that advances in discrete beats, a ticker tape for data-flavoured brands, and a velocity scroll that responds to the reader's own scrolling. All pause on hover and focus, and all respect reduced motion.
6 components · MIT licensed · installable with the shadcn CLI
Focus Lens Marquee
React marquee with a fixed center reading lens, Tailwind display phrases drift on a loop and swell into focus as they cross a hairline reticle, receding at the edges.
Logo Marquee
Single-row logo strip on a pure-CSS loop, wordmarks sit grayscale and dimmed until hover restores them, with edge fade masks and an honest sr-only roster of company names.
Split Lanes Marquee
Two counter-scrolling lanes of short display words, filled type above, outline type below, pure CSS with edge fades and a static stacked lockup under reduced motion.
Step Rail Marquee
Stepped React marquee that advances one seamed cell at a time and dwells so every entry is readable, a pure CSS Tailwind rail with generated hold keyframes.
Ticker Tape Marquee
Thin financial-style tape scrolling mono label-value pairs on pure CSS, signed deltas carry direction glyphs in the primary/destructive token pair, framed by hairlines.
Velocity Scroll Marquee
Display-type marquee whose speed and direction follow scroll velocity, spring-smoothed so it drifts gently at rest, whips with fast scrolls, and never jumps.
Frequently asked questions
Are marquees bad for accessibility?
Uncontrollable ones are. These pause on hover and keyboard focus, expose a pause control where content is interactive, and stop entirely under prefers-reduced-motion, the failures that made marquees notorious are exactly what got engineered out.
What content works in a marquee besides logos?
Short, glanceable, repeated items: testimonial fragments, stat chips, integration names, city lists, headlines. The ticker tape variant suits live-ish data; anything requiring sustained reading belongs in a static layout instead.
How is the infinite loop implemented?
The track renders two copies of your items and translates by exactly half its width per cycle, so the loop is seamless at any content length. CSS-driven animation keeps it off the JavaScript thread.