Inside Room 135 of 175: The Making of “DRAGSTRIP — 1320 Feet in 3.7 Seconds”

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

Get garage and car 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 quarter-mile, compressed into a clock

Room 135 is an AI-built exhibition piece, not a real motorsport team or company. Its fictional DRAGSTRIP project turns a Nitro Nationals pass into an interactive editorial story: a single 3.7-second run becomes the organizing principle for the entire page.

The signature move is simple to describe and more involving to use: scrub the clock, and watch the car, track, measurements and driver-focused annotations respond together. Instead of treating speed as decoration, the experience makes elapsed time its interface. The result feels less like a racing poster than a compact timing instrument.

Built around the run

The visual language balances spectacle with measurement. Burnout black establishes a dark stage; nitro yellow provides the sharpest signal, with amber for the starting lights and chrome gray for flashes of trackside metal. Archivo Black gives headlines and the oversized “3.7” a forceful, condensed impact. Chivo Mono handles labels, telemetry and the time slip, keeping the technical information distinct from the display type.

The central control spans zero to 3,700 milliseconds. Dragging it or starting playback updates the same clock, which drives velocity, acceleration, vehicle movement, launch lift, chassis shake, distance and parachute deployment. The run is divided into seven phases, with annotations that connect the spectacle to what the driver experiences. Distance readings interpolate between the fictional timing beams, so the on-screen progress and printed result stay aligned.

There is no photographic shortcut: the site is drawn in code. Inline SVG shapes form the dragster, parachutes and timing equipment; CSS creates the receding track and its reflective lane marks; canvas particles supply drifting smoke. Even the stylized fuel molecule is assembled from HTML elements. This constraint gives the room its exhibition character: the machinery is an interpretation made from web-native materials, not an image of a real car.

A fixed “Christmas tree” navigation also serves as a progress indicator, tracking page sections and lighting its bulbs as visitors move through the story. On small screens it shifts to a bottom dock. A separate reaction test turns those lights into a keyboard-operable interaction, while reduced-motion settings retain a static stage and manual timeline rather than forcing animated playback.

From build to certification

The room followed a three-pass pipeline: build the experience from the guide’s specification, critique it mercilessly for clarity, behavior and craft, then send it through art-director certification. The guide documents the timing model, visual system and code-drawn approach; the finished site is the result of that AI-led process, with the AI-built website itself as the story.

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 135 of 175, “dragstrip”):
DRAGSTRIP — 1320 FEET: the Nitro Nationals (fictional event, real physics). Aesthetic: staging-lane chrome and tire smoke; violence in a straight line. Palette: nitro yellow, burnout black, christmas-tree amber/green, chrome silver. Fonts: archivo-black (display), chivo-mono (time slips). SIGNATURE: THE 3.7 — the hero compresses a full quarter-mile pass into 3.7 real seconds, restaged as a page-wide millisecond timeline you scrub: staging, launch (4g, front wheels light), half-track shake, top-end, chutes; each phase annotated with what the driver’s body endures. The staging christmas tree is the section nav — pre-stage and stage bulbs light as you descend, amber cascade, green. Nitromethane chemistry card (why 90% is a detonation barely contained), the time-slip typography study, jet-dryer track-prep lore. Unforgettable: scrubbing 3.7 seconds like a film.

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/dragstrip/

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.

Take the start

Visit the live DRAGSTRIP room to scrub the pass, run the clock and explore the timing-tree navigation. Then browse all 175 rooms at the exhibition hub for more AI-built web experiments.

Visit the live room → · Browse all 175 rooms

Previously in Wing VI

• Room 127: Meridian 843 | The Measured Mile
• Room 133: Hydroplane — Gold Cup River Thunder
• Room 131: Project Icarus | The Ardent Line

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