motion-headline
Wraps each word, character, or line in an overflow-hidden mask and springs them into view — a Locomotive-style reveal built on Motion One. Fully accessible via aria-label.
Preview
Import
Usage
by="chars"
Split into characters for a more expressive per-letter mask reveal.
by="lines"
Groups words into detected layout lines using getBoundingClientRect, then reveals each line as a unit. Ideal for multi-line hero headings.
variant="flip"
Each unit starts rotated 90° around the X axis and springs forward into place — a 3D card-flip entrance. Works with by="words" or by="chars".
delay
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | string | 'words' | 'words', 'chars', or 'lines' — unit to animate |
| | | string | 'slide' | 'slide' (mask-clip Y reveal) or 'flip' (3D rotateX card flip) |
| | | number | 0.06 | Stagger delay between each unit in seconds |
| | | number | 1 | Spring duration hint in seconds |
| | | number | 0 | Initial delay before the stagger begins, in seconds |
| | | number | 0.2 | IntersectionObserver threshold (0–1) that triggers the reveal |
| | | boolean | true | When true, the reveal fires only on the first intersection |
Accessibility
Sets aria-label on the host with the full original text and aria-hidden="true" on all child spans.
Screen readers receive the complete phrase without interruption by individual letter spans.
Respects prefers-reduced-motion: content snaps to its final visible state with no animation.