WaveReveal

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