We build by leaving things out

We build by leaving things out

Most of what makes a WordPress site good is what we choose to leave out of it. WordPress runs a large part of the web on a big promise: whatever you need, there’s a plugin for it. That promise is one of its greatest appeals, and its most costly trap. Almost everything that harms a WordPress site...

Engineering
16h ago

Standardise the foundations, not the brand experience

Detailed work at scale comes down to one judgement: which parts of a project are worth building fresh for every brand, and which should be solved once and reused everywhere. Shared functionality on one side, brand expression on the other Engineering teams have plenty of frameworks and platforms to...

Engineering
8d ago
Putting video back where it belongs

Putting video back where it belongs

The problem with putting video in a git repo. The repo kept getting heavier, sprint after sprint. We were committing big MP4s next to the code, builds were slowing down, and deploys with them. Case studies lead with video, so every new client made it worse. We needed the media to live somewhere...

Engineering
22d ago
Twenty-four modules, one wrapper

Twenty-four modules, one wrapper

Every case study was its own Astro page. That was the first problem. Each page had its own layout logic, its own spacing decisions, its own way of handling full-bleed sections versus contained text. Some used inline styles. Some used one-off SCSS files. None of them agreed on what "default spacing"...

Design
1mo ago
The form we actually trust

The form we actually trust

In February 2026, we replaced our contact form with a submission pipeline we built and own. For the two years before that, it was a Pipedrive iframe inside our page. We had no control over fields, no client-side validation, no error handling beyond whatever Pipedrive showed inside its frame. When a...

Engineering
1mo ago
We test the revenue path

We test the revenue path

The contact form is the only page on this site that generates leads. So that's where the tests live. We don't chase coverage numbers. What we have is a targeted set of tests aimed at the things that would hurt if they broke: the forms, the pipeline that processes submissions and the CI that catches...

Engineering
1mo ago
Letting type move

Letting type move

We treat type as something that sits still — fixed in place, headings always the biggest thing, motion bolted on at the end. For one Creative Spark we dropped those rules and asked what type could do once it started moving. Creative Spark is our in-house R&D session: ninety minutes, a single theme,...

Engineering
17d ago
The cache that doubled as a coordinator

The cache that doubled as a coordinator

The rendering engine is what visitors see. The data layer feeds it, and keeping it stable under load was the less glamorous half of the build. This is the second post in the ON Labs series. The first covered the WebGL engine: shaders, draw calls, the GPU-level stuff. This one is about what happens...

Engineering
29d ago
The testbed nobody will see

The testbed nobody will see

