Constellate

Build note · Generative Assets

How the sky
was drawn

CONSTELLATE is a fictional celestial almanac with one job: hand a visitor an empty procedural sky and let them draw, name, and keep their own constellations. The stars are a fixed fact computed from a single seed; the myths are yours, written to your browser and re-inked on return.

01 Concept

Every culture that ever looked up joined the same stars into different animals. The stars are given; the story is a choice. This page removes the story and leaves only the choice: a dark field, a grid of right ascension and declination, and your hand. You drag one star to another to lay a line; close a loop and the figure asks for a name, which is inked in gold and filed in a catalogue. Because the page belongs to the fourth wave — Second Person — nothing here moves on its own. The sky is inert until you drive it, and stills the moment you stop.

02 Palette

Four values, argued from the subject: a deep night, a single point of starlight, the gold of an inked catalogue, and the faint blue of a line not yet a myth.

Night
#0A1024
A blue-black sky, not pure black — deep enough that a single star reads as light, warm enough to hold gold.
Star
#EAF0FF
Cold white with a breath of blue. The stars themselves, and the brightest display type.
Ink-gold
#B98A2E
The colour of a myth once fixed — reserved for constellation lines and marks. Small labels use a lighter #D8B25E so text never drops below 4.5:1.
Line
#5C6E9E
A dashed, provisional blue for the lines you have drawn but not yet closed, and for the RA/Dec grid.

Body text runs on a dedicated blue-white ink (#C7D2EE) with dimmer tiers for labels, so nothing small ever leans on the gold accent and loses contrast — the split the collection's playbook asks for.

03 Type

The Ferryman.
7h 24m  ·  +32°  ·  five stars, joined  ·  C 001
Cormorant italic for the wordmark and every constellation name; Source Sans 3 for interface, instructions and the tabular coordinate readout.

Cormorant is a high-contrast display serif with a beautiful italic — set as constellation names it reads like the hand-lettered labels on an antique star chart, which is exactly the register the subject wants. The one act of typographic bravery is that the names your figures earn are the largest, most expressive type on the page, drawn directly onto the sky in italic. Source Sans 3 does the instrument work: the RA/Dec readout under your cursor, the hour and degree ticks, and every button, in a quiet humanist sans with tabular figures so the coordinates never jump.

04 Techniques

The signature — an empty sky that becomes yours

The hard part was making "close a shape and name it" feel inevitable rather than fiddly. The answer was to treat drawing as growing a graph and let topology decide when a myth is born: you never press a "finish" button — the instant a line returns to a star your figure already touches, the loop is mathematically closed and the naming card rises from its centre. Ink it, and the lines turn from provisional blue to fixed gold, the name is written onto the sky in Cormorant italic, a card joins the catalogue below, and the whole thing is committed to storage. Come back tomorrow and it is still there. That round trip — a blank sky, your hand, a named figure that survives you leaving — is the entire site.

05 Iteration log

Pass 1 · Craft

Make the empty sky read as premium, not sparse

The first field was a flat scatter of identical dots — legible but cheap. Added a magnitude distribution so a few stars are genuinely bright and most are faint, gave each a soft additive glow so they read as light rather than pixels, and biased ~40% of stars plus the dust toward a diagonal milky band so the field has structure instead of noise. Tuned the hero copy to sit in a readable column with a text-shadow scrim over the busy sky, confirmed the gold accent is reserved for lines and marks while all small text runs on the blue-white ink token, and set constellation names in Cormorant italic so the payoff of naming is visibly the finest type on the page.

Pass 2 · Depth

Drive the signature; add the survey instruments

Exercised the real interaction end to end and enriched where it paid. Added the RA/Dec grid, hour and degree ticks, and a highlighted meridian so the field reads as an actual patch of sky, plus a live coordinate readout under the cursor — the second-person "you are surveying" detail. Built the snap ring and the reticle crosshair so aiming feels precise, and a gold ink-in pulse when a figure is filed and again when you tap a catalogue card to find it on the sky. Confirmed persistence survives a reload and that the seed guard ignores a stale sky rather than drawing garbage. Made the render draw-on-demand — the canvas only paints when you move or a pulse is animating — so an idle sky costs nothing, which is also the honest expression of the "inert until you drive it" theme.

Pass 3 · Hardening

375 px, reduced motion, and no dead states

Verified the field at 375 / 768 / 1440 with no horizontal overflow; on narrow screens the hero lede is dropped and the toolbar labels collapse to icons so the sky keeps the room. The reduced-motion path skips the ink-in and catalogue pulses and draws figures instantly — dragging still works, since the interaction is the point, not decoration. Hardened the edges: pointer capture so a drag that leaves the canvas still commits, a seed-and-bounds guard on every stored edge so a corrupt entry can't crash the load, DPR capped at 2 with a clean resize that re-lays stars and re-places the open naming card, and the rAF loop released the moment nothing is animating and cancelled when the tab is hidden. Removed one ornament — a continuous twinkle on the brightest stars — because a sky that moves without you contradicts the whole premise (the Chanel rule, and the theme, agreeing for once).