text-morphing

1import { AnimatePresence, motion } from "motion/react";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5interface MorphingTextProps {
6  words: string[];
7  className?: string;
8  interval?: number;
9  animationDuration?: number;
10}
11 
12const MorphingText = React.forwardRef<HTMLSpanElement, MorphingTextProps>(
13  ({ words, className, interval = 3000, animationDuration = 0.5 }, ref) => {
14    const [currentIndex, setCurrentIndex] = React.useState(0);
15 
16    React.useEffect(() => {
17      const timer = setInterval(() => {
18        setCurrentIndex((prev) => (prev + 1) % words.length);
19      }, interval);
20      return () => clearInterval(timer);
21    }, [words.length, interval]);
22 
23    return (
24      <span ref={ref} className={cn("relative inline-block", className)}>
25        <AnimatePresence mode="wait">
26          <motion.span
27            key={currentIndex}
28            initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
29            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
30            exit={{ opacity: 0, y: -20, filter: "blur(8px)" }}
31            transition={{ duration: animationDuration, ease: "easeInOut" }}
32            className="inline-block"
33          >
34            {words[currentIndex]}
35          </motion.span>
36        </AnimatePresence>
37      </span>
38    );
39  },
40);
41MorphingText.displayName = "MorphingText";
42export { MorphingText };