Animated Number
DisplaySmooth animated number ticker — for stat counters and metric reveals.
Animated NumberDisplay · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Animated Number from @otfdashkit/ui.
Code
// Animated Number — Smooth animated number ticker — for stat counters and metric reveals.
//
// Install:
// bun add @otfdashkit/ui
import { AnimatedNumber } from '@otfdashkit/ui'
export function Example() {
return (
<AnimatedNumber>
{/* your content */}
</AnimatedNumber>
)
}Props
Props declared in the AnimatedNumber source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| valuerequired | number | Target value to animate to | |
| autoStart | boolean | true | Whether to start animating immediately or wait for intersection |
| decimals | number | 0 | Decimal places (default 0) |
| duration | number | 1200 | Animation duration in ms (default 1200) |
| easing | (t: number) => number | Easing function (default easeOutExpo) | |
| format | boolean | true | Format with locale grouping (e.g. 1,234) |
| from | number | 0 | Starting value (default 0) |
| locale | string | Locale for number formatting | |
| prefix | string | '' | Prefix string e.g. "$" |
| suffix | string | '' | Suffix string e.g. "%" or "k" |