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.
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
Image — Framer Asset upload
Wave — speed, frequency, amplitude
Reveal — radius, softness
Ripple — mouse radius
Dither — pixel size
Transform — vertical flip toggle
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
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
Hamim Reza
