@mks2508/mks-ui
Primitives

SlidingNumber

WAAPI-powered animated number component with slot-machine-style digit transitions and optional motion blur.

SlidingNumber

A high-performance animated number display using the Web Animations API (WAAPI). Digits transition with a slot-machine-style animation and optional motion blur effect.

Import

import { SlidingNumber } from '@mks2508/mks-ui/react';

Features

  • Slot-machine animation - Digits scroll vertically like a slot machine
  • Motion blur - Optional SVG filter blur during animation
  • Staggered digits - Each digit animates with configurable delay
  • Trend support - Animate up, down, or auto-detect shortest path
  • Format support - Currency, percentage, decimal via Intl.NumberFormat
  • Spring physics - Natural-feeling animations with configurable overshoot

Basic Usage

Basic Number
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.tsx
<SlidingNumber value={1234} />

With Formatting

Currency Format
$
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
,
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.tsx
<SlidingNumber
value={45678.90}
format={{ style: 'currency', currency: 'USD' }}
/>
Percentage Format
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
%
.tsx
<SlidingNumber
value={0.856}
format={{ style: 'percent', minimumFractionDigits: 1 }}
/>

Trend Direction

Control the animation direction:

Trend Directions
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
.tsx
<SlidingNumber value={100} trend={1} />   {/* Upward */}
<SlidingNumber value={100} trend={-1} />  {/* Downward */}
<SlidingNumber value={100} trend={0} />   {/* Auto */}

Motion Blur

Enable blur effect during animation for a more dynamic feel:

<SlidingNumber value={9999} motionBlur={true} />

Animation Configuration

Customize spring physics:

<SlidingNumber
  value={1234}
  duration={700}
  stagger={30}
  animationConfig={{
    overshoot: 0.2,
    mass: 1.0,
    stiffness: 200,
  }}
/>

Dynamic Value Changes

The component animates smoothly when the value prop changes:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <SlidingNumber value={count} fontSize="4rem" />
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <button onClick={() => setCount(c => c - 1)}>Decrement</button>
    </div>
  );
}

API Reference

PropTypeDefaultDescription
valuenumber—The numeric value to display
durationnumber700Animation duration in ms
fontSizestring'3rem'Font size for digits
fontWeightstring'700'Font weight
colorstring'#000'Text color
digitHeightnumber60Height of each digit row in px
staggernumber30Delay between digit animations (ms)
motionBlurbooleantrueEnable motion blur effect
formatIFormatOptions—Number formatting options
trend-1 | 0 | 10Animation direction
animationConfigobject—Spring physics config

IFormatOptions

OptionTypeDescription
style'decimal' | 'currency' | 'percent'Number format style
currencystringCurrency code (e.g., 'USD')
localestringLocale string (e.g., 'en-US')
minimumFractionDigitsnumberMinimum decimal places
maximumFractionDigitsnumberMaximum decimal places
useGroupingbooleanUse thousand separators

AnimationConfig

OptionTypeDefaultDescription
overshootnumber—Spring overshoot amount
massnumber—Spring mass
stiffnessnumber—Spring stiffness

CountingNumber

Spring-based animated number component that smoothly transitions between values.

SlidingText

Character or word-level text animations with slide, blur, and width transitions using CSS or WAAPI.

On this page

SlidingNumberImportFeaturesBasic UsageWith FormattingTrend DirectionMotion BlurAnimation ConfigurationDynamic Value ChangesAPI ReferenceIFormatOptionsAnimationConfigRelated