React Sliding Number

Numbers that slide like a slot machine, but actually readable. Smooth digit-by-digit animations with spring physics that don't make your dashboard look like Vegas. Built with Motion, TypeScript, and shadcn/ui.

Motion

Framer Motion

react-use-measure

Trying to implement text animations?

Join our Discord community for help from other developers.

Ever seen those number counters that change digits individually, like an old-school odometer or slot machine? Most implementations either snap instantly (jarring) or all digits move at once (chaos). This component slides each digit independently with proper timing, so 1234 → 5678 looks like a smooth mechanical counter, not a seizure.

Individual digit sliding animations

Numbers that slide smoothly from one value to another:

Loading component...

'use client'; import * as React from 'react';import {  useSpring,  useTransform,  motion,  useInView,  type MotionValue,  type SpringOptions,  type UseInViewOptions,} from 'motion/react';import useMeasure from 'react-use-measure'; import { cn } from '@/lib/utils'; type SlidingNumberRollerProps = {  prevValue: number;  value: number;  place: number;  transition: SpringOptions;}; function SlidingNumberRoller({  prevValue,  value,  place,  transition,}: SlidingNumberRollerProps) {  const startNumber = Math.floor(prevValue / place) % 10;  const targetNumber = Math.floor(value / place) % 10;  const animatedValue = useSpring(startNumber, transition);   React.useEffect(() => {    animatedValue.set(targetNumber);  }, [targetNumber, animatedValue]);   const [measureRef, { height }] = useMeasure();   return (    <span      ref={measureRef}      data-slot="sliding-number-roller"      className="relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums"    >      <span className="invisible">0</span>      {Array.from({ length: 10 }, (_, i) => (        <SlidingNumberDisplay          key={i}          motionValue={animatedValue}          number={i}          height={height}          transition={transition}        />      ))}    </span>  );} type SlidingNumberDisplayProps = {  motionValue: MotionValue<number>;  number: number;  height: number;  transition: SpringOptions;}; function SlidingNumberDisplay({  motionValue,  number,  height,  transition,}: SlidingNumberDisplayProps) {  const y = useTransform(motionValue, (latest) => {    if (!height) return 0;    const currentNumber = latest % 10;    const offset = (10 + number - currentNumber) % 10;    let translateY = offset * height;    if (offset > 5) translateY -= 10 * height;    return translateY;  });   if (!height) {    return <span className="invisible absolute">{number}</span>;  }   return (    <motion.span      data-slot="sliding-number-display"      style={{ y }}      className="absolute inset-0 flex items-center justify-center"      transition={{ ...transition, type: 'spring' }}    >      {number}    </motion.span>  );} type SlidingNumberProps = React.ComponentProps<'span'> & {  number: number | string;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  padStart?: boolean;  decimalSeparator?: string;  decimalPlaces?: number;  transition?: SpringOptions;}; function SlidingNumber({  ref,  number,  className,  inView = false,  inViewMargin = '0px',  inViewOnce = true,  padStart = false,  decimalSeparator = '.',  decimalPlaces = 0,  transition = {    stiffness: 200,    damping: 20,    mass: 0.4,  },  ...props}: SlidingNumberProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current!);   const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;   const prevNumberRef = React.useRef<number>(0);   const effectiveNumber = React.useMemo(    () => (!isInView ? 0 : Math.abs(Number(number))),    [number, isInView],  );   const formatNumber = React.useCallback(    (num: number) =>      decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),    [decimalPlaces],  );   const numberStr = formatNumber(effectiveNumber);  const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');  const newIntStr =    padStart && newIntStrRaw?.length === 1 ? '0' + newIntStrRaw : newIntStrRaw;   const prevFormatted = formatNumber(prevNumberRef.current);  const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');  const prevIntStr =    padStart && prevIntStrRaw.length === 1      ? '0' + prevIntStrRaw      : prevIntStrRaw;   const adjustedPrevInt = React.useMemo(() => {    return prevIntStr.length > (newIntStr?.length ?? 0)      ? prevIntStr.slice(-(newIntStr?.length ?? 0))      : prevIntStr.padStart(newIntStr?.length ?? 0, '0');  }, [prevIntStr, newIntStr]);   const adjustedPrevDec = React.useMemo(() => {    if (!newDecStrRaw) return '';    return prevDecStrRaw.length > newDecStrRaw.length      ? prevDecStrRaw.slice(0, newDecStrRaw.length)      : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');  }, [prevDecStrRaw, newDecStrRaw]);   React.useEffect(() => {    if (isInView) prevNumberRef.current = effectiveNumber;  }, [effectiveNumber, isInView]);   const intDigitCount = newIntStr?.length ?? 0;  const intPlaces = React.useMemo(    () =>      Array.from({ length: intDigitCount }, (_, i) =>        Math.pow(10, intDigitCount - i - 1),      ),    [intDigitCount],  );  const decPlaces = React.useMemo(    () =>      newDecStrRaw        ? Array.from({ length: newDecStrRaw.length }, (_, i) =>            Math.pow(10, newDecStrRaw.length - i - 1),          )        : [],    [newDecStrRaw],  );   const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;  const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;   return (    <span      ref={localRef}      data-slot="sliding-number"      className={cn('flex items-center', className)}      {...props}    >      {isInView && Number(number) < 0 && <span className="mr-1">-</span>}       {intPlaces.map((place) => (        <SlidingNumberRoller          key={`int-${place}`}          prevValue={parseInt(adjustedPrevInt, 10)}          value={parseInt(newIntStr ?? '0', 10)}          place={place}          transition={transition}        />      ))}       {newDecStrRaw && (        <>          <span>{decimalSeparator}</span>          {decPlaces.map((place) => (            <SlidingNumberRoller              key={`dec-${place}`}              prevValue={prevDecValue}              value={newDecValue}              place={place}              transition={transition}            />          ))}        </>      )}    </span>  );} export { SlidingNumber, type SlidingNumberProps };

Built with TypeScript and shadcn/ui, using Motion for spring-powered digit animations in React applications. Each digit slides vertically through 0-9 with realistic physics, maintaining perfect alignment and timing. No layout shifts, no jarring snaps, just smooth mechanical precision.

Installation

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

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

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

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

Usage

import { SlidingNumber } from "@/components/text/sliding-number";

<SlidingNumber
  number={42069}
  inView={true}
  decimalPlaces={2}
  transition={{ stiffness: 100, damping: 15 }}
/>;

Why most sliding numbers suck

Most developers either animate the entire number as one unit (looks fake) or use CSS counters with steps (choppy). The worst ones don't handle different digit counts properly, so changing from 99 to 100 breaks the layout or causes weird jumps.

This React component treats each digit position as an independent roller, like a real mechanical counter. When 9 becomes 0, it slides through the complete 0-9 sequence instead of jumping. We use tabular-nums fonts so all digits have consistent width, preventing layout shifts during transitions.

The spring physics are crucial here: real mechanical counters have inertia and settle naturally. Linear transitions look robotic. These digits accelerate and decelerate like they have actual mass, creating that satisfying mechanical feel.

Examples

Decimal numbers with formatting

Currency and percentage displays with precise decimal handling:

Loading component...

'use client'; import * as React from 'react';import {  useSpring,  useTransform,  motion,  useInView,  type MotionValue,  type SpringOptions,  type UseInViewOptions,} from 'motion/react';import useMeasure from 'react-use-measure'; import { cn } from '@/lib/utils'; type SlidingNumberRollerProps = {  prevValue: number;  value: number;  place: number;  transition: SpringOptions;}; function SlidingNumberRoller({  prevValue,  value,  place,  transition,}: SlidingNumberRollerProps) {  const startNumber = Math.floor(prevValue / place) % 10;  const targetNumber = Math.floor(value / place) % 10;  const animatedValue = useSpring(startNumber, transition);   React.useEffect(() => {    animatedValue.set(targetNumber);  }, [targetNumber, animatedValue]);   const [measureRef, { height }] = useMeasure();   return (    <span      ref={measureRef}      data-slot="sliding-number-roller"      className="relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums"    >      <span className="invisible">0</span>      {Array.from({ length: 10 }, (_, i) => (        <SlidingNumberDisplay          key={i}          motionValue={animatedValue}          number={i}          height={height}          transition={transition}        />      ))}    </span>  );} type SlidingNumberDisplayProps = {  motionValue: MotionValue<number>;  number: number;  height: number;  transition: SpringOptions;}; function SlidingNumberDisplay({  motionValue,  number,  height,  transition,}: SlidingNumberDisplayProps) {  const y = useTransform(motionValue, (latest) => {    if (!height) return 0;    const currentNumber = latest % 10;    const offset = (10 + number - currentNumber) % 10;    let translateY = offset * height;    if (offset > 5) translateY -= 10 * height;    return translateY;  });   if (!height) {    return <span className="invisible absolute">{number}</span>;  }   return (    <motion.span      data-slot="sliding-number-display"      style={{ y }}      className="absolute inset-0 flex items-center justify-center"      transition={{ ...transition, type: 'spring' }}    >      {number}    </motion.span>  );} type SlidingNumberProps = React.ComponentProps<'span'> & {  number: number | string;  inView?: boolean;  inViewMargin?: UseInViewOptions['margin'];  inViewOnce?: boolean;  padStart?: boolean;  decimalSeparator?: string;  decimalPlaces?: number;  transition?: SpringOptions;}; function SlidingNumber({  ref,  number,  className,  inView = false,  inViewMargin = '0px',  inViewOnce = true,  padStart = false,  decimalSeparator = '.',  decimalPlaces = 0,  transition = {    stiffness: 200,    damping: 20,    mass: 0.4,  },  ...props}: SlidingNumberProps) {  const localRef = React.useRef<HTMLSpanElement>(null);  React.useImperativeHandle(ref, () => localRef.current!);   const inViewResult = useInView(localRef, {    once: inViewOnce,    margin: inViewMargin,  });  const isInView = !inView || inViewResult;   const prevNumberRef = React.useRef<number>(0);   const effectiveNumber = React.useMemo(    () => (!isInView ? 0 : Math.abs(Number(number))),    [number, isInView],  );   const formatNumber = React.useCallback(    (num: number) =>      decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),    [decimalPlaces],  );   const numberStr = formatNumber(effectiveNumber);  const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');  const newIntStr =    padStart && newIntStrRaw?.length === 1 ? '0' + newIntStrRaw : newIntStrRaw;   const prevFormatted = formatNumber(prevNumberRef.current);  const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');  const prevIntStr =    padStart && prevIntStrRaw.length === 1      ? '0' + prevIntStrRaw      : prevIntStrRaw;   const adjustedPrevInt = React.useMemo(() => {    return prevIntStr.length > (newIntStr?.length ?? 0)      ? prevIntStr.slice(-(newIntStr?.length ?? 0))      : prevIntStr.padStart(newIntStr?.length ?? 0, '0');  }, [prevIntStr, newIntStr]);   const adjustedPrevDec = React.useMemo(() => {    if (!newDecStrRaw) return '';    return prevDecStrRaw.length > newDecStrRaw.length      ? prevDecStrRaw.slice(0, newDecStrRaw.length)      : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');  }, [prevDecStrRaw, newDecStrRaw]);   React.useEffect(() => {    if (isInView) prevNumberRef.current = effectiveNumber;  }, [effectiveNumber, isInView]);   const intDigitCount = newIntStr?.length ?? 0;  const intPlaces = React.useMemo(    () =>      Array.from({ length: intDigitCount }, (_, i) =>        Math.pow(10, intDigitCount - i - 1),      ),    [intDigitCount],  );  const decPlaces = React.useMemo(    () =>      newDecStrRaw        ? Array.from({ length: newDecStrRaw.length }, (_, i) =>            Math.pow(10, newDecStrRaw.length - i - 1),          )        : [],    [newDecStrRaw],  );   const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;  const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;   return (    <span      ref={localRef}      data-slot="sliding-number"      className={cn('flex items-center', className)}      {...props}    >      {isInView && Number(number) < 0 && <span className="mr-1">-</span>}       {intPlaces.map((place) => (        <SlidingNumberRoller          key={`int-${place}`}          prevValue={parseInt(adjustedPrevInt, 10)}          value={parseInt(newIntStr ?? '0', 10)}          place={place}          transition={transition}        />      ))}       {newDecStrRaw && (        <>          <span>{decimalSeparator}</span>          {decPlaces.map((place) => (            <SlidingNumberRoller              key={`dec-${place}`}              prevValue={prevDecValue}              value={newDecValue}              place={place}              transition={transition}            />          ))}        </>      )}    </span>  );} export { SlidingNumber, type SlidingNumberProps };

Features

Individual digit sliding with mechanical counter physics for React applications
Tabular number fonts prevent layout shifts during digit changes
Decimal support with configurable precision and separators
In-view detection so animations trigger when users actually see them
Complete TypeScript support with full spring configuration options
Works seamlessly with shadcn/ui design tokens and theme colors
Free open source component optimized for 60fps performance in Next.js

API Reference

SlidingNumber

Animated number display with individual digit sliding transitions.

Prop	Type	Default	Description
`number`	`number \| string`	required	Number to display and animate
`inView`	`boolean`	`false`	Only animate when visible
`inViewMargin`	`string`	`"0px"`	Viewport margin for trigger
`inViewOnce`	`boolean`	`true`	Animate only once
`padStart`	`boolean`	`false`	Add leading zeros
`decimalSeparator`	`string`	`"."`	Decimal point character
`decimalPlaces`	`number`	`0`	Fixed decimal places
`transition`	`SpringOptions`	`{ stiffness: 200, damping: 20 }`	Spring physics config
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	Standard div attributes

Spring Physics Tuning

Fine-tune the mechanical counter feel:

Property	Range	Effect	Best For
stiffness	100-300	Animation speed	200 for dashboards, 100 for smooth
damping	15-30	Bounce/settle	20 for realistic, 30 for quick
mass	0.2-1.0	Inertia feel	0.4 for light, 0.8 for heavy

Common gotchas

Digits don't align properly: Make sure you're using a monospace or tabular-nums font in React applications. Variable-width fonts cause alignment issues during digit transitions.

Animation feels sluggish: Default spring settings work for most cases with TypeScript support. For snappier counters, increase stiffness to 250-300 and damping to 25-30 in JavaScript projects.

Layout shifts during changes: Use padStart={true} for consistent width or set a fixed container width in Next.js applications. Otherwise short numbers (99) to long numbers (100) cause layout jumps.

Decimals don't format correctly: The decimalSeparator prop only affects display in React components. Your input number should use standard JavaScript decimal format (periods), regardless of display preferences.

Performance issues with many counters: Each digit runs independent animations. Dozens of sliding numbers are fine, but hundreds might impact performance on lower-end devices.

Integration with other components

Perfect for dashboard Card components showing metrics and KPIs in React applications. Combines well with Progress for completion percentages or Badge for status counts in Next.js projects.

For complete analytics experiences, pair with Charts to show both visual and numerical data. This free open source component works great with Skeleton loading states and Table components for data displays, all with complete TypeScript integration.

Individual digit sliding animations

Installation

Usage

Why most sliding numbers suck

Examples

Decimal numbers with formatting

Features

API Reference

SlidingNumber

Spring Physics Tuning

Common gotchas

Integration with other components

Questions developers actually ask

On this page

React Sliding Number

Reactsliding-number

Reactsliding-number

How do I add currency symbols and thousands separators?

Does this handle negative numbers properly?

Can I make different digits slide at different speeds?

Is there a limit to how large numbers can be?

Is this accessible for screen readers and motion sensitivity?

How can I optimize performance with many sliding numbers?

Can I use custom fonts with this component?

On this page