Loading resource
Loading & motion
Key metrics that count into view and smoothly track increases or decreases.
Use AnimatedNumber for a headline metric, with a numeric value, optional Intl format and locale, prefix/suffix, and an entrance order. Updates continue from the current displayed value. Stable keys preserve identity; unrelated renders do not restart the count. Accessible text exposes the target once, without frame-by-frame announcements. Keep ordinary table cells, dates, IDs, and form values static.
src/components/motion/animated-number.tsx
Try changing direction before the count finishes. Each value continues from where it is, with the same easing used by progress bars. Only the headline metrics animate; labels and controls stay still.
The preview imports your production components. Open Code for the complete working example, including its imports.
Use Tab to inspect keyboard focus, switch themes, and try the controls. Reset restores the example’s initial state.