NumberTicker
v1.0.3Updated 28 Sept 2026Animated counting number for KPI reveals. Spring-driven via motion/react with locale-aware Intl.NumberFormat — integer, currency, percent, or decimal formats with size and tone tokens.
Preview
Live · 12 storiesDefaultOpen ↗
▸Why this is recommendedanimationnumbertickercount-up+3
The default, out-of-the-box NumberTicker.
Recommended for+14
- ✓Hero stat reveal
- ✓Inside StatCard for animated value
- ✓Dashboard KPI ribbons
- ✓Marketing landing stats
Tags+6
animationnumbertickercount-upkpimotiondefault
Features+4
- Spring physics (motion/react useSpring)
- Formats: integer / currency / percent / decimal
- Currencies: THB / USD / EUR / GBP / JPY with locale defaults
- Sizes: default / compact / large
- Tones: default / primary / success / warning / destructive
- Prefix / suffix slots, custom decimals
Not recommended for−2
- ✕Frequently-updating values (re-animating gets distracting)
- ✕Inline body copy numbers
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
valueTarget value
yesformatOutput format
—currencyCurrency code
—sizeVisual size
—toneColor tone
—durationAnimation duration in ms
—Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.