Der Maschinenraum.
So entstand diese Seite.

Drei Markenworte haben jede Entscheidung gesteuert: ruhig, mächtig, im Betrieb. Daraus wurde ein Maschinenraum — aber ein warmer: kein Neon-Rechenzentrum, sondern Espresso-Dunkelheit mit Bernstein-Glut, eher Turbinenhalle bei Nacht als Sci-Fi-Labor.

Das Zentrum ist eine abstrakte Automationsmaschine: drei gekippte Node-Kränze um einen glühenden Kern, Datenpartikel strömen auf Spiralbahnen von außen hinein, Funken laufen von Node zu Node, kleine Teil-Aggregate rotieren auf eigenen Umlaufbahnen. Die Kamera fährt beim Scrollen durch sechs Zustände — jede Inhaltssektion bekommt ihre eigene Einstellung, ihre eigene Ring-Beleuchtung.

Bewusst verboten: Cyan, Blau-Neon, Lila-Gradients — die komplette KI-Klischee-Palette. Ebenso Glassmorphism, Gradient-Text und identische Kartenraster. Die Glut ist Akzent, nicht Tapete (60-30-10-Regel).

Alle Farben sind in OKLCH definiert, alle Neutralen warm getönt (Hue ≈ 55–78), nirgends reines Schwarz oder Weiß. Die Hex-Werte existieren nur für WebGL — getComputedStyle liefert oklch()-Notation, die kein Hex-Parser versteht, deshalb sind sie im Szenen-Code hart kodiert.

Verteilung: ~60 % Espresso-Grund, ~30 % getönte Flächen und Hairlines, ~10 % Bernstein — reserviert für Status-Punkt, Nummern, KPI-Werte, den Primär-CTA und die Maschine selbst. Aller DOM-Text erfüllt WCAG AA auf seinem jeweiligen Grund.

• Selbst gehostet als woff2 (latin-Subset) — Google Fonts liefert bei modernem User-Agent pro Familie eine variable Datei für alle Gewichte; per fvar-Table verifiziert und als font-weight: 400 700-Range deklariert.
• Typo-Skala mit Ratio ≈ 1.3, Headlines über clamp(), Fließtext max. ~70 Zeichen pro Zeile.

Three.js 0.160 als selbst gehostetes ES-Modul (vendor-three.module.min.js), importiert ohne Bundler:

import * as THREE from './vendor-three.module.min.js';

Bauteile der Maschine

• Drei Node-Kränze (r = 2.4 / 3.5 / 4.6, je 16–28 Nodes) in unterschiedlich gekippten Gruppen, jede mit eigener Drehrichtung und -geschwindigkeit. Nodes sind THREE.Points mit eigenem Shader: weicher Glut-Falloff über gl_PointCoord, per-Node-Flackern über ein Phasen-Attribut.
• Kern: zwei gegenläufig rotierende Wireframe-Ikosaeder plus ein Billboard-Plane mit radialem Glow-Shader — der „atmet“ mit ~7 s Periode und zieht alle ~19 s in einer Lastspitze kurz hoch.
• Datenfluss: zehn CatmullRom-Spiralkurven von außen (r ≈ 9–11) in den Kern, vorab in je 160 Samples gebacken. 900 Partikel (mobil 280) wandern per CPU-Interpolation die Kurven entlang — Helligkeit und Farbe (Bronze → Glut) steigen zum Kern hin.
• Funken: Impuls-Systeme mit kurzem Schweif (6 Trail-Punkte) laufen entlang der Ring-Bögen von Node zu Node und über die Speichen in den Kern — unregelmäßig getaktet über zufällige Wartezeiten.
• Teil-Aggregate: sieben kleine Wireframe-Oktaeder und -Würfel auf eigenen geneigten Umlaufbahnen, jedes mit individueller Eigenrotation.
• Atmosphäre: 420 Staubpartikel im Raum, ein fast unsichtbares Bodenraster (GridHelper, Opacity 0.13) und FogExp2 in einem Ton dunkler als der Seitengrund — so versinkt die Maschine nach hinten im Schatten.

