Pricing

ScrambleText handbook

v1.4.1 · @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

Reveal target text through a sequence of changing characters, suitable for headings, short phrases, and status labels.

When to use it

Use it for a character-scramble effect when text changes. Use Text for static copy and FlowText for continuous text movement. Keep the final text readable when reduced motion is preferred.

  • text supplies the target text; mode, charset, and customSequence control how characters change.

  • Enable respectMotionPreference to honor the system reduced-motion setting. Important information should always be conveyed by the final readable text.

Quick start

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

<script lang="ts">	import { Button, Text } from '@snowui-design-system/components';	import { ScrambleText, chromatic } from '@snowui-design-system/components';	const statuses = ['Preparing docs', 'Checking APIs', 'Ready to publish'];	let statusIndex = $state(0);</script> <div style="display: flex; flex-direction: column; align-items: center; gap: var(--gap-4);">	<ScrambleText text={statuses[statusIndex]} mode="cascade" charset="glyphs" motionColor={chromatic()} size="--text-32" lineHeight="--leading-32" weight={600} />	<Button onclick={() => statusIndex = (statusIndex + 1) % statuses.length}>Update status</Button></div>

API

Keyword Type Default Description
text string | number "" Final text
charset ScrambleTextCharset "glyphs" Preset replacement character set
customSequence string — Custom replacement sequence, up to 64 graphemes
mode ScrambleTextMode "cascade" Discrete animation mode
respectMotionPreference boolean false Honors the system reduced-motion setting only when explicitly enabled
font string — Font family
size string | number — Font size
weight string | number — Font weight
color SnowUIColor | string — Final text color
lineHeight string | number — Line height
align TextMotionAlign — Alignment; inherits from the parent by default
motionColor TextMotionColor — Temporary color as target characters settle from left to right. Accepts a semantic color, CSS color, or per-character resolver; the default leaves colors unchanged.

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

Keyword

<script lang="ts">    import { ScrambleText, chromatic } from "@snowui-design-system/components";</script> <ScrambleText    text="DEPLOY READY"    charset="glyphs"    font="--font-mono"    size="--text-24"    weight={600}    color="Primary"    motionColor={chromatic()}/>

ScrambleText 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

ScrambleText types and states

Required Props: no named required Props.

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.

ScrambleTextCharset

Source: components/src/components/ScrambleText.svelte

export type ScrambleTextCharset = "glyphs" | "symbols" | "numbers";

ScrambleTextMode

Source: components/src/components/ScrambleText.svelte

export type ScrambleTextMode = "scramble" | "cascade";

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;