Thirty-two multi-pass WebGL2 effects, twelve page transitions, and the token layer underneath them. Written on raw WebGL2 — no three.js, no runtime dependency, nothing to install to look at it.
32
shaders
12
transitions
5
passes
0
runtime deps
HOW IT IS BUILT
A single fragment shader can only ever look procedural. The soft, cinematic falloff that designer-grade WebGL has comes from compositing. Scroll — each step below turns on the pass it describes, on the same image.
Why your gradient looks muddy — the four pieces of arithmetic underneath all of this, each one with a control you can drag.
One fragment shader draws the field — here, three colour wells summed as light rather than mixed. On its own it is crisp, flat, and unmistakably procedural.
A second pass warps that result along a flowing noise field. Nothing new is drawn; what already existed is pushed around, which is why it reads as a material rather than a pattern.
A separable Gaussian at half resolution, blended back in. Two passes cost 2N taps instead of N², which is the only reason a blur this wide is affordable at sixty frames.
The bright areas bleed. This is the pass that separates a gradient from a light source — light spills past its own edges, and a single-pass shader cannot fake it.
Chromatic aberration, vignette and grain, applied last. A few thousandths of channel offset is the difference between an image and an image that was photographed.
THE LIBRARY
Driving them all from one brand ramp produced thirty-two effects that were the same blue. Colour is art direction here; the components around it are what carry the design system.
TRANSITIONS
Painted on a canvas rather than assembled from elements. The first version built a few thousand divs and transitioned all of them at once, which is exactly as fast as it sounds.
Click any tile — it plays over this page. Thumbnails are real output: one frame of that style caught mid-sweep, drawn by the same renderer the transition uses.
GETTING IT OUT
A shader you can only look at in our lab is a demo of our lab. Tune one and take it with you.
1×, 2× and 4K. Rendered offscreen at full size, so a 4K still is genuinely 4K.
Six seconds off the live canvas, VP9 where the browser supports it.
One file carrying all five programs. No imports, no CDN, no build step.
Only the values you changed, so the URL shows the edit rather than burying it.