Spotlight Text

Overview

Spotlight Text helps important words arrive with intent: a highlight moves across the words.

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 thing to watch 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

• Short claims, metrics, or product phrases where one phrase needs guided emphasis.
• Text moments where the highlight supports attention without hiding the sentence.
• Spotlight Text 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 Spotlight Text on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.