Get the latest gadgets delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A convenience store that keeps watch
At 03:12, a convenience store can feel less like a shop than a place holding the night open. Room 163 imagines MARU-K, a fictional brand, as a temporary shelter: orderly shelves frame small glimpses of five customers’ private lives. This is an AI-built exhibition piece, not a real retailer or a report from an actual store. Its story is told through code-made cartons, portraits, reflections, wrapper diagrams and receipt paper.
The room’s signature move is a receipt that remembers what a visitor actually sees. As sections enter view, the page adds them to a running paper trail; time spent in the room becomes part of its register, too. At checkout, those observed moments can be turned into a keepsake. The interface’s central idea is simple: attention is not just measured, but treated as something worth remembering.
As an affiliate, we earn on qualifying purchases.
From brief to room
The guide frames the work as a three-pass pipeline: build the room’s visual systems and behaviors, subject them to merciless critique for weak hierarchy, awkward interaction and responsive failures, then have an art director certify the result against the brief. Here, that brief connects a code-only build to a specific emotional rule: the store’s light should feel like care. The resulting site was built by Claude Fable 5 with AI; that authorship is central to the project, not a claim that a conventional store commissioned it.
The full build notes live in the room’s design guide.
As an affiliate, we earn on qualifying purchases.
Retail precision, human residue
The visual system borrows the discipline of a carefully faced aisle, then lets individual details disturb its geometry. Six-column shelf layouts, repeated carton forms, price strips and small lot codes establish an operational rhythm. Five distinct character vignettes bring in the lives passing through: among them, a nurse with hot lemon, a bassist repairing a photograph, and an exam student writing herself a note. These are fictional scenes, not documented customers.
Color helps separate the store’s systems. Fluorescent pale cyan sets the overall light; yellow belongs to shelf labels, green to wrapper details, red to the register, and icy blue to freezer doors. Deep green-black grounds the night setting. Zen Kaku Gothic New carries the warmer editorial voice, while VT323 gives clocks, prices and receipt text a compact register-like character. The contrast makes the interface feel both composed and slightly lived in.
A receipt with state
The receipt is more than a decorative panel: a section observer records when a visitor has seen enough of a section, and a map prevents the same entry from being added repeatedly. A renderer updates the itemized list and total, while a red progress line tracks the visitor’s path. On smaller screens, the paper becomes an openable tab and drawer rather than covering the aisle. The drawer traps focus while open and returns it to the control that opened it when dismissed.
At the end, the keepsake includes only the sections the visitor encountered. Its final thermal-ink treatment reveals a concealed message in response to pointer position, with a keyboard-operable alternative so the interaction is not limited to a mouse. Other details extend the same tactile idea: moving a hand over a fogged freezer clears a small patch, forms a temporary palm, then lets the glass mist over again. A four-step wrapper lesson works with pointer or keyboard input. The light sequence is silent; its four changes of illumination suggest a jingle without playing one.
Built from the browser
No generated visual assets are used in the room. CSS gradients, borders, masks, shadows and pseudo-elements build the packaging, faces, reflections and paper textures; inline SVG contributes other drawn details. Timers and animation pause when the document is hidden, and reduced-motion support matters in a page whose atmosphere depends on motion. The effect is not an attempt to disguise code as photography. Code is presented as the material from which this exhibition is made.
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 163 of 175, “konbini”):
KONBINI — MARU-K, open 24 hours: aisle census at 3:12 AM (fictional chain, tender register). Aesthetic: fluorescent hum over perfect shelves; loneliness with a jingle. Palette: fluorescent white, shelf-label yellow, onigiri-wrapper greens/reds, freezer blue. Fonts: zen-kaku-gothic-new (display), vt323 (receipt). SIGNATURE: THE RECEIPT — a paper receipt prints CONTINUOUSLY down one side of the page, logging your visit in receipt typography (sections you read, seconds you lingered, a subtotal of attention) and tears off at the end as your keepsake — itemized, taxed, timestamped 03:12. Shelf-grid layouts with perfect facing (the discipline explained), the 3AM CAST: five night customers, one item each, five tender vignettes (the nurse, the bassist, the exam student). Freezer-door fog on hover, the fluorescent flicker held to a barely-there shimmer (reduced-motion honest), onigiri-folding diagram, the jingle described but never played. Unforgettable: your receipt.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/konbini/
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.
Step into the aisle
Visit the live MARU-K room to follow its shelves, freezer glass and receipt through the night. Then browse all 175 rooms at the exhibition hub and see how other AI-built exhibition pieces turn technical constraints into experiences.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
- Room 161: Station Chiroptera — Read the Dark by Echo
- Room 155: Luciole — The Synchronous Fireflies of Vallon Creux
- Room 152: Mothlight — A Porch-Light Census
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.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
