Inside Room 87 of 175: The Making of “Lot 87 — The Varos Evening Sale”

Experience the Virtual Auction Theatre

Imagine a digital saleroom where art, technology, and performance converge. This AI-crafted exhibition space centers around a fictional auction, transforming it into an interactive spectacle. At its core is a signature move: a dynamic, code-driven artwork that responds to user engagement with visual and auditory cues, mimicking the energy and precision of a live sale.

Design Foundations and Visual Language

The palette is dominated by a warm, rich aubergine hue, complemented by the soft tones of catalogue paper and accents of vibrant red reserved for the SOLD indicator. Typography employs carefully selected local fonts—Playfair Display lends elegance to titles and narration, Archivo facilitates factual content, and Chivo Mono ensures clarity for bid amounts and labels. All styles are embedded directly within the codebase, avoiding external dependencies to maintain performance and consistency.

Interactive Components and Material Techniques

Every prop within the environment is constructed with pure code, emphasizing a seamless integration of interaction and visual authenticity. The artwork itself is an inline SVG, meticulously layered with paths to depict textured earth, orchard trunks, and a luminous moon. Radial gradients and CSS effects craft a convincing gilt frame and atmospheric lighting, creating a sense of depth without additional image requests. Specialized controls, like a brass examination lamp, are programmed to follow cursor or pointer movements in real-time, utilizing coordinate translation for fluid, responsive behavior. The bid sequence, powered by precise JavaScript logic, advances in exact £20,000 steps, updating the bid board and auction status dynamically. When the hammer falls, a synthesized impact sound and visual shockwaves convey the finality of the sale, all generated via Web Audio API and CSS animations. The entire scene is designed to be accessible through keyboard focus, with reduced-motion settings and overflow checks ensuring a smooth experience on all devices.

Development and Evaluation Workflow

The creation of this virtual saleroom follows a streamlined three-phase pipeline: first, the build phase involves translating conceptual aesthetics into functional code, focusing on interaction, visual fidelity, and performance. Next, a rigorous critique assesses usability, responsiveness, and authenticity, pushing for clarity and engagement. Finally, an art-director review certifies the environment’s coherence and experiential quality, ensuring that the final product offers an immersive, believable auction experience, as documented in this detailed guide.

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 87 of 175, “gavel”):
LOT 87 — an evening auction, live. Aesthetic: saleroom theatre; rostrum and paddles. Palette: saleroom aubergine #3a2438, rostrum walnut, catalogue cream, SOLD red, brass. Fonts: playfair-display (catalogue display), archivo (body), chivo-mono (bid board). SIGNATURE: BID IN THE ROOM — a staged lot (a fictional painting, rendered as elegant SVG in its frame) goes under the hammer: the BID BOARD climbs in correct increments, currency lines flicker (£/$/€), phone bidders’ lamps glow, the auctioneer’s patter prints line by line (“…against you sir, at four hundred and twenty…”), and YOUR PADDLE (big button) enters you — win and the gavel CRACKS with a SOLD overlay slammed across the lot. Catalogue notes with provenance chain, buyer’s premium math shown honestly, condition report drawer. Unforgettable: the gavel crack when you win.

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

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.

Discover the Entire Auction Hall

Step into this AI-constructed auction world and explore the full spectrum of 175 unique virtual rooms. Visit the dedicated hub to browse the collection, experience each environment firsthand, and immerse yourself in this innovative digital art form.

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