Skip to content

Components

Vertical Tickers — Ambient Activity in One Line, Not a Toast Barrage

A Fixed-Height Window, a translateY Step, and the Line Between Ambience and Interruption
Written by Aiden Wood Founder and Lead Design Engineer
🔃 📋 🤫

Somewhere between a static stat ("2,400 deployments this week") and a toast barrage ("🔔 Dave deployed!") sits the vertical ticker: a one-line window where recent activity rotates through quietly. Dashboards, hero proof-lines, footer status — anywhere you want "this product is alive" without demanding anything from the reader.

Velocity X's vertical-ticker is the React version; the mechanics are a fixed-height window and a stepped translate.

The Money Pattern

<div class="h-7 overflow-hidden" aria-live="off">
  <ul style={`transform: translateY(-${index * 1.75}rem)`}
      class="transition-transform duration-500 ease-out">
    {[...items, items[0]].map(item => (     // first item duplicated at the end
      <li class="flex h-7 items-center gap-2 text-sm">{item}</li>
    ))}
  </ul>
</div>

// Step on an interval; snap back invisibly at the loop point
useEffect(() => {
  const t = setInterval(() => setIndex(i => i + 1), 4000);
  return () => clearInterval(t);
}, []);

useEffect(() => {
  if (index === items.length) {             // we're on the duplicate
    requestAnimationFrame(() => {
      ul.current!.style.transition = 'none'; // snap, don't animate
      setIndex(0);
      requestAnimationFrame(() => (ul.current!.style.transition = ''));
    });
  }
}, [index]);

The duplicated first item is the loop trick (same family as the marquee): animate to the duplicate, then snap back to the real first item with transitions off — the user sees a seamless cycle, never a rewind.

The Catch

aria-live="off" is deliberate and load-bearing: a rotating line that announced every change would read the entire feed to a screen-reader user forever. Ambient means silent to assistive tech — with the full list available on a linked static page, same rule as the horizontal ticker.

Pause on hover (someone's reading that line), respect reduced motion (show the first item, static), and keep items structurally identical — "X did Y" every time. The moment items need different layouts, you've outgrown ambience and you want a real activity feed with timestamps.

The Verdict

One line, 4-second steps, seamless loop, silent to screen readers, pausable. Ambient proof that doesn't interrupt anyone — the opposite end of the spectrum from the social-proof toast, for the same underlying data. It's in Velocity X's Carousels & Tickers, source you own.

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.