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.









