FD
Football Doctor
Sign in
Process notes

How the showcase was built.

Four features landed on this site as parallel pull requests: a season board, a typeset field manual, a scroll film and a 3D drill rehearsal. Each one is genuinely useful to a coach, and each one carries a different visual discipline.

This page is the working drawing. What was commissioned, the loop that built it, the gates that kept it honest, and how to run the same process on your own project.

The commissionShipped 23/07/2026
Features
04
Passes per feature
03
Gates per commit
05
New tokens on this page
00

One brief per feature. One discipline per feature. Three fresh-eyes passes each, mandatory. The four features demonstrate range; this page demonstrates restraint. It adds no colour tokens, no fonts and no dependencies.

One loop, run four times.

01

Branch

One git worktree and one branch per feature. Four builds run in parallel and never touch each other's files. Shared chrome stays frozen.

02

Build

A builder agent takes the brief to functional completeness with the creative direction landed. Real type, real motion, real data. Not a wireframe.

03

Iterate, three times

Three fresh-eyes agents run in sequence. Each screenshots the real render with headless Chrome over CDP, critiques the pixels like a design director, then improves and complexifies. Nobody grades their own work.

04

Ship

A ship agent audits the whole diff against the brand gates, writes up the evidence, and opens the pull request.

The gates kept it honest.

Opinion did not decide what merged. Scripts did. Every commit on every branch had to clear the same five.

Run before every commit
node scripts/brand-check.mjs

Tokenised colour only: every hex lives in two token files. Banned marketing words and the dash rules enforced by grep, comments included.

npm run build

The route compiles and prerenders. A page that only works on the dev server does not exist.

npm run lint

Zero errors. Pre-existing warnings stay pre-existing; new ones do not land.

npm test

Unit tests and content guards in the repo test glob. Copy rules are tested like code, because on this site they are code.

reduced motion + no JS

Not a script, a standard: both fallbacks get the full content. Motion is enhancement, never a dependency.

Four features, four disciplines.

Each name links to the live route. The quoted lines are from the pull requests themselves.

01
PR #1/insights
Colour and data visualisation

Season Insights

Everything the service knows about a coach's season on one board: request cadence over twelve weeks, turnaround against the 24 hour SLA, session make-up by phase minutes, squads served. Every row links back into the work.

“A night theme built from the house DNA: pitch green pulled down to near-black, chalk line-marking white, sodium lamp amber, clinic red held back as the single signal for the SLA. Every chart is hand-rolled SVG rendered by server components.”

  • night palette, eight tokens
  • hand-rolled SVG charts
  • zero client JS
  • CSS-only choreography
  • contrast verified to AA
02
PR #2/playbook
Editorial typography

The Playbook

A public field manual that typesets four small-sided drills and a principles entry as one long-form page. Read it on the couch, hand it to an assistant, or print it as a seven page A4 booklet with running folios.

“Fraunces paired with Newsreader over the house JetBrains Mono: warm old-style serifs with optical size axes, so display and text sizes are drawn differently, matching the print register of the parchment brand.”

  • new fonts via next/font
  • modular scale on a 28px baseline
  • Tufte margin column
  • rubrication as a system
  • A4 print stylesheet
03
PR #3/method
Scroll-driven motion

The Method

One real request becomes a finished session as you scroll: Session 018 from the coach's words to the delivered document, in eight viewports. With JS off or motion reduced, the same page reads as a complete static article.

“The coach's request fragments word by word at the dissolve beat, drills draw themselves stroke by stroke as you scroll, a session clock ticks through each phase, the delivered document reassembles from slices.”

  • motion useScroll and useTransform
  • scroll-drawn SVG
  • progressive enhancement first
  • short-phone unpinned flow
04
PR #4/drill-room
Interactive 3D

The Drill Room

The four drills as a floodlit 3D rehearsal. Rotate the pitch, play and step through every pass, scrub the per-leg timeline, check spacing from touchline, top-down or behind the goal. Geometry mirrors the written 2D diagrams exactly, asserted by tests.

“A react-three-fiber scene with shadow-casting floodlight pylons, flighted passes trailing a tactics-board projection, receiver anticipation animation, establishing-shot camera moves, and a graceful 2D fallback when WebGL is unavailable.”

  • react-three-fiber
  • one shared clock, zero re-renders per frame
  • keyboard transport
  • aspect-aware camera presets
  • 2D fallback without WebGL
Do it again

Run the loop yourself.

The stack is ordinary. The discipline is the point.

The tools
  • Next.js 16, App Router
  • Tailwind v4, token-first CSS
  • react-three-fiber
  • the motion package
  • next/font
  • hand-rolled SVG charts
  • CDP screenshots, no puppeteer
The loop
  1. 01Buildland the creative direction, not a wireframe
  2. 02Lookscreenshot the real render and judge pixels, not code
  3. 03Critiquewrite it up like a design director, specific and blunt
  4. 04Complexifyadd the craft the critique demanded
  5. 05Verifyrun every gate, evidence before assertions
  6. 06Shipaudit the diff, open the PR

The first version is never the one you ship.