NOCTURNE Design guide · Site 06 of 25
How this site was made

A sky you can
hold by the edge.

NOCTURNE is a fictional planetarium's almanac. Its hero is not a picture of the night sky — it is a working star chart: twelve real constellations plotted from right ascension and declination, wrapped on a band you can drag like the dome's own projector.

Concept

Planetariums sell precision wrapped in wonder. The page keeps that order: every number on it is real (star coordinates, magnitudes, meteor dates, ZHR rates), and the wonder is applied as craft — twinkle, brass, a Milky Way you'd only notice on the second visit.

Palette

Dome night#070919
Starlight#F4F2EA
Projector brass#D3A94E
Faint magnitude#8D92B8
Nebula rose#B98A9A

Brass is the planetarium's own metal — the Zeiss projector, the door hardware, the railings. It marks everything human; starlight marks everything not.

Typography

Tonight, the sky is on time.

Marcellus — display. Roman inscription capitals: the letterforms of observatories and museum lintels.

A meteor shower is the Earth driving through a comet's litter.

Crimson Pro Light — body. A bookish serif for almanac prose.

ZHR 150 · RADIANT GEMINI · LAT 41° N

Overpass Mono — ephemeris voice: dates, rates, coordinates.

Techniques

ElementHow it works
Star chartTwelve constellations stored as [RA, Dec, magnitude] triplets with line-index pairs, projected onto a band 1.35× the viewport that wraps at 24 h. Dragging shifts the right-ascension offset with inertia; left idle, the sky turns at a slow sidereal drift.
Hover namingEach frame computes constellation centroids; the nearest within 130 px lights its asterism in brass and floats its name beside it — the planetarium lecturer's laser pointer.
Star renderingSize and alpha derive from real visual magnitude; background stars twinkle on individual sine phases; member stars carry a soft shadowBlur halo.
MeteorsOccasional gradient-tailed streaks spawn on a timer — frequent enough to catch, rare enough to feel lucky.
Moon monthEight phases drawn on canvas: a dark disc, a half-disc lit hemisphere, and an ellipse terminator whose x-radius follows the illuminated fraction.
AccessibilityReduced motion stops twinkle, drift, and meteors while the chart stays draggable. The canvas carries a descriptive aria-label; all almanac data is real HTML text.

Interaction map

You doThe page does
Drag the skyThe heavens turn with momentum, wrapping at 24 hours of right ascension
Rest near a constellationIts lines light in brass and it introduces itself by name
WaitSidereal drift; sometimes, a meteor
Hover a meteor shower rowThe row warms like a seat being saved
← Back under the dome