"use client"; import React, { useState, useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; interface TextMorphAnimationProps { texts: string[]; morphTime?: number; cooldownTime?: number; className?: string; } const TextMorphAnimation: React.FC = ({ texts, morphTime = 2.5, cooldownTime = 0.25, className }) => { const [textIndex, setTextIndex] = useState(0); const [morph, setMorph] = useState(0); const [cooldown, setCooldown] = useState(cooldownTime); const animationRef = useRef(undefined); const lastTimeRef = useRef(performance.now()); useEffect(() => { const animate = (currentTime: number) => { const dt = (currentTime - lastTimeRef.current) / 1000; lastTimeRef.current = currentTime; setCooldown((prevCooldown) => { const newCooldown = prevCooldown - dt; if (newCooldown <= 0) { setMorph((prevMorph) => { const newMorph = prevMorph + dt; if (newMorph >= morphTime) { setTextIndex((prev) => (prev + 1) % texts.length); return 0; } return newMorph; }); return newCooldown; } else { setMorph(0); return newCooldown; } }); if (morph >= morphTime) { setCooldown(cooldownTime); } animationRef.current = requestAnimationFrame(animate); }; animationRef.current = requestAnimationFrame(animate); return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current); } }; }, [texts.length, morphTime, cooldownTime, morph]); const getMorphStyles = (isSecondText: boolean) => { if (cooldown > 0) { return { filter: "", opacity: isSecondText ? 0 : 1 }; } let fraction = Math.min(morph / morphTime, 1); if (!isSecondText) { fraction = 1 - fraction; } const blur = Math.max(0, Math.min(6 / fraction - 6, 100)); const opacity = Math.pow(fraction, 0.4); return { filter: `blur(${blur}px)`, opacity: opacity }; }; return (

{texts[textIndex]} {texts[(textIndex + 1) % texts.length]}

); }; export default TextMorphAnimation;