CameraShutterReveal — Frosted glass hover reveal effect

This component creates a high-end interactive image reveal using a custom WebGL shader. It simulates frosted glass with organic distortion and a mechanical shutter-style opening that follows the cursor.

Key Features

• Frosted glass shader with organic noise (FBM-based)

• Realistic refraction and subtle chromatic aberration

• Camera shutter-style reveal animation (two-stage motion)

• Cursor-following interaction with smooth interpolation

• Inner drop shadow for depth inside the reveal area

• Micro-grain + specular highlights for realism

• Fully responsive with object-fit image handling

Customization Controls

• Reveal width and height

• Glass distortion (refraction strength)

• Pebble density (glass texture scale)

• Shadow length and darkness

• Custom image input

Interaction Behavior

• Hover triggers a dynamic rectangular reveal

• Horizontal expansion leads, vertical follows (mechanical feel)

• Cursor position controls reveal location

• UI overlay corners animate and track pointer

Use Cases

• Portfolio image reveals

• Creative hero sections

• Product showcases

• Interactive storytelling layouts

• Premium landing page visuals