Pricing

FlowText handbook

v2.0.5 · @snowui-design-system/components

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Show changes in text and numbers with flowing transitions, suitable for dynamic labels, counts, timers, and countdowns.

When to use it

Use it for flowing transitions when text changes. Use Text for static copy; compare NumericText and NumberFlow first for number-only changes.

  • value is the target text or number. Use locales and format for number formatting; supply additional content through children.

  • motionColor, transition, and other public Props control motion. Explicitly enable respectMotionPreference to honor the system reduced-motion setting.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { Button } from '@snowui-design-system/components';	import { FlowText, chromatic } from '@snowui-design-system/components';	const headlines = ['Build with SnowUI', 'Ship components', 'Write better docs'];	let headlineIndex = $state(0);</script> <div style="display: flex; flex-direction: column; align-items: center; gap: var(--gap-4);">	<FlowText value={headlines[headlineIndex]} motionRole="text" motionColor={chromatic()} size="--text-32" lineHeight="--leading-32" weight={600} />	<Button onclick={() => headlineIndex = (headlineIndex + 1) % headlines.length}>Next headline</Button></div>

API

Keyword Type Default Description
value FlowTextValue — Target text or number
locales string "en-US" Locale for number formatting
format Intl.NumberFormatOptions — Number formatting options
trend FlowTextTrend 0 Numeric trend; 0 uses shared automatic trend classification
motionRole TextMotionRole "auto" Content semantics
transition FlowTextTransition — Timing override. Main animation and layout default to 550ms; per-digit spacing matches NumericText.
digits Record<number, { max?: number }> — Modulo for segmented timers, used only for shared trend classification
textPosition "left" | "right" "right" Position of FlowText content relative to children
rollDirection FlowTextRollDirection "normal" Controls shared vertical character-flow semantics; normal uses the shared trend and reverse flips it entirely
loading boolean — Loading state. Shows a skeleton when skeleton is also on; otherwise follows container state if omitted.
skeleton boolean — Controls skeleton display; follows container skeleton state if omitted
renderHints RenderHints — Skeleton shape and size hints
respectMotionPreference boolean false Honors the system reduced-motion setting when explicitly enabled
font string — Font family; inherits from container if omitted
size string | number — Font size; inherits from container if omitted
weight string | number — Font weight; inherits from container if omitted
lineHeight string | number — Line height; inherits from container if omitted
color SnowUIColor | string — Final text color; inherits from container if omitted
align TextMotionAlign — Text alignment
motionColor TextMotionColor — Temporary color for every target character on content change, including retained characters. The resolver’s index and total refer to grapheme positions and count in the full target text; characters return to the final text color afterward.
children Snippet — Content before and after the text

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

For composition, defaults, and limits, see When to use it and API above. Runnable code is in Quick start.

FlowText style overrides

Read the full LICENSE first; reuse that review for the same task, version, and scope.

First use public component Props to match the desired appearance, preserving the existing look where possible. If changes are necessary, follow the style selection and override order: use your own class (including Tailwind already in the project) or an instance style. The names below are public overrides actually consumed by source; check their scope and do not modify private DOM. Choose the correct SnowUI token family. External apps need not install SnowUI website utilities.

This component source does not directly consume a registered component-specific override. Style composed children through public parts or an explicit child; do not guess variable names.

Design guide · Tokens · Composition boundaries

FlowText types and states

Required Prop: value.

Bindable Props: this component declares no named two-way binding; handle state updates through public callbacks or its host.

Inheritance: Omit<FrameProps, "children">. Consult the base class public documentation; fields excluded by Omit cannot be passed through unchanged.

Shared Frame API · Back to API

The following type declarations are actually referenced by public Props and come from source. A Svelte Snippet denotes a content fragment; ComponentProps denotes the Props of the corresponding component.

FlowTextValue

Source: components/src/components/FlowText.svelte

export type FlowTextValue = string | number;

FlowTextTrend

Source: components/src/components/FlowText.svelte

export type FlowTextTrend = TextMotionTrend;

TextMotionTrend

Source: components/src/lib/text-motion/types.ts

export type TextMotionTrend = -1 | 0 | 1;

TextMotionRole

Source: components/src/lib/text-motion/types.ts

export type TextMotionRole = "auto" | "text" | "number" | "timer" | "countdown";

FlowTextTransition

Source: components/src/components/FlowText.svelte

export interface FlowTextTransition {        duration?: number;        layoutDuration?: number;        opacityDuration?: number;        deformDuration?: number;        stagger?: number;        easing?: string;        deformEasing?: string;    }

FlowTextRollDirection

Source: components/src/components/FlowText.svelte

export type FlowTextRollDirection = "normal" | "reverse";

RenderHints

Source: components/src/logic/frame-types.ts

export interface RenderHints {    variant?: SkeletonRenderVariant;    width?: string | number;    height?: string | number;    radius?: string | number;    rows?: number;}

SkeletonRenderVariant

Source: components/src/logic/frame-types.ts

export type SkeletonRenderVariant = "line" | "circle" | "rect";

SnowUIColor

Source: components/src/lib/color.ts

export type SnowUIColor = keyof typeof SNOWUI_COLOR_TOKENS;

TextMotionAlign

Source: components/src/lib/text-motion/types.ts

export type TextMotionAlign = "left" | "center" | "right" | "justify";

TextMotionColor

Source: components/src/lib/text-motion/types.ts

export type TextMotionColor = SnowUIColor | string | TextMotionColorResolver;

TextMotionColorResolver

Source: components/src/lib/text-motion/types.ts

export type TextMotionColorResolver = (index: number, total: number) => string;