A Framer component that hides an image under a glass overlay and reveals it only where the cursor moves — in real time, through a dual-canvas rendering engine.

Key Features

• Five overlay modes: Blur, Glass, Glassmorphism, Frosted, Tinted Glass

• Dual-canvas rendering (background + spotlight layer)

• Circle and Square cursor shapes with dotted borders

• Square cursor has four corner brackets (viewfinder style)

• Adjustable spotlight radius (120px minimum)

• Intensity slider per overlay mode

• Tint color picker (Tinted Glass mode)

• Light-themed controls pill at center bottom

• Hint text that fades on first interaction

• Caption text slot for credits or titles

• ResizeObserver — fully responsive

• Full property controls in Framer panel

Why It Is Valuable

• Turns passive imagery into an interactive moment

• Creates curiosity-driven engagement

• Signals craft and intentionality to visitors

• Ownable interaction idiom — not a generic hover

• No custom code required

• Works at any breakpoint, any container size

Where to Use

• Photography portfolios

• Fashion and luxury e-commerce heroes

• Architecture and interior design presentations

• Editorial and magazine lead images

• Agency and studio about pages

• Product landing pages and feature reveals

• Event and conference sites