Number Animation Animated Number

1"use client";
2// beui.dev/components/motion/number
3 
4import { animate, useInView, useReducedMotion } from "motion/react";
5import { useEffect, useRef, useState } from "react";
6import { EASE_OUT } from "@/lib/ease";
7import { cn } from "@/lib/utils";
8 
9export interface AnimatedNumberProps {
10  value: number;
11  duration?: number;
12  format?: (n: number) => string;
13  className?: string;
14  startOnView?: boolean;
15}
16 
17export function AnimatedNumber({
18  value,
19  duration = 1.2,
20  format = (n) => Math.round(n).toLocaleString(),
21  className,
22  startOnView = true,
23}: AnimatedNumberProps) {
24  const ref = useRef<HTMLSpanElement>(null);
25  const inView = useInView(ref, { once: true, amount: 0.6 });
26  const reduce = useReducedMotion();
27  const [display, setDisplay] = useState(0);
28  const fromRef = useRef(0);
29 
30  useEffect(() => {
31    if (startOnView && !inView) return;
32    if (reduce) {
33      fromRef.current = value;
34      setDisplay(value);
35      return;
36    }
37    const controls = animate(fromRef.current, value, {
38      duration,
39      ease: EASE_OUT,
40      onUpdate: (v) => setDisplay(v),
41    });
42    fromRef.current = value;
43    return () => controls.stop();
44  }, [value, duration, inView, startOnView, reduce]);
45 
46  return (
47    <span ref={ref} className={cn("tabular-nums", className)}>
48      {format(display)}
49    </span>
50  );
51}