The concept
The page is a town-sized light meter. Polar night is not rendered as blackness, but as a spectrum of blues interrupted by sodium-orange hearths. The fictional town of Skarvøy provides the human scale: a schoolteacher turns on classroom lamps one at a time, a ferry pilot names his horizon-line hunger, and neighbours treat illuminated windows as public warmth. The narrative moves from the absence of noon toward the first fourteen-minute sunrise, allowing the entire page to gild only when the visitor actively holds the sun above the ridge.
The blue hour clock
The central SVG in index.html is an accessible slider with pointer and keyboard control. In main.js, hourFromPointer() converts a drag angle into one of twenty-four hours, while setTime() derives sun depth, star visibility, lamp power, and the current twilight name from a cosine curve. Those values become CSS custom properties including --blue-hour, --night-weight, and --warm-reach. The same state changes the dial, fixed light-state ribbon, canvas sky, town circuit, diary pools, and window glow. Noon therefore feels brighter, but never becomes day: its maximum remains four degrees below the horizon.
Sky, snow, and lamps
drawPolarScene() paints layered gradients, deterministic stars, ice traces, aurora haze, mountain silhouettes, houses, snow banks, volumetric cones, and reflection rings beneath code-drawn streetlights. Seeded positions keep the town stable. Device pixel ratio is capped, and sceneObserver stops offscreen work while the visibility handler cancels animation for hidden tabs. Reduced-motion mode draws still frames on state changes only. In the diary, setBorrowedLamp() maps a range slider to four homes; the nearest window brightens and offers a resident’s night note. The same clock-powered warmth variables set the lamp’s reach. The science chapter then inverts the page to snow-reflectance white-blue, where CSS beams and return arcs show light coming back from the ground.
The returned sun
The finale uses a second canvas and a press-and-hold control. updateSun() advances a compressed fourteen-minute exposure while held, then lets it recede slowly. drawSunScene() raises a small disc through a mountain notch and warms the horizon, while --gild adds a restrained global amber wash. This turns the promised sunrise into an interaction with duration, not a decorative gradient.
Palette and type
#06162D#164A7C#DCEEFE#FFAD50Sora carries compressed monumental display type; IBM Plex Mono provides diary dates, measurements, coordinates, and controls. Both are self-hosted. Thin rules and mono labels establish observational precision, while asymmetrical spacing keeps the diary from becoming a dashboard. The 40-day register holds forty distinct entries rather than cycling sample copy, so the interaction rewards every selection.
Reproduce this
Prompt an AI agent to build a responsive, code-only editorial experience in which one physical variable governs the whole visual system. Specify the location, emotional register, exact palette, local typefaces, and a meaningful interaction with keyboard support. Ask for canvas or SVG atmosphere, an invented human archive, a contrasting science chapter, deterministic animation, reduced-motion behavior, and screenshot review at phone, tablet, and desktop widths. Most importantly, require the interaction to alter multiple distant parts of the page so the concept becomes structural rather than ornamental.