SlotText

Animate text changes character by character with vertical rolls for short labels, status, and counters.

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 SlotText for a slot-style text replacement animation. Use Text for static text, or NumberFlow or NumericText for numeric scrolling.

Update text for new content. replayKey can replay unchanged content; playOnMount controls animation on first display.
Set animated=false to display the result immediately. Enable respectMotionPreference when the animation should follow the system reduced-motion setting.

Import

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

Usage

Numbers

Gradient color

Sizes

API Reference

Property	Type	Default	Example	Description
`text`	`string \| number`	`""`	`text="Example"`	Final text to display.
`direction`	`SlotTextDirection`	`—`	`direction={value}`	Semantic direction for text and numbers. normal uses the shared trend direction; reverse inverts it completely.
`trend`	`SlotTextTrend`	`0`	`trend={value}`	Numeric trend. 0 infers direction: increasing values move up and decreasing values move down.
`motionRole`	`SlotTextMotionRole`	`"auto"`	`motionRole={value}`	Semantic role of the content. text disables numeric inference; other values describe ordinary numbers, timers, or countdowns.
`skipUnchanged`	`boolean`	`true`	`skipUnchanged`	Skip characters that did not change.
`interrupt`	`boolean`	`true`	`interrupt`	Whether new content interrupts the current animation. true transitions from the current frame to the latest text; false waits until the current run ends.
`replayKey`	`string \| number`	`0`	`replayKey="Example"`	Changing this value while text stays the same replays from empty slots. A text change runs the normal difference animation.
`playOnMount`	`boolean`	`false`	`playOnMount`	Replay from empty slots after mounting.
`animated`	`boolean`	`true`	`animated`	Enable animated text changes.
`respectMotionPreference`	`boolean`	`false`	`respectMotionPreference`	Follow the system reduced-motion setting only when explicitly enabled.
`transition`	`Partial<SlotTextTransition>`	`—`	`transition={value}`	Timing override for debugging or demos; does not change the default motion baseline. Refer to the project defaults.
`font`	`string`	`—`	`font="Example"`	Font family; accepts SnowUI tokens.
`size`	`string \| number`	`—`	`size="Example"`	Font size; accepts SnowUI tokens.
`weight`	`string \| number`	`—`	`weight="Example"`	Font weight.
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	Final text color; accepts PascalCase semantic colors.
`lineHeight`	`string \| number`	`—`	`lineHeight="Example"`	Line height; accepts SnowUI tokens.
`align`	`TextMotionAlign`	`—`	`align={value}`	Text alignment; inherits the parent by default.
`motionColor`	`TextMotionColor`	`—`	`motionColor={value}`	Temporary color as target characters settle from left to right. Defaults to no color change and supports per-character gradients through chromatic().