Get art and craft 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
A machine room built by AI, not a factory
“TURBINE — WERK 9” is an AI-built exhibition piece: a browser-based field guide to a fictional turbine works, not a real company or industrial archive. Its subject is a high-bypass engine assembly hall imagined as a secular cathedral. The room’s central gesture turns that metaphor into something you can operate: a large, code-drawn fan responds to scrolling and to a touch-friendly control, gathering speed as its spool value rises.
There are no photographs or generated pictures to create the atmosphere. Instead, inline SVG shapes, gradients, and CSS lighting build the metal, blades, and shadowed hangar. The result treats browser mechanics as exhibition materials: movement becomes evidence of the machine, while the page itself acts like a guided walk through a carefully staged industrial interior.
As an affiliate, we earn on qualifying purchases.
Reading the room: metal, type, motion
The palette is restrained and purposeful. Hangar black establishes depth; cool titanium marks structure and text; ignition blue identifies airflow and control. Gold, coral, and violet appear as a heat-tint vocabulary rather than decoration, reserved for areas associated with thermal load or impact. This limited color system helps each change in the page feel like a move between inspection conditions.
Typography reinforces the fiction of an engineering record. A geometric display face gives headings monumental scale, while a monospaced face lends notes and specifications the character of calibration marks. The writing adds convincing detail—blade counts, dimensions, torque entries, and performance figures—but these belong to the invented world of the exhibition, not a documented manufacturer.
The signature move: a fan with a readable state
The hero rotor is made from one SVG blade shape repeated twenty-four times, each instance rotated around the hub. A scroll-linked spool value drives the machine through the opening scene; a range control offers a direct alternative, including for phone users. Rotation is integrated over animation-frame time and shaped by the spool setting, so the motion gathers urgency rather than simply jumping between speeds.
At a defined point in that progression, the room changes state: a dashed shimmer appears at the fan tips, accompanied by an annotation about transonic flow. The threshold gives the animation meaning. It is not movement for its own sake, but a visual explanation tied to a particular machine condition.
Other sections extend the same principle. A second inline SVG separates bypass airflow from the warmer core stream, using animated line patterns instead of particles or canvas effects. A blade specimen can be switched from a titanium surface to a honeycomb-like scan, and a containment test stages a blade release and case impact. The closing balance control shifts the rotor and changes its acceptance status when the fictional trim moves outside its tolerance.
Care in the details
The room’s technical restraint is part of its visual craft. Motion pauses when the page is hidden, and reduced-motion preferences receive a static rotor. The blade scan is designed for pointer, touch, and keyboard use. These decisions make the exhibition more than a cinematic mock-up: its central effects still communicate when the preferred input or motion setting changes.
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 137 of 175, “turbine”):
TURBINE — WERK 9, a high-bypass turbofan assembly hall (fictional engine works). Aesthetic: titanium cathedral; blades as reliquary. Palette: titanium silver, inconel heat-tint gold→violet, hangar grey, ignition blue. Fonts: orbitron (display), ibm-plex-mono (torque specs). SIGNATURE: THE FAN — a full-viewport fan disc (SVG, 24 wide-chord blades) spools with scroll from windmilling drift to takeoff thrust; near the tips a transonic shimmer appears (the shock explained in a caption that arrives exactly then). Sections are arranged radially like blades around hub headings. An animated cutaway breathes: bypass air (cool blue, 90%) flows around the hot core (gold, 10%) with thrust arithmetic. Blade-out containment test essay (the deliberate explosion), torque-spec tables set like scripture, the balancing grams. Unforgettable: spooling the fan to takeoff with your thumb.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/turbine/
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.
browser-based animation software
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
From prompt to exhibition
The project follows a three-pass pipeline: build the room, critique it mercilessly, then certify it through an art-director pass. Its accompanying field guide explains the concept, interaction mechanics, material system, and reproduction brief; that guide turns the finished room into a record of both its visual choices and its implementation constraints.
The full build notes live in the room’s design guide.
As an affiliate, we earn on qualifying purchases.
Enter the fictional works
Visit “TURBINE — WERK 9” to spool the fan, inspect the airflow cutaway, and explore the calibration controls. Then browse all 175 rooms at the hub for more AI-built exhibition pieces.
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.
As an affiliate, we earn on qualifying purchases.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
