Inside Room 43 of 175: The Making of "The Asterism Atlas — Draw a Myth Into the Sky"

AIThis post was created with the assistance of artificial intelligence (AI).

The Asterism Atlas — Draw a Myth Into the Sky — Topology-Aware Composition — Room 43 of 175: “The Asterism Atlas — Draw a Myth Into the Sky” — visit the live site.

Room 43 of the experimental exhibition series showcases The Asterism Atlas, a digital installation that transforms the browser into a celestial observatory. The experience invites visitors to craft their own mythic constellations, guided by a whispering voice and a darkened sky filled with shimmering stars. Its signature feature is a deterministic starfield that responds to user interaction, creating a uniquely personal tapestry of myth and memory in the digital night.

Age 18–24?Offer from Amazon

Prime made for students and young adults

Fast, free delivery for dorm and study essentials
Prime Video and Amazon Music included
Member-only deals

Try Prime for Young Adults Free trial for eligible 18–24 year olds

As an affiliate, we earn on qualifying purchases.

The development process followed a three-phase pipeline: first, the site was built with a seeded, deterministic starfield generator and layered motion effects; next, it underwent a rigorous critique focused on visual clarity, emotional tone, and interaction fluidity, guided by the project’s concept notes; finally, a senior art director validated the design coherence and myth integration, ensuring the experience remains both poetic and precise, as detailed in the accompanying guide.

The full build notes live in the room’s design guide.

This project employs a carefully curated color palette that balances a deep, bluish-black dome backdrop with warm gold stars and silver myth annotations, establishing an intimate, archival feel. The interface uses a lightweight, geometric serif font paired with tiny, embossed labels, echoing scientific precision. Star rendering is achieved through a seeded canvas, producing a star field that varies subtly with viewport size. Interaction design incorporates drag-and-tap mechanisms that snap to nearby stars, along with keyboard navigation to select the brightest points, fostering a tactile yet disciplined experience. The core signature technique lies in topology-aware shaping, where the constellation’s structure influences the myth narrative, dynamically composed and exported as an SVG that preserves all metadata. Motion effects, from subtle twinkles to meteor sweeps, animate through stroke-dashoffset and grain overlays, creating depth without overwhelming the scene. The entire experience is built with minimal dependencies, ensuring performance across devices, and employs reduced-motion fallbacks for accessibility.

Live view of The Asterism Atlas — Draw a Myth Into the Sky — The room as it renders live — open it in your browser.

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 43 of 175, “asterism”):
THE ASTERISM ATLAS — draw your own constellations. Aesthetic: planetarium dome hush. Palette: dome black-blue #05070f, star white + gold magnitudes, myth-text silver. Fonts: cormorant (myth display), outfit (UI). SIGNATURE: an interactive star field (realistic magnitude distribution, gentle twinkle, occasional meteor) where visitors DRAG star-to-star to draw constellation lines; name your figure and the atlas composes a short myth fragment from a grammar (name-aware, e.g. “When THE LANTERN FOX rose, harvests were counted twice.”); download your asterism as SVG. Atlas wing: three classical asterisms with animated line-draw and their myths retold tersely. Unforgettable: your own myth written into the sky.

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/asterism/

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.

Explore the full universe of this AI-crafted celestial site by visiting the live installation, and discover all 175 projects in the series at our dedicated hub. Each site offers a unique window into the interplay of technology, myth, and artistic experimentation.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

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.

Amazon