Startups are prototypes

Startups are prototypes

A startup isn’t just an early-stage company. It’s a mechanism to reduce uncertainty. Every early customer, product release and funding round exists to answer one question: have we learned enough to justify the next investment? A startup is essentially a super complex prototype designed to validate...

Strategy
2d ago
Shapeshifting the Future

Shapeshifting the Future

Every year we open our doors for a week to a student trying to find their way into the industry. Not work experience in the shadowing-only sense but a real placement, with a real brief. We do the same for a roomful of UCL students, in the studio for an afternoon. From the outside, a career in this...

Studio
8d ago

Your biggest asset in an RFP, your website

Your biggest asset in an RFP, your website. I’ve spent most of my career in B2B, and at Made by ON I spend my weeks talking to leaders of the world’s most exciting B2B businesses. Lately those conversations keep circling one question, which I put to our strategists and UX team: what happens when...

Studio
21d ago
From static frames to a creative operating system

From static frames to a creative operating system

Looking beyond the flashy generative UI, shader effects and animation features at Figma Config signaled a deeper, more structural shift: the transition from a static repository of files and rules into a behavioural operating system. I left San Francisco with a camera roll of screenshots and pages...

Design
Engineering
1mo 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
2mo 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
2mo ago
The theme is the guardrail

The theme is the guardrail

WordPress can now describe itself to machines. WordPress 7.0 landed back in May with AI infrastructure in core. There’s an AI Client, a Connectors screen where the provider keys live, and the Abilities API, which actually arrived back in 6.9. Abilities are how core, plugins and themes describe what...

Engineering
15d ago
Cache Components: the right content at the right time

Cache Components: the right content at the right time

Cast your mind back to the earlier days of the world wide web. A website was essentially a digital document, the web a library, and the internet the mechanism of delivery. Updating a document meant editing HTML on your computer and uploading it to a server by hand, usually over FTP. In 1995 PHP...

Engineering
29d ago
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
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
2mo ago

Two months in Three.js, we started over

Mike LeonardMike Leonard Engineering
28 May 2026
2 min
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 behavior took roughly 6,000 lines of hand-written WebGL 2 and four months of iteration. We needed direct control over every draw call and every animation frame. Existing libraries would have saved time upfront and cost us flexibility every week after.

Straight to the GPU

There’s no Three.js, no Pixi, no framework sitting between our code and the GPU. A single setup module compiles vertex and fragment shaders, builds a shared quad and manages four shader programmes. Every draw call goes through it.

Shaders manipulating geometry in real time

Feeding it real data

From there, modules handle different responsibilities: the canvas and render loop, the orbs with its GLSL transforms (bulge, twist, rotate, scale) layered through custom blend modes, full-screen post-processing for bloom and grain, a raycaster for hover detection, texture management, input handling, performance monitoring. Shared helpers cover noise functions, color math and UV manipulation.

The data layer pulls project boards and assets from the Air API, then caches them through Netlify Blobs with a distributed lock mechanism. The lock prevents stampedes when the cache expires: only one request refreshes the data while others serve the stale version.

We rebuilt that integration in October 2025 after the original approach (fetching on every request) started hitting rate limits. The lock-and-cache layer landed in February 2026 alongside SpeedyClip for asset delivery.

The UI around the canvas

A set of Astro components handles everything outside the WebGL viewport: search, filters, tabs, scroll controls, hover labels. They talk to the canvas through a bridge layer that translates DOM events into render-loop updates. The result is that filtering a project list triggers a shader transition, not a page reload.

Timeline

October 2025: Air API integration rewrite.

January 2026: Soft launch of Labs.

February 2026: Netlify Blobs caching with distributed locks and SpeedyClip rollout.

The UI and the canvas talk through a bridge layer for filtering.

What 6,000 lines bought us

Labs is often the first thing a potential client sees when they explore our work. The way it moves and responds tells them something about how we think before they’ve read a word.

Writing your own renderer is a terrible idea for most projects. The visual behavior we wanted doesn’t fit anyone else’s scene graph. The cost is 6,000 lines we maintain forever — and the page makes that worth it.

Jul 2026

One of the 214 hand-drawn sheets of Inō’s map of Japan, and his team surveying Mitarai in 1806

Measure

In 1800 a retired sake brewer named Inō Tadataka set out to walk Japan’s coast. He spent 17 years and 35,000 km on foot, and died before the work was done. His team finished the first accurate map of Japan in 1821, and it stayed in use for a century.

Jun 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.

Apr 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.

Want to know more?

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