Home › My work › Trade Raiders & Logistics
A logistics and procurement brand from Pakistan, rebuilt as a 3D website that shows how goods actually move: collected, cleared, stored and delivered.
01 · Overview
Trade Raiders & Logistics (TRL) moves, stores, clears and sources goods across Pakistan, from inland trucking and customs to Microsoft licensing.
We rebranded the company and rebuilt trlpk.com around one idea: show the work. A 3D model of TRL's operation opens the site, and every service got a page of its own.
TRL's old site was a WordPress template: a stock photo of a port crane, one long page of anchor links and a few lines of copy for eight very different services.
The brief was to make a Pakistani logistics firm look as capable as it is, without losing the "Swift solutions" message, the old blog's search traffic or the WhatsApp-first way clients get in touch.
Had to change
Had to stay
A refreshed mark and a navy-and-orange system, then a Next.js site where every chapter is told with a live 3D scene: the trade engine, the container canyon, the yard and the network map.
All 23 pages are built from the same tokens and parts, so a new service page takes an afternoon, and the whole site holds 60 frames a second while it scrolls.
02 · The rebrand
The same company and the same promise. On the left, trlpk.com as we found it, scrolling top to bottom (hover to pause). On the right, the site we launched.
A dark port-crane photo, a centred headline and one button. Below it, cards of more stock images and short paragraphs, all on one long page.
The home page opens on TRL's "trade engine". Scrolling flies the camera through sourcing, customs, the warehouse and the truck, chapter by chapter.
Page by page
The mark
The globe and the route stayed. The arrowhead became a plane, so the orange line now reads as a journey.
Colour
Navy for trust, orange for anything that moves: cargo, routes and the one button that matters on each screen.
Type
Aa Aa
General Sans at 400, 500 and 600 for the site: square, calm, a little industrial. This study pairs Inter with Instrument Serif.
03 · The outcome
A complete, scroll-told website: 23 pages, a live 3D scene in every chapter, an Insights section and a quote form that opens WhatsApp with the details filled in, on phone, tablet and desktop.
live 3D scenes, one model for every chapter and service
steady while the page loads and while you scroll
old URLs redirected, so blog rankings carried over
issues left in the SEO audit, across all 23 pages
A shipment with TRL
"Why TRL" used to be a list of claims. Now one container travels from Karachi Port to Lahore while a live ticket counts the kilometres and stamps each stop. Here are the four stops, as the ticket shows them.
01KHI · Karachi Port
Loaded and sealed at Karachi Port
02Customs gate
Scanned and cleared first time
03Motorway north
On the motorway, tracked every kilometre
04LHE · Lahore
Unloaded in Lahore, receiver signed
04 · Inside the system
Colour, type, radius and spacing are set once and used by every page and every 3D material.
Trucks, containers, cranes, globes and parcels, built once in TRL's colours and reused in every scene.
Service cards, steps, quote form and FAQ: the same parts on every page that needs them.
One easing curve and one set of timings. Everything stops for people who ask for reduced motion.
05 · How it connects
The old site sent every menu link to a spot on one long page. Now the home page is a doorway: each link opens a real page with its own scene, and every page leads back to a quote.
06 · One system
Tokens, the 3D library and the shared components flow into every journey, so finding a service, following a shipment and asking for a quote all feel like one product.
Three journeys, one system.
07 · Exploration
Both were built as working sites with the same real content, so the choice was made by scrolling them, not by looking at mood boards.
An engineering grid, a label on every part of the model and two buttons plus WhatsApp in the header. Clear, but everything spoke at once.
Soft studio light, one button, and labels that appear only during each close-up. The model gets the room, and the words wait their turn.
Chapter 01 · The 3D hero
Instead of a photo, the home page opens on a "trade engine": a white tray with a copper rim where parcels drop, get scanned, picked by a robot arm and loaded onto a TRL truck. Scrolling flies the camera through each step.
One tray, four stops. Each pin is a service line, and each card below is its close-up.
Hover a card to find it on the modelChapter 02 · Services
Eight services became three divisions. The card pins in place while full-bleed 3D scenes change behind it: a canyon of containers, a warehouse aisle and a data hall.
Chapter 03 · Why TRL
The tracking card became a boarding-pass style ticket: KHI to LHE codes, notches, a barcode, kilometres and percent counting up, and a "Delivered" stamp at the end of the road.
Chapter 04 · Company pages
On the old site, About was a banner and a paragraph. Now the company has four real pages: the network in 3D, five promises with an object each, a four-step walkthrough and the clients by name.
The page opens on a 3D landscape of TRL's routes: Karachi Port, the motorway north to Lahore and a spur to Islamabad, with trucks moving between them.
A pinned, numbered list. Each promise gets its own 3D object and a ring that fills as you read, and the list fits any screen height.
One coordinator runs each shipment end to end. The page walks the four steps as a timeline of cards, so clients always know what happens next.
A grid of the organisations TRL works with, from public authorities to IT distributors, in place of a line that says "trusted by many".
The route
1,210kmKarachi to Lahore, drawn on the About map
The promises
5promises, each with its own 3D object
The process
4steps, from brief to delivered
The imagery
0stock photos on any company page. Every image is a TRL render.
Chapter 05 · Under the hood
No page builder and no theme. A small set of web tools, each picked for one job: real-time 3D, scroll choreography, smooth motion and pages pre-rendered by Next.js so they open fast.
Real-time WebGL for all 13 scenes: the trade engine, the container canyon, the yard and the network map. Static parts are merged so each scene draws in a few dozen calls.
Every chapter is a timeline tied to the scrollbar: camera moves, card swaps, the ticket's kilometres and the rings that fill as you read.
Smooth, inertial scrolling that keeps the 3D and the page in step.
The framework behind all 23 pages: shared layouts, routing and pages pre-rendered ahead of time.
One typeface at three weights, set on a fluid type scale.
Schema.org JSON-LD, a dated sitemap and 13 permanent redirects.
Content & conversion
Two parts of the site that do the selling: articles that keep bringing people in from search, and a quote form that turns a visit into a WhatsApp conversation.
Insights
The old dated blog URLs now forward to clean /insights/ pages with reading time, related posts and article markup for search.
Get a quote
Pick a service, or "Custom requirement", then add the route and cargo. Send message opens WhatsApp with everything written out, ready to send.
Chapter 06 · Performance
Thirteen live 3D scenes on one site is a lot. We measured frame times in Chrome, then rebuilt how the scenes load and draw until scrolling held a steady 60 frames a second.
Chapter 07 · Search
A site launch is where rankings usually get lost. We audited all 23 pages, fixed what we found and forwarded every old URL to its new home.