Text Scramble

1"use client";
2 
3import { useCallback, useEffect, useRef, useState } from "react";
4import { useReducedMotion } from "motion/react";
5 
6interface TextScrambleProps {
7  text: string;
8  /** Characters cycled through before a letter settles. */
9  characters?: string;
10  /** Milliseconds between scramble frames. */
11  speed?: number;
12  /** Frames each character scrambles before locking in. */
13  scrambleCount?: number;
14  /** Re-run the effect whenever the pointer enters the text. */
15  scrambleOnHover?: boolean;
16  className?: string;
17}
18 
19const DEFAULT_CHARS = "!<>-_\\/[]{}—=+*^?#________";
20 
21/**
22 * Decodes text one character at a time, cycling through random glyphs before
23 * each letter settles.
24 */
25export function TextScramble({
26  text,
27  characters = DEFAULT_CHARS,
28  speed = 40,
29  scrambleCount = 6,
30  scrambleOnHover = true,
31  className = "",
32}: TextScrambleProps) {
33  const prefersReducedMotion = useReducedMotion();
34  const [display, setDisplay] = useState(text);
35  const [renderedText, setRenderedText] = useState(text);
36  const frameRef = useRef<ReturnType<typeof setInterval> | null>(null);
37 
38  // React's "adjust state when a prop changes" pattern: resetting during render
39  // rather than in an effect avoids a wasted commit with stale text on screen.
40  if (text !== renderedText) {
41    setRenderedText(text);
42    setDisplay(text);
43  }
44 
45  const stop = useCallback(() => {
46    if (frameRef.current) {
47      clearInterval(frameRef.current);
48      frameRef.current = null;
49    }
50  }, []);
51 
52  /**
53   * Starts the scramble interval. Deliberately performs no synchronous state
54   * update, so it is safe to call from an effect body — the timer is the
55   * external system the effect subscribes to.
56   */
57  const run = useCallback(() => {
58    if (prefersReducedMotion) return;
59 
60    stop();
61    let frame = 0;
62 
63    frameRef.current = setInterval(() => {
64      const revealed = Math.floor(frame / scrambleCount);
65 
66      if (revealed >= text.length) {
67        setDisplay(text);
68        stop();
69        return;
70      }
71 
72      const next = text
73        .split("")
74        .map((char, index) => {
75          if (index < revealed || char === " ") return char;
76          return (
77            characters[Math.floor(Math.random() * characters.length)] ?? char
78          );
79        })
80        .join("");
81 
82      setDisplay(next);
83      frame += 1;
84    }, speed);
85  }, [characters, prefersReducedMotion, scrambleCount, speed, stop, text]);
86 
87// … truncated