The Dark Nave and the Light of a Restored Rose Window
Within a shadowed stone cathedral, an AI-crafted website brings to life a fictional stained-glass atelier specializing in the meticulous restoration of cathedral rose windows. The site’s centerpiece is a dynamically generated, antique-looking rose window that projects colored light onto a stone floor, evoking the weight and imperfection of centuries-old glass. Its signature move is the clever use of light projection: instead of static images, a carefully calculated, animated light shard system creates a believable, weathered ambiance that feels both real and emotionally resonant, immersing visitors in the process of ancient craftsmanship brought anew by digital artistry.
Palette, Typography, and Materiality
The design hinges on a deeply subdued palette dominated by dark stone tones, complemented by jewel-like accents in ruby, cobalt, amber, and emerald—colors reminiscent of aged stained glass. The type choices reinforce the tactile, archival feel: a warm serif font evokes handwritten conservation notes, while a sober, self-hosted display type maintains the gravitas of a craftsman’s ledger. The signature technique involves generating an intricate SVG-based rose window through a procedural algorithm, where each pane is a slightly imperfect annular wedge, rendered with radial gradients and subtle trembles to avoid mechanical uniformity. This procedural approach ensures every visitor’s window is unique yet consistent, anchored by seed-based randomness, giving authenticity to the aging glass.
Underneath, the site’s emotional core is the projection of light onto the floor. The rendering function reads the generated window structure and creates blurred, colored shards that cast warm, directional light—mimicking how real stained glass filters daylight. The canonical-hours slider tweaks the sun’s position, dynamically shifting each shard’s placement, skew, and opacity, reinforcing the belief that the light has a memory of a centuries-old sun angle. Additional CSS effects, including perspective tilts, deepen the illusion, making the floor feel like ancient stone imbued with the history of the cathedral. The entire visual experience is crafted without external assets, relying solely on CSS, SVG, and vanilla JavaScript, with a staged reveal that enhances the sense of uncovering a hidden craft.
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 32 of 175, “rosarium”):
ROSARIUM — a stained-glass atelier restoring cathedral rose windows. Aesthetic: dark stone nave lit by jewel glass. Palette: stone #2a2a2e, glass jewels (ruby #a01b2d, cobalt #1e3d8f, amber #d99b2b, emerald #1e6e4a) glowing translucent. Fonts: forum (lapidary display), eb-garamond (body). SIGNATURE: a parametric ROSE WINDOW GENERATOR — SVG radial tracery (choose folds 6–16, rings, glass palette, seed) with luminous panes (gradients + bloom); a “canonical hours” slider moves the sun so the window’s colored light POOLS and slides across the stone floor beneath (skewed projection). Gallery of three commissioned windows with provenance. Unforgettable: the light on the floor, not just the glass.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/rosarium/
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.
The Three-Stage Crafting Pipeline
The site was developed through a rigorous, three-phase process: initial construction based on the procedural SVG generator, followed by a critical review that examined visual flaws such as mechanical uniformity or unnatural light behavior, and finalized through an art director’s certification to ensure authenticity and emotional resonance. The process was guided by a dedicated design guide that emphasized realism, texture, and historical context, ensuring the digital recreation maintained the weight and imperfection of the physical craft.
The full build notes live in the room’s design guide.
4 Pcs Stained Glass Tools, Stained Glass Supplies FID Stained Glass Plastic Burnisher Flat Foil Holder Supplies for Work DIY Handicrafts
- Size & Dimensions: Compact and lightweight for easy handling
- Complete Set: Includes 4 versatile stained glass tools
- Efficient Crafting: Ergonomic design for smooth work
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Experience the Restoration in the Digital Nave
Visit the live, AI-built Rosarium Atelier site to explore the dynamically generated stained-glass window and its atmospheric projection. Discover how procedural artistry and light manipulation recreate centuries of craftsmanship, and browse all 175 sites in the exhibition hub for more innovative digital explorations of historical design.
Visit the live room → · Browse all 175 rooms
Previously in Wing II
- Room 26: KP-9 Station — Arctic Geomagnetic Observatory
- Room 31: La Bourse — October 1929 Stock Exchange
- Room 27: CALIBRE 27 — Haute Horlogerie Manufacture
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.
3D Rose ft_239228_1 South Rose Window of Notre Dame Cathedral in Paris, 8" x 8"
- Made in the United States: Manufactured in the USA
- High gloss ceramic inset: Inset 6×6 ceramic tile
- Easy hanging design: Keyhole for wall mounting
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Starlight Projector Lamp, Stained Glass Style Ambient Light, Colorful Lights Starry Sky 3D Prismatic Table Bedside Lamp for Party Holiday Night Light, Forest Shadow Lamp, Wooden Colorful LED Lights
- Stained Glass Style Panels: Vibrant mosaic stained-glass effect
- Geometric Art Design: Faceted prism structure for modern decor
- Energy Efficient & Eye-Caring: Soft, high-brightness, flicker-free light
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
SVG Essentials: Producing Scalable Vector Graphics with XML
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
