Flip Words

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

const words = ["beautiful", "modern", "amazing", "creative"];

export default function FlipWords() {
  const [index, setIndex] = useState(0);
  const [animating, setAnimating] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => {
      setAnimating(true);
      setTimeout(() => {
        setIndex((i) => (i + 1) % words.length);
        setAnimating(false);
      }, 300);
    }, 3000);
    return () => clearInterval(timer);
  }, []);

  return (
    <span style={{
      display: "inline-block",
      transform: animating ? "translateY(-20px)" : "translateY(0)",
      opacity: animating ? 0 : 1,
      transition: "transform 0.3s, opacity 0.3s",
    }}>
      {words[index]}
    </span>
  );
}