Code Kings
Under the hood

How this site is built.

Our own site is held to the standard we hold client work to. Here's what's underneath it, and how it performed on your device just now.

Your visit, measured live

Read from your own browser's timing data. These numbers aren't sent anywhere.

Run Google's test on this site (opens in a new tab)
First paint
–
Your browser doesn't report largest paint, so this is first paint
Server response
–
Time until the first byte arrived
Transferred
–
Everything downloaded so far, compressed
Requests
–
Files fetched so far, cached ones included
Five layers

The same system we build for clients.

  1. 01 · Data

    Postgres on Supabase

    Row-level security means only the studio's own account can read enquiries or analytics. Visitors write through two validated, rate-limited database functions, never the tables themselves.

  2. 02 · Integrations

    Email and database, in parallel

    Every enquiry goes two ways at once: emailed through Web3Forms and saved to the database. It counts as sent if either lands, so a lead is never lost to one service being down.

  3. 03 · Back office

    A private command center

    Traffic, the enquiry funnel, sources and campaigns, plus an inbox with a status pipeline and notes, behind a magic-link sign-in. The same kind of tool we build for clients.

  4. 04 · Content

    Typed content, generated metadata

    Pages, case studies and services live in typed content files, so a broken change fails the build instead of the page. Titles, share cards and structured data are generated from the same source.

  5. 05 · Website

    React 19, pre-rendered

    React and TypeScript, built with Vite and styled with Tailwind CSS 4. Every page is rendered to finished HTML at build time, then React takes over in place.

Performance

Fast by design, not by luck.

  • Finished HTML on arrival

    Every page is pre-rendered, so content shows without waiting for JavaScript. The app script loads after the first paint.

  • Styles inline, fonts first

    Critical CSS ships inside the page. The two headline fonts are preloaded, with metric-matched fallbacks so text never jumps.

  • Code only where it's used

    The 3D scene, the live demo and the command center are split out and load only on the pages that need them.

  • Images that wait their turn

    WebP at the right size for each screen. The full-page site captures load after your first scroll or tap, never during page load.

  • A hero that knows its limits

    The 3D stack is a hand-written WebGL2 shader, no 3D library. It watches its own frame times and steps quality down on slower devices, all the way to a still image.

  • Zero layout shift

    Every image and late element reserves its space up front, so nothing moves under your finger as the page loads.

Privacy

Analytics without the tracking.

Visits are counted by our own analytics: no cookies, no advertising trackers and no consent banner to click away. Your IP address becomes an anonymous code that changes every day and is never stored. Read the privacy notice.

Accessibility

Built for everyone who visits.

Every page passes automated WCAG 2.1 AA checks in light and dark mode. It works with a keyboard, honours reduced-motion settings (the 3D scene becomes a still image), and keeps tap targets large enough for a thumb.

  • React 19
  • TypeScript
  • Vite
  • Tailwind CSS 4
  • WebGL2
  • Supabase
  • Postgres
  • Lenis
  • Zustand
  • Vercel

This is the standard every build is held to.

Start a project See the work