FancyUI
Saved GitHub Get started
Price — digit roll — preview

Price — digit roll

FancyUI FANCYUI

Only the digits that change roll; the rest of the price stays put.

#minimal#editorial#type

Open docs

Use in FancyUI

Type
Interaction
Interaction
Type
Style
Minimal, Editorial
Code availability
Open source

Why it works

Graphemes that stay the same keep their node; only the diff rolls, up or down depending on the direction of the change. A price that goes from 19 to 29 moves one digit, so the reader sees exactly what changed.

When to use it

Prices, counters and stats that update while the visitor watches.

Things to watch

Assistive tech hears the final value through a live region, not every intermediate digit. Reduced motion swaps synchronously. Use tabular numerals or widths jump.

Implementation clues

  • keyed per grapheme
  • inline-grid clip
  • direction auto
  • tabular-nums