/// Data Display
RollingNumber
A tabular, monospaced counter whose digits roll like an odometer to a new value, honoring reduced motion and Intl formatting.
import { RollingNumber } from "@protocore/pds";Live counter
Change value and each digit column rolls from its old glyph to the new one. The animation is pure CSS transform — the component server-renders the final value, so it's correct with no JS and snaps instantly under reduced motion.
Digits roll from the old value to the new one.
Formatting
Pass Intl.NumberFormat options through format — compact notation, currency, fixed fraction digits — and a locale. Grouping separators and currency symbols render as static glyphs between the rolling digit columns.
MRR (EUR, compact)
Requests / min
Signal number
Set signal to paint the number in the reserved accent — the one live figure on a console. Use it sparingly; the accent is a scarce signal, not a decoration.
ACTIVE SESSIONS
TOTAL (static)
How the roll works
Each ASCII digit is an odometer column: a 0–9 strip clipped to a one-glyph window, translated on the Y axis to show the current digit. When value changes, React re-renders the new translate offset and CSS transitions the strip — so 3 → 7 visibly rolls through 4, 5, 6. The value is also emitted once as visually-hidden text, so assistive tech reads the number, not the digit ladder. There is no rAF loop; the animation is declarative and therefore SSR-safe and reduced-motion-safe (the global motion rule collapses the transition to a snap).
Usage
Do
- Use it for a single, prominent live figure — active sessions, block height, throughput.
- Format with `Intl` options rather than pre-formatting the string yourself.
- Give it an `aria-label` (or nearby label) describing what the number measures.
- Reserve `signal` for the one number that is genuinely live on the surface.
Don't
- Don't roll a whole table of numbers — the motion stops being a signal and becomes noise.
- Don't feed it a pre-formatted string; pass the raw `number` and a `format`.
- Don't use `signal` as a general highlight — the accent budget is under 1%.
- Don't animate values that update many times per second; throttle upstream first.
Accessibility
- The rolling digit columns are `aria-hidden`; the formatted value is exposed once as visually-hidden text so screen readers announce the number cleanly.
- Under `prefers-reduced-motion: reduce` the roll collapses to an instant snap via the design system's base motion rule — the final value is always shown.
- Server-rendering emits the final value, so the number is correct before (and without) hydration.
RollingNumber props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | |
duration | number | 800 | Roll duration in milliseconds. Ignored under reduced motion (snaps). |
format | NumberFormatOptions | — | `Intl.NumberFormat` options — currency, compact notation, min/max fraction digits, etc. The formatted string is rolled digit-by-digit. |
locale | string | en | BCP-47 locale, fixed so SSR and hydration agree. |
signal | boolean | — | Paint the number in the reserved accent — the single-live-number signal role. |
style | CSSProperties | — | |
value * | number | — | The number to display. Digits roll from the previous value to this one. |