Component / Feedback
Number Ticker
Animate changing values without exposing every intermediate frame to assistive technology. Formatting stays locale-aware and rapid updates continue from the last painted value.
Revenue / en-US
Final values are announced once; intermediate frames stay visual-only.
Delivery contract
Install it
pnpm add easecraft@0.1.0The component imports stable APIs from easecraft.
Files / 00
Dependencies / 03
- easecraft
- npm / 0.1.0
- react
- peer / >=18.2.0 <20.0.0
- react-dom
- peer / >=18.2.0 <20.0.0
Package usage
Use it
import { NumberTicker } from "easecraft";
<NumberTicker
announce="polite"
locale="en-US"
prefix="$"
value={12480}
/>Typed contract
API
| Prop | Type | Default | Purpose |
|---|---|---|---|
| value | number | required | Final semantic and visual value |
| from | number | 0 | Initial value on mount |
| as | HTML tag | "span" | Semantic host element |
| locale | Intl locale | runtime default | Locale-aware formatting |
| formatOptions | Intl.NumberFormatOptions | none | Number formatting rules |
| prefix / suffix | string | "" | Text around the formatted number |
| duration | duration token | number | "normal" | Transition duration in ms |
| easing | easing token | string | "move" | Anime.js easing |
| delay | number | 0 | Initial delay in ms |
| announce | "off" | "polite" | "assertive" | "off" | Live-region priority |
| onComplete | (value) => void | none | Final-value notification |
Release requirement
Accessibility
- Semantic value
- The hidden accessible node always contains the final formatted target.
- Announcements
- Off by default; polite or assertive modes announce only target changes.
- Reduced motion
- Updates immediately without creating an animation.
- Rapid updates
- New targets continue from the last visual frame instead of restarting.