Letter Swap

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