Rectangular Text Reveal

Overview

Rectangular Text Reveal helps important words arrive with intent: a rectangular mask controls the entrance.

Best on short, high-emphasis text: headlines, launch lines, section openers, proof points. Avoid it on body copy, errors, legal text, or instructions, where legibility cannot be negotiable.

The production risk is the text disappearing into the effect. Ship the final phrase as genuine HTML, keep per-character motion out of the accessibility tree, and serve the settled, legible text immediately when motion is reduced.

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

• Graphic brand pages where a framed or block-based reveal matches the design language.
• Campaign lines where the mask is an art-direction choice, not a gimmick.
• Rectangular Text Reveal makes a short phrase arrive with timing while keeping the final text readable and indexable.

Not For

Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight.

Performance Budget

Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks.

Accessibility and Mobile

Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden.

Common Mistakes

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