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';

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. 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`

<AnimatedMoney>

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

Prop	Type	Default
`currency`Required	`string`	`—`
`locale`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`	`—`
`showDecimals`	`boolean`	`false`