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.
- Shaders
- threejs
- glsl
- gsap
- canvas2d
- intermediate
- medium perf
- mobile: full
- reduced-motion ✓
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
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
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
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