The component renders a full-bleed image in a dimmed, desaturated resting state, then brings it into full color and clarity within a soft spotlight that follows the cursor with eased, lagging motion, accompanied by a subtle synthesized sound that responds to cursor movement while the spotlight is active.
The reveal radius, edge softness, dim level, desaturation, vignette, idle resting position, and sound volume are all exposed as Framer property controls, so the effect can be retuned or reused with any source image without touching the shader code.
Built entirely in code (custom GLSL fragment shader, React, Web Audio API, Framer's addPropertyControls API), with SSR-safe and static-render fallbacks so it degrades gracefully outside the live canvas context.
The component renders a full-bleed image in a dimmed, desaturated resting state, then brings it into full color and clarity within a soft spotlight that follows the cursor with eased, lagging motion, accompanied by a subtle synthesized sound that responds to cursor movement while the spotlight is active.
The reveal radius, edge softness, dim level, desaturation, vignette, idle resting position, and sound volume are all exposed as Framer property controls, so the effect can be retuned or reused with any source image without touching the shader code.
Built entirely in code (custom GLSL fragment shader, React, Web Audio API, Framer's addPropertyControls API), with SSR-safe and static-render fallbacks so it degrades gracefully outside the live canvas context.