Marquee

1"use client";
2 
3import {
4  motion,
5  useAnimationFrame,
6  useMotionValue,
7  useReducedMotion,
8} from "motion/react";
9import {
10  useCallback,
11  useEffect,
12  useRef,
13  useState,
14  type ReactNode,
15} from "react";
16 
17interface MarqueeProps {
18  children: ReactNode;
19  /** Pixels travelled per second. */
20  speed?: number;
21  direction?: "left" | "right";
22  pauseOnHover?: boolean;
23  /** Fade the leading and trailing edges into the background. */
24  fadeEdges?: boolean;
25  className?: string;
26}
27 
28/**
29 * A seamless, infinitely scrolling row.
30 *
31 * Driven by `useAnimationFrame` against a motion value rather than a CSS
32 * keyframe. That costs nothing extra and buys two things a keyframe cannot:
33 * pausing mid-travel without a jump, and a wrap point measured from the real
34 * rendered width, so any content loops seamlessly without hand-tuned timings.
35 */
36export function Marquee({
37  children,
38  speed = 60,
39  direction = "left",
40  pauseOnHover = true,
41  fadeEdges = true,
42  className = "",
43}: MarqueeProps) {
44  const trackRef = useRef<HTMLDivElement>(null);
45  const x = useMotionValue(0);
46  const [paused, setPaused] = useState(false);
47  const [halfWidth, setHalfWidth] = useState(0);
48  const prefersReducedMotion = useReducedMotion();
49 
50  const measure = useCallback(() => {
51    const track = trackRef.current;
52    if (!track) return;
53    // The content is rendered twice, so one loop is half the track.
54    setHalfWidth(track.scrollWidth / 2);
55  }, []);
56 
57  useEffect(() => {
58    measure();
59    const track = trackRef.current;
60    if (!track) return;
61 
62    const observer = new ResizeObserver(measure);
63    observer.observe(track);
64    return () => observer.disconnect();
65  }, [measure]);
66 
67  useAnimationFrame((_, delta) => {
68    if (paused || halfWidth === 0 || prefersReducedMotion) return;
69 
70    // delta is milliseconds since the last frame, so movement stays constant
71    // regardless of refresh rate.
72    const step = (speed * delta) / 1000;
73    let next = x.get() + (direction === "left" ? -step : step);
74 
75    // Wrap by exactly one copy's width; the seam is never visible.
76    if (next <= -halfWidth) next += halfWidth;
77    if (next >= 0) next -= halfWidth;
78 
79    x.set(next);
80  });
81 
82  return (
83    <div
84      className={`relative w-full overflow-hidden ${className}`}
85      style={
86        fadeEdges
87          ? {
88              maskImage:
89                "linear-gradient(to right, transparent, black 12%, black 88%, transparent)",
90              WebkitMaskImage:
91// … truncated