Moves today
24 h3,314moves
+4.1%vs. 7-day mean
Compiling yard model…
Yard model · live telemetryMeridian
Meridian
Terminal
Stack height reads ground slots in use. Stack colour reads mean dwell. Hover a block, or pick one to pin the camera to it.
Mean dwell · days
< 2
2–3.5
3.5–5
5–7
7 +
Drag to orbit · scroll to zoom
Scenario live, camera view Yard. No block pinned.
Mean dwell
14 d3.6days
-2.4%vs. 7-day mean
Yard occupancy
14 d52%
+1.8%vs. 7-day mean
Crane rate
4 h28moves / hr
+3.2%vs. 7-day mean
Moves per hour
Moves / hour · UTC
Dwell distribution
0–1 d569%
1–2 d12620%
2–4 d19030%
4–6 d18429%
6–8 d549%
8 d +173%
11% of boxes are past the 6-day free period and accruing demurrage.
Quay crane rate
QC-01Working
20mv/h
Berth A · last 4 h
QC-02Working
33mv/h
Berth A · last 4 h
QC-03Working
33mv/h
Berth B · last 4 h
QC-04Working
24mv/h
Berth B · last 4 h
QC-05Idle
2mv/h
Berth C · last 4 h
QC-06Idle
1mv/h
Berth C · last 4 h
Yard manifest
| Allocation | ||||||
|---|---|---|---|---|---|---|
| Empty depot | 42/100 | 5.2 d | 14 | Watch | ||
| Empty depot | 53/100 | 2.2 d | 20 | Nominal | ||
| Empty depot | 56/100 | 3.4 d | 29 | Nominal | ||
| Cape Loop 2 | 44/100 | 4.4 d | 20 | Nominal | ||
| Cape Loop 2 | 49/100 | 1.9 d | 27 | Nominal | ||
| Cape Loop 2 | 66/100 | 5.0 d | 24 | Watch | ||
| MRD-7 Northbound | 72/100 | 3.2 d | 38 | Nominal | ||
| Reefer block | 40/100 | 6.0 d | 18 | Watch | ||
| MRD-7 Northbound | 37/100 | 3.2 d | 26 | Nominal | ||
| MRD-7 Northbound | 37/100 | 1.7 d | 24 | Nominal | ||
| Feeder Gulf | 50/100 | 4.7 d | 31 | Watch | ||
| MRD-7 Northbound | 82/100 | 2.3 d | 22 | Nominal |
Working · 12 blocks · 4 needing attention
Gate queue
In 1–42428m
In 5–8296m
Out 1–33411m
Out 4–61424m
Reefer88m
OOG1017m
Trucks in queue and median turn time, by lane group. Lanes over 25 minutes are flagged.
Design principlesBuilt as an instrument,
Built as an instrument,
not an illustration
A terminal operations console has one job: let a shift supervisor find the block that is about to cost money, in under five seconds. Each principle below names the code that keeps it honest.
The model is the chart
Block geometry is generated from the records that fill the manifest. Stack height is ground-slot occupancy; stack colour is the dwell step. Nothing in the scene is decorative. Every box you see is a row you can query.
lib/data.ts, stackHeights() and dwellHex()
One store, two directions
Hovering a block in 3D lights its row in the table; hovering a row lights the block. Both read and write a single client store, so a panel added later joins the same wiring without a new integration.
lib/console-state.tsx, one context, 6 subscribers
Stage-agnostic
The viewport renders a React Three Fiber stage by default and a published Spline scene when one is configured. The console around it does not change either way, because the contract is object names, not a renderer.
NEXT_PUBLIC_SPLINE_SCENE, objects Block_A1 to Block_B6
Deterministic by design
Every figure comes from a fixed seed, so the server render and the client render agree and a scenario looks identical on reload. Swapping in a live feed replaces one data module, not the views.
mulberry32(hash(id + scenario)), no Math.random()
Chart libraryEvery one of these is
Every one of these is
a chart we can build you
These six are examples, not fixed features. Each one is a form we fit to whatever your business actually measures. The terminal data below is only what we happened to plug in.
Also availableGeospatialSankeyFunnelCohort retentionSmall multiplesWaterfallBox plotScatter with fitControl chart
Berth utilisation
Which berth frees up first, and when?
ImportExportTransshipEmpty
Berth A
Berth B
Berth C
0006121824
Vessel calls against berth, across the working day. Bar colour is the dominant move type for the call.
Truck turn time
Are we slow on average, or slow in the tail?
Trucks by minutes from gate-in to gate-out. The dashed rule is the median. A distribution needs its summary drawn on it, not printed beside it.
Yard occupancy
Which block fills up, and at what hour?
000204060810121416182022A1A2A3A4A5A6B1B2B3B4B5B6
12%82% occupied
Ground-slot occupancy by block and hour. One hue, light to dark, so magnitude never gets a second colour.
Electrical demand
What drives the peak we are billed on?
Reefer plugsQuay craneskW
Reefer load runs flat around the clock; crane draw follows the vessel window. Stacked, because the two add up to the site total.
Equipment fleet
How much of the fleet is actually earning?
Working4164%
Available1625%
In maintenance711%
64 pieces of yard equipment by state. One bar rather than a pie: parts of a whole are easier to compare along a shared edge.
Volume by service
Which customer is taking the most ground?
1MRD-7 Northbound22836%
2Cape Loop 215925%
3Empty depot15124%
4Feeder Gulf508%
5Reefer block406%
Ground slots held per service, ranked. The leading service is picked out so the answer is readable without counting bars.
Specification
What ships
Numbers measured off this build, not rounded up for a slide. If a figure below matters to your procurement team, we will show you where it comes from.
Synthetic data, fixed seed
- Rendering
- 12 instanced meshes
- 1,200 containers drawn from one geometry buffer per block, with shadows on a 2048 map. Adding a block adds a draw call, not a thousand.
- Data contract
- 12 typed accessors
- Blocks, throughput, dwell, cranes, gate, energy, berth calls, fleet, occupancy, turn times, ranking and KPIs. Point them at your TOS and the views never learn about it.
- State
- 1 store, 0 polls
- A single context holds scenario, hover, selection and camera. Panels subscribe to it; nothing duplicates and nothing polls on a timer.
- Colour
- ΔE 9.3 worst pair
- Categorical palettes are run through a colour-vision validator per theme, above the deuteranopia and protanopia separation floor. Sequential ramps are re-stepped so the terminal step still clears its own surface.
- Contrast
- 8.5:1 body text
- WCAG 2.2 AA on both themes, with secondary text at 5.1:1. Focus rings are never removed, and forced-colors mode keeps its borders.
- Theming
- 151 tokens, 2 themes
- One token set drives the DOM and the WebGL stage together, so day shift and night shift cannot drift apart.
- Reporting
- CSV, no round trip
- The shift report is assembled and downloaded in the browser. Swap the writer for XLSX or PDF without touching the button.
- Delivery
- Next.js 16, React 19
- App Router, statically prerendered. The 3D stage is code-split and client-only, so the console shell paints before WebGL starts.
How we start
See it against your business
One week, three steps, and a real answer at the end of it. No pilot programme, no statement of work to sign before anyone sees anything.
You send a sample
One day of move history and a block layout, in whatever shape your system exports. CSV, a database dump or an API endpoint all work.
Day 1, no integration work on your side
We fit the model
Your yard replaces ours in the 3D stage and your figures replace the seeded ones. We pick the chart forms that answer the questions your team actually asks.
Days 2 to 4
You click through it
A working console on your own data, deployed behind your SSO. If it does not tell you something you did not already know, we say so and stop there.
Day 5
Send us a sample
Built by Pixlotech. Tell us what your operation measures and we will tell you, honestly, whether a console like this is worth building for it.