Gravity Text Swap

1"use client";
2import React, { useState, useEffect } from "react";
3import { motion, AnimatePresence } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6interface GravityTextSwapProps {
7  textArray: string[];
8  duration?: number;
9  pauseDuration?: number;
10  className?: string;
11}
12 
13const GravityTextSwap: React.FC<GravityTextSwapProps> = ({
14  textArray,
15  duration = 0.5,
16  pauseDuration = 2,
17  className = "",
18}) => {
19  const [, setCurrentIndex] = useState(0);
20  const [currentText, setCurrentText] = useState(textArray[0]);
21 
22  useEffect(() => {
23    if (textArray.length <= 1) return;
24 
25    const intervalId = setInterval(
26      () => {
27        setCurrentIndex((prevIndex) => {
28          const nextIndex = (prevIndex + 1) % textArray.length;
29          setCurrentText(textArray[nextIndex] ?? "");
30          return nextIndex;
31        });
32      },
33      (duration + pauseDuration) * 1000,
34    );
35 
36    return () => clearInterval(intervalId);
37  }, [textArray, duration, pauseDuration]);
38 
39  return (
40    <div className={cn("inline-block overflow-hidden", className)}>
41      <AnimatePresence mode="wait">
42        <motion.span
43          key={currentText}
44          className="inline-block"
45          initial={{ opacity: 0 }}
46          animate={{ opacity: 1 }}
47          exit={{ opacity: 0 }}
48          transition={{ duration: duration / 2 }}
49        >
50          {(currentText ?? "").split("").map((char, index) => (
51            <motion.span
52              key={index}
53              className="inline-block"
54              initial={{ y: -20, opacity: 0 }}
55              animate={{
56                y: 0,
57                opacity: 1,
58                transition: {
59                  type: "spring",
60                  damping: 12,
61                  stiffness: 200,
62                  delay: index * 0.03,
63                },
64              }}
65              exit={{
66                y: 20,
67                opacity: 0,
68                transition: {
69                  duration: duration / 2,
70                  delay: index * 0.02,
71                },
72              }}
73            >
74              {char}
75            </motion.span>
76          ))}
77        </motion.span>
78      </AnimatePresence>
79    </div>
80  );
81};
82 
83export default GravityTextSwap;