Count Up

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/*
 * Count Up — a number that counts up once its first pixel comes into view (from the Tustel "Number Counter", a Framer
 * code component). Framer adds 1 every 5 ms, so 0 → 80 takes 0.4 s and 40 → 120 the same; it pauses while the number
 * is off-screen and carries on from where it was, and it never starts over. `duration` gives a number a fixed time
 * instead, which is what a four-digit figure needs.
 *
 * It counts by time, one frame at a time, not by a timer per step: a 5 ms interval is clamped and throttled by the
 * browser, a clock is not. The digits are tabular, so the width does not jitter while they change.
 *
 * What a reader gets without the animation: the final number is always in the page, in a second element — it is what
 * screen readers read (the moving digits are aria-hidden, so they never announce 41, 42, 43…) and what shows with
 * reduced motion, in print and without JavaScript. Markup never depends on reduced motion (the server cannot know it);
 * CSS swaps the two elements, and the effect simply does not run.
 */

export type CountUpProps = {
  /** Where it ends. */
  value: number;
  /** Where it starts. */
  from?: number;
  /** Milliseconds per step, as in Framer: 1 → +1 every ms; 5 → +1 every 5 ms. */
  interval?: number;
  /** Total time in seconds, instead of a rate: a big number then takes as long as a small one. */
  duration?: number;
  /** Intl.NumberFormat options, e.g. { useGrouping: true } or { notation: "compact" }. Plain digits by default. */
  format?: Intl.NumberFormatOptions;
  /** Locale for `format`. Always explicit, so the server and the browser agree on the digits. */
  locale?: string;
  className?: string;
};

export function CountUp({ value, from = 0, interval = 5, duration, format, locale = "en-US", className }: CountUpProps) {
  const ref = React.useRef<HTMLSpanElement>(null);
  const [progress, setProgress] = React.useState(0);

  const options = format ? JSON.stringify(format) : "";
  const formatter = React.useMemo(() => (options ? new Intl.NumberFormat(locale, JSON.parse(options)) : null), [locale, options]);
  const text = (n: number) => (formatter ? formatter.format(n) : String(n));

  const total = duration !== undefined ? duration * 1000 : Math.abs(value - from) * interval;
  const current = progress >= 1 ? value : Math.round(from + (value - from) * progress);

  React.useEffect(() => {
    const element = ref.current;
    if (!element || total <= 0 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

    let elapsed = 0;
    let last = -1;
    let frame = 0;
    /* The first frame after (re)starting only sets the clock: a frame's timestamp can be earlier than the moment it was
       asked for, and counting from that would run backwards (it showed -2 first). */
    const tick = (now: number) => {
      elapsed = Math.min(total, elapsed + (last < 0 ? 0 : Math.max(0, now - last)));
      last = now;
      setProgress(elapsed / total);
      if (elapsed < total) frame = requestAnimationFrame(tick);
    };

    /* Counts while any part of it is on screen; off-screen it waits, and the clock is not running while it waits. */
    const observer = new IntersectionObserver(([entry]) => {
      cancelAnimationFrame(frame);
      last = -1;
      if (entry.isIntersecting && elapsed < total) frame = requestAnimationFrame(tick);
    });
    observer.observe(element);
    return () => {
      observer.disconnect();
      cancelAnimationFrame(frame);
    };
  }, [total]);

  return (
    <span ref={ref} className={cn("tabular-nums", className)}>
      <span aria-hidden data-count-up="" className="print:hidden motion-reduce:hidden">
        {text(current)}
      </span>
      <span data-count-up-final="" className="sr-only print:not-sr-only motion-reduce:not-sr-only">
        {text(value)}
      </span>
      {/* Without JavaScript the digits would stay at `from`: this swaps in the final number, and never applies when scripts run. */}
      <noscript>
        <style>{`[data-count-up]{display:none}[data-count-up-final]{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal}`}</style>
      </noscript>
    </span>
  );
}