FancyUI
Saved GitHub Get started
A large dollar figure mid-shuffle: each digit is blurred between the values above and below it, over a Shuffle button.
Captured from the project's demo · NumberFlow by Maxwell Barvian · MIT licence · Source ↗

Number — digit spin

Maxwell Barvian · NumberFlow OPEN SOURCE

Each digit spins through its neighbours to the new value while the figure reflows.

#minimal#editorial#press

Visit source

Related FancyUI components

  • TextRoll

    Rolls only the characters that change, one step, instead of spinning through every digit.

    pnpm add fancy-ui-svelte
    import { TextRoll } from "fancy-ui-svelte";

    Docs Source

  • NumberTicker

    Counts the value up or down rather than spinning each digit on its own wheel.

    pnpm add fancy-ui-svelte
    import { NumberTicker } from "fancy-ui-svelte";

    Docs Source

Type
Interaction
Interaction
Press
Style
Minimal, Editorial
Framework of source
Other
Code availability
Open source

Why it works

Pressing Shuffle sends every digit around a vertical wheel: the digits it passes stay faintly visible above and below, so the eye reads motion rather than a swap. Separators and sign fade in and out while the whole figure slides to its new width, so a change of length never jumps.

When to use it

A headline figure that changes in front of the visitor: a price toggle, a live counter, a total.

Things to watch

Screen readers should hear the final value once, not each frame. Under reduced motion the change should be instant. Proportional digits make the width jitter; use tabular numerals.

Implementation clues

  • per-digit vertical wheel
  • width transition on the whole figure
  • fade for added or removed characters
  • Intl.NumberFormat parts