Number Ticker

Animated

A number that animates to its value.

#Installation

npx @dinachi/cli@latest add number-ticker

tsx

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

tsx

<NumberTicker value={12480} />

Variant	Use it when
`odometer`	A figure should feel counted rather than printed.
`counter`	The numbers in between matter, or the format is too complex to split into columns.
`flip`	Departure boards, scoreboards, anywhere the mechanical reference is the point.

The roll marks an arrival. A value that updates on a timer has already been read and only needs to be correct.

Use it for	Not for
A figure landing once: a total, a result, a stat on first paint.	A number that changes more than once every few seconds. Pass `live` and the figure updates instantly, with no roll.

A carry rolls forward, not back. Going from 1,199 to 1,200, the ones column steps one place rather than winding nine places backwards.
Columns keep their identity when the number gains or loses digits.

Only the final formatted value is announced. The moving parts are aria-hidden.
Reduced motion renders the plain value, honouring both the OS setting and <MotionConfig reducedMotion="always">. Under <MotionConfig isStatic> the ticker shows the real value rather than freezing at from.

Prop	Type	Default	Description
value	number	—	The value to count to
variant	'odometer' \| 'counter' \| 'flip'	'odometer'	Which effect to run: rolling digit columns, an interpolated value, or a split-flap board
from	number	0	The value each column starts from
decimals	number	0	Decimal places to render
locale	string	—	Locale passed to Intl.NumberFormat. Defaults to the user's locale
format	Intl.NumberFormatOptions	—	Extra Intl.NumberFormat options, e.g. { style: 'currency', currency: 'USD' }
live	boolean	false	Render the figure instantly with no roll. Set this when the value keeps moving; a number that is mid-animation whenever you look at it cannot be read
stagger	number	0.03	Seconds added per column, left to right. Keep it in the 0.03–0.08 range. Ignored by the counter variant, which has no columns
duration	number	0.4	Seconds for a column to settle
bounce	number	0	Spring overshoot, 0–1. Off by default: no gesture precedes this motion, so an overshoot reads as the figure being briefly wrong
startOnView	boolean	true	Count when scrolled into view rather than on mount
once	boolean	true	Only arm the reveal the first time it enters view. Later changes to value still animate; live is the prop that stops that