Making The Lab

A place for experiments

The Lab is a place for useful things, playful questions and experiments. Some work here may become a maintained resource. Some may remain a small study. Both should have a clear place, without every experiment needing to pretend it is a finished product.

The website is itself the first project: an attempt to make that distinction visible in the way a collection is organised and presented.

Start with something worth observing

The design began with a firefly reference. The first task was not to choose a background effect, but to work out what made the motion interesting.

The early patterns had a problem. Individual flashes could look plausible, yet the field as a whole spent too much time waiting. Too many lights appeared to share a pause. The result felt programmed in a way the reference did not.

Further studies introduced overlapping activity, different apparent distances and regional variation in timing. Flash speed and drift became separate controls. The selected version keeps gentle movement and uneven activity without turning the whole field into one pulse.

This is an authored visual model, not a biological simulation. Its purpose is to give the page a particular atmosphere while leaving the text easy to read.

Let the study become part of the place

One early interpretation treated the lights as an experiment to feature in a card. That was not the intention. They belonged in the website itself.

That distinction changed the composition. Instead of giving the animation a separate destination, the design lets it sit within the page surface. The hero shares the background of the rest of the site. Light, type and empty space have to work together.

The result includes a pause control and respects reduced-motion preferences. The atmosphere is optional; the content is not.

Three different ways to organise attention

The homepage separates three editorial jobs.

Notes show what is recent. A short list of titles gives writing a chronological entrance without requiring a large card for every piece.

Projects show what belongs together. Their position is selected deliberately, rather than changing whenever something is updated. A project can contain its own explanation, resources and a reading path through related Notes.

Features invite a closer look. A selected piece can stay visible because it is useful or interesting, not simply because it is new.

These sections do not need one shared ranking rule. Keeping their rules separate makes the homepage easier to edit without distorting the collection underneath it.

Compare before committing

The process used successive rounds of alternatives: motion, page composition, marks and colour. The final direction was not the first attractive option.

A stepped arrangement was explored and then rejected. The selected layout puts recent Notes beside a two-column project collection, with featured pieces using more of the page as space becomes available. A folded L was chosen after comparing marks in the header and at favicon size. The final palette pairs an ivory surface with forest-green text and lights.

The useful part of those comparisons was not the number of variants. It was being able to hold most of the design steady while examining one decision.

From prototype to website

The selected design began as a browser-rendered prototype. The current implementation uses Astro to generate static pages from Markdown, with ordinary browser JavaScript for the animation.

Reading a Note, following a project link and finding the favicon do not depend on JavaScript. The content model keeps publication state, project relationships and editorial placement separate. Preview content stays out of feeds, and a release build checks exact reviewed files rather than treating a successful build as permission to publish.

The preserved design history remains separate from the website. The reference recording and private conversation are not public assets.

A small checklist for similar work

• Describe what the reference does, not just how it looks.
• Test a visual idea where it will actually be used.
• Separate content relationships from homepage placement.
• Keep a stable comparison when changing one part of a design.
• Give motion an off switch and make the underlying page work without it.
• Treat a prototype, a reviewed release and a live deployment as different states.

Current state

The current collection is deliberately small: this making-of project and two Notes on the editorial model and the animation. The implementation has automated checks for content relationships, local links and release boundaries. Future additions can develop the collection without changing those foundations.