Text scramble

"use client";

import * as React from "react";
import { useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&*+=<>/";

export interface TextScrambleProps {
  text: string;
  /** ms for the whole decode. */
  duration?: number;
  /** Re-scramble on hover. */
  trigger?: "mount" | "hover" | "both";
  className?: string;
}

/** Characters cycle through glyphs and settle left to right into the final text. */
export function TextScramble({ text, duration = 900, trigger = "both", className }: TextScrambleProps) {
  const reduce = useReducedMotion();
  const [out, setOut] = React.useState(text);
  const frame = React.useRef(0);

  const run = React.useCallback(() => {
    if (reduce) return;
    cancelAnimationFrame(frame.current);
    const start = performance.now();
    const tick = (now: number) => {
      const p = Math.min(1, (now - start) / duration);
      const settled = Math.floor(p * text.length);
      setOut(
        [...text]
          .map((ch, i) => (i < settled || ch === " " ? ch : GLYPHS[Math.floor(Math.random() * GLYPHS.length)]))
          .join(""),
      );
      if (p < 1) frame.current = requestAnimationFrame(tick);
    };
    frame.current = requestAnimationFrame(tick);
  }, [text, duration, reduce]);

  React.useEffect(() => {
    if (trigger !== "hover") run();
    return () => cancelAnimationFrame(frame.current);
  }, [run, trigger]);

  return (
    <span className={cn("font-mono tabular-nums", className)} onPointerEnter={trigger !== "mount" ? run : undefined} aria-label={text}>
      <span aria-hidden>{out}</span>
    </span>
  );
}