Scroll velocity

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

const BASE_SPEED = 40; // px per second while the page is still

export function VelocityRow({
  text,
  reverse = false
}: {
  text: string;
  reverse?: boolean;
}) {
  const track = useRef<HTMLDivElement>(null);
  const heading = useRef(1);
  const reduceMotion = useReducedMotion();
  const { scrollY } = useScroll();
  // Scroll speed in px/s, smoothed so a mouse wheel's bursts don't jerk the row.
  const velocity = useSpring(useVelocity(scrollY), {
    stiffness: 300,
    damping: 50
  });
  const x = useMotionValue(0);

  useAnimationFrame((_, delta) => {
    if (reduceMotion || !track.current) return;
    const speed = velocity.get();
    // Scrolling up flips the row until the reader scrolls down again.
    if (Math.abs(speed) > 30) heading.current = Math.sign(speed);
    const multiplier = Math.min(1 + Math.abs(speed) / 200, 8);
    const step = BASE_SPEED * multiplier * (delta / 1000);
    const next = x.get() - step * heading.current * (reverse ? -1 : 1);
    // Wrap within one copy; the second copy hides the jump.
    const copyWidth = track.current.scrollWidth / 2;
    x.set(((next % copyWidth) - copyWidth) % copyWidth);
  });

  // Each copy repeats the text so it is wider than the screen.
  const repeated = Array.from({ length: 4 }, () => text).join(' ');

  return (
    <div className='overflow-hidden py-2'>
      {/* Screen readers get the text once; the moving copies are hidden. */}
      <p className='sr-only'>{text}</p>
      <motion.div
        ref={track}
        aria-hidden
        style={{ x }}
        className='flex w-max'
      >
        {[0, 1].map((copy) => (
          <span
            key={copy}
            className='shrink-0 pr-6 text-6xl font-semibold tracking-tight whitespace-nowrap'
          >
            {repeated}
          </span>
        ))}
      </motion.div>
    </div>
  );
}

// <VelocityRow text='Describe it · Preview it · Publish it ·' />
// <VelocityRow text='Database · Storage · Email · Domains ·' reverse />