Lab

Small pieces made to find out how something works — a typeface, a physics loop, a shader. Each one is live, so move, drag or click.

9 pieces. Everything here runs only while you can see it.

WeightA word whose letters swell where the cursor is. Variable font, per-letter weight.Move across the word

DriftThree thousand particles in a flow field, pushed aside by the pointer. Canvas 2D, flow field.Drag through it

FallLetters with mass. They drop, collide and pile up. A small physics loop, written for this page.Click to drop the word, then click the pile

MeltBlobs of molten light that merge when they meet. One of them follows you. WebGL 2 fragment shader, metaballs.Move to pull the light

FilingsA field of needles that all turn to face the cursor, like iron filings round a magnet. Canvas 2D, vector field.Move the magnet

Type is most of the design.

Motion has to mean something.

Fast is a feature.

Then take one more thing out.

DecodeLines that scramble through glyphs before they settle into words. DOM text, frame-timed scramble.Hover a line

PluckA string under tension. Drag across it and the wave runs out to both ends and back. Spring and wave simulation.Drag across the string

SpinA word wrapped round a cylinder, turned by the hand and coasting to a stop. CSS 3D transforms, inertia.Drag sideways

Most of the work is in the parts nobody notices until they are missing.

TorchA dark plate with heat underneath. The cursor is the only light. CSS masks driven by custom properties.Look around