Perspective Text Reveal

Overview

Perspective Text Reveal helps important words arrive with intent: letters arrive with depth.

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 main 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

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

• Premium headlines where subtle depth fits the brand system.
• Short statements that can tolerate spatial motion without losing readability.
• Perspective 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 Perspective Text Reveal on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.