motion-split

Splits text into words, characters, or detected lines and staggers them in on viewport entry. Fully accessible — screen readers receive the original text via aria-label.

Preview

Motion that feels alive

Import

Usage

by="chars"

Split into individual characters for fine-grained stagger control.

Motion

by="lines"

Groups words by their measured Y position to create true line-by-line reveals. Lines reflow naturally with the container width.

Craft motion that earns attention, one line at a time

Properties

Attribute	Property	Type	Default	Description
by	by	string	'words'	`'words'`, `'chars'`, or `'lines'` — granularity of the split
interval	interval	number	0.05	Delay between each unit in seconds
duration	duration	number	0.6	Spring duration hint in seconds
y	y	number	20	Initial vertical offset in px
once	once	boolean	true	Animate only on first intersection

JavaScript API

Trigger the split programmatically with play() and cancel().

JavaScript API

–

Accessibility

The component sets aria-label on the host with the original unsplit text and aria-hidden="true" on all child spans. Screen readers announce the full phrase — not individual letters or words. Respects prefers-reduced-motion: when enabled, content appears immediately at its final state.