Number Ticker
Odometer-style animated counter with Intl formatting.
Number Ticker is an animated counter in the style of a mechanical odometer: each digit is a column that rolls to its value, with columns further right spinning further. It formats with Intl (currency, compact, percent), rolls from the old value when the number changes, and gives screen readers and crawlers the plain formatted number.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/number-ticker.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/number-ticker.
Builds on: motion
Usage
import { NumberTicker } from "@/components/ui/number-ticker";
<NumberTicker value={128450} format={{ style: "currency", currency: "USD" }} />Motion
Each digit column tweens to its value with GSAP; columns are keyed from the right so changes roll naturally.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
NumberTicker
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | The number. |
| format | Intl.NumberFormatOptions | — | Formatting. |
| locale | string | — | Locale (defaults to the user's). |
| trigger | "mount" | "inView" | "inView" | First roll. |
| duration | number | 1.2 | Seconds. |
Accessibility
- The formatted number is in a sr-only span; the columns are aria-hidden.
- Shows the final value instantly with reduced motion.
FAQ
Also searched as: animated counter react · number ticker · odometer animation · count up animation · animated stats