Use Animated Number

1'use client'
2 
3import { useInView } from '@/registry/hooks/use-in-view'
4import { useCallback, useEffect, useRef, useState } from 'react'
5 
6type EasingFunction = (t: number) => number
7 
8const easings: Record<string, EasingFunction> = {
9  linear: (t) => t,
10  easeOut: (t) => 1 - Math.pow(1 - t, 3),
11  easeIn: (t) => t * t * t,
12  easeInOut: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
13  spring: (t) => 1 - Math.pow(Math.cos(t * Math.PI * 0.5), 3),
14}
15 
16interface UseAnimatedNumberOptions {
17  /**
18   * Duration of the animation in milliseconds
19   * @default 1000
20   */
21  duration?: number
22  /**
23   * Easing function for the animation
24   * @default 'easeOut'
25   */
26  easing?: keyof typeof easings | EasingFunction
27  /**
28   * Starting value for the animation
29   * @default 0
30   */
31  from?: number
32  /**
33   * Intersection Observer threshold (0-1)
34   * @default 0.1
35   */
36  threshold?: number
37  /**
38   * Intersection Observer root margin
39   * @default '0px'
40   */
41  rootMargin?: string
42  /**
43   * Delay before starting animation in milliseconds
44   * @default 0
45   */
46  delay?: number
47  /**
48   * Whether to re-animate when element comes back into view
49   * @default false
50   */
51  reanimateOnView?: boolean
52}
53 
54export function useAnimatedNumber(to: number, options: UseAnimatedNumberOptions = {}) {
55  const {
56    delay = 0,
57    duration = 1000,
58    easing = 'easeOut',
59    from = 0,
60    reanimateOnView = false,
61    rootMargin = '0px',
62    threshold = 1.0,
63  } = options
64 
65  const [value, setValue] = useState(from)
66  const [isAnimating, setIsAnimating] = useState(false)
67  const hasAnimated = useRef(false)
68  const animationRef = useRef<number | null>(null)
69  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
70 
71  const { isInView, ref } = useInView({ rootMargin, threshold })
72 
73  const decimals = to.toString().split('.')[1]?.length || 0
74 
75  const easingFn =
76    typeof easing === 'function' ? easing : easings[easing] || easings.easeOut
77 
78  const animate = useCallback(() => {
79    if (animationRef.current) {
80      cancelAnimationFrame(animationRef.current)
81    }
82 
83    const startTime = performance.now()
84    const startValue = from
85 
86    setIsAnimating(true)
87 
88    const tick = (currentTime: number) => {
89      const elapsed = currentTime - startTime
90      const progress = Math.min(elapsed / duration, 1)
91      const easedProgress = easingFn(progress)
92      const currentValue = startValue + (to - startValue) * easedProgress
93 
94      setValue(
95// … truncated