Motion UIComponentsComponent

Split reveal

Masked text that rises line, word or character at a time from below a clip.

npx shadcn@latest add @motion/split-reveal
Install guideMotionScore
>Built withsplitText

API reference

Components

<SplitReveal />

Masked split-stagger text reveal.

children

string

Plain text to split and reveal.

granularity?

Granularity = "lines"

Unit the stagger runs over. Defaults to "lines".

as?

SplitRevealTag = "p"

Element to render. Defaults to "p".

delay?

number = 0

Timeline start offset in seconds.

start?

boolean = true

Whether this reveal may start. Defaults to true.

onRevealComplete?

VoidFunction

Called once after every entrance unit has settled.

hoverWave?

number

Hover wave amplitude as a multiplier on travel.hover. Omit for no wave.

hoverWaveDuration?

number = 1

Hover bounce duration multiplier on the ambient token. Defaults to 1.

hoverWaveStagger?

number = 1

Hover cascade speed multiplier on stagger.tight. Defaults to 1.

id?

string

Forwarded to the rendered element.

className?

string

Merged onto the rendered element.

ariaLabel?

string

Whole-line accessible name past the per-unit split.

ariaHidden?

boolean

Hide from assistive tech when a sibling sr-only copy carries the text.

Featured in

See the split reveal composed into full sections.

Hero: Split text revealAn example of a type-led product header whose headline and supporting copy reveal word by word through masked split-text animation, in Motion for React.