The horizontal ticker is broadcast design's longest-surviving export: a labelled strip — UPDATES, LIVE, ASX — with headlines flowing through it. On the web it earns its place on exactly the pages with genuinely rolling content: status pages, event sites, sports and market dashboards, newsrooms. Everywhere else it's a marquee cosplaying as journalism.
Velocity X's free news-ticker-horizontal shares the duplicated-track CSS chassis with the logo ticker — but items are links, and that one difference drives every rule below.
The Money Pattern
<div class="flex items-stretch overflow-hidden border-y">
<span class="shrink-0 bg-ink px-3 py-2 text-xs font-bold uppercase
tracking-wider text-white">Updates</span>
<div class="group flex-1 overflow-hidden">
<ul class="flex w-max gap-10 motion-safe:animate-[ticker_40s_linear_infinite]
group-hover:[animation-play-state:paused]
group-focus-within:[animation-play-state:paused]">
{items.map(item => (
<li><a href={item.href} class="text-sm hover:underline">{item.text}</a></li>
))}
{/* duplicated track, aria-hidden, same items */}
</ul>
</div>
</div>
The load-bearing line is group-hover:[animation-play-state:paused] — the moment ticker items are clickable, pause-on-hover stops being a courtesy and becomes a requirement, because nobody can click a link that's running away from their cursor. focus-within extends the same guarantee to keyboard users tabbing through the links.
The Catch
The static label is doing more than branding: a moving strip with no label reads as an ad and earns ad-blindness — users' eyes skip it entirely. The label anchors it as content. Keep it a real word ("Updates", "Live"), not an icon.
And a ticker is a teaser surface, not the archive: every item must exist somewhere static and linkable, because the ticker is unreadable by screen readers in motion (the moving list is best treated as decorative, with a visually-hidden static list of the same links for assistive tech) and unreachable for anyone who missed item three. The component renders that hidden static list for you — don't strip it as "duplicate markup"; it's the accessible copy.
The Verdict
Rolling content, label, pause-on-anything, static accessible copy, links that exist elsewhere — that's a news ticker instead of a nuisance. It's free and MIT: news-ticker-horizontal, source in the public repo, chassis shared with the whole Carousels & Tickers set.









