animated-number

1"use client"
2 
3import React, { useEffect, useRef, useState } from 'react'
4import { motion, AnimatePresence } from "framer-motion"
5import { cn } from "@/lib/utils"
6 
7function AnimatedNumber({ value, className }: { value: number, className?: string }) {
8    return (
9        <div className={cn("flex items-center", className)}>
10            <div className="flex relative items-center">
11                {value.toString().split("").map((digit, index) => (
12                    <SingleNumberHolder key={index} value={digit} index={index} />
13                ))}
14            </div>
15        </div>
16    )
17}
18 
19function SingleNumberHolder({ value, index }: { value: string, index: number }) {
20    const [height, setHeight] = useState<string | null>(null)
21    const containerRef = useRef<HTMLDivElement>(null)
22    let notANumber = false
23 
24    useEffect(() => {
25        if (containerRef.current) {
26            setHeight(getComputedStyle(containerRef.current).height)
27        }
28    }, [])
29 
30    if (index === 0) {
31        notANumber = isNaN(Number.parseInt(value))
32    }
33 
34    const vars = {
35        init: { opacity: 0 },
36        animate: { opacity: 1 },
37        exit: { opacity: 0 },
38    }
39 
40    return (
41        <div
42            className="relative"
43            style={{ height: height || "auto", overflowY: "hidden", overflowX: "clip" }}
44            ref={containerRef}
45        >
46            {notANumber && (
47                <motion.span
48                    initial="init"
49                    animate="animate"
50                    exit="exit"
51                    variants={vars}
52                    key={value}
53                    layout="size"
54                >
55                    {value}
56                </motion.span>
57            )}
58            {!notANumber && <RenderStrip value={value} eleHeight={height} />}
59        </div>
60    )
61}
62 
63const zeroToNine = Array.from({ length: 10 }, (_, k) => k)
64 
65function RenderStrip({ eleHeight, value }: { eleHeight: string | null, value: string }) {
66    const heightInNumber = Number.parseInt(eleHeight?.replace("px", "") || "48")
67    const negative = heightInNumber * -1
68    const pos = heightInNumber
69    const prev = useRef(value)
70 
71    // Convert string values to numbers for comparison
72    const currentVal = parseInt(value)
73    const prevVal = parseInt(prev.current)
74 
75    // Calculate direction based on value change
76    const diff = prevVal - currentVal
77    const dir = currentVal > prevVal ? pos * diff * -1 : negative * diff
78 
79    // Update ref after calculation
80// … truncated