Animated Number

A slot-machine counter: every digit rolls independently on a spring. Locale-aware through Intl.NumberFormat.

Data Display

Playground

Tweak the props, the preview and the code follow.

Props

value1284

format

locale

<AnimatedNumber value={1284} />

npx @plumsydev/plum-ui add animated-number

import { AnimatedNumber } from "@/components/ui/animated-number"

<AnimatedNumber
  value={1299.9}
  format={{ style: "currency", currency: "EUR" }}
  locales="fr-FR"
/>

Any Intl.NumberFormat option works — currency, sign, decimals, locales.

ACME · Live

Percent and compact notation, rolling up from zero on mount.

Visitors

Bounce rate

Revenue

Prop	Type	Default
`value*` The number to display.	`number`	`—`
`format` Formatting options passed to Intl.NumberFormat.	`Intl.NumberFormatOptions`	`—`
`locales` Locale(s) used for formatting.	`Intl.LocalesArgument`	`"en-US"`
`transition` Motion transition used by every digit.	`Transition`	`spring.smooth`

Digits are keyed by their position from the right, so units stay units when the number gains a digit.
The full formatted value is exposed through aria-label; the rolling columns are hidden from assistive tech.