Scramble Hover

1"use client"
2 
3import { useEffect, useState } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8interface ScrambleHoverProps {
9  text: string
10  scrambleSpeed?: number
11  maxIterations?: number
12  sequential?: boolean
13  revealDirection?: "start" | "end" | "center"
14  useOriginalCharsOnly?: boolean
15  characters?: string
16  className?: string
17  scrambledClassName?: string
18}
19 
20const ScrambleHover: React.FC<ScrambleHoverProps> = ({
21  text,
22  scrambleSpeed = 50,
23  maxIterations = 10,
24  useOriginalCharsOnly = false,
25  characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+",
26  className,
27  scrambledClassName,
28  sequential = false,
29  revealDirection = "start",
30  ...props
31}) => {
32  const [displayText, setDisplayText] = useState(text)
33  const [isHovering, setIsHovering] = useState(false)
34  const [isScrambling, setIsScrambling] = useState(false)
35  const [revealedIndices, setRevealedIndices] = useState(new Set<number>())
36 
37  useEffect(() => {
38    let interval: NodeJS.Timeout
39    let currentIteration = 0
40 
41    const getNextIndex = () => {
42      const textLength = text.length
43      switch (revealDirection) {
44        case "start":
45          return revealedIndices.size
46        case "end":
47          return textLength - 1 - revealedIndices.size
48        case "center":
49          const middle = Math.floor(textLength / 2)
50          const offset = Math.floor(revealedIndices.size / 2)
51          const nextIndex =
52            revealedIndices.size % 2 === 0
53              ? middle + offset
54              : middle - offset - 1
55 
56          if (
57            nextIndex >= 0 &&
58            nextIndex < textLength &&
59            !revealedIndices.has(nextIndex)
60          ) {
61            return nextIndex
62          }
63 
64          for (let i = 0; i < textLength; i++) {
65            if (!revealedIndices.has(i)) return i
66          }
67          return 0
68        default:
69          return revealedIndices.size
70      }
71    }
72 
73    const shuffleText = (text: string) => {
74      if (useOriginalCharsOnly) {
75        const positions = text.split("").map((char, i) => ({
76          char,
77          isSpace: char === " ",
78          index: i,
79          isRevealed: revealedIndices.has(i),
80        }))
81 
82        const nonSpaceChars = positions
83          .filter((p) => !p.isSpace && !p.isRevealed)
84          .map((p) => p.char)
85 
86        // Shuffle remaining non-revealed, non-space characters
87        for (let i = nonSpaceChars.length - 1; i > 0; i--) {
88// … truncated