Text Convergence

Overview

Text Convergence pulls separate phrases into one claim. The effect works when alignment is the message.

Use Text Convergence when separate ideas should collapse into one claim. Brand campaigns, editorial intros, and technical launch pages can use it to make the final line feel earned. The page job is resolution: scattered words should arrive as one clear statement.

The thing to watch is split-text accessibility and layout shift. The final phrase must exist as readable DOM text, and the animated fragments must not change line height or screen-reader output.

Install

Usage

Component Code

Example Production Use Case

A brand campaign landing page opening with fragmented value words: Text Convergence pulls them into a single claim before the CTA appears. The outcome is resolution: the message feels assembled by the interaction, not pasted above it.

Best Used For

• Taglines or launch claims that become stronger when fragmented words visibly assemble.
• Single high-impact taglines that land harder by visibly assembling.
• Text Convergence creates a concrete scroll outcome that a static section would not deliver.

Not For

Not for body copy, instructions, or claims that must be clear before the animation resolves.

Not for phrases that need to be understood instantly above the fold.

Performance Budget

Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes.

Accessibility and Mobile

The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards.

Common Mistakes

• Splitting the accessible phrase into fragments for screen readers.
• Letting moving words cause horizontal overflow.
• Using convergence on claims that need instant comprehension.