SHT 00 · REV AHOW THIS PAGE WAS DESIGNED & BUILT
The Blueprint
Room.
This page documents the design of PRD Executor's marketing site — the concept, the palette, the WebGL, the hand-rolled 3D — in plain English, so you can study it or build something like it. Designed and coded autonomously by Claude (Fable) inside this codebase, with no external assets of any kind.
01
One metaphor, then obedience to it
The product turns language into ordered, executable structure — so the page became a drafting room. Blueprint-ink ground, fine drafting grids, plan-lines drawn by an unseen machine, registration marks on every card, and sharp corners everywhere (rounded corners read as template; drawings have edges). Once the metaphor was locked, every decision — palette, type, motion, even the pricing section being called a RATE CARD — was just obedience to it.
02
A palette with one hot color
Cyan and blue are the drawing: grids, traces, structure. Amber is the only warm pigment on the page and it means exactly one thing — execution. CTAs, the plotter head, the EXECUTED stamp, the currently-drawing beam. When one color owns one meaning, the page teaches the reader its language in about four seconds.
03
Typography as a voice, not a font pick
Archivo Variable set extra-wide (width axis 125, weight 780, uppercase) is the industrial signage voice — headlines feel stenciled onto the sheet. IBM Plex Mono is the drafting annotation voice: eyebrows, spec readouts, step counters, the terminal. Two voices, strictly cast; body text stays quiet so the instruments can speak.
04
The hero is a shader, not a stock video
The background is a hand-written WebGL2 fragment shader (~120 lines of GLSL, zero libraries). In plain words: for every pixel, every frame, a small program computes a perspective drafting floor — grid lines divided by depth so they converge at a horizon — then slides it toward you, draws occasional bright plan-lines along random rows, runs one amber bead along the horizon like a plotter head, and sprinkles measurement motes above. Mouse position nudges the whole field a few pixels. It pauses off-screen, caps pixel density, and renders a single still under prefers-reduced-motion.
05
Real 3D with no 3D library
The self-assembling tower is a list of beams — pure coordinate pairs — projected onto a 2D canvas with ~15 lines of trigonometry: rotate for the slow yaw, tilt, divide by depth for perspective, draw. The beams append in strict build order, bottom-up, while a mono counter advances STEP 001→079. The beam being drawn burns amber with a glowing plotter tip; finished structure settles into cyan. That is the entire product, told as geometry: numbered steps assemble a structure.
06
Scroll as an assembly line
The pipeline section wires a gradient beam's clip-path directly to scroll position — as you scroll, the beam fills cyan→blue→amber and each station (DESCRIBE, PLAN, INSPECT, EXECUTE) powers on as the charge reaches it. No animation library anywhere on the page; an IntersectionObserver flips a class for reveals and CSS does the rest.
07
Details that separate designed from generated
Registration crosshairs on card corners. Dotted leader lines between spec labels and values, like a title block. Sheet numbers (SHT 01 · REV A) as section eyebrows. A ruler strip with real measurement ticks instead of a generic logo marquee. An EXECUTED stamp rotated four degrees, because real stamps never land straight. None of these cost performance; all of them cost intention.
08
Three passes with a fine-tooth comb
After the first build: one pass for product clarity (does every section serve the one-sentence positioning?), one for visual faults (contrast, spacing collisions, motion timing, mobile stacking), one for engineering (console errors, reduced-motion, fallbacks, build output). Each pass hunts for weaknesses and ships fixes — a pass that merely nods at the page doesn't count.
09
What was substituted, honestly
No stock images, no Pinterest, no external image generators, no video files — every visual on the page is computed at runtime from code written for this site. That wasn't only a licensing decision: procedural assets weigh nothing, never pixelate, and can obey the design system's exact palette. Total added asset weight: two font families.
The fastest way to understand the product this page sells: hand it an idea and watch the counter climb.
Start free →