Get art and craft supplies delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
What if a website didn’t show an eclipse, but made you wait inside one?
Penumbra — Umbra Chasers is an AI-built exhibition piece: an editorial archive for a fictional eclipse-chasing collective, not a real company or historical organization. Its subject is the changing light of a total solar eclipse, and its signature move is to make the interface undergo that change. As visitors travel through the page, its warm field-record atmosphere cools, dims, and eventually gives way to a black chamber. The exhibition’s imagined camps and witnesses sit alongside details rooted in eclipse phenomenology, including contact phases, shadow bands, falling temperatures, the corona, and the encircling sunset.
The result treats scrolling less like browsing a catalog than moving through a timed natural event. At the climax, the interface briefly becomes a place to stand and look.
As an affiliate, we earn on qualifying purchases.
From phenomenon to exhibition
The process follows a three-pass pipeline: build the experience around one natural event and its distinct phases, critique it mercilessly for clarity, responsiveness, and motion, then send it through art-director certification. The accompanying field guide documents the concept, implementation, design tokens, and reproduction approach—making the eclipse’s single state-driven system, rather than a static layout, the key lesson.
The full build notes live in the room’s design guide.
One shadow clock, many consequences
The design’s central technique is a single normalized scroll clock that coordinates the page’s eclipse states. Rather than trigger a collection of unrelated effects, the same measure of progress influences the Moon’s movement, ambient color, instrument readings, contact markers, and the page’s overall visual mode. The story is therefore carried by changes to the whole environment.
From paper to totality
The palette establishes the journey. A warm, paper-like opening suggests an expedition log; pearl tones evoke the corona; near-black takes over during totality; and a soft peach horizon gives the dark scene a distant rim of light. At C3, a bright, paper-white flash returns the page to daylight. The shift is not just a backdrop swap: the room’s contrast and sense of scale change with it.
Type supports the tension between wonder and record-keeping. Gloock, a high-contrast display serif, gives the large editorial moments an engraved, almost memorial quality. Space Mono handles coordinates, times, weather, and instrument status with a compact, measured voice. Together they make the fictional archive feel both lyrical and observant.
Light as the interaction
CSS gradients, masks, transforms, an inline orbit SVG, and canvas provide the visual material—no generated imagery is used in this room. Before totality, a spreading shadow and a repeating gradient suggest the rippling bands that can cross the ground. During the dark interval, a canvas-drawn corona uses varied Bézier streamers rather than a simple even ring; the composition gives its equatorial wings more reach and keeps the surrounding halo from looking mechanically uniform. Planet labels and a blurred, all-around sunset horizon emerge in the same phase.
Measurements change along with the atmosphere. The contact rail advances through the eclipse, light readings fall, and the temperature display responds to the passage into the shadow. The field transcript updates at meaningful phase boundaries instead of announcing every tiny scroll movement, keeping the narration usable for assistive technology.
After C3, a small retinal-echo effect lets the moment linger. Pointer movement—or a keyboard-operated contact—places a fading negative mark on the page. It is presented as a safe simulation, not an actual optical afterimage. Motion also has limits: the corona only renders while totality is in view, pauses when the tab is hidden, and reduces its density on smaller screens. Reduced-motion preferences freeze the corona, shorten the sticky sequence, and replace the lingering effect with a single mark rather than removing the eclipse entirely.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 160 of 175, “penumbra”):
PENUMBRA — UMBRA CHASERS: six total eclipses, three continents (fictional chaser collective, real eclipse phenomenology). Aesthetic: totality as the page’s own weather. Palette: totality black, corona pearl, diamond-ring flash, 360°-sunset peach. Fonts: gloock (display), space-mono (contact times). SIGNATURE: TOTALITY — mid-page, the moon takes the sun (CSS radial choreography): light falls wrong first (sharpened shadows, color draining), shadow bands ripple across the text, then C2 — and the WHOLE SITE plunges into totality for as long as you stay in that section: corona breathing (canvas streamers), a temperature readout dropping 4.1°C, the horizon glowing sunset in every direction, planets appearing beside headings. Diamond ring at C3; light returns almost rudely. Chaser trip logs (clouded-out heartbreak included), saros-cycle genealogy table, eye-safety liturgy, the “why people weep” essay. Unforgettable: a website with its own totality.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/penumbra/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
Step into the shadow
Visit the live Penumbra — Umbra Chasers room and experience its shift from field notes to totality. Then browse the hub’s full collection of 175 AI-built exhibition rooms.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
- Room 155: Luciole — The Synchronous Fireflies of Vallon Creux
- Room 152: Mothlight — A Porch-Light Census
- Room 154: Nightmarket — Mercado de Medianoche
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