Scroll-Kamera

Sechs Keyframes (Hero, Leistungen, Referenzen, Ablauf, Haltung, Kontakt) definieren Kameraposition, Blickziel, Maschinen-Versatz, Ring-Helligkeiten und Kern-Intensität. Der Scroll-Fortschritt wird nie direkt angewendet, sondern pro Frame exponentiell nachgeführt — framerate-unabhängig, ohne Scroll-Jank:

camVal += (zielWert - camVal) * (1 - Math.exp(-dt * 4));

Zwischen den Keyframes wird mit Smoothstep geblendet; die Maus liefert zusätzlich einen leichten, ebenfalls geglätteten Parallax-Versatz. Beim Laden „zündet“ die Maschine: Ringe, Staub, Fluss und Funken rampen zeitversetzt von 0 auf 1 (Power-on-Choreografie).

Performance-Regeln (auf die harte Tour gelernt)

• new THREE.WebGLRenderer({ canvas, antialias: true, alpha: false }) plus renderer.setClearColor(0x140e09, 1) — alpha: true kostete in Tests 61 → 2 fps. Den Hintergrund-Hex hart kodieren, nie aus getComputedStyle parsen (liefert oklch()).
• Kickoff ausschließlich über requestAnimationFrame(loop) — nie loop() synchron vor Ende der Deklarationen aufrufen (TDZ-Falle bei const).
• Alle Glut-Materialien: transparent + AdditiveBlending + depthWrite: false, der Kern-Halo zusätzlich depthTest: false — bewusst gesetzt, sonst werden Partikel weggecullt oder der Halo von Geometrie zerschnitten.
• devicePixelRatio bei 2 gekappt; Render-Loop pausiert bei document.hidden.
• Keine Allokationen im Frame: Kurven-Samples, Positions-Arrays und Vektoren werden einmal angelegt und wiederverwendet; nur BufferAttribute.needsUpdate pro Frame.
• Mobil reduzierte Stückzahlen (Partikel, Nodes, Funken, Satelliten) und größerer Kamera-Abstand.
• prefers-reduced-motion: exakt ein statisches Frame, neu gerendert nur bei Scroll/Resize. Ohne WebGL: statisches SVG-Poster mit CSS-Glut.
• DOM-Animationen ausschließlich über transform und opacity (IntersectionObserver-Reveals, ease-out-quart).

1. Palette zuerst: Grundfarbe als warmes Fast-Schwarz in OKLCH festlegen (L ≈ 0.17, Hue 55–65), einen einzigen Akzent-Hue wählen (hier 45–78) und die Hex-Zwillinge für WebGL notieren.
2. Fonts selbst hosten: woff2 (latin) von der Google-Fonts-CSS-API laden, fvar prüfen, als Variable-Font-Range deklarieren. Keine externen Requests im Endprodukt.
3. DOM komplett vor WebGL bauen: semantische Landmarken, Sektionen mit data-cam-Markern, Panels mit halbtransparenten (nicht geblurrten) Flächen für AA-Kontrast über der Szene.
4. Renderer konservativ starten: alpha: false, ClearColor = Seitengrund, DPR-Cap, Resize-Handler, try/catch mit Poster-Fallback.
5. Maschine schichtweise aufbauen: erst Ringe + Kern, dann Fluss, dann Funken und Satelliten. Jede Schicht einzeln testen, Stückzahlen zuletzt hochdrehen.
6. Kamera-Keyframes je Sektion definieren und über geglätteten Scroll-Fortschritt blenden; Sektions-Offsets nach document.fonts.ready neu vermessen.
7. Choreografie: Power-on beim Laden (zeitversetzte Rampen), Reveals per IntersectionObserver, Puls-Details (Atmen, Lastspitzen) als Sinus-Funktionen der Loop-Zeit.
8. Härten: reduced-motion-Pfad, document.hidden-Pause, Mobil-Stückzahlen, 390 px- und 1440 px-Viewports prüfen, overflow-x: clip gegen horizontales Scrollen.