The page with
its own totality.

Concept / Totality as weather

Not an eclipse pictured. An eclipse endured.

Penumbra is the archive of a fictional chaser collective: six attempts across three continents, narrated with the precision and bruised romance of people who arrange their lives around a moving shadow. The contact phases, shadow bands, temperature fall, corona, and 360-degree sunset are real phenomenology. The camps and witnesses are invented.

The central rule is that daylight belongs to the interface. Warm paper opens the field record. Near C2, colour drains and shadows sharpen. During totality the page becomes a black chamber with planets, a low peach horizon, live measurements, and a changing field transcript. C3 is intentionally impolite: a diamond flare strikes and paper-white daylight takes the screen back.

Visual system / Actual implementation

One normalized shadow clock.

• 01
  Scroll geometry. updateEclipse() in main.js converts the position of .totality-stage into a value from zero to one. That single clock moves the Moon, cools the air, updates lux, advances the contact rail, and assigns phase classes to the body.
• 02
  Magnetic corona. drawCorona() renders up to 118 Bézier streamers. A cosine-weighted lobe makes long equatorial wings; shorter polar structure, deterministic irregularity, and a radial halo prevent the old uniform “glowing donut” look.
• 03
  Wrong light. .umbra-front expands before C2 while a fixed repeating gradient ripples as shadow bands. At totality, Venus and Jupiter labels fade in and the horizon becomes a blurred elliptical sunset in every direction.
• 04
  Contact truth. Temperature holds at a 4.1°C drop. The shadow clock counts through a plausible 06:23 totality, and the field transcript changes only at meaningful phase boundaries so assistive technology is not flooded by every scroll tick.
• 05
  Responsible motion. Canvas work runs only while totality is visible, pauses when the tab is hidden, and reduces its render density on small screens. Reduced-motion mode freezes the corona and shortens the sticky journey without removing the event.
• 06
  Retinal echo. After C3, plantAfterimage() converts pointer position—or the keyboard-operated contact—into capped, fading negative discs. The effect is explicitly a safe simulation, runs without a frame loop, and becomes a single static mark when reduced motion is requested.

Everything visible is code: CSS gradients and masks, one inline orbit SVG, transforms, and canvas. This Nocturne Wing room uses no generated assets. That constraint is the point—light itself is the design material.

Palette + type tokens

Paper, pearl, flash, peach.

Gloock carries wonder, testimony, and grief with sharp engraved contrast. Space Mono records coordinates, contact times, weather, and instrument status. The pairing keeps the page balanced between awe and measurement. Tight display tracking makes large headlines behave like celestial bodies; the mono stays small, spaced, and exact.

Reproduce this

Prompt for a phenomenon, not a layout.

Give an AI agent a natural event with distinct phases. Ask for one state machine that changes the whole interface, not disconnected decorative effects. Define an emotional typeface, a technical typeface, a dominant light condition, responsive behavior, and measurements that visibly react.

Build an editorial archive about a rare natural event using only HTML, CSS, SVG, and canvas. Create a long sticky sequence whose normalized scroll progress changes the page’s weather, colour, typography, and telemetry. Pair a dramatic serif with a compact mono. Include detailed field logs, one failed expedition, a technical genealogy, a safety ritual, a reflective essay, and one small interaction that lets the phenomenon linger after its climax. Pause animation when hidden, honor reduced motion, and preserve the atmosphere at 390px.