Special/NumberFlow

NumberFlow

Odometer-style rolling digit animation. Each digit is a vertical column of 0–9 that slides to the correct position using spring physics. The comma separators and prefix/suffix are static — only the actual digits animate.

import { NumberFlow } from "@animui/ui"

Counter

Pricing display

/month

How it works

Each digit position renders a vertical strip containing all digits 0–9. A useSpring motion value drives the strip's translateY — when the digit changes, the spring smoothly scrolls the column to the new value. Only numeric characters animate; separators (commas, dots) and prefix/suffix are static spans.

Props

Prop	Type	Default	Description
`value`	`number`	—	The number to display. Changing this triggers the rolling animation.
`prefix`	`string`	`""`	Static text prepended (e.g. "$", "€").
`suffix`	`string`	`""`	Static text appended (e.g. "%", "px").
`decimals`	`number`	`0`	Number of decimal places to display.
`className`	`string`	—	Additional classes.