"use client"; import React from "react"; import { cn } from "@/lib/utils"; interface FlipWordsProps { words: string[]; duration?: number; className?: string; } export const FlipWords: React.FC = ({ words, duration = 3000, className, }) => { const [currentIndex, setCurrentIndex] = React.useState(0); const [isAnimating, setIsAnimating] = React.useState(false); React.useEffect(() => { const interval = setInterval(() => { setIsAnimating(true); setTimeout(() => { setCurrentIndex((prev) => (prev + 1) % words.length); setIsAnimating(false); }, 300); }, duration); return () => clearInterval(interval); }, [words.length, duration]); return ( {words[currentIndex]} ); }; // Alternative: Flip with 3D rotation interface FlipWords3DProps { words: string[]; duration?: number; className?: string; } export const FlipWords3D: React.FC = ({ words, duration = 3000, className, }) => { const [currentIndex, setCurrentIndex] = React.useState(0); const [isFlipping, setIsFlipping] = React.useState(false); React.useEffect(() => { const interval = setInterval(() => { setIsFlipping(true); setTimeout(() => { setCurrentIndex((prev) => (prev + 1) % words.length); setTimeout(() => setIsFlipping(false), 300); }, 300); }, duration); return () => clearInterval(interval); }, [words.length, duration]); return ( {words[currentIndex]} ); };

Name	Type	Default	Description
`words`	`string[]`	`-`	Array of words to cycle through.
`duration`	`number`	`3000`	Duration per word (ms).

FlipWords

Preview

Installation

Usage

Flip Words

Props