"use client";

import * as React from "react";
import { AnimatePresence, motion } from "framer-motion";

import { cn } from "@/lib/utils";

interface WordRotateTextProps {
  words: string[];
  className?: string;
  /**
   * Interval between word changes in milliseconds
   * @default 2200
   */
  interval?: number;
}

function WordRotateText({
  words,
  className,
  interval = 2200,
}: WordRotateTextProps) {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    if (words.length <= 1) return;
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % words.length);
    }, interval);

    return () => clearInterval(timer);
  }, [words, interval]);

  return (
    <span
      className={cn("relative inline-flex", className)}
      style={{ perspective: 500 }}
    >
      <AnimatePresence mode="wait">
        <motion.span
          key={words[index]}
          className="inline-block text-primary"
          initial={{ opacity: 0, rotateX: 90, y: 10 }}
          animate={{ opacity: 1, rotateX: 0, y: 0 }}
          exit={{ opacity: 0, rotateX: -90, y: -10 }}
          transition={{ duration: 0.45, ease: "easeOut" }}
          style={{ transformOrigin: "center" }}
        >
          {words[index]}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}

export { WordRotateText };
Word Rotate Text

Dependencies

Files

Installation
