Split reveal
Masked text that rises line, word or character at a time from below a clip.
API reference
Components
<SplitReveal />
Masked split-stagger text reveal. Splits its children with Motion+'s splitText, clips each visual line, and staggers the chosen unit up from below the mask. Reduced motion collapses to a plain fade or leaves the text untouched.
children
Plain text to split and reveal. Must be a string.
granularity?
Unit the stagger runs over. Defaults to "lines".
as?
Element to render. Defaults to "p".
delay?
Timeline start offset in seconds, before this block's own stagger.
hoverWave?
How far each unit travels on hover, as a multiplier on the theme's travel.hover token (e.g. 1 = one token of rise). Also the on/off switch: omit or 0 for no wave. Does not change speed; use hoverWaveDuration for the bounce and hoverWaveStagger for the cascade. Skipped under reduced motion.
hoverWaveDuration?
How long each unit's bounce takes, as a multiplier on the theme's ambient duration. Defaults to 1. Does not change how far units travel or how fast the cascade spreads.
hoverWaveStagger?
How quickly the ripple cascades across units, as a multiplier on the theme's stagger.tight token. Defaults to 1. Lower is a faster sweep (e.g. 0.2 ≈ 5×). Does not change bounce height or duration.
id?
Forwarded to the rendered element.
className?
Merged onto the rendered element.
ariaLabel?
Whole-line accessible name past the per-unit split.
ariaHidden?
Hide from assistive tech when a sibling sr-only copy carries the text.
Featured in
See the split reveal composed into full sections.
