The concept
The interaction is the argument: darkness is not an empty theme color. It is habitat returning.
Zodiacal treats the sky as an endangered habitat, not a decorative background. Preserve 21 is fictional, but the Bortle scale is real: class 9 describes a washed-out inner-city sky, while class 1 describes a naturally dark site. The page begins beneath orange skyglow. Its invitation is physical and plain: drag one control toward darkness and watch the visible universe return.
The narrative moves from loss to repair. The ledger names what disappears at each class. Vesper provides a civic case study, the fixture lab makes shielding legible, and the final survey records darkness through absent glare. Every visual is made in HTML, CSS, SVG, or canvas. There are no generated or photographic assets, which is a proud constraint of the Nocturne Wing.
The Bortle instrument
In main.js, the classes object stores each level’s sky colors, headline contrast, star count, limiting magnitude, live loss statement, Milky Way opacity, and zodiacal-light opacity. setSky() maps the range input to those values, updates --darkness, changes the browser theme color, and activates the corresponding loss-ledger row. Narrative, chrome, and atmosphere always agree.
makeStars() produces a deterministic field of 2,600 points with a seeded generator. Nearly half are biased into a curved galactic band. draw() reveals only the count allowed by the current class; currentCount eases toward that target so stars pour in instead of popping. A brief red streak response marks a decisive drag. resize() caps device-pixel ratio at two. The animation loop stops when the document is hidden, while reduced-motion mode paints the final state immediately.
The Milky Way and zodiacal cone live in styles.css as layered, blurred gradients with a dark dust lane. JavaScript changes custom properties such as --milky-opacity and --galaxy-detail. The Vesper case study adds a tactile civic reveal: setCaseSplit() maps a second range input to --case-split, letting mouse, touch, or keyboard trade orange 2026 skyglow for the shielded 2029 galaxy. The fixture lab’s cutoffToggle then changes data-shielded, updates an accessible flux reading, and shifts weight between two inline SVG light paths. An IntersectionObserver orchestrates each chapter’s entrance once.
Palette and type
The light-polluted state begins with skyglow orange #8C5034, iron brown #4D3028, and warm star white #F4E8DF. Darkness migrates toward midnight blue #10172A and true near-black #05070B. Astronomer red #DC6770 replaces bright chrome as the eye adapts. Zodiacal violet #A184C2 is reserved for celestial depth. The gradient is the content: it is never replaced by a flat “dark mode.”
Spectral carries the display voice with low weights, tight tracking, and italic moments that feel observational rather than luxurious. IBM Plex Mono labels readings, coordinates, controls, and ordinance data. Both families are self-hosted from the shared font library.
Reproduce this
Prompt an AI agent to build a code-only editorial experience around one scientific scale. Ask for a single master control that changes palette, information hierarchy, canvas density, explanatory copy, and atmospheric layers across the whole page. Specify a seeded canvas field, CSS custom properties, semantic data lists, inline SVG diagrams, keyboard access, reduced-motion fallbacks, and a visibility-aware animation loop. Name an expressive serif and a survey mono. Require one responsive signature moment, a draggable before-and-after civic case study, one secondary comparison control, and a written performance contract. Most importantly, ask the interaction to reveal the subject itself, not merely change a theme.