Text Morph

1"use client";
2 
3import { useEffect, useMemo, useState } from "react";
4import { AnimatePresence, motion } from "motion/react";
5 
6type TextMorphProps = {
7  words?: string[];
8  interval?: number;
9  className?: string;
10  charClassName?: string;
11};
12 
13const defaultWords = ["engineer", "developer", "designer"];
14 
15export function TextMorph({
16  words = defaultWords,
17  interval = 2500,
18  className,
19  charClassName,
20}: TextMorphProps) {
21  const [index, setIndex] = useState(0);
22 
23  useEffect(() => {
24    if (!words.length) return;
25 
26    const timer = setInterval(() => {
27      setIndex((prev) => (prev + 1) % words.length);
28    }, interval);
29 
30    return () => clearInterval(timer);
31  }, [words, interval]);
32 
33  const chars = useMemo(() => {
34    return Array.from(words[index] ?? "");
35  }, [index, words]);
36 
37  if (!words.length) return null;
38 
39  return (
40    <AnimatePresence mode="popLayout">
41      <motion.span
42        key={index}
43        className={`flex gap-[0.5px] overflow-hidden ${className ?? ""}`}
44        initial={{ opacity: 0, y: 5 }}
45        animate={{ opacity: 1, y: 0 }}
46        exit={{ opacity: 0, y: -5 }}
47        transition={{ duration: 0.4 }}
48      >
49        {chars.map((char, i) => (
50          <motion.span
51            key={i}
52            className={charClassName}
53            initial={{ opacity: 0, y: 5, filter: "blur(5px)" }}
54            animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
55            exit={{ opacity: 0, y: -5, filter: "blur(5px)" }}
56            transition={{
57              delay: i * 0.03,
58              duration: 0.3,
59            }}
60          >
61            {char}
62          </motion.span>
63        ))}
64      </motion.span>
65    </AnimatePresence>
66  );
67}