NumericText

Animate only the changing portions of short text or numbers while preserving unchanged content.

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 NumericText to animate changing numeric values. Use FlowText or SlotText for full text replacement. Configure styling and formatting through the public API.

Update value to change the number; locales and format control its presentation. Set animated=false to show the result immediately.
The default respects reduced-motion preferences. direction and trend control movement; use the public typography and color props for styling.

Import

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

Usage

Numbers

Timer

Gradient color

Sizes

API Reference

Property	Type	Default	Example	Description
`value`	`NumericTextValue`	`""`	`value={value}`	Content to display.
`locales`	`string`	`"en-US"`	`locales="Example"`	Locale or locales used to format numbers.
`format`	`Intl.NumberFormatOptions`	`—`	`format={value}`	Options used to format numbers.
`animated`	`boolean`	`true`	`animated`	Animate content changes.
`trend`	`NumericTextTrend`	`0`	`trend={value}`	Movement trend: decrease, automatic, or increase.
`direction`	`NumericTextDirection`	`"normal"`	`direction={value}`	Semantic direction. normal follows the shared trend; reverse inverts movement for text, numbers, timers, and countdowns.
`motionRole`	`TextMotionRole`	`"auto"`	`motionRole={value}`	Semantic role of the content. text explicitly disables numeric inference; other values identify ordinary numbers, timers, or countdowns.
`transition`	`Partial<TextMotionTransition>`	`—`	`transition={value}`	Motion timing configuration shared with numeric-text-main. Demo Slow Mode uses { duration: 550, easing: reference } as its example.
`respectMotionPreference`	`boolean`	`true`	`respectMotionPreference`	Follow the system reduced-motion setting by default, consistent with numeric-text-main.
`font`	`string`	`—`	`font="Example"`	Font family.
`size`	`string \| number`	`—`	`size="Example"`	Rendered font size.
`weight`	`string \| number`	`—`	`weight="Example"`	Font weight.
`lineHeight`	`string \| number`	`—`	`lineHeight="Example"`	Line height.
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	Final text color.
`align`	`TextMotionAlign`	`—`	`align={value}`	Text alignment; inherits the parent by default.
`motionColor`	`TextMotionColor`	`—`	`motionColor={value}`	Temporary color while target characters settle from left to right. Does not change color by default; supports per-character gradients through chromatic().