Letter Swap Pingpong Anim

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