Odometer Number
An odometer for stats and prices — each digit is a rolling column that springs to its target with a mechanical overshoot, left to right.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/odometer-number.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/odometer-number.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 12500 | The number to display. Changing it re-rolls the digits. |
| from | number | 0 | Value the digits roll up from on first reveal. |
| trigger | "scroll" | "mount" | "scroll" | Start when scrolled into view, or immediately on mount. |
| locale | string | false | — | Locale for grouping separators; false disables formatting. |
| decimals | number | 0 | Decimal places. |
| prefix | string | — | Rendered before the number, e.g. '$'. |
| suffix | string | — | Rendered after the number, e.g. '%'. |
| stagger | number | 0.06 | Per-column delay in seconds — left columns settle first. |
| stiffness | number | 110 | Roll spring stiffness — higher snaps harder. |
| damping | number | 16 | Roll spring damping — lower overshoots more. |
| sound | boolean | true | Play a decelerating mechanical ratchet when the value re-rolls (not on first reveal). |
| haptics | boolean | true | Vibrate on re-roll where supported (mobile). |
| confetti | boolean | false | Fling ticker-tape confetti when the value increases. |
| className | string | — | Additional CSS classes — set the font size here. |