RGB Orb
A wobbling orb trails the pointer over a grey plaster still life; inside it the picture is re-sampled per channel like a prism and gradient-mapped between two drifting colours, stretching with speed and widening when pressed.
- Shaders
- threejs
- glsl
- gsap
- advanced
- medium perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1195 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.
medium Shader Lens Magnifier
A glass lens trails the cursor over an editorial poster drawn on a canvas: inside it the type is magnified with barrel distortion, the rim splits into RGB fringes and catches a crescent highlight, the lens grows while pressed and touch users drag it.
- threejs
- glsl
- gsap
- canvas2d
medium Noisy Track
The pointer drags a wake of noisy distortion through a full-bleed dusk-dune picture: a decaying float trail buffer masks an fbm displacement with static rows, grain and RGB split, widening with pointer speed, then heals.
- threejs
- glsl
- gsap
medium Slitscan
A poster is sliced into strips (or rings) that each slide by their own phase, so the image repeats in stepped copies like a slit-scan photo; a looping wave drives it, the pointer drags the nearest strips and scroll scrubs and shears the scan.
- threejs
- glsl
- gsap
- scrolltrigger
medium Ripples Background
A tiled pool picture sits under moving water: a wave height field in the fragment shader bends every lookup by its slope and gathers light where its curvature focuses, with swell, drop and interference patterns, stretch and speed.
- threejs
- glsl
- gsap