Pixelate
Distortion
RGB Shift
Wave
Shader Effects
GLSL Image Effects on Hover
A 2×2 grid of images, each with a unique shader effect triggered on mouse hover. The effects — pixelation, barrel distortion, RGB channel splitting, and wave displacement — all run entirely on the GPU via custom fragment shaders.
Each shader receives a progress uniform that smoothly interpolates on hover, plus mouse position for effects that follow the cursor. The result is buttery-smooth, resolution-independent image effects with zero JavaScript per-pixel work.
Tech Stack
Three.jsReact Three FiberGLSLCustom Fragment Shaders
Key Learnings
- Fragment shaders let you manipulate every pixel independently on the GPU — ideal for real-time image effects.
- Smooth transitions come from lerping a progress uniform each frame rather than snapping values on hover.
- UV-space mouse tracking gives shader effects a natural, interactive feel without raycasting complexity.