Components

Animated Number

Numbers and amounts that count smoothly to each new value.

Net this month$0

Entries0

Import

import { AnimatedNumber, AnimatedMoney } from '@rinzai/zen';

Examples

Roll

With roll, each digit rolls to its new one, like an odometer.

Spent this month

API reference

<AnimatedNumber>

A number that counts smoothly to each new value (and up from zero when it first appears). Rounds to whole numbers while moving, so money in minor units never shows fractions. With roll, each digit rolls to its new one instead, like an odometer: easier to read when a total changes. Instant with reduced motion.

Prop	Type	Default
`value`Required	`number`	`—`
`className`	`string`	`—`
`duration` Milliseconds per change.	`number`	`650`
`format` Turns the (whole) number into text, e.g. with Intl.NumberFormat.	`((value: number) => string)`	`—`
`fromZero` Count up from zero when first shown (default), or start at the value.	`boolean`	`true`
`roll` Roll each digit to its new one, like an odometer, instead of counting.	`boolean`	`false`

<AnimatedMoney>

An amount of money (minor units) that counts to each new value.

Prop	Type	Default
`currency`Required	`string`	`—`
`value`Required	`number`	`—`
`className`	`string`	`—`
`duration` Milliseconds per change.	`number`	`—`
`fromZero` Count up from zero when first shown (default), or start at the value.	`boolean`	`—`
`locale` Defaults to the LocaleProvider's.	`string`	`—`
`roll` Roll each digit to its new one, like an odometer, instead of counting.	`boolean`	`—`
`showDecimals`	`boolean`	`false`