||

Number Ticker

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Roll changing digits independently while preserving place value.

number-ticker-demo

Overview

Number Ticker animates each numeric place without re-keying the rest of the value. Use it for metrics whose changes matter, such as balances, counts, scores, or progress totals.

Installation
npx honestui@latest add number-ticker

Usage

 
import { NumberTicker } from "@/components/animated/number-ticker"

<NumberTicker value={12480} prefix="$" locale />

Accessibility

Assistive technology receives the complete formatted value instead of individual visual digits. Keep updates at a readable pace and avoid using rapid rolls for critical live data.

API Reference
PropTypeDefaultDescription
value*number–Value to display, rounded to an integer.
padnumber–Minimum number of digits.
durationnumber0.9Per-digit roll duration in seconds.
staggernumber0.04Delay between digit places.
prefixstring–Text before the value.
suffixstring–Text after the value.
localeboolean–Adds locale group separators.
blurbooleanfalseAdds a small blur during rolls.