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
Import
Usage
by="chars"
Split into individual characters for fine-grained stagger control.
by="lines"
Groups words by their measured Y position to create true line-by-line reveals. Lines reflow naturally with the container width.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | string | 'words' | 'words', 'chars', or 'lines' — granularity of the split |
| | | number | 0.05 | Delay between each unit in seconds |
| | | number | 0.6 | Spring duration hint in seconds |
| | | number | 20 | Initial vertical offset in px |
| | | boolean | true | Animate only on first intersection |
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.