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.
- Shaders
- threejs
- glsl
- gsap
- canvas2d
- advanced
- medium perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1314 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 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.
- threejs
- glsl
- gsap
WebGL Chromatic Ripple on Click
Clicking anywhere on a full-screen WebGL quad drops a ripple into a procedural dusk gradient: up to five rings expand from a vec4 uniform array, bending the picture along the wavefront with red/blue aberration, fading as they grow; idle, it ripples by itself.
- threejs
- glsl
- gsap
- canvas2d
medium Halftone Dither Hover
A still life is printed through a fragment shader as a rotated halftone screen (dot size follows luminance), a 4×4 Bayer dither or line screen; hovering swells the screen under the pointer like a loupe and tilts its angle, both easing in with a per-frame lerp.
- threejs
- glsl
- gsap
- canvas2d
Featured medium Pixelation Transition
A full-bleed WebGL plane dissolves into a mosaic (cells grow 1 → 48 px), swaps to the next of three procedural pictures at the coarsest moment and sharpens back — on click, or automatically every 4 seconds.
- threejs
- glsl
- gsap
- canvas2d