THE CONCEPT
Paddock treats the page as a motorcycle grand-prix garage at 02:13, not as a conventional team website. Its fictional crew is between runs in a wet night test, so every interface element belongs to the work: the navigation is the T1–T14 corner sequence, section labels read like setup records, and the final chapter raises a sectional garage door. The emotional arc starts cold and analytical, becomes hot and tactile, then resolves in the quiet precision of a debrief. Nothing uses generated imagery. The bike, paper, tape, tire traces, lamps, metal and grain are all HTML, CSS, inline SVG or JavaScript.
LEAN ANGLE / CONTACT LOAD
The signature lives in main.js. Pointer position across .lean-stage becomes a target between −64° and +64°. renderLean() uses damped spring velocity, rotates the inline SVG motorcycle around its lower contact point and updates five CSS custom properties. Those variables migrate and flatten the contact ellipse, shift the shadow and rotate the patch. A nonlinear edge-load term produces the live KGF readout. At 58°, applyLean() captures the peak, locks the contact ellipse and triggers the code-built brake-disc afterglow stamp. The frame loop wakes only while input is moving or spring energy remains; it stops when the document is hidden. Pointer drag and arrow keys share the model, while reduced-motion resolves immediately without inertial travel.
THERMAL COLOR / GARAGE MATERIAL
Each chapter carries a fictional tire temperature in data-temp. An IntersectionObserver notices dwell, then tempColor() advances the local --zone token from cold blue through brake-disc violet to warmer orange and amber. The same observer drives the fixed .thermal-rail, so the page reports its thermal state instead of hiding the logic. Pointer movement relocates the radial heat pool, making attention itself warm the page. Fluorescent rails, wet asphalt rules, torn sheets, translucent tape and stamped marginalia are layered entirely in CSS.
TYPE / INTERACTION BENCH
Bebas Neue carries speed, lap numbers and compressed headlines; Space Mono handles every measurement, note and transcript line. Both are self-hosted from the exhibition font library. The suspension bench turns accessible range inputs into physical clickers with enlarged 44-pixel tracks. updateSetup() maps compression and rebound to drive, line-holding and feel scores, rotates each metal dial, moves an exit vector, and chooses a plain-language consequence. The transcript’s noise switch removes relay interruption so the crew’s decision becomes easier to scan.
REPRODUCE THIS
Prompt an AI agent to build a code-only motorsport environment around one physically meaningful input. Specify the machine’s maximum lean, a live contact-patch visualization, a thermal state for every chapter, and invented technical content with believable units. Ask for an inline SVG hero instead of a stock image; demand keyboard parity, reduced-motion fallbacks and animation suspension in hidden tabs. Lock a dominant wet-asphalt field, fluorescent white, one signal orange and a measured violet secondary. Finally, require screenshot review at phone, tablet and desktop widths so the machine remains legible before any decorative polish is accepted.