Text Cloning

Overview

Text Cloning helps important words arrive with intent: duplicated text creates motion depth.

Use it for headlines, launch claims, short section openers, and one-line proof points. Do not use it on long body copy, error messages, legal text, or instructions where legibility is non-negotiable.

The main risk is losing the text to the animation. The final phrase must remain real DOM text, screen readers should not hear every animated character, and reduced-motion users should see the readable final state immediately.

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

• Wordmarks, labels, and short claims where duplicated layers can create motion depth.
• Brand moments where the visual duplicate stays hidden from assistive technology.
• Text Cloning makes a short phrase arrive with timing while keeping the final text readable and indexable.

Not For

Not for body copy, labels, error messages, legal copy, or any text users need to read immediately.

Performance Budget

Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks.

Accessibility and Mobile

Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate.

Common Mistakes

• Using Text Cloning on long body copy.
• Removing the readable text from the DOM.
• Letting split text cause layout shift.