Number Ticker
Animated counter with Intl formatting. Pro · Effects › Borders, text and numbers
A number that counts up to its value — or rolls each digit into place — when it scrolls into view, formatted with Intl.NumberFormat in the user's locale and numbering system. Until the number is about to be seen it shows its value (server render, no JS, a page captured whole), and print always shows the value. Screen readers get the final value once; the moving digits are hidden from them. Frames are written straight to the DOM, so counting never re-renders React. Reduced motion shows the value at once.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add number-tickernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { NumberTicker } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
value * | number | The number to count to. Changing it animates from the number on screen. | |
from | number | 0 | Where the first count starts. |
variant | 'count' | 'roll' | 'count' | count — the number counts up to the value; roll — every digit rolls into place like an odometer. |
duration | number | 1600 | Animation length, ms. |
delay | number | 0 | Delay before the first count, ms. |
format | Intl.NumberFormatOptions | Intl.NumberFormat options: currency, percent, compact notation, units… | |
locale | string | BCP 47 locale. Default: the ThemeProvider's, then the browser's. | |
startOnView | boolean | true | Wait until the number scrolls into view before counting. |
Related components
- Animated Border — Light beam running around a border
- Shimmer Text — Shine sweeping across text
- Text Reveal — Word-by-word reveal and typewriter text
- Marquee — Endless scrolling row of logos and testimonials
- Glass Lens — Glass lens with real refraction
- Morphing Capsule — Capsule that flows between states
- Floating Tab Bar — Floating glass tab bar
- Aurora Background — Slow aurora behind your content
- Gradient Background — Slowly shifting gradient
- Bubble Background — Soft colored bubbles, one follows the cursor
- Stars Background — Starry sky with cursor parallax
- Hexagon Background — Hexagon grid with a glowing trail
Previous: Text Reveal · Next: Marquee · All Effects