Components built by Sandip Mandal
Large heading text with an animated gradient background visible through text using mask-image, creating a vivid typographic effect.
Animated gradient visible through text via mask-image SVG text mask
Decorative image frame using mask-composite with overlapping radial-gradient patterns to create a scalloped, organic border effect.
mask-composite shapes
Overlapping radial gradients create a wavy, organic border
A 3D perspective card with a holographic shimmer effect. The mask-image with radial-gradient follows your mouse, creating a dynamic rainbow sheen.
Content progressively revealed as you scroll using mask-image with animated mask-size. Watch text and visuals emerge from the darkness.
Watch this content emerge as you scroll
This demo uses a linear-gradient mask that expands as the element enters your viewport. The mask-image property progressively reveals more content from top to bottom as you scroll down the page.
Reveal: 10%
Before/after image comparison with an animated diagonal mask wipe. Hover to trigger the smooth transition revealing the second image.