Motion Number
A formatted number whose digits roll to their new value, upward when it grows and downward when it shrinks.
Examples
Price with a plan switch
Counter
Compact count
Signed percent change
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-number.jsonComponent API
MotionNumber
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | The number to display. Digits roll when it changes; the first render shows it without motion. | |
| locale | Intl.LocalesArgument | 'en-US' | The locale passed to Intl.NumberFormat. Fixed by default so the server and the browser agree. |
| format | Intl.NumberFormatOptions | Formatting options: style: 'currency', style: 'percent', notation: 'compact', signDisplay. | |
| prefix | string | Text placed before the number and read with it. | |
| suffix | string | Text placed after the number and read with it. | |
| className | string | Optional CSS class for the wrapper. The font size and weight are inherited. |
Screen readers hear the formatted value once, never the rolling digits. Wrap a number that changes on a press in an <output> to announce it. Under reduced motion the value changes instantly.
Compared with Sliding Number and Animated Number
Sliding Number takes a plain number and moves each digit on its own, so 19 to 20 rolls the last digit back from 9 to 0. Animated Number counts through every value in between. Motion Number keeps the formatting of Intl.NumberFormat, rolls every digit in the direction of the whole change, and slides its neighbours when a digit is added or removed.
Credits
The effect is inspired by Number Flow and the motion number of UI Layouts, rebuilt on motion without either package.