Motion
NumberTicker
A value that moves to its new state without moving anything around it. Width is reserved, digits are tabular, and the roll is quick enough to read as precision rather than theatre.
Playground
Update the value and watch the digits roll. The layout never changes width.
Controls
Value
Format
Duration
Rendered as
<NumberTicker value={128431} kind="currency" duration={0.55} />Formatting is guarded: a null or NaN value renders an em dash, never “NaN”.
<NumberTicker value={128431} kind="currency" duration={0.55} />Stable width
The most important property: a column of values must not shift when one of them changes.
Watch the right edge of the column: it does not move.
In metrics
MetricValue uses the ticker by default, so every metric in a product inherits the behaviour.
Formatting reference
number128,431Grouped integer.
decimal27.401–2 fraction digits, chosen by magnitude.
percent12.4%Already-scaled value with a % suffix; signed for deltas.
currency$109,241ISO-4217 code; defaults to USD.
compact48.3M48.3M — for scale, never for precision.
API
| Prop | Type | Default | Notes |
|---|---|---|---|
value | number | null | undefined | — | Null renders an em dash; NaN never reaches the DOM. |
kind | "number" | "decimal" | "percent" | "currency" | "compact" | "number" | Formatting strategy. |
duration | number | 0.55 | Roll length in seconds. 0 disables animation. |
startFrom | number | — | Count up from here on first paint; omit to start at the value. |
align | "left" | "right" | "center" | "left" | Alignment of the animating digits inside the reserved box. |
format | (value: number) => string | — | Escape hatch for a custom formatter. |
Rules
Do
- Keep rolls between 0.4s and 0.7s.
- Pair a ticker with a delta so the direction is explicit.
- Use compact formatting for scale, exact values for decisions.
Don't
- Animate every cell in a table.
- Roll a value that updates several times a second.
- Use proportional figures anywhere next to a ticker.
Related