Number Flow

An optimistic numeric control whose changed digits slide through place-value-aware slots.

Blur

Digit smear

450ms
86%

Shuffle generates a new value immediately, then settles after the simulated async save. Changed digits move through place-value-aware slots so separators and decimal points stay fixed.

Behavior

Integer digits are keyed from the right edge, fraction digits are keyed from the decimal point, and static tokens never slide. The blur and duration controls map directly to public props on the display primitive.

Incomplete edits such as an empty value, a sign, or a trailing decimal are preserved while typing and restored on blur unless a finite number is committed.

Progress slider

A standard progress slider drives a blur-free Number Flow display with a short trailing delay and damped timing.

Pointer and keyboard input move the slider immediately while the animated percentage trails slightly, preserving accessible pointer and keyboard slider semantics without making the control feel sluggish.

Implementation

Switch between shadcn, Tailwind, React CSS, and standalone HTML implementations.

Decimals
Format
Separators
Blur

Digit smear

450ms
86%