Marquee

A continuously scrolling strip for logo walls and tickers, edges fade out, motion pauses on hover, and it stops entirely for reduced-motion users.

Examples

A/B Testing Multivariate Full-Stack Server-Side Personalization Feature Flags Rollouts Multi-page A/B Testing Multivariate Full-Stack Server-Side Personalization Feature Flags Rollouts Multi-page

<div class="marquee">
  <div class="marquee__row">
    <span class="marquee__item">A/B Testing</span>
    <span class="marquee__item">Multivariate</span>
    <span class="marquee__item">Full-Stack</span>
    <span class="marquee__item">Server-Side</span>
    <span class="marquee__item">Personalization</span>
    <span class="marquee__item">Feature Flags</span>
    <span class="marquee__item">Rollouts</span>
    <span class="marquee__item">Multi-page</span>
    <!-- repeat the items once more for a seamless loop -->
  </div>
</div>

Usage

The marquee is a single .marquee wrapper around one .marquee__row of .marquee__item elements that translates by -50% on a loop.

Duplicate the item set in markup, list it twice so the -50% loop lands exactly where it started and reads as seamless.
Use it for logo walls or short labels, not long-form text, items scroll past too quickly to read a sentence.
The edge fade is built in via a mask gradient; place the marquee on any background and let it dissolve at both ends.
It pauses on hover and stops entirely for prefers-reduced-motion users, don't override those behaviors.

States

Scrolling (default), the row animates from translateX(0) to translateX(-50%) on an infinite linear loop.
Paused (on hover), hovering the .marquee sets animation-play-state: paused so the strip holds still.
Static (reduced-motion), under prefers-reduced-motion: reduce the animation is removed and the row sits at its start.

Code

Link the stylesheet in your <head>, then duplicate the item set inside the row so the loop is seamless:

<link rel="stylesheet" href="/_shared/components/marquee.css">

<div class="marquee">
  <div class="marquee__row">
    <span class="marquee__item">A/B Testing</span>
    <span class="marquee__item">Multivariate</span>
    <span class="marquee__item">Full-Stack</span>
    <span class="marquee__item">Server-Side</span>
    <!-- …rest of the set… -->
    <!-- repeat the items once more for a seamless loop -->
  </div>
</div>