Word Rotate

"use client";

import React, { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

interface WordRotateProps {
  words: string[];
  className?: string;
  interval?: number;
}

export const WordRotate: React.FC<WordRotateProps> = ({
  words, className = "", interval = 2500,
}) => {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % words.length);
    }, interval);
    return () => clearInterval(timer);
  }, [words.length, interval]);

  return (
    <span className={`inline-flex overflow-hidden ${className}`}>
      <AnimatePresence mode="wait">
        <motion.span key={words[index]}
          initial={{ rotateX: 90, opacity: 0 }}
          animate={{ rotateX: 0, opacity: 1 }}
          exit={{ rotateX: -90, opacity: 0 }}
          transition={{ duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
          className="inline-block"
          style={{ perspective: "500px" }}>
          {words[index]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
};

<p>We make it <WordRotate words={["simple", "fast", "elegant"]} /></p>

<p className="uppercase text-sm">Currently</p>
<WordRotate
  words={["Designing systems", "Writing code", "Shipping features"]}
  interval={2000}
/>