Arcline
A freight forwarding website built around one promise: you always know where your cargo is.
- First commit to launch
- 8 days
- Pages
- 14
- Animated trade lanes on the globe
- 8
- One shipment tracked across a horizontal
- 11,840 km
About the project
Arcline is a marketing site for a freight forwarder that runs air, ocean and road freight plus customs clearance from Douala. The homepage has a draggable WebGL globe with trade lanes drawing across it, a horizontal scroll that follows one shipment over 11,840 km, and two scroll-scrubbed image sequences set in a container yard and at a terminal crane. It has 14 pages, including six service pages, a network page, and a tracking page with the lookup, timeline, exceptions and share-link states already designed.
The brief
A forwarder sells trust more than it sells freight. Importers who ship 50 to 500 containers a year spend Mondays phoning forwarders to ask where their containers are. The site had to show that Arcline is the forwarder that tells them first.
The homepage
The hero is a WebGL globe built with cobe. It sits cropped past the right edge of the screen, so it reads as a planet rather than a widget. Eight trade lanes between 11 gateways draw across it. You can drag it, and the headline column lets pointer events through so the globe stays grabbable behind the text.
Below that, a horizontal scroll follows one shipment. A single ScrollTrigger drives the scenery, a distance odometer and the snap points, so they always agree on which leg the shipment is on. The container yard and terminal crane sections are image sequences that crossfade as you scroll, with a live readout of the current stage and lift height.
Motion rules
GSAP handles anything tied to scroll position. Motion handles open, close and hover states. Lenis handles smooth scrolling. No element gets animated by two libraries at once. Sticky sections use CSS position: sticky instead of ScrollTrigger pins, because pins rewrite the document flow and fight Lenis for scroll position. The looping ground line pauses when it goes off screen, and every section respects prefers-reduced-motion.
Design system
Sections alternate between two colour schemes, ink and paper, set by one data-scheme attribute. The attribute reassigns every token, so a component written once works on both. There are two accent colours. Blue marks focus and links. Orange only ever means a shipment's state. Cabinet Grotesk sets the display type, Clash Display the body, and Geist Mono every label and port code.
Built to take real data
Every string and number on the site lives in a typed constants file. When the tracking API is ready, wiring it in means changing an import, and no component gets rewritten. The tracking page already has its lookup form, event timeline, exception states and read-only share link. For now a lookup returns the not-found message, because showing a made-up timeline would be worse.
Stack notes
The site runs on Next.js 16 with Cache Components, typed routes and the React Compiler turned on. A link to a page that doesn't exist fails the type check. The footer's service links come from the same list as the service pages, so neither can drift from the other.
Need something like this built?
Send me the details, or book a 15 minute call from the contact page.