EVERY MILEUNDER CONTROL.

A digital logistics experience · concept project

A logistics website is usually a service catalog with stock photos. This piece flips it: show how cargo moves through a global network — origin, ground, port, ocean, air, destination — on a single page, with no client, no operator and no business claims.

• 01A single landing (plus 404 and an error boundary) on Next.js 16 with the App Router, React 19, Tailwind 4, GSAP ScrollTrigger and Lenis. Eig…+

  READ THE TECHNICAL DETAIL

  A single landing (plus 404 and an error boundary) on Next.js 16 with the App Router, React 19, Tailwind 4, GSAP ScrollTrigger and Lenis. Eight anchored sections — Hero, Concept, Journey, Altitude, Network, Capabilities, System, End of route — and a fixed HUD with the navigation spine and a cursor reticle for fine pointers only. The visual rule that unifies everything is the top-down camera: every object documented from 90°, the same fleet of orthographic cutouts (pallet, containers, truck, ship, plane) crossing the whole piece, a tonal rhythm between warm paper and blue-graphite and a single orange accent. All copy lives in two content files (logistics.ts and journey.ts), each journey stage with its own line: none repeats and none reads like a service catalog — each says what is happening to the cargo at that point of the route.

• 02The scroll-driven sequences aren't video: they're AVIF frames drawn into a <canvas>, with the index taken straight from progress (round(prog…+

  READ THE TECHNICAL DETAIL

  The scroll-driven sequences aren't video: they're AVIF frames drawn into a <canvas>, with the index taken straight from progress (round(progress × (n − 1))). The decision was measured, not aesthetic: the previous version, with eight <video> clips, dropped Lighthouse mobile from 87 to 73 — not because of LCP, but because of 390 ms of TBT, video decoding on the main thread. The ship sequence (the camera lifts off the deck until the route becomes a system) has 72 frames on desktop, because two screens of scroll at ~25 px per frame is the threshold below which motion turns into steps, and 48 on mobile, with its own composition (the ship climbs the frame vertically) instead of a crop of the desktop. Only the frames around the current index stay in memory; the fallback is the first frame's poster and reduced-motion shows a single editorial frame without downloading the sequence. Video was kept for the two short loops that don't depend on scroll (the port at dusk and the container doors opening at the end), loaded only near the viewport.

• 03The hero globe is Three.js through React Three Fiber, but it costs nothing at load: a static poster rendered from the component itself is th…+

  READ THE TECHNICAL DETAIL

  The hero globe is Three.js through React Three Fiber, but it costs nothing at load: a static poster rendered from the component itself is the LCP, and WebGL only mounts on the first interaction. The route — origin, hub and destination — is the same on the globe (arcs), in the preloader (the silhouette of the Americas) and in the Network section (Natural Earth projection via d3-geo, the path drawing itself with MotionPath): three nodes with instrument codes and rounded coordinates, no city names. The project's hardest rule is editorial and locked by tests: no company claims. Years, countries, shipment counts, percentages, certifications and testimonials fail the suite (Vitest + Testing Library, 55 tests, including a repository-wide scan against the previous client's brand — the piece started as a commercial site and was fully dissociated). Every number on the page describes the experience itself: three modes, seven stages, seventy-two frames.

BUILT WITH — Next.js 16 · React 19 · TypeScript · Tailwind 4 · GSAP ScrollTrigger · Lenis · Three.js / R3F · Canvas

07 stages · 03 modes · 72 frames

CONCEPT PROJECT · LIVE

[ I WANT SOMETHING LIKE THIS ]