animated-number

1"use client"
2 
3import { useEffect } from "react"
4import { motion, MotionValue, useSpring, useTransform } from "motion/react"
5 
6interface AnimatedNumberProps {
7  value: number
8  mass?: number
9  stiffness?: number
10  damping?: number
11  precision?: number
12  format?: (value: number) => string
13  onAnimationStart?: () => void
14  onAnimationComplete?: () => void
15}
16 
17export function AnimatedNumber({
18  value,
19  mass = 0.8,
20  stiffness = 75,
21  damping = 15,
22  precision = 0,
23  format = (num) => num.toLocaleString(),
24  onAnimationStart,
25  onAnimationComplete,
26}: AnimatedNumberProps) {
27  const spring = useSpring(value, { mass, stiffness, damping })
28  const display: MotionValue<string> = useTransform(spring, (current) =>
29    format(parseFloat(current.toFixed(precision)))
30  )
31 
32  useEffect(() => {
33    spring.set(value)
34    if (onAnimationStart) onAnimationStart()
35    const unsubscribe = spring.on("change", () => {
36      if (spring.get() === value && onAnimationComplete) onAnimationComplete()
37    })
38    return () => unsubscribe()
39  }, [spring, value, onAnimationStart, onAnimationComplete])
40 
41  return <motion.span>{display}</motion.span>
42}