A real-time 3D experience that puts every vessel on the map.

Project

Purpose

Collaborative Agency

Pravda

Client

Uni-Tankers A/S

ABOUT

Uni-Tankers is a Danish shipping company operating more than 40 oil and chemical tankers worldwide. Together with the brand agency Pravda, they commissioned Webnorth to build Purpose, a custom React Three Fiber application combining a live 3D globe, real-time fleet and office data, and an interactive cargo visualiser. The result is one of the most technically ambitious web builds in Webnorth’s history.

Visitors arrive to a cinematic showreel before stepping
into an interactive 3D globe where every vessel in the
fleet is tracked in real time. The experience is built for
exploration, moving between ships, reading live position
and route data, and stepping into the cargo visualiser to
understand what the fleet carries and where it’s headed. Purpose turns a global shipping operation into something immediate, visual, and navigable.

INDUSTRY

Maritime

PROJECT TYPE

Full build

DURATION

5-6 months

LANGUAGE

English

CORE TECHNOLOGY

React Three Fiber,
MS Fabric GraphQL, Three.js.

PROCESS

From a code review that changed everything, to a platform built to last.

We scope before we build, test before we ship, and document everything in between. Five structured phases, from technical analysis to go-live, so nothing is guessed, nothing is rushed, and you always know where things stand.

Discover & scope

Inspiration workshop with Pravda, Design handover from Pravda, API documentation review, specification finalised, 6-sprint backlog planned, cloud infrastructure configured, Figma design frozen.

Build: Phase 1

3D globe and metaball core built, vessel tracking integrated with live fleet and office API, WordPress CMS extended with custom fields, grid system and navigation structure implemented.

Build: Phase 2

All interactive modes completed: cargo material system with per-chemical shader properties, 3D product model transitions, office pins, deep-linked URL routing, custom cursor, purpose film player, cookie consent bridge.

Test

User testing followed by client testing. Cross-browser and cross-device QA across Chrome, Edge, Safari, Firefox, iOS, and Android.

Go-live

Production deployment via GitLab CI/CD, DNS and URL configuration, Matomo analytics connected, cookie consent verified across WordPress and SPA, post-launch corrections resolved. Live April 28, 2026.

ARCHITECTURE DECISIONS

Every technical choice shaped by what a live fleet dashboard demands.

Three decisions made before a single line of code was committed, each one trading raw performance for editorial autonomy, and each one paying off.

React Three Fiber over standard frameworks

The design required real-time 3D rendering, physics-based liquid materials, and smooth camera animation across an interactive globe. No conventional framework, WordPress theme, static site generator, or headless CMS could deliver this.

React Three Fiber was the only viable path: a production-grade React binding for Three.js that lets the team build the entire 3D scene as composable components, while keeping the rest of the UI in standard React.

Local server over S3 for 3D assets

Performance testing confirmed that serving 3D assets – textures, HDRI maps, models – directly from the Google Cloud application server was faster than fetching from an S3 bucket without a CDN.

The S3 bucket was fully set up and pipeline-integrated, but added infrastructure complexity without a speed benefit. S3 is still used for JSON data files pushed by the CI/CD pipeline.

Custom cookie bridge over off-the-shelf

The standard Real Cookie Banner plugin can’t render inside a React SPA running as a subfolder, it only works within WordPress.

Rather than switch consent tools, Webnorth contacted the plugin vendor (DevOwl) directly and built a three-layer bridge: a custom banner inside the React app, a WordPress middleware endpoint translating the SPA’s consent calls, and the plugin’s REST API syncing state between both systems.

TECH STACK

From a 3D rendering engine to a live fleet API, the tools behind Purpose.

React Three Fiber + Three.js Core 3D rendering framework Powers the globe, metaball, grid, 3D product models, particle effects, and all camera animation.
MeshTransmissionMaterial Physically-based glass and liquid shader Renders the metaball in all its material states, from transparent ethanol to waxy styrene monomer.
WordPress + ACF Pro CMS Extended with a dedicated backend section for cargo content, chemical descriptions, SEO metadata, and page settings, all exposed to the SPA via REST API.
Microsoft Fabric GraphQL Live fleet and office data source Vessel positions, speed, tank type, DWT, and status, authenticated via Azure OAuth2 and updated hourly from the client’s data lake.
GitLab CI/CD Deployment pipeline Separate dev and production environments with automated builds and asset deployment to Google Cloud.

40+ vessels tracked live

Every active vessel in the fleet is plotted on the 3D globe in real time, updated hourly from the client’s own data lake, no manual updates needed.

7 offices

All 7 Uni-Tankers office locations across 6 countries are pinned on the globe. Each one explorable directly on the site, with address, local time, and contact details pulled automatically from the API.