"use client"; import React, { useCallback, useEffect, useRef, useState } from "react"; import { AnimatePresence, motion, LayoutGroup } from "framer-motion"; import { cn } from "@/lib/utils"; export const FlipWords = ({ words, duration = 3000, className, }: { words: string[]; duration?: number; className?: string; }) => { const [currentWord, setCurrentWord] = useState(words[0]); const [isAnimating, setIsAnimating] = useState(false); // thanks for the fix Julian - https://github.com/Julian-AT const startAnimation = useCallback(() => { const word = words[words.indexOf(currentWord) + 1] || words[0]; setCurrentWord(word); setIsAnimating(true); }, [currentWord, words]); useEffect(() => { if (!isAnimating) setTimeout(() => { startAnimation(); }, duration); }, [isAnimating, duration, startAnimation]); return ( { setIsAnimating(false); }} > {/* edit suggested by Sajal: https://x.com/DewanganSajal */} {currentWord.split(" ").map((word, wordIndex) => ( {word.split("").map((letter, letterIndex) => ( {letter} ))} ))} ); };