Marquee

npm install motion

"use client";

import { useRef, useState, type ReactNode } from "react";
import { motion, useAnimationFrame, useMotionValue, useReducedMotion } from "motion/react";

type MarqueeProps = {
  children: ReactNode;
  /** Pixels per second. */
  speed?: number;
  direction?: "left" | "right";
  /** Stop while hovered or while something inside has keyboard focus. */
  pauseOnHover?: boolean;
  /** Fade the left and right edges. */
  fade?: boolean;
  className?: string;
};

export function Marquee({
  children,
  speed = 50,
  direction = "left",
  pauseOnHover = true,
  fade = true,
  className = "",
}: MarqueeProps) {
  const track = useRef<HTMLDivElement>(null);
  const [paused, setPaused] = useState(false);
  const reduceMotion = useReducedMotion();
  const x = useMotionValue(0);

  useAnimationFrame((_, delta) => {
    if (reduceMotion || (pauseOnHover && paused) || !track.current) return;
    // the track holds two copies, so wrapping at half its width loops seamlessly
    const half = track.current.scrollWidth / 2;
    const step = (speed * delta) / 1000;
    let next = x.get() + (direction === "left" ? -step : step);
    if (next <= -half) next += half;
    if (next > 0) next -= half;
    x.set(next);
  });

  return (
    <div
      // keyboard users get the same pause when focus moves into a link or button inside
      onPointerEnter={() => setPaused(true)}
      onPointerLeave={() => setPaused(false)}
      onFocus={() => setPaused(true)}
      onBlur={() => setPaused(false)}
      className={`overflow-hidden ${className}`}
      style={
        fade
          ? { maskImage: "linear-gradient(to right, transparent, black 12%, black 88%, transparent)" }
          : undefined
      }
    >
      <motion.div ref={track} style={{ x }} className="flex w-max">
        <div className="flex shrink-0">{children}</div>
        <div className="flex shrink-0" aria-hidden>
          {children}
        </div>
      </motion.div>
    </div>
  );
}