Laminarer Raum
KANAL W ist als fiktive geschlossene Versuchsanlage entworfen, nicht als gewöhnliche Unternehmensseite. Die Dramaturgie folgt einem Luftpaket: Beruhigung im Hero, Beschleunigung in der Fan Hall, Messung in Lauf 114, Reibung an der Grenzschicht und schließlich Sichtbarkeit. Tiefes Teststreckenblau bildet das dominante Feld; Rauchweiß zeichnet Erkenntnis, Lasergrün markiert aktive Messung und Modellgrau die festen Körper.
Die asymmetrische Typografie ist Teil des Instruments. Große, dünn gesetzte Jost-Zeilen wirken wie ruhige Volumen, während Chivo Mono kleine, präzise Messwerte setzt. Die einzige bewusst laute Farbe ist Grün. Dadurch liest jeder grüne Punkt wie ein Sensor, nicht wie Dekoration.
Die Luft im Code
STREAMLINES / main.js
resize() erzeugt je nach Breite 54 bis 104 Rauchpartikel. measure() liest die sichtbaren Rechtecke aller Elemente mit der Klasse .aero. In velocity(x,y) wird jedes Rechteck zum Strömungskörper: Linien werden vor der Vorderkante abgebremst, nach oben oder unten verdrängt und im Nachlauf eingerollt. Stagnationspunkte markieren interaktive Körper. Weil Scroll-Messungen über requestAnimationFrame gebündelt werden, bleibt die Strömung an das echte Layout gekoppelt, ohne es permanent neu zu berechnen. Der Loop stoppt bei verstecktem Dokument; reduzierte Bewegung zeichnet nur einen statischen Zustand.
LASERBLATT / TOPOLOGIE-SCAN
Der Schalter #flow-probe startet eine 2,45 Sekunden lange Messfahrt. Die Funktion setzt den Rauchrechen neu an, verstärkt kurz seine Leuchtspur und zeichnet die von measure() erfassten Körper mit lokalen Cp-Marken nach. Bei reduzierter Bewegung erscheint dieselbe Information als ruhiges Standbild.
BILANZ / main.js
Ein IntersectionObserver liest die erfundenen data-drag- und data-lift-Werte der aktiven Sektion. Dichte Bereiche haben absichtlich mehr Seitenwiderstand. Das ist ein typografischer Insiderwitz, den die Anzeige mit vollkommen ernster Laborstimme meldet.
FAN HALL & DRUCKRIPPEL
Acht CSS-Rotoren bestehen aus repeating-conic-gradient-Schaufeln, gestaffelten Gehäusen und Gegenrotation. Beim Eintritt in den Sichtbereich zählt JavaScript die Drehzahl hoch, verkürzt --fan-speed und löst eine visuelle Druckwelle aus.
GRENZSCHICHT & SICHTBARMACHUNG
Der Regler verändert Vergrößerung und scheinbare Geschwindigkeit der zehn Luftlagen: nahe der Modellhaut bleiben Linien langsam, darüber laufen sie frei. Die Taxonomie ist vollständig CSS-basiert. Wollfäden sind rotierende Ein-Pixel-Linien, Ölströmung entsteht aus radialen Gradienten, Schlieren aus Kontrastkanten, Unschärfe und einem wandernden Dichtegitter.
Palette & Typ
TEST BLUE
SMOKE
LASER
MODEL
Jost 250–500 trägt Headlines und Erzähltext. Chivo Mono 400–600 hält Daten, Achsen und technische Mikrotypografie im Gleichgewicht. Abstände folgen keinem Kartenraster, sondern wechseln zwischen langen Beruhigungsstrecken und kompakten Messblöcken.
Reproduce this
Gib einem AI-Agenten nicht nur Stilwörter, sondern ein physikalisches Verhalten, eine Messlogik und eine feste Materialpalette. Ein brauchbarer Ausgangspunkt:
„Baue eine responsive, vollständig codebasierte Website für ein fiktives Strömungslabor. Nutze tiefes Blau, Rauchweiß, Lasergrün und graues Metall. Ein Canvas-Partikelfeld muss live DOM-Rechtecke abtasten und Stromlinien um jede sichtbare Komponente lenken. Ergänze eine datenreaktive Messanzeige, acht gegenläufige CSS-Rotoren, eine interaktive Grenzschicht und drei unterschiedliche CSS-Verfahren zur Strömungssichtbarkeit. Pausiere Animationen bei verstecktem Tab und liefere eine statische Reduced-Motion-Fassung.“
Wichtig ist die Reihenfolge: erst die inhaltliche Laborwelt erfinden, dann jedem Kapitel eine andere räumliche Form geben und zuletzt die Strömung an das echte Layout koppeln. So wird die Signatur zur Seitenphysik statt zum Hintergrundeffekt.