Text Fill Animation

Overview

Text Fill helps important words arrive with intent: text fill.

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

• Hero and pricing phrases where fill progression can reinforce emphasis.
• Short statements where colour or weight changes support meaning without replacing it.
• Text Fill 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 Text Fill on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.