Colophon · Generative Assets № 30

How the almanac works itself out.

Slackwater is a working tide instrument for the oyster leases, ferry and channel pilots of Bruny Harbour, Tasmania. It is not a table of times looked up in advance: four harmonic constituents are summed live into every height on the page, and one brass wheel drives the whole harbour — turn it and the water, the boats, the moon and the springs all recompute. Its single job is to make a century-old astronomical calculation feel like something you can hold in your hand.

01 Palette

Argued entirely from the subject: a printed chart under a Tasmanian winter night. Chart blue is the paper; foam is the ink of the water; brass is the instrument.

Chart blue

#12283A

The ground — the deep prussian of an Admiralty chart. Everything is set on it.

Abyss

#0C1A28

Darker section field for the register and moon panels — depth below the surface.

Foam

#DCE9EE

Body text and the water's crest highlight. Cool white, 12:1 on chart blue — always legible.

Brass

#C8A24B

The one accent, reserved for the instrument: wheel, cursor, high-water marks, the slack-water glow.

Slate

#8FA9B8

Quiet labels and the solar constituent S₂ — the steady, secondary voice.

Copper

#B06B4A

The diurnal lean, K₁ — a warm rust that keeps the four constituents individually readable.

02 Type

The water keeps its own time.

Spectral — display & numerals

A serif with a scientific bearing, drawn for screens. Its italic carries the headlines and the tabular figures set every clock, height and metre — an almanac is a table of numbers first, so the numerals had to be beautiful.

HW 14:24 · 1.43 m

Outfit — instrument labels

A geometric sans for eyebrows, tick numerals and readouts — the engraved-legend voice of a real instrument. Wide tracking and small caps keep it quiet next to Spectral's warmth.

03 Technique

Harmonic engine — every height is Z₀ + Σ Aᵢ·cos(σᵢt − φᵢ) over M₂, S₂, K₁, O₁, with real speeds after Doodson. High and low water are found by bisecting the curve's slope to zero; springs and neaps from the drifting phase of S₂ against M₂.
Harbour scene — canvas 2D. Sky, sun, moon, headlands, jetty, tide staff and moored boats are all procedural; day/night, twilight, moon phase and moonglade are computed from the dialled time and a southern-hemisphere sun model.
Register & phasor — two more canvases: a 48-hour tide chart you can scrub, and the four constituents drawn as vectors added tip-to-tail, their chain's end tracing the last twelve hours.
Moon arithmetic — synodic phase, illumination and age from the epoch new moon; the disc is drawn waxing-on-the-left, the way Tasmania sees it.
No libraries, no images — one self-contained file, all CSS and JS inline. DPR capped at 2, rAF paused on document.hidden, a settled static frame under reduced motion.

The signature element — the tide wheel. An inline SVG dial, ticked to the twenty-four hours, rotated by transform so the fixed foam pointer reads the dialled hour. A pointer-capture drag converts angular change into a time offset added to the wall clock; that single offset feeds the harmonic engine, so one gesture re-solves the height function and every canvas on the page repaints in the same frame — the harbour genuinely follows your hand. Arrow keys nudge it in quarter-hours for keyboard use, and at the still moment between flood and ebb the wheel blooms with the same brass glow as the wordmark: slack water.

04 Iteration log

Pass 1 · Craft

Audited spacing, focus and copy against the rendered result. The two data canvases (register and phasor) carried no accessible name, so gave each a descriptive role="img" label. Added a crafted :active press on the helm buttons and widened the wheel's focus offset so the ring clears its drop-shadow. Type scale, contrast and colour balance already held — brass stays the sole accent throughout.

Pass 2 · Depth

Enriched the signature element: the wheel now blooms brass at slack water, so the whole Slackwater identity — wordmark, badge and instrument — converges on the one still moment. Added a second-read gift: a rare meteor streaks the harbour on a clear night, seeded to live animation and deep-dark skies only, so it rewards a second visit without ever competing with the wheel. Gave the glow a slow 1.2s bloom to match the water's calm.

Pass 3 · Hardening

Checked the 375px hero: the readout clears the wheel with room to spare, and the page never scrolls sideways. Confirmed reduced motion renders a settled frame with no meteor or glow, DPR is capped, and resize rebuilds every canvas. Applied the Chanel rule — removed one of the three sub-surface drift lines so the water reads calmer. Final copy read: no filler, real place, real numbers.