The making of · No. 143

SyZyGy

A working tide diagram. The ocean is raised into two bulges by the Moon's gravity gradient; they chase the Moon around the globe and swell into spring tides when the Sun falls into line — the moment astronomers call syzygy.

01 The concept

SYZYGY is No. 143 in the Generative Assets collection — the Unseen wave, where each site gives a body to a field you cannot see. The invisible thing here is the tidal force: not the Moon's pull itself, but the difference in that pull across the width of the Earth. The near ocean is tugged harder than the planet's centre, the far ocean less — so water stands up on both sides at once. The page's single job is to make that counterintuitive fact obvious at a glance, and to let you read it as a height on a tide clock.

Audience: anyone who has stood on a beach and wondered why there are two high tides a day, not one — and why some are bigger than others.

02 Palette

Argued entirely from a night sea watched from orbit — deep water, a cold current line, and bone-white moonlight. The bright ocean blue is reserved for lines and marks only; body copy runs on a separately derived light ink so nothing small sits below 4.5:1.

Night sea

#0A1420

Ground — deep water at night, cool and near-black so lines and moonlight carry.

Ocean line/mark

#4C8FB0

The bulge surface, orbit ring, graticule. A cold current blue — marks only.

Moon bone

#D8D2C2

The Moon, spring-tide arc and display type. Bleached bone, the colour of moonlight.

Solar warm

#E6D3A0

A single warm cue at the horizon — the Sun's direction and the falling-tide state.

Tide ink (derived)

#B4C6D4

Body copy on the sea at ~10.5:1. Derived so the accent stays on lines, not text.

Ink mute

#5E7484

Eyebrows and tracked labels only, never running text.

03 Type

Display

SyZyGy

Newsreader. A literary text serif with a true italic. The three y-descenders, set italic, become the wordmark's one moment of bravery — the letters dip like the tide troughs between the caps. Optical sizing lets it hold at 7rem without going brittle.

Readouts

5.4m · +10:57

IBM Plex Mono. Tabular figures so the tide-clock height and countdown don't jitter as they tick. Carries every label, bearing and hectare of instrument text — the almanac voice against the serif's poetry.

04 Technique

Gravitational-gradient model. Ocean height at each angle follows the Legendre term P₂(ψ) = (3cos²ψ − 1)/2, summed for Moon and Sun. It is positive at the sub-lunar point and its antipode, negative at the quarters — the two bulges fall out of the physics for free.
Canvas 2D, one pass. The sea is a 260-point closed path stroked and filled, the Earth punched out with destination-out so only the water layer shows. A dashed mean-sea-level circle gives the bulge something to deviate from.
Spring & neap. The solar term is weighted at 0.46 of the lunar. When the Moon aligns with the Sun the terms add and the tide swells; at the quarters they partly cancel. The surface line and clock arc brighten to bone as alignment approaches.
Tide clock. An inline SVG dial. The Earth rotates under the bulges, sweeping your coast through two highs per turn; the hand, height, trend and time-to-next-high all read off the same model as the diagram.
Moon phase. A clipped ellipse terminator lit from the Sun's fixed direction renders the true crescent-to-gibbous cycle as the Moon orbits.

The signature is the pair of bulges chasing the Moon and swelling at syzygy. Because both the diagram and the tide clock are driven by the same elevation function, everything stays honest: drag the Moon and the whole field re-knits in real time, the sub-lunar and antipodal highs slide around with it, and the coast gauge, arc and countdown update in the same frame.

05 Iteration log

Pass 1 · Craft

Rhythm, contrast, collisions

Set the type scale off the wordmark and pulled the tagline to a 34ch measure. Drove the diagram at three widths: on mobile the nav INDEX/GUIDE was colliding with the almanac eyebrow — split them onto separate grid rows. Confirmed the derived tide-ink clears 4.5:1 and kept the ocean blue strictly on lines.

Pass 2 · Depth

Naming the two highs

Added a second read: the bulge tips are now labelled HIGH · SUB-LUNAR and HIGH · ANTIPODAL, so a viewer notices the counterintuitive thing — there are two highs, on opposite faces. The spring-tide surface now glows and the clock arc shifts to bone at alignment, and dragging the Moon re-knits the field as a live micro-interaction.

Pass 3 · Hardening

375px, reduced motion, honesty

Verified the layout to 375px with no real overflow, capped devicePixelRatio at 2, sized to container on resize, and paused the render loop on document.hidden. Under prefers-reduced-motion the diagram draws one settled frame — bulges and Moon mid-orbit, clock populated — never blank. Drove the signature headless: the tide-clock RANGE cycles Spring → Mid → Neap and the arc switches colour, proving the swell is real, not decorative.

Designed & built by Sapience Analytics — part of the Generative Assets collection.

View the site Collection index