import { useEffect, useRef } from "react"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import { cn } from "@/lib/utils"; type RollingDigitProps = { digit: string; duration?: number; height?: number; }; const RollingDigit = ({ digit, duration = 1, height = 32 }: RollingDigitProps) => { const containerRef = useRef(null); const num = parseInt(digit, 10); const isNumber = !isNaN(num); useGSAP( () => { if (!isNumber || !containerRef.current) return; gsap.to(containerRef.current, { y: -height * (num + 1), duration: duration, ease: "power4.out", }); }, { dependencies: [num, height, duration, isNumber] }, ); if (!isNumber) { return (

{digit}

); } return (

9 {[...Array(10).keys()].map((n) => ( {n} ))} 0

); }; type RollingNumberProps = { targetNumber: number | string; duration?: number; height?: number; onComplete?: () => void; className?: string; }; export const RollingNumber = ({ targetNumber, duration = 1, height = 32, onComplete, className, }: RollingNumberProps) => { const digits = String(targetNumber).split(""); useEffect(() => { const timer = setTimeout(() => { onComplete?.(); }, duration * 1000); return () => clearTimeout(timer); }, [duration, onComplete, targetNumber]); return (

{digits.map((digit, i) => ( ))}

); };