Text Stream

Overview

Text Stream helps important words arrive with intent: text flows like signal through a line.

Use it for headlines, launch claims, short section openers, and one-line proof points. Do not use it on long body copy, error messages, legal text, or instructions where legibility is non-negotiable.

In production, the risk is losing the text to the animation. The final phrase must remain real DOM text, screen readers should not hear every animated character, and reduced-motion users should see the readable final state immediately.

Install

Usage

Component Code

Example Production Use Case

Use this as text-animation implementation guidance. Verify the shipped component API, splitting strategy, accessible text exposure, duplicated span handling, layout reservation, and reduced-motion behavior before relying on exact props, defaults, imports, or installation steps.

Best Used For

• Technical launch lines where streaming motion reinforces signal, data, or computation.
• Short hero phrases that can move once and settle cleanly.
• Text Stream makes a short phrase arrive with timing while keeping the final text readable and indexable.

Not For

Not for body copy, labels, error messages, legal copy, or any text users need to read immediately.

Performance Budget

Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks.

Accessibility and Mobile

Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate.

Common Mistakes

• Using Text Stream on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.