Shader distortion
A GLSL shader applied to an image or mesh that warps, ripples, or distorts it.
What you're seeing
Images that melt, wave, or warp in organic ways — like heat shimmer, water, or interference patterns.
Where you'll see it
Hero images, transitions, hover effects on portfolio images.
Difficulty
Advanced — 5/5
Libraries that build it
Curtains.jsThree.jsPIXI.js
From the toolbox
Three.jsThe reason the browser does 3D at all. Every drivable world and scroll-through bookshelf in this gallery starts here.→The Book of ShadersThe gentlest on-ramp to fragment shaders — read it and "how is that even done" becomes "oh, that's noise and a gradient."→
Ready to prompt — paste this into your AI coding tool
"Apply a displacement shader to the hero image using Curtains.js, animate u_time for wave motion, strength 0.05, frequency 3.0"Seen in the wild
AstroDitherAn audio-reactive lab piece where dithering and fluid simulation collide — WebGPU pushed to art.→Pacôme PertantA motion & sound designer’s reel as a floating 3D spiral — project cards warp and motion-blur as they orbit past.→