Function useCountUp

packages/shared/src/features/giveback/useGivebackMotion.ts:119–170

(
  target: number,
  active: boolean,
  durationMs = 1100,
)

// fresh data lands). Reduced motion or no rAF resolves immediately to the
// target.
export const useCountUp = (
  target: number,
  active: boolean,
  durationMs = 1100,
): number => {
  const reducedMotion = usePrefersReducedMotion();
  const [value, setValue] = useState(0);
  const valueRef = useRef(0);
  const frameRef = useRef<number | null>(null);

  useEffect(() => {
    if (!active) {
      return undefined;
    }
    if (
      reducedMotion ||
      typeof window === 'undefined' ||
      typeof window.requestAnimationFrame !== 'function'
    ) {
      valueRef.current = target;
      setValue(target);
      return undefined;
    }

    const from = valueRef.current;
    const delta = target - from;
    if (delta === 0) {
      return undefined;
    }

    const start = performance.now();
    const step = (now: number) => {
      const progress = Math.min(1, (now - start) / durationMs);
      const eased = 1 - (1 - progress) ** 3;
      const next = Math.round(from + delta * eased);
      valueRef.current = next;
      setValue(next);
      if (progress < 1) {
        frameRef.current = window.requestAnimationFrame(step);
      }
    };
    frameRef.current = window.requestAnimationFrame(step);

    return () => {
      if (frameRef.current) {
        window.cancelAnimationFrame(frameRef.current);
      }
    };
  }, [active, target, durationMs, reducedMotion]);

  return value;
};