UV Magic Ink Reveal — CSS Mask Animation with Source Code

The UV Magic Ink Reveal is an interactive storytelling component where the screen appears dark or hidden until a “UV torch” (the cursor) passes over it, uncovering the secret content beneath. It’s a powerful way to add mystery and engagement to landing pages.

How It Works

This interaction utilizes CSS Masks. The top layer (the “ink”) is a solid black or dark div. We apply a mask-image: radial-gradient(...) to this layer. By linking the center of this radial gradient to the JavaScript mousemove coordinates, we effectively “cut a hole” in the ink layer, allowing the underlying “secret” layer to be visible only within that radius.

Use Cases

• Creative onboarding and “Easter Egg” hunting
• Themed horror or mystery game websites
• Highlighting premium features on a product page
• Interactive artwork and photography portfolios

How to Customize

• Torch Size: Change the 80px and 120px values in the radial-gradient to make the spotlight larger or smaller.
• Feathered Edge: Increase the gap between the two colors in the gradient (e.g., 50px to 150px) for a softer, more atmospheric light.
• Add Sound: Use the mousemove event to trigger a subtle “hum” or “click” sounds for a more immersive VR-like experience.

Frequently Asked Questions

Can I reveal images?

Yes! Anything placed behind the ink-overlay will be revealed. You can have high-definition photography, complex SVG patterns, or even videos playing in the “hidden” layer.

Is it mobile friendly?

On mobile, the mousemove event won’t fire naturally. You can either use touchstart and touchmove events to update the mask position, or gracefully display the content fully revealed for mobile visitors.

Why use webkit-mask-image?

While mask-image is widely supported, some older versions of webkit browsers (like Safari) still require the prefixed version for certain gradient functionalities. Including both ensures maximum compatibility.