Mask Text Reveal

Overview

Mask Text Reveal helps important words arrive with intent: lines rise through a clean mask.

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.

The risk in production 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

• Polished SaaS headlines and section intros that need controlled line-by-line emphasis.
• Short copy blocks where the reveal should feel clean, not noisy.
• Mask 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 Mask Text Reveal on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.