Count up
A number that counts from one value to another when it scrolls into view, with grouped digits and an odometer roll mode.
Standard0128,450
Compact0.02.5M
Roll mode90,210
Counts run when they scroll into view; hover the roll to replay it.
90,210
Implementation
1"use client";2 3import {4 useCallback,5 useEffect,6 useMemo,7 useRef,8 useState,9 type CSSProperties,10} from "react";11 12export type CountUpEasing = "easeOut" | "linear" | "expo" | "spring";13export type CountUpMode = "count" | "roll";14export type CountUpFormat = "standard" | "compact";15export type CountUpTrigger = "view" | "load";16 17export interface CountUpProps {18 to: number;19 from?: number;20 direction?: "up" | "down";21 delay?: number;22 duration?: number;23 className?: string;24 style?: CSSProperties;25 startWhen?: boolean;26 separator?: string;27 prefix?: string;28 suffix?: string;