Count Up

1"use client"
2 
3import * as React from "react"
4 
5/**
6 * Counts up from 0 to `value` over `duration` ms with out-quart easing.
7 * Runs once on first in-view and respects prefers-reduced-motion.
8 */
9export function CountUp({
10  value,
11  duration = 1200,
12  className,
13  ariaLabel,
14}: {
15  value: number
16  duration?: number
17  className?: string
18  ariaLabel?: string
19}) {
20  const ref = React.useRef<HTMLSpanElement | null>(null)
21  const [display, setDisplay] = React.useState(0)
22  const startedRef = React.useRef(false)
23 
24  React.useEffect(() => {
25    const node = ref.current
26    if (!node) return
27 
28    const reduced =
29      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
30    if (reduced) {
31      setDisplay(value)
32      return
33    }
34 
35    let raf = 0
36    const start = () => {
37      if (startedRef.current) return
38      startedRef.current = true
39      const t0 = performance.now()
40      const from = 0
41      const to = value
42      const ease = (t: number) => 1 - Math.pow(1 - t, 4)
43 
44      const step = (now: number) => {
45        const t = Math.min(1, (now - t0) / duration)
46        setDisplay(Math.round(from + (to - from) * ease(t)))
47        if (t < 1) raf = requestAnimationFrame(step)
48      }
49      raf = requestAnimationFrame(step)
50    }
51 
52    if (typeof IntersectionObserver === "undefined") {
53      start()
54      return () => cancelAnimationFrame(raf)
55    }
56 
57    const io = new IntersectionObserver(
58      (entries) => {
59        if (entries[0]?.isIntersecting) {
60          start()
61          io.disconnect()
62        }
63      },
64      { threshold: 0.3 }
65    )
66    io.observe(node)
67    return () => {
68      io.disconnect()
69      cancelAnimationFrame(raf)
70    }
71  }, [value, duration])
72 
73  return (
74    <span
75      ref={ref}
76      className={className}
77      aria-label={ariaLabel ?? String(value)}
78    >
79      {display}
80    </span>
81  )
82}