React number animation
When a figure changes, these show which way it went. Each digit is a ten-face cylinder on a spring that turns in the direction of change, so a 9 carrying to 0 rolls forward instead of rewinding.
Formatting goes through Intl.NumberFormat, so currency, percent, compact notation and the reader's own separators and numerals need no extra code.
6 of the 12 below are free under MIT, Number Roll itself among them; the rest, including the charts, are Pro.
12 components, running
Tabular digits that roll in the direction of change, formatted with Intl.NumberFormat for any locale.
npx shadcn add https://eased.dev/r/number-roll.jsonA number input on Base UI's NumberField with steppers that speed up while held, digits that roll on every step, Intl formatting with a true minus, min, max and step, and an optional scrub label.
npx shadcn add https://eased.dev/r/number-field.jsonA Base UI slider, single or range, whose thumb swells while held and whose readout's digits roll when the value steps.
npx shadcn add https://eased.dev/r/slider.jsonA progress bar on Base UI Progress: the bar rides a spring that never overshoots, and its value rolls.
npx shadcn add https://eased.dev/r/progress.jsonA status or count chip in six tones: counts roll their digits, and a count-only badge pops in above zero and leaves when cleared.
npx shadcn add https://eased.dev/r/badge.jsonTable cells that make rows look finished: avatar with name, status badge, number with a rolling value and coloured delta, a progress meter that fills on view, a self-updating relative time, and a mono ID with a copy button.
npx shadcn add https://eased.dev/r/cells.jsonDrag a numeric label to scrub its value, with pointer lock, fine and coarse modifiers, keyboard steps and rolling tabular digits.
npx shadcn add @eased-pro/scrub-labelA KPI tile: a rolling value, a delta that re-tints and turns its arrow (falls are warning, never danger) and a sparkline that morphs with the range.
npx shadcn add @eased-pro/stat-tileLines and areas that morph between ranges on shared x samples while the scale springs and gridlines slide; a gliding crosshair, a trailing tooltip that flips at the edge, legend toggles that flatten a series, a previous period dashed at 40%, and onActiveChange for a headline.
npx shadcn add @eased-pro/line-chartGrouped or stacked bars that grow in with a 12ms stagger, glide a scrubbing band with rolling values, and morph keyed bars between ranges while the scale springs.
npx shadcn add @eased-pro/bar-chartA donut or pie whose slices morph between datasets by key: new slices grow out of their seam and retired ones close into it.
npx shadcn add @eased-pro/donut-chartA live board of currency pairs: when a rate ticks, its cell washes once and the digits roll in the direction of the move.
npx shadcn add @eased-pro/fx-rate-board
One counter, used everywhere
Search for a number ticker and you usually find a single counter. Here the same rolling digits run inside inputs, sliders, badges, table cells and chart readouts, so a figure moves the same way wherever it sits. Number Roll
How to install
1.Add the counter on its own:
npx shadcn add https://eased.dev/r/number-roll.json2.Pass the number and a format. Change the value and the digits roll to it; there is nothing to restart or remount: Number Roll docs
<NumberRoll value={amount} format={{ style: "currency", currency: "USD" }} />3.The Pro pieces, such as Stat Tile, come from the private @eased-pro registry with a personal token: Pro setup
npx shadcn add @eased-pro/stat-tile
Questions
Is it a number ticker or an odometer?
Closer to an odometer. Each digit turns on its own to the next value instead of the whole number counting through every value in between, and a change that arrives mid-roll redirects from where the digit is.
Does it handle currency, percent and compact numbers?
Yes. Pass Intl.NumberFormat options as format. Symbols and suffixes swap while the digits roll, so 980K to 1.2M changes the K to an M, and locales such as hi-IN or ar-EG get their own grouping and numerals.
What do screen readers hear?
The formatted number, read once from a visually hidden copy; the rolling faces are hidden. It is not a live region, so announce changes from your own, or let the control around it speak the value.
And with reduced motion turned on?
Values change at once, with no roll or slide. While a slider or a drag drives the value, pass animated={false} so the number follows the pointer exactly.