NumberTicker
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { NumberTicker } from "@avala/design"; <NumberTicker>NumberTicker</NumberTicker>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
domain-animations-numberticker--defaultOpen in Storybook →
When to use
- Marketing hero stats ("12,034 datasets labelled" climbing into view).
- Investor / about-page metric strips.
- Any single-number flourish that should animate exactly once on first scroll-in.
When not to use
- Live, continuously-updating values (latency monitors, session counts) — render the value directly; the spring overhead and "once" gate aren't suited to streaming data.
- Inline body copy where the count needs to read instantly — the animation delay can hurt comprehension.
- Form inputs / editable values — use a plain
<input type="number">instead.