Sixth Field — WebGL
Where GSAP stops being enough and the GPU starts.
Hover either panel to dissolve between two frames through a noise threshold. Scroll hard and the whole image bends and separates into colour channels. No three.js — 120 lines of raw WebGL, driven entirely by GSAP.
Two uniforms do all of it.
uProgress is a hover value between 0 and 1; the shader uses it as a moving threshold over a noise field, so the dissolve has a shape rather than being a crossfade. uVelocity comes straight from ScrollTrigger.getVelocity(), normalised and clamped, and it drives both the bend and the chromatic split.
GSAP still owns every value. The shader is a renderer; it holds no state and makes no decisions.
LibraryNone — raw WebGL
Shipped size~4 KB of GLSL
Draw calls1 per panel per frame
FallbackThe <img> underneath