EVERY MILEUNDER CONTROL.

CONTEXT

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.

WHAT WAS DONE

A top-down camera as the art-direction rule: a dotted globe with origin → hub → destination arcs, a sticky conveyor with seven stages and the same fleet of orthographic cutouts, a 72-frame AVIF canvas sequence driven by scroll, a route that draws itself over the technical map, and reduced-motion for every scene.

07 STAGES · 03 MODES · 72 FRAMES

SOLUTIONS

• Top-down camera

  One visual rule for the whole page: every object documented from 90°, the same fleet of orthographic cutouts crossing every section.

• 72 frames in canvas

  AVIF sequence drawn into a <canvas> with the index taken from scroll — decided after measuring that eight <video> clips cost 390 ms of TBT on mobile.

• Globe on demand

  Three.js/R3F only mounts on the first interaction; the LCP is a poster rendered from the component itself.

• Zero business claims

  Years, countries, shipments, percentages and testimonials fail the test suite. Every number on the page describes the experience, never an operation.

TECHNICAL DETAIL

• 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…+

  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…+

  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…+

  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.

SCREENS

RESULT

A top-down camera as the art-direction rule: a dotted globe with origin → hub → destination arcs, a sticky conveyor with seven stages and the same fleet of orthographic cutouts, a 72-frame AVIF canvas sequence driven by scroll, a route that draws itself over the technical map, and reduced-motion for every scene.

No client, no operator, no business claims: every number describes the experience.

I WANT SOMETHING SIMILAR ↗OPEN SITE ↗