How this site was built.

The idea: one dot builds the page

The dot in our logo builds the home page. Every line, colour and word appears where it lands, so you can always see what made it.

A studio site has one job: show what we’d do for you. So we started the way we’ll start yours, with one clear idea, and built the whole site from it.

How we chose it

We didn’t pick the idea from a mood board. We wrote six different directions for the site and scored them against a written rubric in an internal review panel. Two came out close, so we refused to decide on prose. We built both opening scenes in code, a drop of ink and a woven thread, and the panel reviewed real screenshots side by side. Ink won, two votes to one.

Then we prototyped two ways for that drop to build a website, and the same panel reviewed them in the browser, frame by frame. One prototype won all three reviews: the one that draws on the real page.

The drop then became a character. We built two versions of the dot, one with no face and one with two tiny eyes, and chose the one with eyes. It looks around at its work as it builds, and when it’s done it goes home to the logo and falls asleep.

At first the dot built three concept sites. In the end we had it build this page instead, the top of the page you’re reading, so the page itself is the example.

The drawing

When the page loads, the dot wakes up in our logo, and the logo shrinks into the header with the dot riding on it. Then it builds the top of this page in four layers, the same four steps a project goes through: the words, then a rough sketch and a column grid, then the type and colour, then the parts that move and respond.

Every line is the dot’s path: it hops to the start of a line and runs along it, and the line grows from the point where it touches the page. Every word and every colour appears from the spot the dot lands on. Between steps it stops for a moment and looks at what it made.

The drawing is plain SVG laid over the real page. There’s no canvas and no 3D. The page underneath is ordinary HTML from the first moment, so screen readers and search engines get the finished words whatever the animation is doing. The story plays by itself; you can skip it at any time, and scrolling away simply finishes it.

The colour

For the type, the dot turns into a text cursor, selects the second line of the headline, and the selection becomes the finished italic. Every other colour spreads out from the spot where the dot lands: vermilion for the button, black for the side panel. Every colour is flat and opaque, so nothing turns muddy.

Then the dot bounces through the finished page. The navigation, the headline and the button show their real hover, focus and pressed states, and on a desktop screen it pulls a phone in from the edge to show the same page rearranging itself for a small screen. Last, it turns into the Book a call button for a moment, and hops home into the logo to sleep.

Our three concepts, Oarlock, Somerwell and Ovenbird, are separate live pages. The cards under “Our work” show screenshots and link to each one.

The motion language

Every duration and curve on the site comes from a short list of named tokens. Nothing gets its own timing. The one exception is the dot itself: its hops follow real arcs and it squashes and stretches as it lands, at its own steady pace.

Some things are banned outright: loading screens, counters that tick up from zero, letters that fly in one by one, magnetic buttons, cursor trails and “scroll to explore” prompts. The cursor is a plain dot.

Accessibility

We treated access as part of the design, not a pass at the end.

• The page is the content. The drawing is an SVG layer that screen readers skip. Every word, heading, link and form field is ordinary HTML, in reading order, and the animation can be skipped at any time.
• Reduced motion. With reduced motion turned on, in your system settings or with the toggle in our footer, nothing is animated. The top of the page shows the same four layers as still, captioned pictures, with a button to step through them.
• No script, forced colours. Without JavaScript you get the finished page as plain HTML and CSS. Forced-colour modes hide the drawing and keep everything else. The content is identical.
• Keyboard paths. Skip links to the content and to the brief, visible focus everywhere, and a form built from native controls.

WCAG 2.2 AA self-assessment: Not assessed yet. The full detail, including what we haven’t tested yet, is on our accessibility page.

Performance, measured

We set these budgets before we built the site. Here is what we measured, with the device, the tool and the date. If we haven’t measured something yet, it says so.

Stack

• Code only. No page builder, no theme and no stock photography. The work cards are screenshots of the concept builds, each linked to the live concept.
• Astro builds static HTML for every page, so the words arrive before any script runs.
• SVG draws the dot and every line it leaves, laid over the real page. There’s no canvas, no WebGL and no 3D library.
• Web3Forms delivers the brief to our inbox. Cal.com handles booking and loads only when you click.
• Cloudflare hosts the site and provides cookieless analytics.
• Playwright and axe-core test the pages, frame by frame, before each release.