React Clip-Path & Mask Effects
Thirteen components that animate the shape of what you can see instead of the element itself. Clip-path wipes, gradient masks, spotlight cutouts, torchlight that reveals a layer beneath. Masking composites on the GPU and never triggers layout, so it is the cheapest way to make something appear from nowhere. It is also the only way to show one layer through another without copying the content.
12 components · live previews
In This Collection
Mask Blur
Progressive edge blur. Stacked backdrop-filter layers dissolve content toward a chosen edge.
Mask
Redact
Copy that arrives fully classified under solid bars, then declassifies word by word. Each bar clears its own word and leaves an amethyst edge behind as the only evidence it was ever there.
Clip-path · Mask
Metallic Text
Chrome poured into a headline. A metal ramp clipped to real glyphs, a specular travelling across them, and a tinted wake following a beat behind.
Mask
InlayPro
A live shader material poured into real letterforms — molten rock, aurora, chrome, embers, tide. The text stays a real text node at transparent, so it is still selectable, searchable and read aloud exactly once while something genuinely animated fills it.
Mask
Stagger Menu
A menu overlay that blooms open as a clip-path circle spring while items stagger in with blur and rotation, then collapses back to its pill.
Clip-path
Torchlight
Content hidden in darkness; the cursor is a torch that reveals only what it touches.
Mask
Rift
A draggable tear between two overlaid scenes. Push past an edge and it resists, then snaps back.
Clip-path
Aperture
A camera iris. Blades pivot on a ring of pins and one shared angle drives the whole mechanism: wide open at 64% of the housing, past the centre and light-tight at zero, cutting the scalloped polygon a real iris makes on the way through.
Clip-path
Lens
A glass lens you drag across live content, bending it through an SVG displacement field with a real bevel and three-channel dispersion. It refracts a live duplicate of its own children rather than the page backdrop, which is the only version of this effect that works in Chrome, Safari and Firefox alike.
Mask
Tear
A ticket with a perforated stub you tear off for real. The ticket is drawn twice and cut from one seeded jag polygon: an attached layer holds everything still connected, the body plus the stub below the tear front, and a flap layer holds only the freed part, rotated about the frontmost attached point, so the torn edges mate tooth for tooth and the swing can never overlap the body. The seam fights back through a resistance curve, a failed tear springs shut, and a completed one lets the stub fall under gravity carrying the release velocity. The jag array comes from a seeded PRNG so the edge never boils between renders.
Clip-path
Parallax Rail
A pinned section where scrolling down drives content sideways across depth planes moving at different rates.
Mask
Mirage
Live, fully interactive HTML seen through moving air. An animated turbulence field displaces the real DOM subtree per pixel, with no snapshot and no canvas replica, so the text stays selectable, the button still takes focus and the link is still a link while the whole panel shimmers.
Mask