Get art and craft supplies delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A room with its own weather
KANAL W is a fictional, AI-built exhibition piece imagined as a closed wind-tunnel laboratory—not a real company or facility. Its subject is also its signature move: animated smoke-like streamlines respond to the page itself, bending around visible elements as though typography and interface controls were physical objects in a current of air.
That choice makes the room feel less like a conventional website and more like a visit to an instrumented space. The opening settles into a quiet blue expanse; later sections gather speed, introduce measurement, and bring airflow into view. The result is a visual essay about motion that uses motion as part of its argument.
Its companion guide, “Strömungsakte,” frames the work as a field report and build document. That framing matters: KANAL W invites visitors to look at both the imagined laboratory and the decisions that make its digital atmosphere behave.
interactive wind tunnel simulation software
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Reading the flow
The palette is restrained and purposeful. Deep test-track blue establishes the room’s atmosphere, smoke-white carries the text and trails, and a sharp laser green signals active measurement. Muted gray supplies the impression of fixed models. Green is used sparingly, so it reads as a sensor cue rather than a general accent.
Typography reinforces the contrast between spaciousness and precision. Light, oversized Jost headlines give the page a calm architectural scale; Chivo Mono handles figures, labels, and small technical notes. The layouts avoid a uniform card grid, alternating long stretches of open space with denser clusters of information. Even the type and spacing seem to take part in the experiment.
A current shaped by the layout
The central effect is not a video placed behind the content. A canvas particle system generates the streamlines, while JavaScript measures the on-screen rectangles of marked page elements. Those shapes influence the particles’ paths: the flow slows near an object’s leading edge, moves around it, and gathers into a wake beyond it. In other words, the design’s actual composition helps determine what the animation does.
A measurement control triggers a brief scan that strengthens the trails and outlines the detected bodies with local pressure-coefficient markers. Other details extend the laboratory fiction: CSS-built fan rotors accelerate when they enter view, and a boundary-layer control changes the apparent speed and spacing of several layers of flow. The room also presents three visual approaches to making airflow visible—thread-like lines, oil-film patterns, and schlieren-inspired contrast effects—using CSS rather than image assets.
The implementation accounts for the conditions in which the room is viewed. Scroll-related measurements are grouped through animation frames instead of continually recalculating layout. The animation pauses when the browser tab is hidden, and a reduced-motion setting gets a still representation of the same information. These are not merely technical footnotes; they help the atmospheric effect remain connected to the visitor’s device and preferences.
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 143 of 175, “windtunnel”):
WINDTUNNEL — KANAL W, der stille Orkan: a closed-circuit aerodynamic test facility (fictional). Aesthetic: laminar calm; smoke lines over deep blue. Palette: test-section deep blue, smoke-line white, laser-sheet green, model grey. Fonts: jost (display), chivo-mono (balance data). SIGNATURE: STREAMLINES — persistent smoke streamlines (canvas flow field) bend around EVERY element on the page: cards shed wakes, headlines trail vortices, buttons show stagnation points; a drag/downforce balance readout in the corner reacts to whatever is on screen (dense sections read draggier — a joke the guide explains earnestly). The fan hall section: eight counter-rotating fans spool up with a pressure-ear ripple. Test-log entries (model 27B, run 114), boundary-layer explained via a zoom that slows air near surfaces, flow-visualization taxonomy (tufts, oil, schlieren as CSS art). Unforgettable: the site having aerodynamics.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/windtunnel/
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.
CSS particle system visualization tools
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
From prompt to exhibition
The room followed a three-pass pipeline: build the fictional laboratory and its interactions, subject the result to merciless critique, then seek art-director certification before presenting it as finished. The accompanying guide documents the concept, code behaviors, materials, and reproduction approach—showing why the strongest instruction was not simply “make it look aerodynamic,” but to define how the page should behave like a flow field.
The full build notes live in the room’s design guide.
digital airflow visualization devices
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Enter the room
Visit the live KANAL W room at fable-25-830.netlify.app/sites/windtunnel/ and explore its moving streamlines, fan hall, and measurement controls. It is an AI-built fictional exhibition piece, created to make interface behavior part of the artwork.
To see the wider collection, browse all 175 rooms at the project hub: Fable 5.
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.
motion design animation software
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
