WaveReveal

WebGL image reveal with wave & dither

WebGL-powered image component with a retro dithered black and white effect and a mouse-driven flashlight that reveals the original color image beneath. Built for creative hero sections and portfolio pieces that leave a lasting impression. Features Dithered black and white using Bayer 4×4 matrix Continuous wave distortion via two overlapping sine animations Mouse flashlight reveals original color image in a circular area Water ripple effect follows cursor across the image surface Smooth fade transition on mouse enter and leave Optional vertical flip with correct mouse coordinate mapping Configurable wave speed, frequency and amplitude Adjustable reveal radius, softness and ripple size Configurable dither pixel size from fine to coarse Native WebGL — no Three.js, no external libraries Property Controls Image — Framer Asset upload Wave — speed, frequency, amplitude Reveal — radius, softness Ripple — mouse radius Dither — pixel size Transform — vertical flip toggle Technical Details Native WebGL with custom GLSL vertex and fragment shaders Bayer 4×4 dithering with three-level grayscale quantization Radial mouse reveal with smooth edge falloff RequestAnimationFrame loop with proper cleanup on unmount startTransition for React 18 performance CORS enabled image loading for cross-origin sources Use Cases Hero sections · Portfolio presentations · Interactive landing pages · Photography showcases · Brand reveals · Agency homepages SEO Keywords framer image reveal · framer webgl component · interactive image framer · framer hover effect · image distortion framer · framer glsl shader · framer mouse effect · webgl framer component · framer dither effect · image wave effect framer · framer interactive image · framer creative component · framer image effect · framer code component · framer ripple effect

WebGL image reveal with wave & dither