Turn your quiet moments into listening time
- Thousands of audiobooks, podcasts and originals
- Listen on your phone, tablet or Echo — also offline
- Cancel anytime
A sky you can restore by hand
Zodiacal | Preserve 21 is an AI-built exhibition piece, not a real sanctuary or company. Its fictional Preserve 21 frames the night sky as a habitat under pressure—and makes the central idea tangible: drag a control away from urban glare, and the stars return.
That single gesture is the room’s signature move. The experience begins in a coppery wash, then gradually gives way to darkness, a denser sky, and the suggestion of the Milky Way. Rather than treating night as a decorative backdrop, Zodiacal asks visitors to notice what light pollution takes away. Its emotional arc—from loss toward repair—also invites a spiritual reading: darkness here is not emptiness, but space for attention, wonder, and renewed relationship with the natural world.
star gazing telescope for beginners
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
How the room makes darkness visible
The main control follows the real Bortle scale, which describes how clearly celestial objects can be seen under different sky conditions. At the bright end, the page evokes an inner-city sky; toward the dark end, more of the imagined universe becomes visible. Preserve 21 is fictional, but the scale behind the interaction is real.
Each level changes more than the background color. The display also adjusts the star count, contrast, atmospheric layers, and explanatory loss statement, while a ledger highlights the matching entry. That consistency makes the control feel like an instrument for exploring a changing environment, not a switch between two visual themes.
Atmosphere, type, and interaction
The palette travels from skyglow orange and iron brown into midnight blue and near-black. Warm star white softens the transition, while a restrained astronomer red and zodiacal violet add accents. Layered gradients provide the Milky Way and zodiacal glow, so darkness remains textured rather than collapsing into a flat dark-mode surface.
Spectral gives headlines an observant, editorial character; IBM Plex Mono handles readings, controls, coordinates, and ordinance details. Both type families are self-hosted. A seeded canvas draws 2,600 possible stars, with many arranged along a curved galactic band. As the visitor drags the Bortle control, the display reveals the number appropriate to that sky state and eases toward the new count, making the stars gather gradually rather than appear all at once.
The page extends its civic argument through Vesper, a fictional case study with a second draggable comparison between orange 2026 skyglow and a shielded 2029 night sky. In the fixture lab, a shielding toggle changes an inline SVG light path and an accessible flux reading. These moments give light pollution a physical vocabulary: visitors can compare how a fixture directs its light, not just read that shielding matters.
The visual system is built from HTML, CSS, SVG, and canvas—there are no photographic or generated image assets. Motion also has boundaries: the animation pauses when the document is hidden, respects reduced-motion preferences, and limits canvas pixel density on high-resolution screens. Together, those choices keep the central experience expressive without making the sky effects a performance free-for-all.
From scale to experience
The process followed three passes: build the code-only editorial experience around the Bortle scale, critique it mercilessly for gaps between the story and the interactions, then certify the result through an art-director review. The accompanying field guide explains the implementation, from the state model and seeded canvas to accessible controls and motion safeguards, so the room’s visual logic is also legible as a reproducible design system.
The full build notes live in the room’s design guide.
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 153 of 175, “zodiacal”):
ZODIACAL — PRESERVE 21, an international dark-sky sanctuary (fictional preserve, real Bortle scale). Aesthetic: the sky as an endangered habitat. Palette: a gradient that IS the content — skyglow orange through true black; star white; zodiacal-light violet. Fonts: spectral (display), ibm-plex-mono (survey data). SIGNATURE: THE BORTLE SLIDER — one master slider (Bortle 9 → 1) re-renders the ENTIRE site: at 9, an orange-washed sky with a dozen stars and washed-out headings; slide darker and stars pour in (canvas field, thousands), the Milky Way arches over the layout, the zodiacal light appears, and the site’s own chrome dims to astronomer red. A “what you lose per Bortle class” ledger (first the Milky Way, then Andromeda, then the sky itself), light-ordinance case studies (a town that turned its lights down and found the galaxy), shielded-fixture diagrams. Unforgettable: dragging the sky back.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/zodiacal/
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 night
Visit the live Zodiacal room and move its control toward a darker sky. Then browse the hub’s full collection of 175 rooms to see more AI-built exhibition pieces exploring the possibilities of the web.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
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.
