shadcn.io is not affiliated with official shadcn/ui
News Crawl Ticker Awards Block for React Aria
One bar with a single line of dated award announcements crawling by a CSS keyframe, with a pause button and a still, wrapped line under reduced motion.
Installation
Overview
A news-crawl ticker for React with React Aria: where the dual marquee is two rows of pills, this is one continuous line of text. Under the page's top rule, one bar holds an outline pause button and "In the news", then a single line of six announcements, each with its date in a time element and separated by small dots, crawling towards the start and fading at its ends. The bar ends the block. The pause button stops and restarts the crawl, and hovering or focusing the line holds it too. With reduced motion on, the line does not crawl, the button goes away and the announcements wrap as a still line. The crawl is a CSS keyframe from the theme, with a second copy of the line to loop it. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.
FAQ
How can a visitor stop the crawl?
By pressing the button (its name stays "Pause the scrolling announcements" and its pressed state says whether it is paused), by hovering or focusing the line, or by turning on reduced motion, in which case the line is still and wraps.
How do I change the announcements?
Edit ANNOUNCEMENTS: each has a date (ISO, for the time element), a label (the date as written) and one line of text. Dates are fixed in the data and never computed from today.
How do I change the speed?
The crawl's length is the CSS variable [--marquee-duration:70s] on the track: a bigger number is slower. The track holds two copies of the list and moves by half its width, so the loop has no seam.