Components
AnimatedNumber
Number that smoothly counts from its previous value to the next, with custom formatting.
AnimatedNumber tweens the displayed number from its previous value to the
new one whenever value changes, giving stats and counters a polished count-up
effect. Control the tween length with duration (seconds) and the displayed
format with a format function (defaults to locale integer formatting). It
snaps instantly when the user prefers reduced motion and exposes the value to
screen readers. Ideal for dashboards and KPI cards.
Example
Preview
8,421
import { AnimatedNumber } from '@officina/ui';
<AnimatedNumber value={revenue} format={(n) => `$${Math.round(n).toLocaleString()}`} />;API
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | — | |
| duration | number | 0.8 | Animation duration in seconds. |
| format | (value: number) => string | (n) => Math.round(n).toLocaleString() | Format the displayed number. Defaults to locale integer formatting. |