Creative Development, das trotzdem schnell lädt.
Die eigenen WebGL-Szenen auf dieser Website — das Objekt im Hero, ein Archiv, durch das Sie fliegen, zwei Case-Öffnungen, für ihr jeweiliges Projekt gezeichnet — während die Seite, die Sie gerade lesen, trotzdem einen LCP von einer Sekunde erreicht. Das ist die Disziplin: Motion, die für die Marke argumentiert — und die fliegt, sobald sie mehr kostet als sie bringt.
Belege ansehenReal-time und WebGL
Three.js und handgeschriebenes GLSL dort, wo das Thema wirklich profitiert — eine raymarchte Glasform hinter der Typografie, eine Brücke, die sich beim Öffnen ihrer Case Study zusammensetzt, ein Vertragsatlas, der sich aufblättert. Vier Szenen auf FIDIC.uz, jede nur auf ihrer Seite geladen und erst, wenn der Browser Leerlauf hat.
Motion mit Aufgabe
Kamerabewegung, die Hierarchie zeigt; Übergänge, die zwischen zwei Zuständen tragen, statt sie zu unterbrechen; Scroll, der gescrubbt wird statt an dir vorbeizulaufen. Was dekorativ ist und nicht beantworten kann, wofür es da ist, fliegt raus — auf dieser Website war das der größte Teil des ersten Entwurfs.
Performance als Art Direction
DPR-Caps, Texture-Budgets, adaptive Frameraten, Pause bei verborgenem Tab und ein vollständiger Opt-out für schwache Geräte — Save-Data, zwei Gigabyte Speicher oder zwei Kerne bekommen den CSS-Hintergrund. Die Ästhetik wird von diesen Grenzen genauso geprägt wie von den Materialien.
Zugänglich von Haus aus
prefers-reduced-motion richtig umgesetzt — also verlangsamen statt einfrieren, denn ein angehaltenes Objekt liest sich als kaputte Seite. Inhalte bleiben im Dokument, Tastaturwege intakt, und alles, was Inhalte einblendet, liegt außerhalb des Bundles, damit ein fehlgeschlagenes Skript die Seite nicht verbergen kann.
Ausgeliefert, dann gepflegt
Die interessante Arbeit beginnt nach dem Launch. Diese Website führt ein öffentliches Engineering-Log darüber, was kaputtging, wie es gefunden wurde und was es gemessen hat — inklusive der Änderungen, die gemessen und dann verworfen wurden. Lesen Sie es, bevor Sie jemanden beauftragen, mich eingeschlossen.
Ein ruhiger Architekturfilm über Tageslicht, Materialdisziplin und eine kontinuierliche Kamerafahrt durch ein Interieur am Comer See.
interaktive Archiv-Sektoren
drei Case-Portale und neun 3D-ArbeitenZielwert für Motion- und WebGL-Erlebnisse
auf einem Mittelklasse-Handy gemessen, nicht auf einer Workstationbis der WebGL-Chunk überhaupt zu laden beginnt
weit nach dem Fenster, das den LCP entscheidetDas sind Messungen dieser Website, nicht eines Kunden-Launches — es ist der eine Build, dessen Innereien sich öffnen und prüfen lassen, weshalb das Engineering-Log öffentlich ist. Die 3D-Ebene lädt hier bewusst zuletzt und ist das Erste, worauf ein schwaches Gerät verzichten darf.
Eine mehrsprachige Corporate-Website und das SEO-System darunter — organische Suche +780% im Launch-Fenster.
Astro / Three.js / GSAP · 2026Case öffnen CASE / 02FIDIC.uz429 statische Seiten und 117 Fachartikel in einem Feld mit wenigen tausend Fachleuten — 17 380 Impressionen in den ersten 82 Tagen, ganz ohne Werbung.
Astro / MDX / Serverless · 2026Case öffnenDie Logik hinter der Arbeit.
Schadet 3D der Performance und dem SEO?
Ja, wenn es der einzige Ort ist, an dem Inhalt existiert, oder wenn es lädt, bevor die Seite lesbar ist. Richtig gemacht kostet es beim ersten Paint fast nichts: Die Bedeutung ist serverseitig gerendertes HTML, die 3D-Ebene kommt danach, schwache Geräte lassen sie ganz aus. Auf dieser Website beginnt der WebGL-Chunk erst nach rund drei Sekunden zu laden — weit nach dem Fenster, das den LCP bestimmt.
Wann ist Three.js die falsche Wahl?
Wenn das Thema nicht räumlich ist. Eine Preistabelle, ein Buchungsflow, eine Doku-Website — keines davon wird in 3D klarer, und das Budget bringt als Inhalt oder Tempo mehr. Es verdient seinen Platz, wenn ein System erkundbar sein muss, wenn ein Übergang als eine durchgehende Bewegung lesen soll, oder wenn das Objekt selbst das Produkt ist.
Womit bauen Sie?
Astro für das Dokument, durchgehend TypeScript, GSAP und ScrollTrigger für Timeline-Arbeit, Lenis für Wheel-Smoothing am Desktop, Three.js und rohes GLSL für die Echtzeit-Ebene, und die Web Audio API für die Klangkulisse, die erst geladen wird, wenn jemand den Ton einschaltet. Statische Ausgabe auf Vercel, serverlose Funktionen nur dort, wo etwas pro Request laufen muss.
Können Sie mit einer bestehenden Marke arbeiten?
Ja — der größte Teil dieser Arbeit ist, eine bestehende Marke in Bewegung und Raum zu übersetzen, ohne ihr zu widersprechen. Bridge Consult hatte Positionierung und visuelle Identität; die Aufgabe war eine digitale Oberfläche, die als dieselbe Firma liest — nicht als eine andere mit fremdem Logo.
Wie läuft so ein Projekt ab?
Zuerst der Scope, schriftlich, inklusive dessen, was bewusst nicht gebaut wird. Dann eine funktionierende Seite statt eines Mockups, denn ein statischer Entwurf sagt weder, ob sich ein Übergang richtig anfühlt, noch was er auf einem Telefon kostet. Dann Messung und eine Liste dessen, was gestrichen wird. Alle Case Studies hier entstanden solo — es gibt keine Übergabe, bei der die Absicht verloren geht.
Showreel-Niveau
- Zeitrahmen
- Ab 3 Wochen
- Ab
- 2.900 €
- Antwort
- Binnen eines Tages
Einen Grund dafür. Wenn der Effekt sein Gewicht nicht wert ist, sage ich das und baue die einfachere Variante.

