FlowText

Animate changes in text or numbers for dynamic copy, counters, timers, and countdowns.

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 FlowText for a flowing transition when text content changes. Use Text for static copy. For numeric-only changes, compare NumericText and NumberFlow first.

value is the target text or number. locales and format control numeric formatting; children supplies additional content.
motionColor and transition configure public motion. Explicitly enable respectMotionPreference when the animation should follow the system reduced-motion setting.

Import

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

Usage

Numbers

Gradient color

Sizes

API Reference

Property	Type	Default	Example	Description
`value`	`FlowTextValue`	`—`	`value={value}`	Target text or numeric value.
`locales`	`string`	`"en-US"`	`locales="Example"`	Locale or locales used for number formatting.
`format`	`Intl.NumberFormatOptions`	`—`	`format={value}`	Number formatting options.
`trend`	`FlowTextTrend`	`0`	`trend={value}`	Numeric trend. 0 uses the shared classification behavior to infer it.
`motionRole`	`TextMotionRole`	`"auto"`	`motionRole={value}`	Semantic role of the content for motion classification.
`transition`	`FlowTextTransition`	`—`	`transition={value}`	Override timing. Main animation and layout default to 550ms, with per-digit intervals consistent with NumericText.
`digits`	`Record<number, { max?: number }>`	`—`	`digits={digitsOptions}`	Modulo definition for a segmented timer; used only by shared trend classification.
`textPosition`	`"left" \| "right"`	`"right"`	`textPosition="left"`	Position of FlowText content relative to children.
`rollDirection`	`FlowTextRollDirection`	`"normal"`	`rollDirection={value}`	Vertical flow direction for all characters. normal follows the shared trend direction; reverse inverts it completely.
`loading`	`boolean`	`—`	`loading`	Loading state. Show a skeleton when skeleton is also enabled; when omitted, follow container state.
`skeleton`	`boolean`	`—`	`skeleton`	Control skeleton visibility; follows the container skeleton state when omitted.
`renderHints`	`RenderHints`	`—`	`renderHints={value}`	Hints for skeleton shape and size.
`respectMotionPreference`	`boolean`	`false`	`respectMotionPreference`	Follow the system reduced-motion setting only when explicitly enabled.
`font`	`string`	`—`	`font="Example"`	Font family; inherits the container when omitted.
`size`	`string \| number`	`—`	`size="Example"`	Font size; inherits the container when omitted.
`weight`	`string \| number`	`—`	`weight="Example"`	Font weight; inherits the container when omitted.
`lineHeight`	`string \| number`	`—`	`lineHeight="Example"`	Line height; inherits the container when omitted.
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	Final text color; inherits the container when omitted.
`align`	`TextMotionAlign`	`—`	`align={value}`	Text alignment.
`motionColor`	`TextMotionColor`	`—`	`motionColor={value}`	Temporary color for every target character during a content change, including retained characters. Resolver index and total refer to graphemes in the full target text; the final text color returns when motion ends.
`children`	`Snippet`	`—`	`<FlowText>Content</FlowText>`	Content before or after the text.