Currency counter component

A currency amount rolls up like an odometer, its wheels locking from left to right.

$npx kinetograph add tally-rise

Props

Every prop has a default, so the component renders as it is. Change any of them in Studio or in code.

label
string = "Creator payouts"
The small line over the figure.
from
number = 1058.77
Where the count starts.
to
number = 1903.73
Where it lands (as the light goes out).
prefix
string = "$"
Before the figure, e.g. a currency sign.
decimals
integer = 2
Digits after the point.
glow
colour = "#202652"
The colour of the light at its core.
field
colour = "#0f0d1a"
The dark the light dies into.
labelColor
colour = "#52545f"
The colour of the label.
inkColor
colour = "#fffdfe"
The colour of the figure.
countSeconds
number = 0.9
Seconds the figure takes to land.
lightOutAt
number = 0.43
Seconds when the light starts to drain.
lightOutFor
number = 0.55
Seconds it takes to go out.
pushSeconds
number = 1.23
Seconds the whole push takes. The shape of it is measured.
holdSeconds
number = 0.3
Seconds the figure holds alone after the push.