React Clip-Path & Mask Effects
Ten components that animate the shape of what you can see rather than 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 — and the only way to reveal one layer through another without duplicating the content.
10 components · all free
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 clearing its own word and leaving 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
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
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 — no snapshot, 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