motion-text-mask
Mask-clip reveal primitive. Clips slotted content behind an overflow:hidden boundary and springs it upward into view.
This is the same technique used inside motion-headline, exposed as a standalone composable wrapper for any content.
Preview
Import
Usage
Composing with motion-stagger
Wrap each line or word in its own motion-text-mask inside a motion-stagger to build a custom headline reveal without using motion-headline.
How it works
The host element has overflow:hidden set via Shadow DOM styles and vertical-align:bottom so the clip boundary sits at the text baseline.
An inner div starts at translateY(110%) — the extra 10% prevents sub-pixel bleed-through — and spring-animates to translateY(0%).
The content appears to rise from behind an invisible floor.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | number | 0.9 | Spring duration hint in seconds |
| | | number | 0 | Initial delay in seconds before the reveal |
| | | number | 0.2 | IntersectionObserver visibility threshold (0–1) |
| | | boolean | true | Reveal only on first intersection |
JavaScript API
Trigger the text mask programmatically with play() and cancel().
Accessibility
Respects prefers-reduced-motion: when enabled, the mask reveal animates instantly and the text is fully visible.