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