Kinetic Text Marquees — Big Type That Moves Without Moving Your CPU

The giant scrolling text strip — DESIGN · ENGINEERING · MOTION · — is the signature move of every awards-bait brand site since about 2020. It reads as expensive. It's actually the cheapest component on the page, if you build it in CSS instead of a scroll-jacking library.

Velocity X's text-marquee is the free, MIT version: one keyframe, duplicated track, zero JavaScript — same chassis as a logo ticker, different rules because text has meaning.

The Money Pattern

<div class="overflow-hidden whitespace-nowrap" role="presentation">
  <div class="inline-flex w-max animate-[marquee_var(--duration)_linear_infinite]">
    <span class="text-7xl font-semibold tracking-tight pr-8">{text} ·&nbsp;</span>
    <span class="text-7xl font-semibold tracking-tight pr-8" aria-hidden="true">{text} ·&nbsp;</span>
  </div>
</div>

@keyframes marquee { to { transform: translateX(-50%); } }

The detail that separates smooth from spin-cycle: set duration from content length, not a constant. A 40-character strip and a 90-character strip at the same duration scroll at wildly different speeds. Compute --duration as roughly 1s per 90px of track and every marquee on the site moves at the same perceived velocity.

The Catch

Text in a marquee is unreadable by design — which means it must never be load-bearing text. If the words matter, they belong in a static heading; the marquee copy is ambience. That's also why the duplicate track is aria-hidden and the real one should be too if the same words exist elsewhere on the page — screen readers don't need your vibes twice, and Google doesn't need your H1 keywords stuffed into a moving strip (it reads as exactly what it would be: decoration wearing keywords).

And the big one: prefers-reduced-motion stops the animation, full stop. A permanently-moving 96px text block is the single most motion-sickness-triggering pattern in modern web design. motion-safe:animate-[…] makes the safe version the default.

The Verdict

Kinetic type is ambience, and ambience should cost nothing: a keyframe, a duplicate, a computed duration, and the humility to keep meaning out of it. text-marquee is free with source in the public repo; its siblings live in Carousels & Tickers.