Number Ticker
hotCounts to a value with an expo-out ease when it scrolls into view, and animates from the current number on every change. Intl-formatted.
rAFintl2 files · 87 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/number-ticker.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs number-tickerUsage
import { NumberTicker } from "@/components/opus/text/number-ticker";
<NumberTicker value={1284390} format={{ style: "currency", currency: "USD" }} />API
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Target value. |
| from | number | 0 | Start value. |
| duration | number | 1600 | ms. |
| format / locale | Intl.NumberFormatOptions / string | — | Formatting. |
| startOnView | boolean | true | Wait until visible. |