Circle Text Reveal

Overview

Circle Text Reveal helps important words arrive with intent: text appears through a circular mask.

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

• Campaign moments where the circular mask is part of the art direction.
• Short statements that can resolve fully without delaying reading.
• Circle 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 Circle Text Reveal on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.