shadcn.io is not affiliated with official shadcn/ui
Headline Ticker Marquee Blog Block for React Aria
A two-row ticker of headline pills moving in opposite directions with faded edges, a visible pause button, holding on hover and focus; under reduced motion the rows wrap into a plain list.
Installation
Overview
A headline ticker for React with React Aria, written for Tallyby Weekly, a markets newsletter. A centred header with a ghost pause button sits over a band under the spine's top rule holding two rows of headline pills: the first scrolls towards the end and the second the other way, both faded at the edges by a mask. Hovering or focusing a pill holds both rows, the pause button stops them and starts them again, and under reduced motion nothing moves: the rows wrap into a plain list of links and the button is gone. It's built from Marquee, Button and Guides. For a latest-headlines strip, a newsletter's issue list or a social-proof ticker. Every pill is a real link, and the headlines are example data.
FAQ
How do the pause button and hover work?
The button is an icon Button with aria-pressed and a name ("Pause the headlines"); pressed, both rows hold. Hovering any part of a row, or focusing a pill, holds the rows too, so you can read and click. Both are CSS on the Marquee, with no timers.
What happens with reduced motion?
Nothing scrolls. The loop's extra copies are hidden, the edge fade is off, the button is hidden and each row wraps into lines of pills, so every headline is readable and reachable without any animation.
What do screen readers and the keyboard see?
Each row is a labelled region. The copies that make the loop are hidden from screen readers and made inert, so each headline is announced and tabbed to once.
How do I change the speed or the headlines?
Edit FIRST_ROW and SECOND_ROW, and the speed on each Marquee (the rows run at 40 and 34, so they drift apart). autoFill repeats a row until it is wide enough.