number-counter

1import { motion, useInView, useSpring, useTransform } from "motion/react";
2import * as React from "react";
3import { cn } from "@/lib/utils";
4 
5type EasingType =
6  | "linear"
7  | "easeOut"
8  | "easeIn"
9  | "easeInOut"
10  | "spring"
11  | "bounce";
12 
13interface NumberCounterProps {
14  value: number;
15  from?: number;
16  duration?: number;
17  delay?: number;
18  decimals?: number;
19  separator?: string;
20  decimalSeparator?: string;
21  prefix?: string;
22  suffix?: string;
23  easing?: EasingType;
24  className?: string;
25  once?: boolean;
26  formatFn?: (value: number) => string;
27}
28 
29// Easing functions for CSS-based animation
30const easingFunctions: Record<EasingType, number[]> = {
31  linear: [0, 0, 1, 1],
32  easeOut: [0.16, 1, 0.3, 1],
33  easeIn: [0.7, 0, 0.84, 0],
34  easeInOut: [0.65, 0, 0.35, 1],
35  spring: [0.34, 1.56, 0.64, 1],
36  bounce: [0.68, -0.55, 0.27, 1.55],
37};
38 
39// Format number with separators
40const formatNumber = (
41  value: number,
42  decimals: number,
43  separator: string,
44  decimalSeparator: string,
45): string => {
46  const fixed = value.toFixed(decimals);
47  const [intPart, decPart] = fixed.split(".");
48 
49  const formattedInt = (intPart || "").replace(
50    /\B(?=(\d{3})+(?!\d))/g,
51    separator,
52  );
53 
54  return decPart
55    ? `${formattedInt}${decimalSeparator}${decPart}`
56    : formattedInt;
57};
58 
59// Animated digit component for rolling effect
60const AnimatedDigit = ({
61  digit,
62  delay = 0,
63}: {
64  digit: string;
65  delay?: number;
66}) => {
67  const isNumber = /\d/.test(digit);
68 
69  if (!isNumber) {
70    return <span className="inline-block">{digit}</span>;
71  }
72 
73  const num = parseInt(digit, 10);
74 
75  return (
76    <span className="relative inline-block h-[1em] w-[0.6em] overflow-hidden">
77      <motion.span
78        className="absolute top-0 left-0 flex w-full flex-col items-center"
79        initial={{ y: "-100%" }}
80        animate={{ y: `${-num * 10}%` }}
81        transition={{
82          duration: 0.5,
83          delay,
84          ease: [0.16, 1, 0.3, 1],
85        }}
86      >
87        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
88          <span key={n} className="h-[1em] leading-none">
89            {n}
90          </span>
91        ))}
92      </motion.span>
93    </span>
94  );
95};
96 
97// Spring-based counter using useSpring
98const SpringCounter = ({
99  value,
100  from = 0,
101  decimals = 0,
102  separator = ",",
103  decimalSeparator = ".",
104  prefix = "",
105  suffix = "",
106  className,
107  once = true,
108  formatFn,
109  duration = 2,
110  delay = 0,
111}: NumberCounterProps) => {
112  const ref = React.useRef(null);
113// … truncated