character-morph

1import { AnimatePresence, motion } from "motion/react";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5interface CharacterMorphProps {
6  texts: string[];
7  className?: string;
8  interval?: number;
9  staggerDelay?: number;
10  charDuration?: number;
11}
12 
13const CharacterMorph = React.forwardRef<HTMLDivElement, CharacterMorphProps>(
14  (
15    {
16      texts,
17      className,
18      interval = 3000,
19      staggerDelay = 0.03,
20      charDuration = 0.5,
21    },
22    ref,
23  ) => {
24    const [currentIndex, setCurrentIndex] = React.useState(0);
25    const currentText = texts[currentIndex] || "";
26 
27    React.useEffect(() => {
28      const timer = setInterval(() => {
29        setCurrentIndex((prev) => (prev + 1) % texts.length);
30      }, interval);
31 
32      return () => clearInterval(timer);
33    }, [interval, texts.length]);
34 
35    const maxLength = Math.max(...texts.map((t) => t.length));
36 
37    return (
38      <div
39        ref={ref}
40        className={cn("relative inline-flex whitespace-nowrap", className)}
41      >
42        <AnimatePresence mode="popLayout">
43          {currentText.split("").map((char, i) => (
44            <motion.span
45              key={`${currentIndex}-${i}-${char}`}
46              initial={{ opacity: 0, y: 20, filter: "blur(8px)", rotateX: -90 }}
47              animate={{ opacity: 1, y: 0, filter: "blur(0px)", rotateX: 0 }}
48              exit={{ opacity: 0, y: -20, filter: "blur(8px)", rotateX: 90 }}
49              transition={{
50                duration: charDuration,
51                delay: i * staggerDelay,
52                ease: [0.215, 0.61, 0.355, 1],
53              }}
54              className="inline-block"
55              style={{ transformStyle: "preserve-3d" }}
56            >
57              {char === " " ? "\u00A0" : char}
58            </motion.span>
59          ))}
60        </AnimatePresence>
61        {/* Maintain minimum width */}
62        <span className="invisible absolute">{"M".repeat(maxLength)}</span>
63      </div>
64    );
65  },
66);
67 
68CharacterMorph.displayName = "CharacterMorph";
69export { CharacterMorph };