Weight Wave Text

"use client";

import { useEffect, useRef } from "react";

export function WeightWaveText({
  text,
  minWeight = 200,
  maxWeight = 900,
  reach = 110,
}: {
  text: string;
  minWeight?: number;
  maxWeight?: number;
  reach?: number;
}) {
  const hostRef = useRef<HTMLSpanElement>(null);
  const charRefs = useRef<(HTMLSpanElement | null)[]>([]);
  const pointer = useRef<number | null>(null);
  const frame = useRef<number | null>(null);

  useEffect(() => {
    let t = 0;
    let last = 0;

    function loop() {
      const now = performance.now();
      const dt = last ? Math.min(100, now - last) : 16.7;
      last = now;
      //
      // TIME-BASED, NOT PER-FRAME.
      //
      // Advancing a fixed amount every frame ties the motion to the refresh
      // rate. The identical code runs at DOUBLE speed on a 120Hz panel and
      // 2.4x on a 144Hz one — and you never see it on the machine you tuned
      // it on, which is why a background that felt calm in development
      // arrives frantic on someone else's monitor. k is the frame's length
      // measured against 60Hz, clamped so a backgrounded tab cannot return
      // with a 4-second delta and teleport everything at once.
      // 0.02 per frame at 60Hz is 1.2 per second.
      t += (dt / 1000) * 1.2;
      const host = hostRef.current?.getBoundingClientRect();

      charRefs.current.forEach((el, i) => {
        if (!el || !host) return;
        const rect = el.getBoundingClientRect();
        const center = rect.left + rect.width / 2 - host.left;

        let intensity: number;
        if (pointer.current === null) {
          // Idle: a slow sine wave travelling the line, so the headline is
          // alive before anyone interacts with it.
          intensity = ((Math.sin(t - i * 0.45) + 1) / 2) * 0.55;
        } else {
          // Squared falloff so the swell has a soft shoulder.
          const d = Math.abs(center - pointer.current);
          intensity = Math.pow(Math.max(0, 1 - d / reach), 2);
        }

        const weight = Math.round(minWeight + (maxWeight - minWeight) * intensity);
        // Written straight to the element. A setState per frame would
        // re-render the whole headline ~60 times a second.
        el.style.fontVariationSettings = '"wght" ' + weight;
      });

      frame.current = requestAnimationFrame(loop);
    }

    frame.current = requestAnimationFrame(loop);
    return () => {
      if (frame.current !== null) cancelAnimationFrame(frame.current);
    };
  }, [minWeight, maxWeight, reach]);

  return (
    <span
      ref={hostRef}
      onMouseMove={(e) => {
        const rect = hostRef.current?.getBoundingClientRect();
        if (rect) pointer.current = e.clientX - rect.left;
      }}
      onMouseLeave={() => {
        pointer.current = null;
      }}
      className="cursor-default select-none text-5xl leading-none tracking-tight"
    >
      {/* One accessible copy; the per-character spans are decorative. */}
      <span className="sr-only">{text}</span>
      <span aria-hidden>
        {text.split("").map((ch, i) => (
          <span
            key={i}
            ref={(el) => {
              charRefs.current[i] = el;
            }}
            className="inline-block"
            style={{ fontVariationSettings: '"wght" ' + minWeight }}
          >
            {ch === " " ? "\u00A0" : ch}
          </span>
        ))}
      </span>
    </span>
  );
}