Inside Room 55 of 175: The Making of “Vivarium № 55 — A Sealed Glass World”

Discover the Enclosed Ecosystem of Vivarium № 55

Within the digital confines of an AI-crafted exhibition space, Vivarium № 55 presents a meticulously simulated glass habitat that breathes and evolves. This virtual specimen is more than a static image—it’s a living, breathing microcosm, where cellular mosses grow, fronds unfurl, and droplets swell, all within an animated, sealed environment. The site’s signature move is its delicate interaction with the viewer: by gently warming a pane, visitors can reveal a century-old scar, a subtle mark of history etched into the glass. This quiet act of cause and effect imbues the piece with a sense of intimacy and life, making the virtual world feel palpably alive.

From Concept to Exhibition: The Creation Pipeline

The development of Vivarium № 55 followed a focused three-step process: initially, the site was constructed as a self-contained prototype using semantic HTML, layered SVG, and procedural JavaScript to mimic biological processes. Next, a rigorous critique phase scrutinized the authenticity of behaviors, visual coherence, and accessibility, ensuring the ecosystem felt both believable and subtle. Finally, an art director vetted the project for its restrained aesthetic and technical finesse before it was finalized. This guide, crafted by an AI, emphasizes the importance of behavior-driven design, where the site’s animations are rooted in real biological phenomena, creating a living, breathing digital microcosm that invites quiet contemplation and exploration.

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

Design Ingredients: Palette, Typography, and Technique

The visual harmony of Vivarium № 55 hinges on a restrained palette of botanical hues—gentle greens, mossy browns, and soft grays—that evoke a tranquil, natural atmosphere. The site employs a carefully chosen typographic pairing: a delicate, italicized serif for headlines to suggest archival authority, contrasted with a clean, self-hosted sans-serif for labels and measurements, creating a balance between scientific precision and organic softness. The core signature technique involves layered SVG graphics that depict the glass vessel, fronds, and seals, overlaid with a dynamic HTML5 canvas that simulates environmental effects like moss growth and water droplets. This combination facilitates smooth, procedural animations that mimic biological behaviors, while CSS manages subtle visual rhythms such as fog and sheen. The result is a cohesive, responsive experience that maintains performance through optimized rendering and reduced motion for sensitive viewers.

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 55 of 175, “vivarium”):
VIVARIUM № 55 — a sealed glass world, planted 1972. Aesthetic: botanical glassware, quiet greens. Palette: glass-tint green #d8e8dc, moss #3f5c40, fern #6f8f5f, condensation white, walnut base. Fonts: newsreader (italic display), manrope (body). SIGNATURE: a large glass vessel (SVG) whose interior GROWS live — moss creeps (cellular fill), ferns unfurl (rotating frond segments), a self-contained water cycle: condensation droplets bead on the inner glass, swell, and RUN DOWN leaving clear trails (canvas droplet sim over the scene); a misting button fogs everything for a breath. Care log (“Sealed. Opened once, 1994, regretted.”), species census, the closed-cycle diagram. Unforgettable: the glass breathes.

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

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 Living Glass World

Visit the virtual exhibition to experience Vivarium № 55 firsthand, and discover the other curated microcosms housed within this digital gallery. Dive into the full collection of 175 unique environments, each built with care and crafted by AI to showcase the subtle beauty of artificial ecosystems. Embark on a journey into the microscopic and the imaginary, where technology and nature intertwine in delicate harmony.

Visit the live room → · Browse all 175 rooms

Previously in Wing III

• Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
• Room 52: The Royal Mews — Falconry House, Est. 1487
• Room 53: Core Facility 53 — 120,000 Years Under Pressure

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