Count-up Stat

"use client";
import { useEffect, useRef, useState } from "react";

export function CountUp({ to = 47.2, suffix = "%" }: { to?: number; suffix?: string }) {
  const ref = useRef<HTMLDivElement>(null);
  const [v, setV] = useState(0);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return;
      const start = performance.now();
      const tick = (t: number) => {
        const p = Math.min(1, (t - start) / 1200);
        setV(to * (1 - Math.pow(1 - p, 3)));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
      io.disconnect();
    }, { threshold: 0.5 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [to]);
  return <div ref={ref} className="font-mono text-5xl tabular-nums">{v.toFixed(1)}{suffix}</div>;
}