"use client"; import * as React from "react"; import { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import AnimatedTextCycle from "@/components/ui/animated-text-cycle" interface AnimatedTextCycleProps { words: string[]; interval?: number; className?: string; } export function AnimatedTextCycle({ words, interval = 5000, className = "", }: AnimatedTextCycleProps) { const [currentIndex, setCurrentIndex] = useState(0); const [width, setWidth] = useState("auto"); const measureRef = useRef(null); // Get the width of the current word useEffect(() => { if (measureRef.current) { const elements = measureRef.current.children; if (elements.length > currentIndex) { // Add a small buffer (10px) to prevent text wrapping const newWidth = elements[currentIndex].getBoundingClientRect().width; setWidth(`${newWidth}px`); } } }, [currentIndex]); useEffect(() => { const timer = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length); }, interval); return () => clearInterval(timer); }, [interval, words.length]); // Container animation for the whole word const containerVariants = { hidden: { y: -20, opacity: 0, filter: "blur(8px)" }, visible: { y: 0, opacity: 1, filter: "blur(0px)", transition: { duration: 0.4, ease: "easeOut" } }, exit: { y: 20, opacity: 0, filter: "blur(8px)", transition: { duration: 0.3, ease: "easeIn" } }, }; return ( <> {/* Hidden measurement div with all words rendered */} {/* Visible animated word */} {words[currentIndex]} ); } export default function AnimatedTextCycleDemo() { return (

Your deserves better tools

); }

Animated Text Cycle