velocity-morph

1import { AnimatePresence, motion } from "motion/react";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5interface VelocityMorphProps {
6  texts: string[];
7  className?: string;
8  interval?: number;
9}
10 
11const VelocityMorph = React.forwardRef<HTMLDivElement, VelocityMorphProps>(
12  ({ texts, className, interval = 3000 }, ref) => {
13    const [currentIndex, setCurrentIndex] = React.useState(0);
14 
15    React.useEffect(() => {
16      const timer = setInterval(() => {
17        setCurrentIndex((prev) => (prev + 1) % texts.length);
18      }, interval);
19 
20      return () => clearInterval(timer);
21    }, [interval, texts.length]);
22 
23    return (
24      <div
25        ref={ref}
26        className={cn(
27          "relative overflow-hidden whitespace-nowrap p-2",
28          className,
29        )}
30      >
31        <AnimatePresence mode="popLayout">
32          <motion.div
33            key={currentIndex}
34            initial={{
35              y: 40,
36              opacity: 0,
37              filter: "blur(10px)",
38              scale: 0.8,
39            }}
40            animate={{
41              y: 0,
42              opacity: 1,
43              filter: "blur(0px)",
44              scale: 1,
45            }}
46            exit={{
47              y: -40,
48              opacity: 0,
49              filter: "blur(10px)",
50              scale: 0.8,
51            }}
52            transition={{
53              duration: 0.4,
54              ease: [0.16, 1, 0.3, 1],
55            }}
56          >
57            {texts[currentIndex]}
58          </motion.div>
59        </AnimatePresence>
60      </div>
61    );
62  },
63);
64 
65VelocityMorph.displayName = "VelocityMorph";
66 
67export { VelocityMorph };