Scroll-driven freight site with a live fleet map
Overview
A self-initiated project, no client behind it: the fictional site of a logistics company, built to show interface craft in a genre completely different from the playful Racing demo — sober, dense, data-driven. A scroll-driven cinematic intro built from an image sequence, an interactive WebGL Europe map with live fleet points, and a reveal choreography running through the entire page.
The Challenge
A second demo project needed to prove the Racing demo wasn't a fluke, but repeatable craft — in a completely different visual language: instead of motorsport chrome and fluid simulation, a serious B2B logistics brand with a stamped, matter-of-fact data presentation.
How We Got There
Built with Next.js 16 and React 19. The hero isn't a video file but a 76-image sequence, scrubbed scroll-synchronously via Canvas 2D and requestAnimationFrame while five HUD panels fade in and out in sequence. The fleet map is a real WebGL scene (React Three Fiber, D3-Geo/TopoJSON for the Europe projection) instead of a static graphic. Lenis handles buttery-smooth scrolling, GSAP and Framer Motion choreograph each section's reveal animations, and a split-flap counter ticks the stats up like a departure board.
The Outcome
A second fully working one-page demo alongside Racing, live on r2rstudio.de — proof that the first demo's technical level wasn't a one-off, but transfers to any genre, from motorsport to sober B2B logistics.