How it was made

Breakbulk

A working ship-to-shore gantry, drawn in one canvas, where the load hangs from a real pendulum and you have to time the swing.

Breakbulk is a fictional port-simulator brand for anyone who has ever watched a crane and wondered how something thirty storeys tall places a thirty-tonne box to the centimetre. The page has one job: make you feel the sway — and understand that it is not chaos, it is a clock.

01 Palette

Harbour dawn, not a mood board. Every colour is a thing on the quay at 05:48: the pre-sunrise navy of the water, the safety yellow that every crane on earth is painted, and the primed rust of a steel box that has crossed the Indian Ocean twice.

Harbour dawn

#33415C

The sky and sea base before the sun clears the booms. Cool, patient, unlit.

Crane yellow

#E8A800

The one accent. Structure, warnings, the spreader lock — the eye follows it like a hi-vis vest.

Box rust

#9A4530

Fremantle Marine's containers and the ship's boot-top. Salt and primer.

Swanline blue

#2E5F8A

A shipping line's steel. Cargo needs colour you can call across a deck.

Indian Ocean green

#3F6B52

The third line on the manifest. Muted so the yellow always wins.

Quay ink

#121A2A

The console and panels. Near-black with a blue cast so nothing reads as pure UI.

02 Type

Archivo at its widest optical width (wdth 125, weight 900) is stencilled, load-bearing, the lettering of a hull name and a gantry leg. IBM Plex Sans carries the reading copy; IBM Plex Mono runs every readout, container ID, and log stamp — because a terminal is a place of monospaced numbers, and the ISO code on a box is set in exactly this spirit.

Trolley out,
hoist down.

SWNU 482 016-3 · 27.4 t → BAY 3 TIER 2

Archivo Expanded 900 · IBM Plex Mono 500

The one moment of typographic bravery: bulk set in crane yellow inside the wordmark, so the brand itself reads as a painted sign on steel.

03 Techniques

Canvas 2DThe whole scene — sky gradient, sun, sea glitter, ship, quay, crane truss, containers — is drawn procedurally each frame into one <canvas>. No images, no sprites.
PhysicsA hand-rolled variable-length pendulum integrated at a fixed 120 Hz timestep, decoupled from render via an accumulator so the sway is identical on any monitor.
WebAudioEvery sound is synthesised: filtered-noise motor hum that tracks throttle, a square-wave twistlock click, a two-oscillator landing thunk, and a ship's horn.
CameraA single eased pan follows the trolley; DPR is capped at 2, the canvas sizes to its container on resize, and the loop pauses when the tab is hidden.
Real dataContainer IDs carry a genuine ISO 6346 check digit, computed the way a terminal's gate system computes it.

The signature element — cable sway you have to anticipate. The load is a pendulum whose length changes as you hoist. Each physics step integrates its angular acceleration from four real forces: gravity restoring it, the trolley's own acceleration shoving the pivot sideways, the wind's torque scaled by mass, and the energy the wire gains or loses as it lengthens or shortens (parametric pumping — the same reason a child pumps a swing). Brake half a swing early and the box arrives dead under the trolley; fight it and it fights back.

θ″ = −(g/L)·sinθ − 2(L̇/L)·θ′ − (a_trolley/L)·cosθ + (windₜₒᵣq/L)·cosθ − 0.10·θ′

04 Iteration log

Pass 1 · Craft

The scene never rendered.

The sea gradient called skyMix(), a helper that was never defined — only its array-returning cousin skyMixT() existed. That threw a ReferenceError inside the draw loop on the first frame, so the entire canvas stayed blank. Added the one-line string wrapper and the harbour appeared. Then audited type scale, meta tags, canonical/OG, favicon, and body contrast against the brief — all held.

Pass 2 · Depth

Made the sway meter tell the truth in colour.

The signature is the sway, but the gauge was monochrome yellow whatever the angle. Now the needle and its degree readout ease to warning-orange past 7° — the moment a set turns from clean to hard — so the instrument reinforces the lesson the physics is teaching. Left the existing second-read details intact: the windsock that gusts a beat before the readout, the 06:00 VHF traffic call, and the ship's horn that answers a click on the funnel.

Pass 3 · Hardening

375px, reduced motion, and one ornament retired.

Verified with headless Chrome at 375/768/1440: no horizontal overflow, hero at full opacity, zero console errors; the manifest reflows below the stage on narrow screens and the keyboard hint drops out. Reduced-motion settles the crane to a static frame and mutes gulls, glitter, and flutter. Applied the Chanel rule to the sky: three hard-edged "cloud" bars floating mid-air became a single soft dawn-haze band at the horizon — fewer marks, more believable light.