NumberTicker
number-tickerAnimates a numeric value toward its target when it enters the viewport.
Usage
Basic usage
After entering the viewport, scroll from 0 to the target value, automatic thousandths.
0
tsx
<NumberTicker value={12345} className="text-4xl font-semibold" />Decimal places
decimalPlaces Controls the number of decimal places, suitable for percentages/amounts.
0.0
tsx
<NumberTicker value={99.9} decimalPlaces={1} className="text-4xl font-semibold" />Count down
When startValue is larger than value, it will naturally scroll downward without additional direction parameters.
100
tsx
<NumberTicker startValue={100} value={0} className="text-4xl font-semibold" />Starting value and duration
startValue sets the starting point of scrolling, and duration lengthens the animation rhythm.
1,000
tsx
<NumberTicker startValue={1000} value={8888} duration={2.4} className="text-4xl font-semibold" />When to use
Use NumberTicker to animate a KPI or dashboard number from a starting value to a target. It renders only the number; use Stat for a title, unit, and comparison, or Statistic for richer formatting.
Import
ts
import { NumberTicker, formatTicker } from "@hulianui/ui"Props
Inherits every native span attribute except children.
| Name | Type | Default | Description |
|---|---|---|---|
| value* | number | — | Target value reached after entering the viewport. |
| startValue | number | 0 | Initial value; values above the target naturally count down. |
| decimalPlaces | number | 0 | Fraction digits passed to Intl.NumberFormat. |
| duration | number | 1.2 | Duration in seconds using motionEase.out. |
| delay | number | 0 | Delay after entering the viewport, in seconds. |
Pitfalls
- IntersectionObserver and requestAnimationFrame drive the tween. Headless screenshots can capture the initial frame; use a real browser or reduced motion. See [[verify-sub-second-web-animation-via-headless-screenshot]].
- With
prefers-reduced-motion: reduce, the final value renders immediately.
Related
Playground
0
<NumberTicker value={1234} decimalPlaces={0} />