Midas – 3D live visualisation of the Norwegian Continental Shelf
Stratas team project
Open full-size image ↗
Category: Editorial / showcase (Stratas R&D) Status: Active development, pre-production Time window: September 2026 → ongoing Live URL: Vercel-linked; production URL not yet declared
Purpose
Real-time 3D editorial visualisation of the Norwegian Continental Shelf. Renders 15 flagship producing assets as wireframe platforms at true lat/lon and streams live per-second yield in USD / NOK / EUR driven by commodity spot prices – equity breakdown, tie-back detail, and production coverage surfaced per asset.
Who it is for
Editorial / investor-facing audience for the North Sea petroleum sector, and Stratas internal stakeholder demos where the pitch is "here is a live, honest picture of the shelf, not a slide of it".
Stack
- Frontend: Next.js 16.3 + React 19.2 + TypeScript (strict) + Tailwind CSS v4
- 3D graphics: Three.js 0.185 + React Three Fiber 9.7 +
@react-three/drei10.7 - Animation: Framer Motion 13.2 (UI shell); custom camera-smoothing (per-branch iteration in
camera-smoothness-*) - State: Zustand 5.0
- Data: Next.js API route
/api/marketfanning out to Frankfurter (FX) + EIA (Brent) in parallel with 4s timeouts, deterministic baseline fallback if either upstream fails;Cache-Control: public, s-maxage=900, stale-while-revalidate=3600 - Client engine: Box-Muller Gaussian random walk simulator (
src/lib/engine/pipeline.ts) seeds visualisation if upstreams are down - Analytics: Vercel Web Analytics
- Deployment: Vercel
Stratas team project
Delivered by the Stratas team and shown here as part of the wider Stratas portfolio.
Notable capabilities
- Fifteen modelled offshore assets rendered as wireframe geometries (Condeep, steel jacket, FPSO, semisub, subsea template archetypes) at true lat/lon with equirectangular projection; per-vertex colouring splits geometry across the waterline (
src/components/scene/Rig.tsx) - Live per-second yield streaming: commodity prices + FX drive continuous revenue calculations in three currencies; fiscal engine handles BOE / m³ / kg conversions per asset baseline
- Equity transparency – selecting an asset surfaces the ownership split across operators as a coloured equity square
- Subsea tie-back annotation on assets that carry satellite fields
- Multi-view editorial framing: "Flagships" (8 curated top producers) vs "Shelf" (full 15 modelled assets + a procedural 79-field-point layer); birdseye compass-rose button flips to a top-down 360° view
- Deterministic fallback everywhere: upstream failure surfaces the baseline honestly rather than a blank canvas
Outcome
23 commits in a nine-day sprint (early September 2026). 13 active feature branches concurrent – camera smoothness, first-paint performance, mobile peek-drawer inspector, one-row TopHUD, production-readiness. Ship-blockers tracked openly in TODO.md (real NPD monthly production baseline, TTF gas / EUA carbon upstream wiring, error reporting, cross-browser/mobile verification).
Evidence
- Case study: Related case study
- Repo: private
- Key files:
src/components/scene/Rig.tsx,src/lib/engine/fiscal.ts,src/lib/engine/pipeline.ts,src/lib/data/assets.ts,src/app/api/market/route.ts,HANDOFF.md,TODO.md - Public data sources named in code: Frankfurter (FX), U.S. EIA (Brent spot), Norwegian Petroleum Directorate (NPD) baseline
Skills demonstrated
nextjs-16, react-19, typescript-strict, three-js, react-three-fiber, react-three-drei, zustand, webgl-3d-scene, equirectangular-projection, real-time-data-streaming, commodity-fiscal-modelling, deterministic-fallback-under-upstream-failure, mobile-peek-drawer-ux, first-paint-performance, vercel-web-analytics, tailwind-v4
Want to discuss the decisions behind it?
Over fifteen years of consulting and growth, and hands-on AI delivery from discovery to daily operations. I can share my CV and talk through how I connect business outcomes with systems that run.
Available for a chat. In person in Stavanger, or remotely worldwide.