Steal This: The SIGNATURE TECHNIQUE Behind “RELIQUARY — Twelve Objects, One Millennium”

Welcome to the Dark Hall of Invention

Step into a meticulously crafted digital museum, where twelve fictional relics from a bygone era are illuminated one at a time in a shadowy, atmospheric space. This immersive experience is powered by a clever use of code, orchestrating a single lamp that gracefully moves through each artifact, casting light and setting the mood for each discovery. Its signature move? An elegant lighting engine that throttles updates with requestAnimationFrame, ensuring only the nearest object is bathed in focus, creating a dynamic yet intimate exhibition that feels alive and deliberate.

Decoding the Palette, Signatures, and Interactions

The environment is anchored by a palette of deep charcoal walls, warm brass accents, and subtle patinas, establishing a timeless, tactile aesthetic. Key visual elements include two AI-generated plates mounted within fixed aspect-ratio containers, each with scrims and an interactive inspection lamp, allowing visitors to explore textures up close. The remaining artifacts are composed of stacked SVG planes, assembled with translateZ() to give a convincing 3D depth—each layer sways gently, animated by CSS keyframes, to evoke a sense of physicality and craftsmanship. The hall’s lighting is not static; it dynamically responds to the visitor’s viewport, with only the closest relic receiving illumination, achieved through a throttled requestAnimationFrame loop. This signature technique — the moving lamp controlled precisely by code — ensures a focused, contemplative experience, avoiding simultaneous lighting of multiple objects and maintaining a clear visual hierarchy.

From Build to Critique to Final Art-Directed Form

The creation of this exhibit followed a three-stage pipeline: initially, the site was built with a focus on integrating local AI-generated plates and code-constructed SVG objects, guided by a detailed design prompt. Next, it underwent a rigorous critique, where the interplay of light, motion, and accessibility was refined to achieve balance and clarity. Finally, the art director validated the concept, ensuring the aesthetic cohesion of the palette, interactions, and technical execution. Throughout this process, the guide played a crucial role, providing a blueprint for merging code, design, and storytelling into a seamless digital experience that feels both crafted and alive.

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 18 of 175, “reliquary”):
RELIQUARY — Twelve Objects, One Millennium. Fiction: a museum exhibit of twelve invented artifacts (a moth-wing astrolabe, a whispering key…). Aesthetic: museum dark: charcoal #141312 walls, spotlight pools, brass #ad8a56. Fonts: marcellus (display), crimson-pro (body). SIGNATURE: scroll-driven exhibit hall — each artifact sits on a pedestal in a spotlight (radial gradient pool + soft shadow), built as a dimensional CSS-3D or layered-SVG object that slowly rotates (preserve-3d, 4-6 layered planes give real parallax depth); as you scroll, the current pedestal spotlights ON (others dim), wall-label typography fades up (accession number, date, provenance one-liner). A timeline rail (900-1900) tracks progress with a brass slider. Entry/exit vestibule sections with exhibition credits. Unforgettable: gallery lighting behavior — darkness, then one object at a time granted light.

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

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 Exhibit Live

Visit the AI-built installation to witness the interplay of light and artifact firsthand. Dive into the experience and explore all 175 sites in the broader exhibition hub, where art meets technology in a carefully orchestrated digital space.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

• Room 6: Abyssal Station — a 3,800 m descent
• Room 15: Apothecarium — Bitters & Botanical Remedies, est. 1783
• Room 16: BRUTA — Raw Concrete Architecture Collective

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