Scroll Velocity Marquee

pura-velocity-marquee is an infinite, seamless text strip that reacts to how fast you scroll: scrolling down makes it race ahead, scrolling up makes it run backwards, and when you stop it eases back to its resting pace. The base loop is pure CSS with the exact same paint as pura-marquee, so SSR and pre-JS render a normal marquee; on the client a passive scroll listener measures velocity and modulates the playbackRate of that CSS animation through its WAAPI handle, with no idle per-frame work once settled. Compare: pura-marquee is constant speed, pura-velocity only skews its content. factor tunes sensitivity, max caps the rate, decay controls how quickly it settles. The slotted content is cloned once into an aria-hidden mirror so assistive tech reads it exactly once, and reduced motion stops the loop entirely. Each instance registers in window.__puraVelocityMarquees by data-pura-id, and data-pura-vm-* attributes mirror the live state (speed, direction, playing, current rate).

Preview

<!-- big display text that races with the scroll and reverses on the way up -->
<pura-velocity-marquee speed="16" label="Headlines" style="font-size: 3rem; font-weight: 800;">
  <span>DESIGN</span>
  <span>BUILD</span>
  <span>SHIP</span>
</pura-velocity-marquee>

<!-- two opposing rows, more sensitive and capped lower -->
<pura-velocity-marquee speed="12" factor="10" max="4" label="Row one">
  <strong>Acme</strong>
  <strong>Globex</strong>
  <strong>Initech</strong>
</pura-velocity-marquee>
<pura-velocity-marquee speed="12" direction="right" factor="10" max="4" label="Row two">
  <strong>Umbrella</strong>
  <strong>Soylent</strong>
  <strong>Stark Industries</strong>
</pura-velocity-marquee>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/velocity-marquee.js"></script>

import "./pura/lib/velocity-marquee.js";