Spotlight Cursor Reveal Hero

What this builds

A full-viewport hero with two visual layers: a visible surface (dark, muted, or blurred) and a hidden layer underneath (colorful, detailed, or illuminated). The user's cursor position drives a radial mask that reveals a circle of the hidden layer, creating a flashlight/spotlight effect. The reveal circle follows the cursor with a slight lerp delay for a fluid, physical feel.

• Two stacked full-viewport layers (surface and reveal)
• CSS radial-gradient mask on the reveal layer, positioned at cursor coordinates
• Lerped pointer tracking at 0.08-0.12 alpha for trailing feel
• Configurable spotlight radius (100-300px default)
• Optional feathered edge (gradient falloff from fully revealed to fully hidden)
• Touch support via touch-move tracking
• Static reveal or no-mask fallback for reduced-motion preference
• Mouse-leave behavior: spotlight fades out, surface layer fully visible