Marquee

import { useRef } from 'react';
import {
  motion,
  useAnimationFrame,
  useMotionValue,
  useReducedMotion
} from 'motion/react';

const SPEED = 40; // px per second, steady and linear

type Logo = { name: string; src: string };

export function LogoMarquee({ logos }: { logos: Logo[] }) {
  const track = useRef<HTMLDivElement>(null);
  const paused = useRef(false);
  const x = useMotionValue(0);
  const reduceMotion = useReducedMotion();

  useAnimationFrame((_, delta) => {
    if (reduceMotion || paused.current || !track.current) return;
    // Slide by exactly one copy, then wrap; the second copy hides the jump.
    const copyWidth = track.current.scrollWidth / 2;
    x.set((x.get() - (SPEED * delta) / 1000) % copyWidth);
  });

  return (
    <div
      onPointerEnter={() => (paused.current = true)}
      onPointerLeave={() => (paused.current = false)}
      className='overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_15%,black_85%,transparent)]'
    >
      <motion.div ref={track} style={{ x }} className='flex w-max'>
        {[false, true].map((duplicate) => (
          // pr-12 matches gap-12, so both copies are exactly the same width.
          <ul
            key={String(duplicate)}
            aria-hidden={duplicate || undefined}
            className='flex shrink-0 items-center gap-12 pr-12'
          >
            {logos.map((logo) => (
              <li key={logo.name}>
                <img
                  src={logo.src}
                  alt={duplicate ? '' : logo.name}
                  className='h-7 w-auto opacity-60 grayscale'
                />
              </li>
            ))}
          </ul>
        ))}
      </motion.div>
    </div>
  );
}