Get art and craft supplies delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A street that remembers each light
“Gaslight — The Lamplighters’ Round” is an AI-built exhibition piece, not a historical archive or a real company’s product. Its fictional Ashdown Row turns a familiar interface gesture into a small act of stewardship: visitors follow Elias Wren, an imagined lamplighter, along a street of nine lamps. Each one illuminates a named ledger entry and leaves a pool of warmth behind. The route is the story; progress changes both what visitors can read and how the street feels.
As an affiliate, we earn on qualifying purchases.
Teardown: light as wayfinding
The signature technique is ordered illumination. Lamps answer in sequence, so the visitor’s path through the street also sets the pace of its fictional municipal history. Skip ahead and the interface gives a brief nudge; light the next lamp and its record opens, the route advances, and the warm glow spreads. The final flame shifts the experience from discovery toward remembrance.
Iron-dark greens establish the night, with fog green shaping the air and mantle gold reserved for lit lamps and moments of emphasis. A small cyan accent marks the flame’s inner heart. IM Fell English gives titles and stories an antique character; IBM Plex Mono lends labels and invented ordinances an administrative voice. Together, the typefaces make the street feel archival without claiming its details are documentary fact.
The buildings, road, iron fittings, flame and fog are drawn in CSS and canvas, with no generated images or other external media. Nine semantic buttons control nine ledger entries. Keyboard focus, touch-sized targets, and announced status changes make the route legible beyond the visual effect. Motion responds to reduced-motion preferences, and the ambient fog pauses when the scene is out of view. At the end, a staged changeover lets eight lights fail while one gas flame stays lit: a quiet memorial built into the interaction.
As an affiliate, we earn on qualifying purchases.
Process: three passes from premise to room
The guide describes a three-pass pipeline: build the experience around a setting, a profession and one meaningful interaction; critique it mercilessly for clarity, access and atmosphere; then have an art director certify the result. The accompanying guide records the route logic, visual construction and motion decisions behind the finished room. AI built the site, and that authorship is part of the exhibition’s story: the human craft on display is represented through a machine-made street.
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 174 of 175, “gaslight”):
GASLIGHT — THE LAMPLIGHTERS’ ROUND, Ordinance of 1807 (historical register, fictional street). Aesthetic: fog-green evening, iron columns, mantle glow; a profession made of dusk. Palette: gas-mantle gold (blue flame heart), fog grey-green, iron black, ladder oak. Fonts: im-fell-english (antique display), ibm-plex-mono (ordinance clauses). SIGNATURE: THE ROUND — the nav is the lamplighter’s route: a street of nine iron lamps in fog-dark; each must be LIT by the visitor (hover/tap with the pole-and-flame cursor) to unlock its story section — the page begins dark ahead and ends fully lit BEHIND you (your progress is literally the light you leave). Wick-pole and ladder tool inventory, mantle physics (why gaslight is that exact gold; the blue heart drawn true), the knocker-up cameo (pea-shooter at windows), Ordinance clauses set as legal antiques, THE LAST ROUND: the electricity changeover told as elegy — the final lamp on the street is left burning as a memorial (it still is). Unforgettable: leaving a lit street behind you.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/gaslight/
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.
As an affiliate, we earn on qualifying purchases.
Walk the route
Visit the live Gaslight room and follow its nine lamps from first ignition to final memorial. Then browse all 175 rooms at the hub for more AI-built exhibition pieces.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
- Room 171: BLACKOUT — 03:12–05:47, Verlicht
- Room 161: Station Chiroptera — Read the Dark by Echo
- Room 169: Hibernaculum — Where Winter Sleeps
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.
As an affiliate, we earn on qualifying purchases.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
