Animated Number
DisplayWeb + NativeMITSmooth animated number ticker — for stat counters and metric reveals.
bun add @otfdashkit/ui
Preview
Animated NumberDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { AnimatedNumber } from '@otfdashkit/ui'
export function Example() {
return <AnimatedNumber value={1234} />
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
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" |