Liquid Hover Distortion (WebGL)
A Three.js plane shows a procedurally painted image that warps like liquid under the pointer (noise UV displacement weighted by distance and speed, with a velocity-driven RGB split); hovering a swatch melts it into a second image.
- WebGL & 3D
- threejs
- glsl
- gsap
- canvas2d
- advanced
- heavy · WebGL
- mobile: degraded
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 2195 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
WebGL Image Particles to Globe Morph
An original sunset poster drawn with canvas is sampled into 36,000 coloured points laid out as a flat image; press and hold and they spring onto a spinning globe — the picture wrapped as its map — through a burst of turbulence, then unfold when you let go.
- threejs
- glsl
- gsap
- canvas2d
WebGL RGB-Shift Image Hover
Four image tiles share one WebGL renderer; hovering a tile splits its red and blue channels along the pointer's direction (offset scales with velocity), zooms the UVs 1 → 1.08 over 0.8s and tears the first 150ms into glitched horizontal slices.
- threejs
- glsl
- gsap
- canvas2d
Featured WebGL Refractive Glass Blob
A noise-displaced icosahedron rendered as fake glass: the headline and drifting colour blobs behind it are rendered to a texture and refracted through the blob with chromatic aberration, a lime Fresnel rim and a specular hit, while it follows the pointer.
- threejs
- glsl
- canvas2d
WebGL Wavy Image Plane on Scroll
Four figures in a normal scrolling page are mirrored by WebGL planes on one fixed canvas, matched to their DOM rectangles every frame; the planes bow and ripple with scroll velocity in the vertex shader and zoom slightly on hover.
- threejs
- glsl
- canvas2d