Beta
Animate UI

Counting Number

A numeric display component that smoothly animates number changes with a counting animation.

Made by imskyleen

Installation

Usage

<CountingNumber number={1000} />

Examples

With decimal

Starting from a specific number

Props

PropTypeDefault
decimalPlaces?
number
0
transition?
object
{ stiffness: 90, damping: 50 }
decimalSeparator?
string
.
inViewOnce?
boolean
true
inViewMargin?
string
0px
inView?
boolean
false
padStart?
boolean
false
fromNumber?
number
0
number
number
-

Credits

  • Credits to Motion for the inspiration
  • Credits to Magic UI for the spring transition

Built by Skyleen. The source code is available on GitHub.

On this page