Skip to content

Components

The News Ticker — a Marquee With Responsibilities

Clickable Items Force Pause-on-Hover — and the Label That Stops It Reading as an Ad
Written by Aiden Wood Founder and Lead Design Engineer
📰 📍 ⏸️

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.

Let us make some quick suggestions?

Please provide your full name.
Please provide your phone number.
Please provide a valid phone number.
Please provide your email address.
Please provide a valid email address.
Please provide your brand name or website.
Please provide your brand name or website.