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.
- Hover
- 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. 1625 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.
Featured WebGL 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.
- threejs
- glsl
- gsap
- canvas2d
light Image Swap Crossfade
A four-product shop grid where each frame stacks a studio shot and an alternate view (detail, colourway or in situ); hover, focus or tap dissolves the alternate in (0.6s power2.inOut) as it settles from 1.06× while the primary fades out underneath.
- gsap
- canvas2d
light Image Zoom on Hover
A ceramics shop grid: hovering or focusing a tile scales its photograph to 1.15× inside a clipped 4:5 frame over 1s expo.out. The scale origin follows the cursor, a scrim and 'View piece' label fade in, and the badge, name and price never move.
- gsap
- canvas2d
WebGL Glitch Slice on Scroll Velocity
A sticky full-bleed WebGL hero reads the page's scroll velocity every frame and tears the picture into hash-seeded horizontal slices with an RGB split that scale with speed, settling exponentially when you stop; the headline's red and cyan ghosts follow.
- threejs
- glsl
- gsap
- canvas2d