WebGL image hover
A hover effect on an image that uses a WebGL shader — stretching, rippling, or burning around the cursor.
What you're seeing
Hover over an image and it warps in a physically convincing way — like pressing on a membrane.
Where you'll see it
Portfolio grids, project thumbnails, hero images.
Difficulty
High — 4/5
Libraries that build it
Curtains.jsPIXI.jsThree.js
From the toolbox
Ready to prompt — paste this into your AI coding tool
"Use Curtains.js to wrap image in WebGL plane, apply displacement on mousemove targeting u_mouse uniform, lerp back on mouseleave"