Into focuseverything at once, then the mark.

Experiment · OCT 2026

Canvas 2DMotion

Speed

What it is

There’s so much going on in the world, and so much of it is moving. My job as a developer is to take all of that noise, information and chaos, and stay focused on building meaningful things.

All the colours, all the ideas, all at once. They find their streams, come together, and blur into one soft field. Then the mark arrives, sharp and still.

You’ll find it in What’s with all the balls?, standing in for all the noise.

How it's built

01Six colours, forty dots each, all deterministic so every visit looks the same.
02Each beat is a target layout (scattered, streams, a disc); dots ease from one to the next with a small stagger.
03While dots are sharp they keep their own colour and never overlap. Colour only mixes once the blur starts.
04The blur is soft radial gradients, not a canvas filter, so it reaches 15% of the field and works in every browser.
05The jh logo is drawn from the real logo geometry, sharp and on top. The field is the world; the mark is what we're looking at.

src/lib/motion/pieces/into-focus.tsts

// Soft: the same dot, swelling and fading at its edge.
const rad = r0 * (1 + b * 2.4);
const outer = rad + reach; // reach = b × 15% of the field
const g = ctx.createRadialGradient(x, y, 0, x, y, outer);
g.addColorStop(0, `rgba(${rgb},${a})`);
g.addColorStop((rad * (1 - b)) / outer, `rgba(${rgb},${a})`);
g.addColorStop(1, `rgba(${rgb},0)`);

Into focuseverything at once, then the mark.

What it is

How it's built

More from the lab

Founding Member

The basement