KQ-1383 · TALLY/ROLL

Tally Roll

A count-up figure built from mechanical digit wheels in little housings: every wheel runs its own ease-in-out drive and is coupled to it by a detent spring whose stiffness is a prop (damping ratio 0.62), so it lags a touch as it spins up and rocks into its detent as it lands; lower places spin extra turns and land first, and each higher place lands a stagger later, like carries arriving up a meter. The figure is laid out from Intl's own parts (number, currency, percent, or a hand-built compact form that server and browser agree on), a change mid-roll bends every wheel to the new figure without a jump, and fast wheels blur while leading zeros stay dim. The tally is a button: a press or Enter or Space spins the wheels forward to zero, as a tally's reset knob does, and counts again.

KQ-1383 · TALLY/ROLL

Gaugeworks · Deliveries this year

Press the figure to count again.

landed · deliveries

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/tally-roll

Props

value: number; default —; The figure the wheels roll to; a change mid-roll bends the roll.
from: number; default 0; Where the first roll starts.
format: "number" | "currency" | "percent" | "compact"; default "number"; How the figure is written; compact is built by hand so server and browser agree.
decimals: number; default 0 / 1; Fraction digits: 0 for number and currency, 1 for percent and compact.
currency: string; default "USD"; The ISO currency for the currency format.
locale: string; default "en-US"; The formatting locale; digits are always Latin so they fit the wheels.
prefix: string; default —; Fixed text before the figure.
suffix: string; default —; Fixed text after the figure.
duration: number; default 1600; Until the highest place lands, ms.
stiffness: number; default 420; The detent spring each wheel is coupled to its drive by: low rocks, high clicks dead.
stagger: number; default 90; Each higher place lands this much after the one below it, ms.
revolutions: number; default 2; The most extra turns a lower wheel makes on a long roll.
housing: boolean; default true; Draw a window around each wheel.
dimZeros: boolean; default true; Dim the leading zero wheels, so 01,248 reads as 1,248.
trigger: "mount" | "inView" | "hover" | "manual"; default "inView"; When the first roll runs; manual shows the figure and only rolls on change or press.
once: boolean; default true; Roll only the first time it is seen; otherwise it counts again from `from` each time it comes back into view.
delay: number; default 0; Wait before the first roll, ms.
replayOnPress: boolean; default true; The tally is a button: pressing resets the wheels and counts again.
sound: boolean; default false; Ticks as faces pass and as each wheel lands, only for rolls the visitor caused.
as: "span" | "div" | "p" | "strong" | "h2" | "h3"; default "span"; The root element.
onRollStart: () => void; default —; A roll began.
onComplete: () => void; default —; Every wheel has landed.
className: string; default —; Classes for the root; the wheels inherit its size, weight and colour.

Prop	Type	Default	Description
value	number	—	The figure the wheels roll to; a change mid-roll bends the roll.
from	number	0	Where the first roll starts.
format	"number" \| "currency" \| "percent" \| "compact"	"number"	How the figure is written; compact is built by hand so server and browser agree.
decimals	number	0 / 1	Fraction digits: 0 for number and currency, 1 for percent and compact.
currency	string	"USD"	The ISO currency for the currency format.
locale	string	"en-US"	The formatting locale; digits are always Latin so they fit the wheels.
prefix	string	—	Fixed text before the figure.
suffix	string	—	Fixed text after the figure.
duration	number	1600	Until the highest place lands, ms.
stiffness	number	420	The detent spring each wheel is coupled to its drive by: low rocks, high clicks dead.
stagger	number	90	Each higher place lands this much after the one below it, ms.
revolutions	number	2	The most extra turns a lower wheel makes on a long roll.
housing	boolean	true	Draw a window around each wheel.
dimZeros	boolean	true	Dim the leading zero wheels, so 01,248 reads as 1,248.
trigger	"mount" \| "inView" \| "hover" \| "manual"	"inView"	When the first roll runs; manual shows the figure and only rolls on change or press.
once	boolean	true	Roll only the first time it is seen; otherwise it counts again from `from` each time it comes back into view.
delay	number	0	Wait before the first roll, ms.
replayOnPress	boolean	true	The tally is a button: pressing resets the wheels and counts again.
sound	boolean	false	Ticks as faces pass and as each wheel lands, only for rolls the visitor caused.
as	"span" \| "div" \| "p" \| "strong" \| "h2" \| "h3"	"span"	The root element.
onRollStart	() => void	—	A roll began.
onComplete	() => void	—	Every wheel has landed.
className	string	—	Classes for the root; the wheels inherit its size, weight and colour.