Mask reveal (clip-path wipe)
A reveal where a moving edge or growing shape uncovers content, like lifting a curtain instead of fading the content in.
See it
What it is
A mask reveal exposes content by animating the boundary of its visible area. On the web, the usual tool is CSS 'clip-path': animate an 'inset()' for a straight wipe, a 'circle()' for an expanding iris, or a 'polygon()' for an angled edge. The content stays put while the window over it changes shape.
Reach for it when a fade feels too soft and the entrance needs a clear direction: headings uncovered line by line, images wiped in from one side, or a product shot revealed through a growing circle. The wipe is one of cinema's oldest transitions, the iris closing at the end of a Looney Tunes short or the hard edge sliding between Star Wars scenes, but keeping the content stationary makes the web version read as a reveal rather than a slide.
Gotcha: clipping changes what is painted, not whether the content exists. A fully clipped link can still receive keyboard focus, so do not use 'clip-path' alone to hide interactive UI. Also keep the same shape function at both ends, since interpolating between unrelated clip shapes can jump instead of wipe.
Ask AI for it
Reveal this panel with a CSS clip-path wipe. Start at 'clip-path: inset(0 100% 0 0)' and animate to 'clip-path: inset(0 0 0 0)' over 320ms with cubic-bezier(0.22, 1, 0.36, 1). Keep the panel itself stationary, animate opacity from 0 to 1 over the first 120ms only, and use matching 'inset()' functions at both keyframes. Under 'prefers-reduced-motion: reduce', show the final unclipped state immediately. If the panel contains controls, keep the panel 'inert' until the wipe completes so clipped controls cannot receive focus.