Every case study was a standalone Astro page with its own layout, its own component imports and its own way of breaking on mobile. Twenty-two of them. Each one built at a different time by a different combination of people, with whatever patterns felt right that week. Changing shared behavior (a...

Engineering
1mo ago
Two months in Three.js, we started over

Two months in Three.js, we started over

Two months into a Three.js prototype, the transition we wanted still wasn't there. We could see it in our heads and not on the screen. That was the moment we started over from scratch. Labs uses real-time shaders, physics-style interactions and transitions that happen at the GPU level. That...

Engineering
1mo ago

Putting video back where it belongs

Andy PurbrickAndy Purbrick Engineering
11 June 2026
4 min
Putting video back where it belongs

The problem with putting video in a git repo

The repo kept getting heavier, sprint after sprint. We were committing big MP4s next to the code, builds were slowing down, and deploys with them. Case studies lead with video, so every new client made it worse. We needed the media to live somewhere else, and to turn up in a size that suited whatever screen it landed on.

But where? The CMS was out: most aren’t built for video, so the first byte takes too long and the bandwidth bills mount up. The repo was out too, and we knew the downsides first-hand: files the content team can’t touch without a commit, and a history that keeps growing. A proper video CDN would handle the delivery, but they’re a pain to set up and never really talk to the CMS. That’s the awkward thing about web video: there’s nowhere good to put it.

The authoring side

Writing a case study, you drop a short asset ID into the MDX, something like ![hero](eA1XzRaWsAB), and the pipeline takes it from there. No encoding flags to remember, no breakpoints to define, and nobody exporting poster frames by hand.

📷 Split-screen: the short MDX asset ID on the top, the rendered html on the bottom showing six responsive sources One ID in the markdown, six responsive sources on the page.

The point of all this is that the asset ID is the stable interface. Everything behind it was free to evolve, and it did, without a single case study needing an edit.

Under the hood

The video component looks at what it’s been handed and decides how to deliver it. A short asset ID turns into fully responsive video, several formats and breakpoints. A streaming URL goes to adaptive bitrate. A plain file just plays. None of that is the author’s call. The component works it out from whatever it’s given.

The same principle for images

Images work the same way. Five layout presets, each with its own responsive widths and loading behaviour, and AVIF output by default, built at compile time. You pick the layout you want, and the component sorts out the format, the sizes and how it loads.

The infrastructure underneath

It started small: the Air.inc API wired up so assets could be referenced by a short ID, first just in Labs. From there it grew. Full Air.inc integration, then HLS streaming, then that same delivery across every case study. Next came mobile, with streaming that adapts to the device it’s playing on. The last move put SpeedyClip into the delivery layer.

Through all of it, the people writing case studies carried on exactly as before, same markdown, while the rendering quietly improved at every step.

Air is still the asset library and source of truth. The team manages the files, versions and metadata there; the site references those assets by stable IDs. SpeedyClip takes over at the delivery point, turning the Air source into the responsive streams we serve on the site.

That means SpeedyClip handles every video embed on the site without replacing Air in the workflow. It serves optimised streams off the same kind of global edge network the big streaming services run on, the sort of setup you’d normally have to stitch together yourself on every project. All of it is built around load speed and time-to-first-byte. The clever part is how it starts. It streams over HLS, but the opening segment is only two or three seconds long, so the video starts playing almost as soon as the poster appears, instead of waiting for a bigger file to land. Not many people bother going that far.

There’s a lot more to say about SpeedyClip, what it actually is and why a studio ends up this deep in video delivery. That’s a post of its own.

On the visitor’s end

A poster image holds the layout while the video loads, so nothing jumps around as it arrives. The video fades in instead of popping into place. On a slow connection the smaller breakpoint files turn up faster than one big high-res file would, so even on patchy mobile the page stays together.

The poster holds the space, the video fades in over it, and there’s no jump or empty box while it loads.

Twenty-eight case studies now open with video that doesn’t shift the layout, doesn’t drag a history of MP4s behind it, and adapts to whatever connection it loads on. None of which changed how a single case study gets written.

June 2026

William Badcock, A Touch-stone for Gold and Silver Wares (1677)

Hallmark

The word hallmark comes from an actual hall, Goldsmiths’ Hall in London, where since 1300 silver has been tested against the sterling standard and struck with the hall’s mark, so you could trust it without knowing the maker.

May 2026

Alan Kay: His Sketches, Piano, and Computer

Notes

A note can be a written record, a struck key, or the act of noticing, and each sharpens how we understand the world. A piano is an instrument, but also a technology built on the notes it makes possible.

April 2026

Photographs of a red cloth bound travel handbook from 1894. The book is open to show pages with maps and illustrations.

Change

A red cloth spine caught my eye in a Tokyo bookshop last week. A handbook for travellers in Japan, fourth edition, 1894. I was 132 years late, yet most of what it describes still stands.

Mar 2026

Screenshots from the development process of the new ON release notes page

Taking the temperature

You walk into a room and you can feel it. Whether there is energy or not. We describe someone as warm. We talk about things cooling down. Temperature is something we sense before we have words for it.

Feb 2026

Pixelised image of a horse running

Rethinking video, prototyping faster, and encoding brand logic

In Japanese, the character for hand is 手. Joined with the character for craft, it becomes 手仕事 (teshigoto), or handwork.

Jan 2026

Illustration showing the laying of undersea Atlantic telegraph cables

Transmission

The first dispatch of a new year, and I’m thinking about transmission: the message, the vessel that carries it, and what happens when they finally meet their destination.

Want to know more?

On the last Sunday of every month, we share insights on creative thinking, emerging tools, technology.