"use client"; import { useEffect, useRef } from "react"; import { motion, useInView, useMotionValue, useSpring } from "framer-motion"; import { cn } from "@/lib/utils"; export function NumberTicker({ value, className, prefix = "", suffix = "", decimals = 0, }: { value: number; className?: string; prefix?: string; suffix?: string; decimals?: number; }) { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-50px" }); const motionValue = useMotionValue(0); const springValue = useSpring(motionValue, { damping: 30, stiffness: 90 }); useEffect(() => { if (isInView) { motionValue.set(value); } }, [isInView, motionValue, value]); useEffect(() => { const unsubscribe = springValue.on("change", (latest) => { if (ref.current) { ref.current.textContent = prefix + latest.toLocaleString("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }) + suffix; } }); return unsubscribe; }, [springValue, prefix, suffix, decimals]); return ( {prefix}0{suffix} ); } export default function Demo() { return (

Revenue

Users

); }

Number Ticker