Random Letter Swap Forward Anim

1"use client"
2 
3import { useState } from "react"
4import { debounce } from "lodash"
5import { AnimationOptions, motion, useAnimate } from "motion/react"
6 
7interface TextProps {
8  label: string
9  reverse?: boolean
10  transition?: AnimationOptions
11  staggerDuration?: number
12  className?: string
13  onClick?: () => void
14}
15 
16const RandomLetterSwapForward = ({
17  label,
18  reverse = true,
19  transition = {
20    type: "spring",
21    duration: 0.8,
22  },
23  staggerDuration = 0.02,
24  className,
25  onClick,
26  ...props
27}: TextProps) => {
28  const [scope, animate] = useAnimate()
29  const [blocked, setBlocked] = useState(false)
30 
31  const mergeTransition = (transition: AnimationOptions, i: number) => ({
32    ...transition,
33    delay: i * staggerDuration,
34  })
35 
36  const shuffledIndices = Array.from(
37    { length: label.length },
38    (_, i) => i
39  ).sort(() => Math.random() - 0.5)
40 
41  const hoverStart = debounce(
42    () => {
43      if (blocked) return
44      setBlocked(true)
45 
46      for (let i = 0; i < label.length; i++) {
47        const randomIndex = shuffledIndices[i]
48        animate(
49          ".letter-" + randomIndex,
50          {
51            y: reverse ? "100%" : "-100%",
52          },
53          mergeTransition(transition, i)
54        ).then(() => {
55          animate(
56            ".letter-" + randomIndex,
57            {
58              y: 0,
59            },
60            {
61              duration: 0,
62            }
63          )
64        })
65 
66        animate(
67          ".letter-secondary-" + randomIndex,
68          {
69            top: "0%",
70          },
71          mergeTransition(transition, i)
72        )
73          .then(() => {
74            animate(
75              ".letter-secondary-" + randomIndex,
76              {
77                top: reverse ? "-100%" : "100%",
78              },
79              {
80                duration: 0,
81              }
82            )
83          })
84          .then(() => {
85            if (i === label.length - 1) {
86              setBlocked(false)
87            }
88          })
89      }
90    },
91    100,
92    { leading: true, trailing: true }
93  )
94 
95  return (
96    <motion.span
97      className={`flex justify-center items-center relative overflow-hidden ${className}`}
98      onHoverStart={hoverStart}
99      onClick={onClick}
100      ref={scope}
101      {...props}
102    >
103      <span className="sr-only">{label}</span>
104 
105      {label.split("").map((letter: string, i: number) => {
106        return (
107          <span
108            className="whitespace-pre relative flex"
109            key={i}
110            aria-hidden={true}
111// … truncated