rotate-text

1import { AnimatePresence, motion } from "motion/react";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5interface RotatingTextProps {
6  words: string[];
7  className?: string;
8  interval?: number;
9}
10 
11const RotatingText = React.forwardRef<HTMLSpanElement, RotatingTextProps>(
12  ({ words, className, interval = 2000 }, ref) => {
13    const [currentIndex, setCurrentIndex] = React.useState(0);
14 
15    React.useEffect(() => {
16      const timer = setInterval(() => {
17        setCurrentIndex((prev) => (prev + 1) % words.length);
18      }, interval);
19      return () => clearInterval(timer);
20    }, [words.length, interval]);
21 
22    return (
23      <span
24        ref={ref}
25        className={cn("relative inline-flex overflow-hidden", className)}
26      >
27        <AnimatePresence mode="popLayout">
28          <motion.span
29            key={currentIndex}
30            initial={{ y: "100%", opacity: 0 }}
31            animate={{ y: 0, opacity: 1 }}
32            exit={{ y: "-100%", opacity: 0 }}
33            transition={{
34              type: "spring",
35              stiffness: 300,
36              damping: 30,
37            }}
38            className="inline-block"
39          >
40            {words[currentIndex]}
41          </motion.span>
42        </AnimatePresence>
43      </span>
44    );
45  },
46);
47RotatingText.displayName = "RotatingText";
48 
49export { RotatingText };