// 01 · the challenge
Cinematic,
and not laggy.
Ocean Sealink handles port calls in the UAE, Oman and China, and asked for a site that felt cinematic, without being slow, on the phones its principals and vessel owners actually carry.
Most 3D sites pick one of the two. This one had to keep a harbour moving and still put the headline on screen before anything else.
// 02 · what we built
A scene at the back,
a desk at the front.
The scene stays off the main thread
three.js renders inside a Web Worker on an OffscreenCanvas. Scrolling, taps and text never wait for a frame.
Words first, ships second
The first paint is pure CSS: the sky and sea of the opening frame, as a gradient. The engine starts from the page head and fades up over it.
One quality, any frame rate
Every device gets the same scene. When a phone runs short, only the frame rate steps down, from 60 to 30 to 20.
Five forms, one desk
PDA requests, vessel calls, cargo and service enquiries land with their attachments behind a dashboard only the operations team can open.
// 03 · the stack
Boring where it should be.
Proven parts, assembled carefully. Novelty goes into the product, not the plumbing.
frontend
Astro
3d
three.js in a worker
edge
Cloudflare Workers
data
D1 + R2
ui/ux design3d scenefrontend + backend buildcloud infrastructure
// 04 · in production
Live, and still light.
2 daysfrom the first commit to a live domain · the design was approved before a line was written.
60 fpson an Android phone at rest, while scrolling and through a four-minute soak · and the headline still paints first.
29 portsacross the UAE, Oman and China · each with its own page and checked figures.