Scrollgesteuerte Frachtseite mit Live-Flottenkarte
Überblick
Eigenprojekt ohne Kundenauftrag: die fiktive Website eines Logistikunternehmens, gebaut um Interface-Handwerk in einem völlig anderen Genre zu zeigen als die verspielte Racing-Demo — nüchtern, dicht, datengetrieben. Ein scrollgesteuertes Cinematic-Intro aus einer Bildsequenz, eine interaktive WebGL-Europakarte mit Live-Flottenpunkten und eine durchgehende Reveal-Choreografie über die ganze Seite.
Die Herausforderung
Ein zweites Demo-Projekt sollte zeigen, dass die Racing-Demo kein Zufallstreffer war, sondern wiederholbares Handwerk — und zwar in einer völlig anderen visuellen Sprache: statt Motorsport-Chrome und Fluid-Simulation eine seriöse B2B-Logistikmarke mit Stempel-Optik und nüchterner Dateninszenierung.
Wie wir dorthin kamen
Aufbau mit Next.js 16 und React 19. Der Hero ist keine Videodatei, sondern eine 76-Bilder-Sequenz, die per Canvas 2D und requestAnimationFrame scroll-synchron durchgeblättert wird, während fünf HUD-Panels versetzt ein- und ausblenden. Die Flottenkarte ist eine echte WebGL-Szene (React Three Fiber, D3-Geo/TopoJSON für die Europa-Projektion) statt einer statischen Grafik. Lenis sorgt für butterweiches Scrollen, GSAP und Framer Motion choreografieren die Reveal-Animationen der einzelnen Sections, und ein Split-Flap-Zähler zählt die Kennzahlen wie eine Bahnhofsanzeige hoch.
Das Ergebnis
Eine zweite vollständig funktionsfähige One-Page-Demo neben Racing, live auf r2rstudio.de — der Beweis, dass das technische Niveau der ersten Demo kein Einzelfall war, sondern sich auf jedes Genre übertragen lässt, von Motorsport bis nüchterner B2B-Logistik.