Website Design & Development
TransGo Global Logistics
We move what matters.
Overview
TransGo is a concept build for a freight forwarder. Logistics sites tend to describe a service that is, by nature, invisible to the customer — so instead of describing it, this one shows it: the page follows a single shipment through every stage of its journey as you scroll.
Challenge
A list of services does not build confidence, and freight is bought on confidence. The challenge was turning an invisible service into something a visitor experiences, while keeping the practical content a real forwarder needs — services, coverage, technology and a quote request.
Approach
Six pinned stages — warehouse, road, port, ocean, customs, last mile — each holding the frame while its vehicle crosses and its telemetry updates. A tracker follows along the side, advancing the shipment status as each stage enters the viewport and stepping out of the way once the journey ends.
Design
Industrial near-black with a high-visibility orange accent, and a heavy condensed display face against a monospace for telemetry and reference numbers, so the interface reads like operations software rather than a brochure.
Development
React 19 and Vite, Tailwind CSS v4 tokens, and Framer Motion throughout. The trucks, cranes, ships and planes are hand-built SVG components rather than images, so they animate cleanly and cost almost nothing to load. The coverage globe is an orthographic projection over a land-dot grid computed offline — no mapping library ships to the browser — with cargo dots travelling the route arcs along offset paths.
Responsive Experience
Pinned, scroll-driven stages are the hardest thing to make behave on a phone. Each stage reflows rather than scaling down, stage content clears the tracker on wide screens, and the site was audited at 360, 390, 740 landscape, 768, 1024 and 1440 with no overflow, no clipped text and no console errors.
Final Result
Live at transgo-logistics.vercel.app as a portfolio piece on scroll-driven storytelling — the shipment, routes and coverage figures are illustrative, not a real freight operation.
Key Features
- Six pinned journey stages with hand-built SVG vehicles
- Tracker HUD that advances with the shipment and scopes itself to the journey
- Orthographic coverage globe with animated route arcs
- Shipment tracking, services, technology and network sections
- Quote drawer with focus handling and scroll lock
Technology Stack
Want something like this?
Let's talk about what you're building.