Scramble

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useCallback, useEffect, useRef, useState } from "react";4 5/**6 * Text that resolves out of noise, on view or on hover.7 *8 * The detail that separates this from the usual implementation: the element9 * always contains the FINAL text in the accessibility tree. The scrambling10 * happens in a visually-presented span while a visually-hidden span holds the11 * real string, so a screen reader announces "Founding Engineer" once, not a12 * stream of garbage characters as the effect runs — which is what you get13 * from every version that mutates textContent directly.14 *15 * Characters resolve left to right with a small random delay each, rather16 * than all at once. Uniform resolution reads as a loading state; staggered17 * resolution reads as decoding.18 */19 20const ALPHABETS = {21  latin: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",22  symbols: "!<>-_\\/[]{}—=+*^?#",23  binary: "01",24  katakana: "アイウエオカキクケコサシスセソタチツテトナニヌネノ",25} as const;26 27export type ScrambleAlphabet = keyof typeof ALPHABETS;28 29export interface ScrambleProps {30  text: string;31  /** `view` fires once when scrolled into view; `hover` fires on pointer. */32  trigger?: "view" | "hover" | "mount";33  /** Frames each character spends scrambled before it locks. */34  duration?: number;35  alphabet?: ScrambleAlphabet;36  /** Force the resolved text — reduced motion, print, screenshots. */37  still?: boolean;38  className?: string;39}40 41export function Scramble({42  text,43  trigger = "view",44  duration = 22,45  alphabet = "symbols",46  still = false,47  className = "",48}: ScrambleProps) {49  const [display, setDisplay] = useState(text);50  const ref = useRef<HTMLSpanElement>(null);51  const frame = useRef(0);52  const running = useRef(false);53 54  const run = useCallback(() => {55    if (running.current) return;56 57    const reduced =58      still ||59      (typeof matchMedia === "function" &&60        matchMedia("(prefers-reduced-motion: reduce)").matches);61    if (reduced) {62      setDisplay(text);63      return;64    }65 66    running.current = true;67    const chars = ALPHABETS[alphabet];68    // Each character gets its own window, staggered by index so the string69    // resolves as a wave rather than snapping.70    const schedule = Array.from({ length: text.length }, (_, i) => ({71      start: i * 1.6,72      end: i * 1.6 + duration * (0.6 + Math.random() * 0.8),73    }));74 75    let tick = 0;76    const step = () => {77      let done = true;78      let output = "";79 80      for (let i = 0; i < text.length; i += 1) {81        const char = text[i];82        // Whitespace is never scrambled: shuffling it changes the word83        // shape and makes the line jitter as it resolves.84        if (char === " ") {85          output += " ";86          continue;87        }88        if (tick >= schedule[i].end) {89          output += char;90        } else if (tick >= schedule[i].start) {91          output += chars[Math.floor(Math.random() * chars.length)];92          done = false;93        } else {94          output += chars[Math.floor(Math.random() * chars.length)];95          done = false;96        }97      }98 99      setDisplay(output);100      tick += 1;101 102      if (done) {103        running.current = false;104        setDisplay(text);105        return;106      }107      frame.current = requestAnimationFrame(step);108    };109 110    frame.current = requestAnimationFrame(step);111  }, [text, duration, alphabet, still]);112 113  useEffect(() => {114    if (trigger === "mount") {115      // Deferred a frame rather than run inline. Starting it in the effect116      // body sets state during commit, which cascades a second render before117      // the first has painted — and the delay is one frame, so nobody sees it.118      const start = requestAnimationFrame(run);119      return () => {120        cancelAnimationFrame(start);121        cancelAnimationFrame(frame.current);122      };123    }124 125    if (trigger !== "view") return;126    const element = ref.current;127    if (!element) return;128 129    const observer = new IntersectionObserver(130      ([entry]) => {131        if (!entry.isIntersecting) return;132        run();133        // Once resolved it stays resolved — re-scrambling on every scroll134        // past turns a flourish into a distraction.135        observer.disconnect();136      },137      { threshold: 0.4 },138    );139 140    observer.observe(element);141    return () => {142      observer.disconnect();143      cancelAnimationFrame(frame.current);144    };145  }, [trigger, run]);146 147  useEffect(() => () => cancelAnimationFrame(frame.current), []);148 149  return (150    <span151      ref={ref}152      className={className}153      onPointerEnter={trigger === "hover" ? run : undefined}154    >155      {/* The real string, for assistive technology and for select-and-copy. */}156      <span className="sr-only">{text}</span>157      <span aria-hidden>{display}</span>158    </span>159  );160}161