Counting Number Animation
A number display component that animates values with a smooth counting effect, perfect for stats, metrics, and dashboards.
Pumki UI0
Installation
Usage
1import { CountingNumber } from '@/components/pumki-ui/text/counting-number';1<CountingNumber number={5555} />Example
Using Decimals
Pumki UI0,00
Starting from a specific number
You can start counting from a specific number by using the `fromNumber` prop.
Pumki UI0
Props
| Prop | Type | Default | Description |
|---|---|---|---|
decimalPlaces? | number | 0 | Number of decimal places |
transition? | object | { stiffness: 90, damping: 50 } | Animation transition config |
decimalSeparator? | string | . | Decimal separator character |
inViewOnce? | boolean | true | Animate only once when in view |
inViewMargin? | string | 0px | Margin for in-view detection |
inView? | boolean | false | Force animation in view |
padStart? | boolean | false | Pad with zeros at start |
fromNumber? | number | 0 | Start counting from this number |
number | number | - | Target number to animate |
Last updated on