Rolling number

Pass a number and a format. When the value changes, each digit rolls to its new place like an odometer (9 to 0 steps forward, never back through every digit) and each column to the right starts 25ms after its neighbour, so the roll reads as mechanical. The £ sign and the separators stay still. Press Simulate a sale.

format takes the same options as Intl.NumberFormat, and locale defaults to en-GB, so money, counts and rates come out the UK way. Percentages take a fraction: pass 0.031 to show 3.1%.

Columns are keyed by place value (ones, tens, hundreds), so a column keeps its reel as the number grows or shrinks. Going from 9,999 to 10,000 rolls the existing columns and opens a new one on its grid track, with its group separator; dividing closes columns the same way.

By default a figure counts up from zero the first time it renders, which gives a page's leading number an arrival. Turn it off with animateOnMount={false} where the figure should simply be there: in tables, in lists, and when a page is restored.

The reel inherits its font, size and colour, so the same component sits in a table cell in Geist or as the headline figure of a dashboard in Sora. Every numeral is tabular and each column is held open at the width of a zero, so figures never jitter as they roll and amounts line up in a column.

Ink on the canvas in light, night ink in dark. The figure never takes a colour of its own.

The roll runs on the settle spring, which lands with a whisper of overshoot, like a reel clicking into place.

Also accepts every native span attribute except children.