Masked Heading

A large headline with a drifting colour mesh or image showing through the glyphs, revealed word by word.

Default

Move the pointer over the heading to slide the media under the letters. Changing the text, media, reveal, trigger, duration or stagger replays the entrance.

Designedinthedetails

Customize

Text

Media

Reveal

Trigger

Align

Fill Scale1.25

Parallax26px

Drift18px

Brightness1

Saturation1

Duration1.1s

Stagger0.09s

Text Size0.115

Weight700

Tracking-0.03em

Line Height1.06

Grayscale

API Reference

MaskedHeading

Prop	Type	Default	Description
`text`	`string`	`"Designed in the details"`	Heading copy.
`tag`	`string`	`"h2"`	Element the heading renders as, so it can carry the right semantics.
`mediaType`	`"image" \| "video"`	`"image"`	Whether the source showing through the letters is an image or a looping muted video.
`src`	`string`	`""`	Image or video URL.
`poster`	`string`	`""`	Poster frame used while a video loads.
`fillScale`	`number`	`1.25`	How far the media is zoomed past the heading. The overscan is what parallax travels into.
`parallax`	`number`	`26`	How far the media slides under the letters as the pointer moves, in px.
`drift`	`number`	`18`	Amplitude of the slow idle motion, in px. 0 holds the media still.
`brightness`	`number`	`1`	Brightness of the media.
`saturation`	`number`	`1`	Saturation of the media.
`grayscale`	`boolean`	`false`	Render the media in black and white.
`reveal`	`"rise" \| "wipe" \| "fade" \| "none"`	`"rise"`	Entrance style: words rise into place, a wipe sweeps across, or the whole block fades up.
`trigger`	`"view" \| "mount" \| "hover"`	`"view"`	When the entrance runs.
`duration`	`number`	`1.1`	Entrance duration, in seconds.
`stagger`	`number`	`0.09`	Delay between words, in seconds. Used by the rise reveal.
`align`	`"left" \| "center" \| "right"`	`"center"`	Text alignment.
`weight`	`number`	`700`	Font weight.
`tracking`	`number`	`-0.03`	Letter spacing, in em.
`lineHeight`	`number`	`1.06`	Line height.
`textScale`	`number`	`0.115`	Type size as a fraction of the container width, so the heading stays responsive.

Accessibility

Keyboard shortcuts and ARIA behavior.

The heading renders as a real heading element (h2 by default, set it with tag). The words are in the DOM as text.
The clip-path SVG and the media layer are decorative. Image alt text is empty.
With prefers-reduced-motion the heading is shown in its final state with no entrance.

Magnet Lines Meta Balls