Tailwind UI Pattern Registry for humans and agents

ticker scroll marquee announcement promo press infinite-scroll banner ticker marquee scroll announcement infinite loop promo press-mentions scrolling ticker announcement bar infinite marquee text strip horizontal scrolling promo banner

Announcement Ticker Scroll

Fetch pattern JSON: curl https://webspire.de/patterns/announcement/ticker-scroll.json

Details

Family
announcement-bar
Tier
enhanced
Kind
section
Extends
announcement-bar/base
Responsive Dark Mode SSR Safe Copy & Paste
Stable Published
tickerscrollmarqueeannouncementpromopressinfinite-scrollbanner

Slots

Name Required Description
ticker-items Yes Text items separated by bullet separators. Duplicated for seamless loop.

Props

Name Type Default Description
speed string 20s CSS animation duration. Shorter = faster.
variant 'dark' | 'light' dark Background color variant of the strip.

Infinitely scrolling horizontal ticker strip powered by a CSS @keyframes animation. Items are duplicated twice so the loop is seamless. Hovering pauses the animation. Includes a dark (accent) and a light (secondary bg) variant. Animation respects prefers-reduced-motion.