Prime made for students and young adults
- Fast, free delivery for dorm and study essentials
- Prime Video and Amazon Music included
- Member-only deals
A Page That Flies
Room 139 of the 175-room exhibition is a fictional launch site for a Baltic high-power rocketry collective. But the real payload is the page itself. Trägerwerk 7 treats a web document as a launch vehicle: it counts down, clears the tower, sheds structural mass, reaches apogee, and drifts back under a fabric canopy. Every instrument, flame, smoke puff, and parachute is built from browser-native code — no images, no external requests, no generated assets. The signature move is a full flight narrative mapped to scroll: the user’s scroll position becomes mission elapsed time, driving a single SVG telemetry trace, altitude readout, and phase indicator in perfect sync. The site is an AI-built exhibition piece, and that fact is part of the story — the constraint is the exhibit.
browser-native SVG animation tools
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Process: Three Passes to Certification
The build followed a strict three-pass pipeline. First pass: construct the full flight narrative as a working prototype, using the design guide (TW7-FM-139 / REV C) as a reference for the fictional engineering details and material vocabulary. Second pass: merciless critique — strip every element that doesn’t serve the flight arc, replace generic hover effects with mechanical separations, and verify the scroll-to-telemetry mapping at multiple scroll speeds and reduced-motion settings. Third pass: art-director certification, where the guide’s emotional beats were checked against the live page — countdown tension, boost intensity, coast suspension, recovery calm — and the accessible live regions were tested with a screen reader. The guide itself is embedded as a flight manual in the page, inviting inspection of every code-native component.
The full build notes live in the room’s design guide.
As an affiliate, we earn on qualifying purchases.
Teardown: Two Fields, One Flight
Material Vocabulary
The palette is deliberately split into two dominant fields rather than a flat set of swatches. Range black (#07100C) owns the ascent and boost phases, evoking a cold pre-dawn pad. Pad concrete (#C9C7BA) grounds the workshop and inspection scenes. Telemetry green (#91FF9F) is reserved for live instruments and safe states, while Nomex orange (#FF6238) cuts across both fields to mark heat, ignition, and recovery. A peach fringe appears only in combustion and deployment light, adding a warm halo to critical moments.
Typography
Sora, a tightly tracked geometric sans, carries headlines and mass-direction text with a sense of engineered urgency. VT323, a monospaced terminal face, handles coordinates, witness marks, timing, and telemetry values — its tabular numerals keep the readout stable as numbers change. Both fonts are self-hosted, preserving the zero-external-request rule.
The Signature Interaction: Scroll as Flight Time
The core mechanic lives in main.js. requestFlightUpdate() caps scroll handling to one animation frame, then updateFlight() reads the plot position once, normalizes it to 0–1, and drives the SVG trace, playhead, altitude, velocity, and phase from that single value. getPointAtLength() keeps a glowing dot physically attached to the altitude path — no approximation, just geometry. Each section boundary triggers a one-shot mechanical separation via an IntersectionObserver: paired .stage-shell sleeves slide away from the glowing core, bolts tumble outward, and makeSmoke() spawns seven temporary puffs that animate and remove themselves. The fixed flight rail advances, so the whole document retains a visible position inside the launch stack. A final safety litany runs through runRangeCheck(), confirming each response in sequence; the lamp turns green only after the third call. runDeploymentTest() adds a tactile recovery-bench moment, reefing the CSS canopy, loading shrouds, tugging the capsule, and reporting each state through an accessible live region. When the document is hidden, scheduled drawing stops and CSS animation play states pause — a performance discipline that respects the user’s attention.
Emotional Arc
The page deliberately moves from compression to acceleration to suspension. Dark electronics surround boost and telemetry; daylight returns with the airframe inspection, then softens into the Baltic recovery field. This is not a dashboard of unrelated feature cards — it’s one complete flight.
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 139 of 175, “rocketry”):
ROCKETRY — TRÄGERWERK 7, a Baltic amateur high-power rocketry club (fictional). Aesthetic: concrete pad, motor flame, telemetry green; garage ambition with range-safety discipline. Palette: pad concrete, motor-flame peach, telemetry green, nomex orange. Fonts: sora (display), vt323 (telemetry). SIGNATURE: COUNTDOWN & STAGING — the page loads as a countdown (T-10 stagger with klaxon light); each section separation is a STAGING EVENT: bolts fire, the spent section falls away with a smoke puff, and the next stage lights. A live altitude/velocity plot draws itself as you scroll to apogee, then a drogue deploys and the descent sections sway gently under canopy. Motor-class ladder H→O (each letter doubles impulse — the table makes you feel it), the range-safety litany (“sky clear? RSO go?”), fin-flutter mathematics, recovery-crew field notes. Unforgettable: the page staging like a rocket.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/rocketry/
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.
As an affiliate, we earn on qualifying purchases.
Visit the Launch Pad
Experience the full flight at Trägerwerk 7 — Baltic Experimental Rocketry. Then browse all 175 rooms in the exhibition hub to see how other AI-built sites push the boundaries of narrative, interaction, and material design.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 138: APEXWERK — The Grip Curriculum
- Room 127: Meridian 843 | The Measured Mile
- Room 136: Courier — Spoke & Signal
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.
As an affiliate, we earn on qualifying purchases.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
