Scramble Text

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/registry/wise-ui/lib/utils"
5 
6interface ScrambleTextProps {
7  text: string
8  trigger?: "mount" | "hover"
9  speed?: number
10  characterSet?: string
11  sequential?: boolean
12  className?: string
13}
14 
15const DEFAULT_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*"
16 
17function ScrambleText({
18  text,
19  trigger = "mount",
20  speed = 50,
21  characterSet = DEFAULT_CHARS,
22  sequential = true,
23  className,
24}: ScrambleTextProps) {
25  const [display, setDisplay] = React.useState(trigger === "mount" ? "" : text)
26  const rafRef = React.useRef<number>(0)
27  const startTimeRef = React.useRef<number>(0)
28 
29  const scramble = React.useCallback(() => {
30    cancelAnimationFrame(rafRef.current)
31    startTimeRef.current = 0
32 
33    const chars = text.split("")
34    const totalDuration = sequential
35      ? chars.length * speed + speed * 3
36      : speed * 8
37 
38    const step = (timestamp: number) => {
39      if (!startTimeRef.current) startTimeRef.current = timestamp
40      const elapsed = timestamp - startTimeRef.current
41 
42      let result = ""
43      let allResolved = true
44 
45      for (let i = 0; i < chars.length; i++) {
46        if (chars[i] === " ") {
47          result += " "
48          continue
49        }
50 
51        const resolveAt = sequential ? i * speed + speed * 2 : speed * 4
52        if (elapsed >= resolveAt) {
53          result += chars[i]
54        } else {
55          allResolved = false
56          result += characterSet[Math.floor(Math.random() * characterSet.length)]
57        }
58      }
59 
60      setDisplay(result)
61 
62      if (!allResolved && elapsed < totalDuration) {
63        rafRef.current = requestAnimationFrame(step)
64      } else {
65        setDisplay(text)
66      }
67    }
68 
69    rafRef.current = requestAnimationFrame(step)
70  }, [text, speed, characterSet, sequential])
71 
72  React.useEffect(() => {
73    if (trigger === "mount") {
74      scramble()
75    }
76    return () => cancelAnimationFrame(rafRef.current)
77  }, [trigger, scramble])
78 
79  const handleMouseEnter = () => {
80    if (trigger === "hover") {
81      scramble()
82    }
83  }
84 
85  return (
86    <span
87      className={cn("inline-block whitespace-pre", className)}
88      onMouseEnter={handleMouseEnter}
89    >
90      {display || "\u00A0"}
91    </span>
92  )
93}
94ScrambleText.displayName = "ScrambleText"
95 
96export { ScrambleText }
97export type { ScrambleTextProps }