Number Ticker
Springs a number up when it enters the viewport.
- 0.9 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
12,480+
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/number-ticker.jsonAdds components/velora/number-ticker.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
value* | number | — |
startValue | number | 0 |
delaySeconds to wait after entering the viewport | number | 0 |
decimalPlaces | number | 0 |
prefix | string | "" |
suffix | string | "" |
Also accepts every <span> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The final value appears at once when the element scrolls into view, with no count-up.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- The final formatted value is always in an sr-only span; the animating digits are aria-hidden.