Interaktive WebGL-Showcase mit Fluid-Simulation
Überblick
Eigenprojekt ohne Kundenauftrag: die fiktive Fahrerseite eines MotoGP-Piloten, gebaut um zu zeigen, was technisch möglich ist, wenn Design und WebGL-Programmierung ineinandergreifen. Scrollgesteuerte Animationen, ein selbst geschriebenes Lade-Intro und eine Echtzeit-Fluid-Simulation, die beim Hover über das Porträt das Gesicht in ein Helmvisier morpht.
Die Herausforderung
Screenshots allein beweisen keine technische Tiefe. Um zu zeigen, dass komplexe Interaktion nicht nur behauptet, sondern wirklich gebaut werden kann, entstand ein Projekt ganz ohne Kundenauftrag im Hintergrund: freie Hand bei Konzept und Umsetzung, volles Risiko beim technischen Anspruch.
Wie wir dorthin kamen
Aufbau mit Vite und Three.js. Kernstück ist eine per GLSL geschriebene 2D-Fluid-Simulation (Navier-Stokes-Annäherung), die auf Mausbewegung reagiert und das Porträt in Echtzeit verzerrt, bis beim Hover über dem Kopf ein Helm-Visier durchscheint. Dazu ein handgezeichnetes SVG-Lade-Intro mit Laser-Trace-Reveal, scrollgekoppeltes Schrumpfen des Hero-Bilds, Parallax-Layering und eine eigene Canvas-3D-Streckenvorschau für die „Next Race“-Karte.
Das Ergebnis
Eine vollständig funktionsfähige One-Page-Demo, die als lebendiges Beispiel auf r2rstudio.de gezeigt wird, statt in einem Portfolio-PDF zu verstauben. Kein Live-Kundenprojekt, sondern der Beweis, dass Effekte wie dieser hier innerhalb echter Kundenprojekte reproduzierbar sind.