Morphing Text

"use client";
import { useState, useEffect } from "react";

const words = ["Innovation", "Creativity", "Excellence", "Design"];

export default function MorphingText() {
  const [index, setIndex] = useState(0);
  const [phase, setPhase] = useState<"visible" | "morphing">("visible");

  useEffect(() => {
    const timer = setInterval(() => {
      setPhase("morphing");
      setTimeout(() => {
        setIndex((i) => (i + 1) % words.length);
        setPhase("visible");
      }, 500);
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <span style={{
      filter: phase === "morphing" ? "blur(8px)" : "blur(0px)",
      opacity: phase === "morphing" ? 0 : 1,
      transition: "filter 0.5s, opacity 0.5s",
    }}>
      {words[index]}
    </span>
  );
}