"use client"; import React, { useEffect, useState } from "react"; import { motion, useInView } from "framer-motion"; export function AnimatedStats() { return (

Trusted by developers worldwide

Our components are powering thousands of production applications.

); } function StatCard({ value, suffix, label }: { value: number, suffix: string, label: string }) { const ref = React.useRef(null); const isInView = useInView(ref, { once: true, margin: "-100px" }); const [count, setCount] = useState(0); useEffect(() => { if (isInView) { let start = 0; const end = value; const duration = 2000; // 2 seconds const increment = end / (duration / 16); // 60fps const timer = setInterval(() => { start += increment; if (start >= end) { clearInterval(timer); setCount(end); } else { setCount(start); } }, 16); return () => clearInterval(timer); } }, [isInView, value]); // Format to 1 decimal if needed const displayValue = count % 1 !== 0 && count !== 0 ? count.toFixed(1) : Math.floor(count); return (

{displayValue} {suffix}

{label}

); }