Scramble Text

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface ScrambleTextProps extends Omit<
8  React.ComponentProps<"span">,
9  "children"
10> {
11  /** The string the run resolves to. */
12  text: string
13  /** Glyphs drawn in a slot that has not settled yet. */
14  characters?: string
15  /** Milliseconds per scramble frame. */
16  speed?: number
17  /** Frames a slot scrambles before it settles. */
18  cycles?: number
19  /** Frames between one slot settling and the next. */
20  stagger?: number
21  /** What starts a run. `hover` starts a fresh one on every enter. */
22  trigger?: "mount" | "view" | "hover"
23  /** Render the finished text with no scramble. */
24  disabled?: boolean
25}
26 
27const DEFAULT_CHARACTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@*<>/"
28 
29// `useEffect` would let the finished text paint for a frame before the first
30// scramble frame replaced it, and `useLayoutEffect` alone warns during SSR.
31const useIsomorphicLayoutEffect =
32  typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
33 
34export function ScrambleText({
35  text,
36  characters = DEFAULT_CHARACTERS,
37  speed = 45,
38  cycles = 8,
39  stagger = 2,
40  trigger = "mount",
41  disabled = false,
42  className,
43  ...props
44}: ScrambleTextProps) {
45  const ref = React.useRef<HTMLSpanElement>(null)
46 
47  // The first render is the finished text, so the server and the client agree
48  // and the component degrades to plain text without JavaScript.
49  const [display, setDisplay] = React.useState(text)
50  const [run, setRun] = React.useState(0)
51 
52  const start = React.useCallback(() => setRun((value) => value + 1), [])
53 
54  React.useEffect(() => {
55    if (trigger === "mount") {
56      start()
57      return
58    }
59    if (trigger !== "view") {
60      return
61    }
62 
63    const node = ref.current
64    if (!node) {
65      return
66    }
67 
68    const observer = new IntersectionObserver(
69      (entries) => {
70        if (entries.some((entry) => entry.isIntersecting)) {
71          start()
72          observer.disconnect()
73        }
74      },
75      { threshold: 0.3 }
76    )
77    observer.observe(node)
78    return () => observer.disconnect()
79  }, [trigger, text, start])
80 
81  useIsomorphicLayoutEffect(() => {
82    if (run === 0) {
83      return
84    }
85    if (
86      disabled ||
87      window.matchMedia("(prefers-reduced-motion: reduce)").matches
88    ) {
89      setDisplay(text)
90      return
91    }
92 
93    const slots = Array.from(text)
94    const pool = characters.length > 0 ? characters : DEFAULT_CHARACTERS
95// … truncated