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
Saadat Ali
