01 / concept
A scientific instrument with the soul of a summer night.
Noctilucent begins with a contradiction: the observer is in darkness while a cloud 83 kilometres overhead remains in sunlight. The page makes that geometry tangible. NLC Watch is fictional—its stations, measurements and observers are invented—but the atmospheric science is real. Tiny ice crystals nucleate on meteoric dust near the extremely cold summer mesopause, most often at high latitudes around the solstice.
The editorial sequence moves from awe to recognition. The impossible blue horizon becomes a morphology atlas for billows, whirls and bands. A nucleation chamber then shrinks the story to nanometres; the observation calendar widens it back to a season; and the cream field log returns the phenomenon to 4 patient human witnesses.
02 / visual system in motion
One dial. Every layer answers.
In main.js, setIllumination() converts the 6°–16° range into --solar, --shadow-depth, --cloud-fire, --sweet and --ambient. A bell curve peaks near −11°. Those values share control of the Canvas atmosphere, page-wide violet lift, cloud glow, grain, horizon flare, SVG ray angle, ice particles and morphology fields. The labels also explain why contrast is poor at either end of the range.
drawSky() paints a multi-stop twilight gradient, deterministic stars and 19 translucent wave paths. drawCloud() reuses the illumination state but changes its equations: tight repeating crests form billow, polar distortion forms whirl, and low-frequency waves form band. A pointer-following radial light adds quiet parallax without moving layout. ResizeObserver stores dimensions outside the render loop, while IntersectionObserver limits offscreen painting. All animation stops when the document is hidden; reduced-motion users receive 1 deliberate still frame.
The final observing act is tactile. Holding #adapt-button advances updateAdaptation(): the tropospheric lamp and haze recede while the SVG band at 83 km alone gains contrast. Pointer, Space and Enter share the same state machine, and releasing before confirmation lets the sighting decay. Reduced-motion mode completes the reveal immediately. It turns patience—the observer’s real tool—into page behavior.
The nucleation chamber and live Earth-shadow drawing are inline SVG. CSS creates the clipped instrument edges, paper grain, optical ray, altitude rules and responsive calendar. There are no generated assets and no image requests: every cloud, particle, glint and horizon is proudly made by code.
03 / palette + type
Cold light, warm record.
Manrope carries headlines and observations, with tight optical tracking and a 220/620 weight contrast. Major Mono Display labels coordinates, angles and station codes. Its geometrically odd numerals make each reading feel plotted rather than typeset. Electric blue is reserved for ice that still receives sunlight; cream belongs to the observer and the paper record.
04 / reproduce this
Prompt for physics, not a screenshot.
Ask an AI agent to build a scientific field journal controlled by 1 physical variable. Require a procedural Canvas sky, a live SVG geometry diagram, 3 genuinely different wave morphologies, an editorial observation log, local fonts, visibility-aware animation and a complete reduced-motion state. Specify electric-blue ice over violet night with 1 warm paper interruption. Then insist that the dial alter color, motion, copy, diagrams and downstream sections together. That coupling turns an attractive page into an instrument.