Masked Reveal Heading

Multi-line headlines with an animated mask reveal and a style per line.

Topics: Content · Typography

Highlights

Default, outline and accent line styles
Optional accent dot per line
Fill color for variable-font outlines
Respects reduced motion

Accessibility

Renders a single heading with an accessible name, decorative lines are hidden from screen readers.

Privacy

Pure CSS animation, no external requests.

Live demo

See it in action

Everything below is the real element, configured in Breakdance. Try it with your keyboard, zoom in, or open the page on your phone.

Variant 1

Three lines, three styles

Default, outline and accent in one headline. Screen readers hear a single heading with the accessible name you enter, the animated lines themselves are decorative.

Design it. Reveal it. Ship it.

Variant 2

Two lines with accent dots

Accent dots can be switched on per line. The reveal animation is skipped for visitors who prefer reduced motion.

Privacy. Accessibility.

Variant 3

Outline only, with fill color

For variable fonts, the fill color hides overlapping contours inside the letters. Here the outline uses the brand color.

Breakdance Extended

More modules

All modules

Stable

Extension