← Back to the studio

The workbench

Not the showroom — the shelf where unfinished sketches sit. Pieces that survive eventually slip into something in Works.

#001 — Gradients in motion

Three takes on a slow-moving backdrop, one per technique. Drag the sliders to find a speed and amplitude you like.

Drift / CSS

Pure CSS gradients and transforms. Light, honest, nowhere to hide.

Tech
Tech
CSS
Size
~1 KB
Motion budget
low
License
MIT
0.35
0.35

Grain / SVG

SVG feTurbulence, raising the grain. Color edges fogged with sand.

Tech
Tech
SVG + SMIL
Size
~2 KB
Motion budget
mid
License
MIT
0.40
0.65

Flux / WebGL

A fragment shader drawing one continuous field. Heaviest of the three, and the one that reaches furthest.

Tech
Tech
WebGL2
Size
~6 KB
Motion budget
high
License
MIT
0.30
0.40

#002 — Brewing

Colors shift inside the tank — pale gold, cloudy white, deep amber. Which one pours is yours to choose. A look inside the moment before a Tipsy Tap pour. The long version that keeps cycling is fermenting behind the studio itself.

Brew / WebGL

Three beers, switched by hand to compare the color and warmth just before the tap. A single fragment shader. The auto-cycling version simmers as the studio's backdrop.

Tech
Tech
WebGL2
Size
~6 KB
Motion budget
high
License
MIT
Now pouring

Use arrow keys to switch beer

0.30
0.40

Sketches that grow up move over to Works. Take any fragment you like with you — it's MIT.