Random Letter Swap Pingpong 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 RandomLetterSwapPingPong = ({
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        )
55 
56        animate(
57          ".letter-secondary-" + randomIndex,
58          {
59            top: "0%",
60          },
61          mergeTransition(transition, i)
62        )
63      }
64    },
65    100,
66    { leading: true, trailing: true }
67  )
68 
69  const hoverEnd = debounce(
70    () => {
71      setBlocked(false)
72 
73      for (let i = 0; i < label.length; i++) {
74        const randomIndex = shuffledIndices[i]
75        animate(
76          ".letter-" + randomIndex,
77          {
78            y: 0,
79          },
80          mergeTransition(transition, i)
81        )
82 
83        animate(
84          ".letter-secondary-" + randomIndex,
85          {
86            top: reverse ? "-100%" : "100%",
87          },
88          mergeTransition(transition, i)
89        )
90      }
91    },
92    100,
93    { leading: true, trailing: true }
94  )
95 
96  return (
97    <motion.span
98      className={`flex justify-center items-center relative overflow-hidden  ${className} `}
99      onHoverStart={hoverStart}
100      onHoverEnd={hoverEnd}
101      onClick={onClick}
102      ref={scope}
103      {...props}
104    >
105      <span className="sr-only">{label}</span>
106 
107      {label.split("").map((letter: string, i: number) => {
108        return (
109          <span
110            className="whitespace-pre relative flex"
111            key={i}
112            aria-hidden={true}
113// … truncated