Scramble In

1"use client"
2 
3import {
4  forwardRef,
5  useCallback,
6  useEffect,
7  useImperativeHandle,
8  useState,
9} from "react"
10 
11interface ScrambleInProps {
12  text: string
13  scrambleSpeed?: number
14  scrambledLetterCount?: number
15  characters?: string
16  className?: string
17  scrambledClassName?: string
18  autoStart?: boolean
19  onStart?: () => void
20  onComplete?: () => void
21}
22 
23export interface ScrambleInHandle {
24  start: () => void
25  reset: () => void
26}
27 
28const ScrambleIn = forwardRef<ScrambleInHandle, ScrambleInProps>(
29  (
30    {
31      text,
32      scrambleSpeed = 50,
33      scrambledLetterCount = 2,
34      characters = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()_+",
35      className = "",
36      scrambledClassName = "",
37      autoStart = true,
38      onStart,
39      onComplete,
40    },
41    ref
42  ) => {
43    const [displayText, setDisplayText] = useState("")
44    const [isAnimating, setIsAnimating] = useState(false)
45    const [visibleLetterCount, setVisibleLetterCount] = useState(0)
46    const [scrambleOffset, setScrambleOffset] = useState(0)
47 
48    const startAnimation = useCallback(() => {
49      setIsAnimating(true)
50      setVisibleLetterCount(0)
51      setScrambleOffset(0)
52      onStart?.()
53    }, [onStart])
54 
55    const reset = useCallback(() => {
56      setIsAnimating(false)
57      setVisibleLetterCount(0)
58      setScrambleOffset(0)
59      setDisplayText("")
60    }, [])
61 
62    useImperativeHandle(ref, () => ({
63      start: startAnimation,
64      reset,
65    }))
66 
67    useEffect(() => {
68      if (autoStart) {
69        startAnimation()
70      }
71    }, [autoStart, startAnimation])
72 
73    useEffect(() => {
74      let interval: NodeJS.Timeout
75 
76      if (isAnimating) {
77        interval = setInterval(() => {
78          // Increase visible text length
79          if (visibleLetterCount < text.length) {
80            setVisibleLetterCount((prev) => prev + 1)
81          }
82          // Start sliding scrambled text out
83          else if (scrambleOffset < scrambledLetterCount) {
84            setScrambleOffset((prev) => prev + 1)
85          }
86          // Complete animation
87          else {
88            clearInterval(interval)
89            setIsAnimating(false)
90            onComplete?.()
91          }
92 
93          // Calculate how many scrambled letters we can show
94          const remainingSpace = Math.max(0, text.length - visibleLetterCount)
95          const currentScrambleCount = Math.min(
96            remainingSpace,
97            scrambledLetterCount
98          )
99 
100          // Generate scrambled text
101// … truncated