An AI Built The Centennial — One Hundred Rooms, Every Door Open Website — Here’s the Design Trick That Makes It Work

Discover the Centennial: An Interstellar Navigation Experience

The Centennial website is a groundbreaking digital installation that visualizes a vast constellation of one hundred interconnected rooms. Its defining feature is a dynamic, orbiting structure where each ‘door’ or webpage is represented as a luminous point in space, allowing visitors to traverse a celestial map rather than browse a traditional grid. This AI-crafted site transforms digital exploration into an immersive journey through a meticulously curated universe of ideas, where every door is a star in a shared architectural cosmos.

Behind the Scenes: Building, Critiquing, Certifying

The creation process begins with a straightforward pipeline: first, constructing a static atlas of portrait textures; second, deploying a WebGL-driven instanced mesh to visualize the 99 rooms as orbiting planes; and finally, integrating camera controls, raycasting for interactivity, and a search function for direct access. Each stage undergoes rigorous critique—evaluating performance, visual coherence, and spatial logic—guided by a dedicated art director’s feedback to refine the experience. This iterative process ensures that the final result not only functions flawlessly but also embodies a conceptual harmony, aligning technical precision with artistic intent, as detailed in the conceptual guide.

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

Design Mechanics: Palette, Type, and Signature

The site’s visual language is rooted in a subdued, cosmic-inspired palette featuring deep blacks and spectral accents like cyan, rose, gold, and blue. The interface employs a restrained set of typefaces—space Mono for informational plaques and a geometric, light-weight font for titles—creating a sense of clarity amid the cosmic tableau. The core signature lies in its use of a WebGL-accelerated instanced mesh system, which efficiently renders ninety-nine image-laden planes that orbit a central axis. Each plane displays a portrait from a shared collection, painted onto a textured atlas, ensuring seamless performance across devices. The shaders imbue edges with iridescent highlights, while live attributes highlight selected or nearby rooms, making the entire constellation feel vibrant and alive. This technical choreography marries aesthetic restraint with high-performance rendering, resulting in an experience where each room becomes a luminous star, linked through intuitive interaction and spatial logic.

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 100 of 175, “centennial”):
THE CENTENNIAL — one hundred rooms, one building. The Wing IV finale and the whole exhibition’s monument. Aesthetic: the hub’s spectral iridescence given three dimensions in black space. Fonts: unbounded (display), space-mono (plaques). SIGNATURE: Three.js — ALL NINETY-NINE THUMBNAILS AS A GREAT ORBITING STRUCTURE: instanced textured planes (/assets/thumbs/<slug>.jpg for every other site) arranged as a slowly rotating double helix / ring-tower; scroll flies the camera along it while rooms light as you pass (emissive lift + plaque: number, name, one-line essence); a search/filter field pulls matching rooms out of formation toward you; click any room to visit it (/sites/<slug>/). Include ALL 99 slugs (helios…frostfern). Movement is cinematic (eased camera on a spline), mobile gets a lighter count but same idea. It ends at a final plaque: “One intelligence. One hundred rooms. Every door open. — FABLE / 100” with the full index as elegant text below (all 99 links) for accessibility/SEO. Unforgettable: the exhibition as a single constellation you fly through.

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

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.

Experience the Cosmos: Visit the Centennial

Step into this celestial exhibition by exploring the live website, where a hundred luminous doors await discovery. Dive into the interconnected universe of ideas, navigate through the constellation of rooms, and appreciate the intricate design that makes this AI-built site a digital observatory of human creativity.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

• Room 88: The Lace School — Two Moves, Infinite Pattern
• Room 95: The Bureau of Bureaus | Form 27-B
• Room 92: Taller Calavera — Death, Drawn Dancing

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.

Powered by Thorsten Meyer AI