Professor’s blackboard,
after a day at the skidpad.
APEXWERK makes driving physics felt, not merely diagrammed. Deep green-black slate is the dominant field; warm chalk feels temporary and human, while cone orange marks decisions. Fraunces supplies a professorial voice and Space Mono gives equations, loads, and deltas a measured cadence. Fictional specifics—Bend 04, the CW-06 and Dr. Mara Venn—make the lesson credible.
The friction circle
follows the lesson.
In main.js, animate() maps pointer position to lateral demand and scroll delta to longitudinal demand, easing both into one SVG vector. At 0.72 g .live-rim turns orange. Beyond 0.98 g, .skid-trace fattens while paintDust() emits up to 96 fading canvas particles from the dot’s screen position: a code-drawn breakaway.
Only the tire-audio switch creates an AudioContext. A filtered sawtooth supplies the carcass tone; band-passed noise adds scrub. Gains return to zero on power-off or tab hide. The loop stops on document.hidden, while reduced motion removes dust, pulses, shakes, and long transitions.
Pass 3 closes the loop with “The Lap You Drew.” renderGripGhost() maps the last 180 combined-demand samples into an enlarged SVG trace, counts rim time and breakaway events, and lets the reader wipe the board. The instrument is no longer only persistent; it remembers.
LONGITUDINAL+POINTER X
LATERAL=LIVE G VECTOR
AVAILABLE μ
A corner that
answers back.
The racing-line editor is inline SVG, not a decorative picture. The whole #track-editor surface captures a pointer, while the focused #apex-handle accepts arrow keys. renderLine() recalculates the cubic path on every movement and continuously interpolates radius, exit speed, peak lateral load, exit steering, and projected delta. Classification still names early, geometric, and late regimes, but the numbers no longer jump between presets. They form an invented teaching model, not a lap-time claim.
The yaw fables ask readers to choose a correction. renderLoad() redistributes 1,184 kg across four patches as pressure rises; renderRate() pitches the chassis rig to show that input rate matters alongside magnitude.
Everything visual
is drawn in code.
There are no photographs, generated assets, icon packs, or external requests. Tire arcs, cones, cars, force diagrams, and the vehicle plan are CSS or SVG. Turbulence filters displace chalk lines; embedded noise, layered grids, off-axis borders, rubber bands, and radial highlights give the slate depth. The opening rises in before the friction instrument slides on like lab equipment.
Four materials,
two voices.
Prompt for a system,
not a skin.
Ask an AI agent to build a responsive, image-free learning experience where one persistent instrument translates ordinary browsing gestures into the subject’s core concept. Specify a dominant material, one sharp safety color, a display/data type pairing, and at least three cause-and-effect lessons. Require SVG or canvas diagrams with keyboard controls, an explicit opt-in for any synthesized sound, document-visibility pausing, reduced-motion support, and visual inspection at phone, tablet, and desktop widths. Most importantly, ask every number, annotation, and interaction to teach the same central idea.
ENTER THE LIVE INSTRUMENT