Steal This: The Persistent Grip Instrument Behind “APEXWERK — The Grip Curriculum”

Prime Big Deal Days · Oct 6–7Offer from Amazon

Get school and study supplies delivered free — and shop member deals

• Fast, free delivery on millions of items
• Access to Prime Big Deal Days deals on October 6–7
• Prime Video, Amazon Music and more included

Start your free Prime trial →Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.Hide

A physics lesson you can steer

APEXWERK — The Grip Curriculum is an AI-built exhibition piece: an imagined driving-physics classroom presented as an interactive website, not a real company or product. Its central idea is that a webpage can teach through the way it responds. Move the pointer and scroll, and the site turns those ordinary gestures into a changing grip diagram. The signature move is a persistent instrument that makes tire-force tradeoffs something to explore, rather than just read about.

The room takes the mood of a professor’s chalkboard after a day at the skidpad. Fictional details—including a named bend, a test car, and an instructor—give the lesson a setting while keeping the work clearly in the realm of designed fiction. The site was built by AI, and that is part of the story: code, typography, and invented physics create the exhibit without relying on generated pictures.

How the instrument teaches

A dark slate-green field establishes the blackboard metaphor. Chalk-colored text feels legible and provisional; a sharp cone orange calls attention to decisions and changing load. Fraunces lends headings a bookish, instructive character, while Space Mono gives measurements and equations the steady voice of a readout. Together, the colors and type distinguish explanation from instrumentation without making them feel like separate experiences.

At the center is an SVG friction-circle instrument. Pointer position controls the lateral component of the displayed demand, while scrolling changes its longitudinal component. The values ease toward the user’s input, so the diagram behaves like an instrument with momentum rather than a static chart. As the vector nears the circle’s limit, its rim changes color; beyond the threshold, a widening trace and fading canvas particles suggest a tire losing grip.

That visual response is the key teaching decision: the same surface explains the concept and lets the reader test it. The page also preserves a history of recent combined demands. An enlarged trace can reveal where the reader spent time near the limit and when the simulated breakaway occurred, then be cleared for another experiment. The lesson accumulates evidence instead of resetting after every gesture.

A second experiment: the racing line

An inline SVG editor lets readers adjust an apex handle across a drawn corner. Each move updates the curve and related teaching values, including estimated radius, exit speed, lateral load, and steering at the exit. These figures belong to an invented model for learning, not a promise of real-world lap times. Additional scenarios use diagrams to show how load shifts among tires and how the rate of a steering input affects the vehicle’s response.

Every visual element is made with HTML, CSS, SVG, or canvas; there are no photos, generated images, or external image assets. Chalk-like distortion, layered grid lines, and radial highlights provide texture while keeping attention on the diagrams. Sound is optional: only an explicit control starts synthesized tire audio. The experience also pauses its animation when the document is hidden and reduces motion for visitors who request it.

From brief to exhibit

The guide describes a three-pass pipeline: build the interactive learning system, critique it mercilessly for clarity, usability, and whether each response genuinely teaches, then have an art director certify the experience as a coherent exhibition piece. The accompanying build guide lays out the concept, live instrument, line editor, visual atmosphere, design tokens, and reproduction brief, making the room useful both as a lesson and as a reference for designing another one.

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 138 of 175, “apex”):
APEX — APEXWERK, a driving-physics school (fictional, chalkboard register). Aesthetic: professor’s blackboard meets skidpad; tire marks as diagrams. Palette: blackboard slate, chalk white, cone orange, tire-mark charcoal. Fonts: fraunces (professorial display), space-mono (equations). SIGNATURE: FRICTION CIRCLE — a live friction-circle instrument accompanies you down the page: every scroll (accelerate/brake) and cursor sweep (steer) moves the g-dot inside the circle — ride the rim and the tires sing, exceed it and the dot breaks traction with a chalk-smear skid. The racing-line editor: drag a line through a rendered corner and watch the time delta + physics annotate themselves in chalk (late apex vs geometric, explained live). Understeer/oversteer as two short interactive fables, the contact-patch census (four hands of rubber), weight-transfer see-saw. Unforgettable: making the g-dot sing on the rim.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/apex/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Explore the room

Visit the live APEXWERK exhibition to test how pointer movement and scrolling reshape the grip instrument. Then browse all 175 rooms at the hub for more AI-built experiments in interactive design.

Visit the live room → · Browse all 175 rooms

Previously in Wing VI

• Room 127: Meridian 843 | The Measured Mile
• Room 136: Courier — Spoke & Signal
• Room 135: DRAGSTRIP — 1320 Feet in 3.7 Seconds

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI