Velocity Marquee

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * A marquee that reacts to scroll velocity — it speeds up as you scroll, and7 * flips direction when you scroll back.8 *9 * Built on one rAF loop writing a single transform, so the whole thing runs10 * on the compositor. The common alternative, a CSS keyframe animation, cannot11 * respond to input at all; the other common one, a React state update per12 * frame, re-renders the subtree sixty times a second to move a strip of text.13 *14 * Content is duplicated exactly once and the track is translated by half its15 * width, which is what makes the wrap seamless without measuring anything.16 * The duplicate is hidden from assistive technology so the text is announced17 * once rather than twice.18 */19 20export interface VelocityMarqueeProps {21  children: React.ReactNode;22  /** Pixels per second at rest. */23  baseSpeed?: number;24  /** How hard scrolling pushes it. 0 makes it a plain constant marquee. */25  velocityFactor?: number;26  direction?: "left" | "right";27  /** Force the static state — reduced motion, print, screenshots. */28  still?: boolean;29  className?: string;30}31 32export function VelocityMarquee({33  children,34  baseSpeed = 60,35  velocityFactor = 4,36  direction = "left",37  still = false,38  className = "",39}: VelocityMarqueeProps) {40  const trackRef = useRef<HTMLDivElement>(null);41 42  useEffect(() => {43    const track = trackRef.current;44    if (!track) return;45 46    const reduced =47      still ||48      (typeof matchMedia === "function" &&49        matchMedia("(prefers-reduced-motion: reduce)").matches);50    if (reduced) return;51 52    let offset = 0;53    let velocity = 0;54    let lastScroll = window.scrollY;55    let last = performance.now();56    let frame = 0;57 58    const onScroll = () => {59      const now = window.scrollY;60      velocity += (now - lastScroll) * velocityFactor;61      lastScroll = now;62    };63 64    const tick = (now: number) => {65      const delta = Math.min((now - last) / 1000, 0.05);66      last = now;67 68      // Scroll impulse decays exponentially, so the strip eases back to its69      // resting speed instead of stopping dead when scrolling does.70      velocity *= 0.92;71 72      const sign = direction === "left" ? -1 : 1;73      offset += (baseSpeed * sign + velocity) * delta;74 75      // Half the track is one full copy of the content, so wrapping there is76      // invisible. Modulo keeps the number small — left to accumulate, it77      // eventually loses float precision and the strip judders.78      const half = track.scrollWidth / 2;79      if (half > 0) offset = ((offset % half) + half) % half;80 81      track.style.transform = `translate3d(${-offset}px, 0, 0)`;82      frame = requestAnimationFrame(tick);83    };84 85    window.addEventListener("scroll", onScroll, { passive: true });86    frame = requestAnimationFrame(tick);87 88    return () => {89      window.removeEventListener("scroll", onScroll);90      cancelAnimationFrame(frame);91    };92  }, [baseSpeed, velocityFactor, direction, still]);93 94  return (95    <div className={`overflow-hidden ${className}`}>96      <div ref={trackRef} className="flex w-max will-change-transform">97        <div className="flex shrink-0 items-center">{children}</div>98        {/* The seamless-wrap duplicate. Hidden from the a11y tree so the99            content is not announced twice. */}100        <div aria-hidden className="flex shrink-0 items-center">101          {children}102        </div>103      </div>104    </div>105  );106}107