Archivo
Know where
it is.
A grotesque with square, engineered terminals — it reads as competent rather than friendly, which is the entire pitch. Carries headlines and body alike.
AaBbCc — 0123456789
Fathom
An in-house project — brand and site for an ocean freight platform. “Know where it is. To the hour.”
Visit live site
fathomshipping.netlify.app
- Type
- In-house — self-initiated
- Scope
- Brand, 3D scene, site, build
- Sector
- Logistics / Freight
- Year
- 2026
01 / Why we built it
Make precision
the product.
Freight sites all look the same: a stock photo of a container yard, a tracking box, and a promise about “global solutions”. The industry sells capability, when what customers actually lack is certainty.
So we invented Fathom around a single claim — know where it is, to the hour — and made the whole page behave like an instrument rather than a brochure. Registration marks in the corners, chart coordinates down the margin, a live vessel panel reading out speed, laden weight and ETA.
The brief we set ourselves: if the interface feels measured, the promise of measurement is believable before a word is read.
02 / The scene
A ship you
scroll around.
The centrepiece is a real-time WebGL scene, not a video. A wireframe vessel sits in a particle sea, throwing a bow wake; scrolling flies the camera around it and inverts the frame from night ocean to plan-view paper. Because it's live geometry, the page can move the camera to wherever the copy needs the eye.
03 / Typography
One voice,
two registers.
IBM Plex Mono
51°55′N
04°28′E
Every number on the page is monospaced — coordinates, tonnage, speed, ETA. Figures line up in columns and stop jittering as they update.
AaBbCc — 0123456789
The split isn't decorative: mono marks anything that is measured. Prose is Archivo, data is Plex Mono, and the reader learns the rule without being told it — so a monospaced figure reads as instrument output, not styling.
04 / Colour
Taken from
the scene.
The palette wasn't chosen and then applied — it was pulled out of the render. Ice is the colour of the wireframe edges, void is the canvas clear colour. That way the interface and the 3D scene can't drift apart, because they're the same few values.
Void
#080C11
Page ground — the canvas clear colour.
Void 2
#0D141C
Raised panels and cards.
Deck
#101C26
Services ground — a shade warmer.
Ice
#9ECDF2
Wireframe edges. The structural blue.
Ice Dim
#5D7F9C
Secondary text, hairlines.
Signal
#F2A03D
Live data only. The one warm note.
Paper
#EAF2F9
Primary type on dark.
Hairline
ice / 22%
Every rule and border on the page.
In an all-blue frame a single warm accent carries meaning on its own. Signal amber appears only on live telemetry — so “this number is moving” needs no label, and the eye finds it instantly in a dense panel.
05 / Build
Real-time,
on a budget.
The scene runs on React Three Fiber — a wireframe vessel, a GPU particle sea and a bow-wake system, all driven by one scroll value so the camera, the lighting inversion and the copy stay locked together.
A preloader holds the page until the geometry is in, because a 3D hero that
pops in halfway through the fold is worse than no 3D at all. Everything
respects prefers-reduced-motion: the scene settles to a static
composition rather than scrubbing.
- Framework React 19 + Vite + TS
- 3D React Three Fiber · drei · three
- Scene Wireframe ship, particle sea, bow wake
- Motion Single scroll driver, reduced-motion safe
- Type Archivo + IBM Plex Mono
06 / See it running
Live Open the Fathom site fathomshipping.netlify.app
Next
Adorncroft