Flickering Torchlight Reveal Overlay

This is a Flickering Torchlight Reveal Overlay. It pairs a custom cursor with a dynamic radial mask to selectively expose underlying content. Its function is to restrict visibility to the immediate cursor vicinity, replacing open layouts with an exploratory, constrained interaction model.

Specs

• Weight: ~2 KB. Minimal footprint.
• Performance: High. Updating the --x, --y, and --r custom properties continuously forces raster mask repaints, but standard browsers hardware-accelerate mask-image efficiently.
• Theming / Customization: Base radius is bound to an HTML range input. The gradient falloff (currently 0% to 60%) dictates the softness of the light edge.
• Responsiveness: Tracks viewport dimensions natively. Supports touchmove events for mobile interaction.
• Graceful Degradation: [!] If CSS mask-image is unsupported, the overlay remains a solid black block, rendering the content underneath permanently invisible. A fallback opacity toggle or an @supports query is necessary for older browsers.

Anatomy

• HTML: A structural #wrap containing the content (an iframe in this case), the black #overlay div, a #custom-cursor SVG, and a #controls panel.
• CSS: Positions the overlay absolutely and applies -webkit-mask-image mapped to CSS variables. Hides the native cursor to preserve the illusion.
• JS: Tracks mouse and touch coordinates to update the center of the radial mask. Executes a continuous loop to modulate the mask’s radius.

Logic

The standout mechanism is the mathematical generation of the fire flicker.

let flickerTime = 0;

function animateFlicker() {
	flickerTime += 0.05;
	const flickerOffset = Math.sin(flickerTime * 3) * 3;
	overlay.style.setProperty("--r", radius + flickerOffset + "px");
	requestAnimationFrame(animateFlicker);
}

Instead of using CSS keyframes or importing an animation library, the script injects a simple sine wave offset (Math.sin()) into the radius variable on every frame. This continuously expands and contracts the radial gradient. The mathematical output creates a subtle, unstable breathing effect that perfectly mimics the erratic burning of a torch.

Feel

Claustrophobic and investigative. The darkness forces absolute focus on a single spatial point. The rhythmic flicker of the mask radius adds a psychological layer of analog instability, transforming a sterile clipping mask into a tangible, fragile light source.