Sliding Number

Animated number display with smooth sliding digit transitions and customizable formatting. Perfect for React applications requiring dynamic counters with Next.js integration and TypeScript support.

Motion

react-use-measure

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 };

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

Features

Smooth digit transitions with spring animations using Motion for fluid number changes
Decimal support with customizable decimal separators and precision control
In-view animation with configurable viewport detection and once-only triggers
Flexible formatting supporting padding, negative numbers, and locale-specific separators
TypeScript support with complete interface definitions and prop validation
shadcn/ui compatibility using utility classes and consistent design patterns

Examples

Decimal Formatting

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 };

Demonstrates decimal number formatting with custom separators.

Use Cases

This free open source React component works well for:

Statistics dashboards - Dynamic counters and metrics built with Next.js
Financial displays - Currency values and percentages using TypeScript and Tailwind CSS
Gaming interfaces - Score counters and level progression indicators
Analytics widgets - Real-time data visualization for web applications

API Reference

SlidingNumber

Prop	Type	Default	Description
`number`	`number \| string`	required	The number value to display and animate
`inView`	`boolean`	`false`	Trigger animation when component enters viewport
`inViewMargin`	`string`	`"0px"`	Margin for viewport detection
`inViewOnce`	`boolean`	`true`	Only animate once when entering viewport
`padStart`	`boolean`	`false`	Pad single digits with leading zero
`decimalSeparator`	`string`	`"."`	Character used for decimal separation
`decimalPlaces`	`number`	`0`	Number of decimal places to display
`transition`	`SpringOptions`	`{ stiffness: 200, damping: 20, mass: 0.4 }`	Motion spring configuration

Spring Options

stiffness - Spring tension value (higher = faster)
damping - Spring damping factor (higher = less bounce)
mass - Element mass simulation (higher = more inertia)

Implementation Notes

Uses tabular-nums font feature for consistent digit width
Individual digit rollers with optimized transform calculations
Automatic height measurement for smooth vertical transitions
Supports both positive and negative number display
Compatible with shadcn/ui design tokens and theming
Optimized performance with minimal re-renders

Reactsliding-number

Reactsliding-number

On this page