Variable font animation

import { useRef } from 'react';
import {
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
  type MotionValue
} from 'motion/react';

// Needs a variable font, such as Inter from next/font with no weight list.
const RADIUS = 150; // px of reach on each side of the pointer
const MIN = 100; // the font's wght axis range
const MAX = 900;

function Letter({ char, x }: { char: string; x: MotionValue<number> }) {
  const ref = useRef<HTMLSpanElement>(null);
  // Heaviest right under the pointer, falling off along a cosine curve.
  const settings = useTransform(x, (pointer) => {
    const el = ref.current;
    const distance = el
      ? Math.abs(pointer - el.offsetLeft - el.offsetWidth / 2)
      : RADIUS;
    const t = Math.min(distance / RADIUS, 1);
    return `'wght' ${Math.round(MIN + (MAX - MIN) * (0.5 + Math.cos(t * Math.PI) / 2))}`;
  });
  return (
    <motion.span ref={ref} aria-hidden style={{ fontVariationSettings: settings }}>
      {char}
    </motion.span>
  );
}

export function WeightWord({ word }: { word: string }) {
  const reduceMotion = useReducedMotion();
  // Parked far to the left, so every letter starts at the lightest weight.
  const pointerX = useMotionValue(-1000);
  const x = useSpring(pointerX, { stiffness: 260, damping: 32 });

  if (reduceMotion) return <h1 className='text-8xl'>{word}</h1>;

  return (
    // Letters measure offsetLeft from this positioned heading.
    <h1
      aria-label={word}
      onPointerMove={(e) =>
        pointerX.set(e.clientX - e.currentTarget.getBoundingClientRect().left)
      }
      onPointerLeave={() => pointerX.set(-1000)}
      className='relative flex text-8xl'
    >
      {[...word].map((char, i) => (
        <Letter key={i} char={char} x={x} />
      ))}
    </h1>
  );
}