NumberFlow

Animate changing numbers digit by digit with width transitions while preserving currency, grouping, and decimals.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use NumberFlow for scrolling number transitions. Compare NumericText when you need a different numeric transition. Use Text for static values without starting animation.

value supplies the number; an unparseable string displays as 0. locales and format control number formatting.
children supplies content before or after the number. Explicitly enable respectMotionPreference when the animation should follow the system reduced-motion setting.

Import

import { NumberFlow } from '@snowui-design-system/components';

Usage

Timer

Sizes

API Reference

Property	Type	Default	Example	Description
`value`	`number \| string`	`—`	`value="Example"`	Current number. An unparseable string is treated as 0.
`locales`	`string`	`"en-US"`	`locales="Example"`	Locale or locales passed to Intl.NumberFormat.
`format`	`Intl.NumberFormatOptions`	`{}`	`format={value}`	Number formatting options.
`trend`	`TrendResolver`	`0`	`trend={value}`	Explicit change trend. At 0, infer it from the previous and next numeric values.
`motionRole`	`TextMotionRole`	`"auto"`	`motionRole={value}`	Semantic role used to classify the numeric trend.
`transition`	`NumberFlowTransition`	`—`	`transition={value}`	Override the wheel transition duration.
`digits`	`Record<number, { max?: number }>`	`—`	`digits={digitsOptions}`	Set a cycling limit for specified digit positions, such as the tens position in a timer.
`numberPosition`	`"left" \| "right"`	`"right"`	`numberPosition="left"`	Position of children relative to the number.
`rollDirection`	`RollDirection`	`"normal"`	`rollDirection={value}`	Interpret the trend in its normal or reversed direction.
`loading`	`boolean`	`—`	`loading`	Show a Skeleton sized from the current text width.
`skeleton`	`boolean`	`—`	`skeleton`	Connect to Skeleton Context.
`renderHints`	`RenderHints`	`—`	`renderHints={value}`	Override Skeleton shape and size hints.
`respectMotionPreference`	`boolean`	`false`	`respectMotionPreference`	When true, honor reduced motion and show the final number immediately.
`font`	`string`	`—`	`font="Example"`	Font family for digits; inherits the container font when omitted.
`size`	`string \| number`	`—`	`size="Example"`	Font size for digits. Numbers become pixels; strings may use SnowUI tokens or CSS values.
`weight`	`string \| number`	`—`	`weight="Example"`	Font weight for digits; inherits the container when omitted.
`lineHeight`	`string \| number`	`—`	`lineHeight="Example"`	Line height of the root layout. The inner wheel retains its own clipped 1em window.
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	Final text color; inherits the container when omitted.
`align`	`TextMotionAlign`	`—`	`align={value}`	Alignment inside the number.
`motionColor`	`TextMotionColor`	`—`	`motionColor={value}`	Temporary color as all target characters settle from left to right. chromatic() spans every digit, retained digit, separator, and formatted currency symbol, without affecting children.
`children`	`Snippet`	`—`	`<NumberFlow>Content</NumberFlow>`	Additional content to the left or right of the number.