When value changes, NumericText compares the old and new text and works out which glyphs stay, which leave and which arrive. Glyphs that stay glide to their new position; the others roll out and in, scaling and blurring as they go. A small stagger moves through them from left to right.
Every comparison on this page shows one value changing, several times over, with one prop set differently in each copy.
Direction
direction="auto" compares the old and new numbers and rolls up when the value grows, down when it shrinks. Force up or down for text that doesn't read as a number, or for a countdown or clock that should always go one way.
direction="auto"direction="up"direction="down"A clock is the classic case: 23:59:59 to 00:00:00 is a smaller number, but time moved forward.
<NumericText value={time} direction="up" monospacedDigits />Duration
duration is the nominal length of a transition in milliseconds, 420 by default. It scales every internal spring together, so a slower transition keeps the same character instead of just being stretched.
duration={200}duration={420}duration={1000}Keep it short for values that update often, like a percentage during a download, so a new change never has to wait for the last one.
Bounce
bounce is how far the vertical roll overshoots before it settles, from 0 to 0.95. 0 arrives dead straight. Only the roll bounces: a wobbling opacity or position would just look broken.
bounce={0}bounce={0.46}bounce={0.9}Enter scale
enterScale is the size a glyph starts at when it arrives, and shrinks to when it leaves. 1 turns the scale off and leaves a pure roll.
enterScale={1}enterScale={0.4}enterScale={0}Travel
travel is how far a glyph rolls, as a fraction of the line height. Larger values read as a faster-moving ticker; 0 removes the vertical movement and leaves a scale and a fade.
travel={0}travel={0.333}travel={1}Turning it off
animated={false} applies every value instantly. The first value is never animated either way, so a freshly mounted component shows its content straight away rather than rolling in.
<NumericText value={balance} animated={!isRefreshing} />