React Counting Number

Animated number counters that don't suck. Spring-powered counting animations for React with in-view detection, decimal support, and TypeScript. Built for Next.js with shadcn/ui integration.

Motion

Framer Motion

Trying to implement text animations?

Join our Discord community for help from other developers.

Ever watched a number count up from 0 to 10,000 and it takes forever? Or worse, it counts so fast it looks like a slot machine having a seizure? Yeah, most counting animations are garbage. This component actually gets the timing right with spring physics instead of linear interpolation nonsense.

Smooth number animations

Count up to any number with spring-based animations that feel natural:

Loading component...

'use client';import * as React from 'react';import {  type SpringOptions,  type UseInViewOptions,  useInView,  useMotionValue,  useSpring,} from 'motion/react';type CountingNumberProps = React.ComponentProps<'span'> & {  number: number;  fromNumber?: number;  padStart?: boolean;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  decimalSeparator?: string;  transition?: SpringOptions;  decimalPlaces?: number;};function CountingNumber({  ref,  number,  fromNumber = 0,  padStart = false,  inView = false,  inViewMargin = '0px',  inViewOnce = true,  decimalSeparator = '.',  transition = { stiffness: 90, damping: 50 },  decimalPlaces = 0,  className,  ...props}: CountingNumberProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);  const numberStr = number.toString();  const decimals =    typeof decimalPlaces === 'number'      ? decimalPlaces      : numberStr.includes('.')        ? (numberStr.split('.')[1]?.length ?? 0)        : 0;  const motionVal = useMotionValue(fromNumber);  const springVal = useSpring(motionVal, transition);  const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;  React.useEffect(() => {    if (isInView) motionVal.set(number);  }, [isInView, number, motionVal]);  React.useEffect(() => {    const unsubscribe = springVal.on('change', (latest) => {      if (localRef.current) {        let formatted =          decimals > 0            ? latest.toFixed(decimals)            : Math.round(latest).toString();        if (decimals > 0) {          formatted = formatted.replace('.', decimalSeparator);        }        if (padStart) {          const finalIntLength = Math.floor(Math.abs(number)).toString().length;          const [intPart, fracPart] = formatted.split(decimalSeparator);          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';          formatted = fracPart            ? `${paddedInt}${decimalSeparator}${fracPart}`            : paddedInt;        }        localRef.current.textContent = formatted;      }    });    return () => unsubscribe();  }, [springVal, decimals, padStart, number, decimalSeparator]);  const finalIntLength = Math.floor(Math.abs(number)).toString().length;  const initialText = padStart    ? '0'.padStart(finalIntLength, '0') +      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');  return (    <span      ref={localRef}      data-slot="counting-number"      className={className}      {...props}    >      {initialText}    </span>  );}export { CountingNumber, type CountingNumberProps };

Built with TypeScript and shadcn/ui, so it works with your existing React setup and Next.js applications. Spring animations handle the physics, in-view detection prevents wasted CPU cycles, and the whole thing runs at 60fps without re-renders in modern JavaScript frameworks.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/counting-number.json

npx shadcn@latest add https://www.shadcn.io/registry/counting-number.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/counting-number.json

bunx shadcn@latest add https://www.shadcn.io/registry/counting-number.json

Usage

import { CountingNumber } from "@/components/text/counting-number";

<CountingNumber
  number={42069}
  inView={true}
  transition={{ stiffness: 100, damping: 30 }}
/>;

Why most counting animations suck

Most developers either use setInterval with linear increments (looks robotic) or CSS transitions (can't handle dynamic values) in their React components. Neither approach feels natural because real-world motion doesn't work that way in JavaScript applications.

This React component uses Motion's spring physics with full TypeScript support. Springs naturally accelerate and decelerate, creating that satisfying "snap" when the number settles. The default stiffness (90) and damping (50) values took actual testing to get right—not just random numbers that "looked okay" in Next.js projects.

Plus, most counters start animating immediately on page load. Users never see them. This component waits until it's actually visible using Intersection Observer. Save those CPU cycles for something useful in modern JavaScript development.

Examples

Decimal numbers with custom separators

International formatting with proper decimal handling:

Loading component...

'use client';import * as React from 'react';import {  type SpringOptions,  type UseInViewOptions,  useInView,  useMotionValue,  useSpring,} from 'motion/react';type CountingNumberProps = React.ComponentProps<'span'> & {  number: number;  fromNumber?: number;  padStart?: boolean;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  decimalSeparator?: string;  transition?: SpringOptions;  decimalPlaces?: number;};function CountingNumber({  ref,  number,  fromNumber = 0,  padStart = false,  inView = false,  inViewMargin = '0px',  inViewOnce = true,  decimalSeparator = '.',  transition = { stiffness: 90, damping: 50 },  decimalPlaces = 0,  className,  ...props}: CountingNumberProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);  const numberStr = number.toString();  const decimals =    typeof decimalPlaces === 'number'      ? decimalPlaces      : numberStr.includes('.')        ? (numberStr.split('.')[1]?.length ?? 0)        : 0;  const motionVal = useMotionValue(fromNumber);  const springVal = useSpring(motionVal, transition);  const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;  React.useEffect(() => {    if (isInView) motionVal.set(number);  }, [isInView, number, motionVal]);  React.useEffect(() => {    const unsubscribe = springVal.on('change', (latest) => {      if (localRef.current) {        let formatted =          decimals > 0            ? latest.toFixed(decimals)            : Math.round(latest).toString();        if (decimals > 0) {          formatted = formatted.replace('.', decimalSeparator);        }        if (padStart) {          const finalIntLength = Math.floor(Math.abs(number)).toString().length;          const [intPart, fracPart] = formatted.split(decimalSeparator);          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';          formatted = fracPart            ? `${paddedInt}${decimalSeparator}${fracPart}`            : paddedInt;        }        localRef.current.textContent = formatted;      }    });    return () => unsubscribe();  }, [springVal, decimals, padStart, number, decimalSeparator]);  const finalIntLength = Math.floor(Math.abs(number)).toString().length;  const initialText = padStart    ? '0'.padStart(finalIntLength, '0') +      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');  return (    <span      ref={localRef}      data-slot="counting-number"      className={className}      {...props}    >      {initialText}    </span>  );}export { CountingNumber, type CountingNumberProps };

Countdown animations

Start from a high number and count down for timers or countdowns:

Loading component...

'use client';import * as React from 'react';import {  type SpringOptions,  type UseInViewOptions,  useInView,  useMotionValue,  useSpring,} from 'motion/react';type CountingNumberProps = React.ComponentProps<'span'> & {  number: number;  fromNumber?: number;  padStart?: boolean;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  decimalSeparator?: string;  transition?: SpringOptions;  decimalPlaces?: number;};function CountingNumber({  ref,  number,  fromNumber = 0,  padStart = false,  inView = false,  inViewMargin = '0px',  inViewOnce = true,  decimalSeparator = '.',  transition = { stiffness: 90, damping: 50 },  decimalPlaces = 0,  className,  ...props}: CountingNumberProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current as HTMLSpanElement);  const numberStr = number.toString();  const decimals =    typeof decimalPlaces === 'number'      ? decimalPlaces      : numberStr.includes('.')        ? (numberStr.split('.')[1]?.length ?? 0)        : 0;  const motionVal = useMotionValue(fromNumber);  const springVal = useSpring(motionVal, transition);  const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;  React.useEffect(() => {    if (isInView) motionVal.set(number);  }, [isInView, number, motionVal]);  React.useEffect(() => {    const unsubscribe = springVal.on('change', (latest) => {      if (localRef.current) {        let formatted =          decimals > 0            ? latest.toFixed(decimals)            : Math.round(latest).toString();        if (decimals > 0) {          formatted = formatted.replace('.', decimalSeparator);        }        if (padStart) {          const finalIntLength = Math.floor(Math.abs(number)).toString().length;          const [intPart, fracPart] = formatted.split(decimalSeparator);          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';          formatted = fracPart            ? `${paddedInt}${decimalSeparator}${fracPart}`            : paddedInt;        }        localRef.current.textContent = formatted;      }    });    return () => unsubscribe();  }, [springVal, decimals, padStart, number, decimalSeparator]);  const finalIntLength = Math.floor(Math.abs(number)).toString().length;  const initialText = padStart    ? '0'.padStart(finalIntLength, '0') +      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');  return (    <span      ref={localRef}      data-slot="counting-number"      className={className}      {...props}    >      {initialText}    </span>  );}export { CountingNumber, type CountingNumberProps };

Features

Spring physics that actually feel natural (not linear garbage) in React applications
In-view detection so animations don't waste CPU before users see them
Decimal support with international formatting for JavaScript projects
Padding for consistent widths (no layout shift when counting) in Next.js
Complete TypeScript support with full type definitions and IntelliSense
60fps performance using Motion values (no React re-renders)
Works seamlessly with shadcn/ui components and free open source integration

API Reference

CountingNumber

Animated number display with spring transitions.

Prop	Type	Default	Description
`number`	`number`	required	Target number to count to
`fromNumber`	`number`	`0`	Starting number for animation
`decimalPlaces`	`number`	`0`	Decimal places to display
`decimalSeparator`	`string`	`"."`	Character for decimals
`padStart`	`boolean`	`false`	Add leading zeros
`inView`	`boolean`	`false`	Only animate when visible
`inViewMargin`	`string`	`"0px"`	Viewport margin for trigger
`inViewOnce`	`boolean`	`true`	Animate only once
`transition`	`SpringOptions`	`{ stiffness: 90, damping: 50 }`	Spring configuration
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLSpanElement>`	-	Standard span attributes

Spring Configuration

Motion spring physics for natural animations:

Property	Range	Effect
`stiffness`	1-1000	Higher = faster animation
`damping`	1-100	Higher = less bounce
`mass`	0.1-10	Higher = more inertia

Common gotchas

Numbers jumping on mount: Always set inView={true} unless you want immediate animation in React applications. Otherwise the component animates before users scroll to it.

Decimal formatting breaks: The decimalSeparator prop only affects display, not parsing in this TypeScript component. Your number prop should always use standard JavaScript number format (period for decimals).

Layout shift during counting: Use padStart={true} or set a fixed width on the container in Next.js projects. Otherwise the element width changes as digits increase.

Animation feels sluggish: Default springs work for most React applications. For snappier animations, increase stiffness to 150-200. For smoother, reduce damping to 20-30 in JavaScript implementations.

Memory leaks with rapid updates: This React component handles cleanup automatically, but avoid changing the number prop in tight loops. Debounce your updates if needed.

Integration with other components

Works perfectly with Card components for dashboard metrics in React applications. Combine with Sliding Number for different animation styles in Next.js projects. The Rolling Text component offers an alternative slot-machine effect if you need that Vegas feel.

For complete dashboard experiences, pair with Charts to show both animated numbers and visualizations. This free open source component's animation timing matches well with Skeleton loading states, all with complete TypeScript integration.

Smooth number animations

Installation

Usage

Why most counting animations suck

Examples

Decimal numbers with custom separators

Countdown animations

Features

API Reference

CountingNumber

Spring Configuration

Common gotchas

Integration with other components

Questions developers actually ask

On this page

React Counting Number

Reactcounting-number

Reactcounting-number

Reactcounting-number

How do I format currency with proper symbols?

Can I add thousands separators?

What's the performance limit for large numbers?

Can I use custom easing instead of springs?

Does it handle negative numbers?

Can I pause and resume the animation?

How accessible is this for screen readers?

On this page