Slide Text Reveal

Overview

Slide Text Reveal helps important words arrive with intent: text moves into place with restraint.

Reach for it on headlines, launch claims, section openers, and one-line proof. Keep it away from body copy, error messages, legal text, and instructions, where reading has to be effortless.

In production, the risk is that the words get lost in the motion. The resolved phrase has to be real DOM text, the animation must not spell itself out to a screen reader, and a reduced-motion visitor should land on the final, readable state at once.

Install Command

Usage Code

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

• SaaS and agency section intros where the claim should arrive with quiet momentum.
• Short launch copy that benefits from motion but still reads instantly afterward.
• Slide Text Reveal makes a short phrase arrive with timing while keeping the final text readable and indexable.

Not For

Not for body text, labels, errors, legal copy, or anything a user must read right away.

Performance Budget

Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text.

Accessibility and Mobile

Make the whole phrase available to assistive technology a single time; where the text is split into per-character spans, mark the duplicates aria-hidden.

Common Mistakes

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