BlurText

Figma Source code

Reveal headings and short passages letter by letter with blur, fade, and slight upward motion while preserving text layout.

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 Text for static content, BlurText for a blurred reveal, SlotText or FlowText for vertical text replacement, and ScrambleText for character scrambling. BlurText accepts plain text rather than a rich-text subtree and does not interpret numeric or timer semantics. Use static Text for long passages to avoid the cost of per-character filters.

Import

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

Usage

Speed

Multiline

Motion color

Text updates

Animation

API Reference

Property	Type	Default	Example	Description
`text`	`string \| number`	`""`	`text="Ideas become clear."`	Final plain text, preserving spaces and line breaks.
`animated`	`boolean`	`true`	`animated`	When false, show the final text immediately and clean up internal animation.
`speed`	`number`	`1.5`	`speed={0.5}`	Finite positive character start rate. Stagger is 30ms / speed; each character lasts 600ms. Invalid values fall back to 1.5.
`playOnMount`	`boolean`	`true`	`playOnMount`	Play on the first mount after the visibility gate allows it.
`replayKey`	`string \| number`	`0`	`replayKey={replay}`	Replay the current full text when this value changes.
`respectMotionPreference`	`boolean`	`true`	`respectMotionPreference`	Follow the system reduced-motion setting; enabling it during playback also finishes immediately.
`font`	`string`	`—`	`font="--font-mono"`	Font family or font token.
`size`	`string \| number`	`—`	`size="--text-32"`	Font size or font-size token.
`weight`	`string \| number`	`—`	`weight={600}`	Font weight.
`lineHeight`	`string \| number`	`—`	`lineHeight="--leading-32"`	Line-height token, CSS length, or unitless multiplier.
`color`	`SnowUIColor \| string`	`—`	`color="Primary"`	Final text color, including PascalCase semantic colors.
`align`	`TextMotionAlign`	`—`	`align="center"`	Text alignment; inherits by default.
`motionColor`	`TextMotionColor`	`—`	`motionColor={chromatic()}`	Optional temporary per-character color, including chromatic(); returns to the final color afterward.