Blur Text

Overview

Blur Text helps important words arrive with intent: words soften into view.

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

• Calm hero lines and section intros where words should soften into view once.
• Short claims where legibility matters more than spectacle.
• Blur Text 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 Blur Text on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.