"use client"; import { useEffect, useRef, useState } from "react"; import { motion, useInView, animate } from "framer-motion"; import { cn } from "@/lib/utils"; export interface StatItem { label: string; value: number; suffix?: string; prefix?: string; } function CountUp({ value, prefix, suffix, }: { value: number; prefix?: string; suffix?: string; }) { const ref = useRef(null); const isInView = useInView(ref, { once: true, margin: "-40px" }); const [display, setDisplay] = useState(0); useEffect(() => { if (!isInView) return; const controls = animate(0, value, { duration: 1.4, ease: "easeOut", onUpdate: (v) => setDisplay(Math.round(v)), }); return () => controls.stop(); }, [isInView, value]); return ( {prefix} {display.toLocaleString()} {suffix} ); } export function StatsGrid({ stats, className, }: { stats: StatItem[]; className?: string; }) { return (

{stats.map((stat, i) => (

{stat.label}

))}

); } const demoStats: StatItem[] = [ { label: "Components", value: 128, suffix: "+" }, { label: "Teams shipping", value: 2400, suffix: "+" }, { label: "Avg. build time saved", value: 46, suffix: "%" }, { label: "GitHub stars", value: 9800, suffix: "+" }, ]; export default function Demo() { return (

); }

Stats Grid