Marquee

An infinite strip — logos, taglines — that pauses on hover.

Use it for: Logo walls, ticker bands. The honest replacement for Swiper loop.
Knobs: --sv-marquee-duration (one loop), --sv-gap; --sv-marquee-hover: running disables the pause

scrollvars·one rAF in· CSS variables out·

<div class="sv-marquee [--sv-marquee-duration:24s] [--sv-gap:64px] py-8">
  <div class="sv-marquee-track">
    {logos}{/* duplicate once, aria-hidden */}
  </div>
</div>

<div class="sv-marquee">
  <div class="sv-marquee-track">
    …content… …content again (aria-hidden)…
  </div>
</div>

/* the preset (styles/ui.css): */
.sv-marquee { overflow: hidden; display: flex; }
.sv-marquee-track { display: flex; gap: var(--sv-gap, 48px); width: max-content;
  padding-right: var(--sv-gap, 48px);
  animation: sv-marquee var(--sv-marquee-duration, 30s) linear infinite; }
.sv-marquee:hover .sv-marquee-track { animation-play-state: paused; }
@keyframes sv-marquee { to { translate: -50% 0; } }

<Marquee speed={24}>
  {logos.map(l => <img key={l.id} src={l.src} alt={l.name} className="h-8" />)}
</Marquee>

Engine: npm i scrollvars — full core 3.9 KB gzip. All effects respect prefers-reduced-motion and render complete without JS.