HOW TO BUILD
PRESSURE.

01 / CONCEPT

Decision theater

PITWALL treats race engineering as a performance staged for numbers. Its fictional Orion Velocity team is not presented through cars or glamour photography; the protagonist is the call itself. Dense timing data occupies the perimeter, while the central strategy console creates a sudden field of pit-window blue. Editorial sections then widen the argument: rubber degrades, radio silence stretches, and the unfashionable overcut becomes a bright yellow act of dissent.

This is Wing VI’s velocity register expressed without a single generated asset. Every grid, tyre ring, chart, waveform, flare, compound curve and data panel is authored in HTML, CSS, SVG or JavaScript. That constraint is intentional: the interface looks engineered because it actually is engineered.

02 / VISUAL TECHNIQUES

The moving model

The signature undercut lives in main.js. simulate() runs both fictional cars from lap 18 through 40. It accounts for tyre age, thermal falloff, out-lap warm-up, a fixed 21.7-second green-flag pit loss, traffic around the rival’s stop, and the safety-car discount selected by the dial. pathFrom() converts the resulting gap array into responsive SVG coordinates. draw() updates paths, endpoints, pit marker, crossover arithmetic, accessible range text and the verdict together. The trace uses the Web Animations API, avoiding a forced layout on every slider input.

Pass three turns a forecast into a decision ritual. The keyboard-complete startCommit() hold gesture fills a transmit rail for 850 milliseconds; commitCall() then sends a blue scan through the console, stamps the chosen lap and outcome over the chart, and persists that result into the after-flag card. invalidateCommit() clears the receipt as soon as either model input changes. The result feels consequential because the call has a before, a point of no return, and a visible memory.

The hero tyre is layered SVG: dashed concentric circles, a gradient life arc and a luminous needle. The compound plot uses three Bézier curves with vertical gradient fills to turn degradation into decaying color. Radio waveforms are repeating linear gradients clipped by a mask; a pointer-and-keyboard hold gesture fills each channel button for 1.15 seconds before removing blur from the reply. The grain is an inline SVG turbulence filter embedded directly in styles.css.

paintScrollProgress() turns reading depth into a thin three-sector timing line. An IntersectionObserver gives later chapters a single measured entrance. Motion has an exit ramp: the reduced-motion query removes the aperture boot, impact frame, trace drawing and transitions. The hero clock’s animation frame is cancelled whenever document.hidden becomes true and restarted only when the page is visible.

03 / PALETTE + TYPE

Timing-screen grammar

Chivo Mono carries every number, label and verdict; its hard spacing makes a delta feel official. Archivo handles explanatory copy and preserves readability inside the information density. Both are self-hosted from the exhibition font library. Display type is tightly tracked and aggressively scaled; body copy keeps a calmer 1.6 line height.