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. Fully accessible via a visually hidden copy of the text.

Preview

Craft award-winning motion

Import

import 'motion-components/motion-headline'   // just this one
import 'motion-components'               // or the whole library

Usage

<motion-headline by="words" interval="0.06" duration="1">
  Craft award-winning motion
</motion-headline>

by="chars"

Split into characters for a more expressive per-letter mask reveal.

Motion

<motion-headline by="chars" interval="0.04" duration="0.9">
  Motion
</motion-headline>

by="lines"

Groups words into detected layout lines using getBoundingClientRect, then reveals each line as a unit. Ideal for multi-line hero headings.

Craft motion that earns attention

<motion-headline by="lines" interval="0.12" duration="1.1">
  Craft motion that earns attention
</motion-headline>

variant="flip"

Each unit starts rotated 90° around the X axis and springs forward into place, like a 3D card flip. Works with by="words" or by="chars".

Flip into view

<motion-headline variant="flip" by="words" interval="0.07" duration="0.9">
  Flip into view
</motion-headline>

delay

Motion that feels alive

<motion-headline by="words" interval="0.08" duration="1" delay="0.3">
  Motion that feels alive
</motion-headline>

Loop

Add loop to reveal the headline, hold, hide it and reveal again. hold sets how long it stays visible, gap how long it stays hidden.

Motion that feels alive

<motion-headline by="words" interval="0.08" duration="0.9" loop hold="1.4" gap="0.5">
  Motion that feels alive
</motion-headline>

The cycle runs only while the headline is on screen, and once is ignored. Add pause-on-hover to freeze it while the pointer is over the headline.

Properties

Attribute	Property	Type	Default	Description
by	by	string	'words'	'words', 'chars', or 'lines': unit to animate
variant	variant	string	'slide'	'slide' (mask-clip Y reveal) or 'flip' (3D rotateX card flip)
interval	interval	number	0.06	Stagger delay between each unit in seconds
duration	duration	number	1	Spring duration hint in seconds
delay	delay	number	0	Initial delay before the stagger begins, in seconds
threshold	threshold	number	0.2	IntersectionObserver threshold (0–1) that triggers the reveal
once	once	boolean	true	When true, the reveal fires only on the first intersection. Ignored with loop
loop	loop	boolean	false	Reveal, hold, hide and reveal again on repeat. The cycle runs while the headline is on screen
hold	hold	number	1.6	With loop, seconds the headline stays visible before it hides
gap	gap	number	0.5	With loop, seconds the headline stays hidden before it reveals again
pause-on-hover	pauseOnHover	boolean	false	Pause the loop while the pointer is over the headline, resuming on leave

JavaScript API

Trigger the headline programmatically with play() and cancel().

JavaScript API

–

Accessibility

Keeps the full original text in a visually hidden span and sets aria-hidden="true" on the split 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.