Number Counter Animation for React

"use client";

import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

function easeOutExpo(t: number): number {
  return t === 1 ? 1 : 1 - 2 ** (-10 * t);
}

function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    );
    setReduced(mq.matches);
    const handler = () => setReduced(mq.matches);
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, []);
  return reduced;
}

interface NumberCounterProps {
  value: number;
  className?: string;
  duration?: number;
  trigger?: "mount" | "inView";
  inViewThreshold?: number;
  suffix?: string;
  prefix?: string;
}

export function NumberCounter({
  value,
  className,
  duration = 1500,
  trigger = "inView",
  inViewThreshold = 0.3,
  suffix = "",
  prefix = "",
}: NumberCounterProps) {
  const [display, setDisplay] = useState(0);
  const [inView, setInView] = useState(trigger === "mount");
  const ref = useRef<HTMLSpanElement>(null);
  const hasAnimatedRef = useRef(false);
  const shouldReduceMotion = useReducedMotion();

  useEffect(() => {
    if (trigger !== "inView") {
      return;
    }
    const el = ref.current;
    if (!el) {
      return;
    }
    const obs = new IntersectionObserver(
      ([e]) => {
        if (e?.isIntersecting && !hasAnimatedRef.current) {
          setInView(true);
        }
      },
      { threshold: inViewThreshold },
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [trigger, inViewThreshold]);

  useEffect(() => {
    if (trigger === "mount" ? false : !inView) {
      return;
    }
    if (hasAnimatedRef.current) {
      return;
    }
    hasAnimatedRef.current = true;

    if (shouldReduceMotion) {
      setDisplay(value);
      return;
    }

    const start = performance.now();
    const startVal = 0;

    const tick = (now: number) => {
      const elapsed = now - start;
      const progress = Math.min(elapsed / duration, 1);
      const eased = easeOutExpo(progress);
      const current = Math.round(
        startVal + (value - startVal) * eased,
      );
      setDisplay(current);
      if (progress < 1) {
        requestAnimationFrame(tick);
      }
    };

    requestAnimationFrame(tick);
  }, [
    value,
    duration,
    trigger,
    inView,
    shouldReduceMotion,
  ]);

  const digitCount = String(value).length;

  return (
    <span
      ref={ref}
      className={cn("inline-block tabular-nums", className)}
      style={{ minWidth: `${digitCount}ch` }}
    >
      {prefix}
      {display}
      {suffix}
    </span>
  );
}