ScrambleText

Reveal a target heading, short sentence, or status through a progressive character scramble.

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 ScrambleText for a character-scramble effect when text changes. Use Text for static copy and FlowText for continuous text displacement. Keep content readable under reduced-motion preferences.

text is the final text. mode, charset, and customSequence choose how characters change.
Enable respectMotionPreference when the effect should honor system reduced-motion settings. Important information must always be expressible as final readable text.

Import

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

Usage

Motion color

Sizes

API Reference

Property	Type	Default	Example	Description
`text`	`string \| number`	`""`	`text="Example"`	Final text.
`charset`	`ScrambleTextCharset`	`"glyphs"`	`charset={value}`	Preset replacement character set.
`customSequence`	`string`	`—`	`customSequence="Example"`	Custom replacement sequence, up to 64 graphemes.
`mode`	`ScrambleTextMode`	`"cascade"`	`mode={value}`	Discrete animation mode.
`respectMotionPreference`	`boolean`	`false`	`respectMotionPreference`	When explicitly enabled, follow the system reduced-motion setting.
`font`	`string`	`—`	`font="Example"`	Font family.
`size`	`string \| number`	`—`	`size="Example"`	Size of the rendered text.
`weight`	`string \| number`	`—`	`weight="Example"`	Weight of the rendered text.
`color`	`SnowUIColor \| string`	`—`	`color="Example"`	Color of the final readable text.
`lineHeight`	`string \| number`	`—`	`lineHeight="Example"`	Line height of the rendered text.
`align`	`TextMotionAlign`	`—`	`align={value}`	Text alignment; inherits the parent by default.
`motionColor`	`TextMotionColor`	`—`	`motionColor={value}`	Temporary color used as target characters settle from left to right. Accepts semantic colors, CSS colors, or a per-character resolver. Does not change color by default.