Get business pricing on office and shipping supplies
- Business-only prices and quantity discounts
- Tax-exempt purchasing
- Multiple users, one account, clear invoices
A neighbourhood wakes one delivery at a time
Room 167 is an AI-built exhibition piece imagining a fictional milk delivery service called Milkrun. Its subject is logistics, but its focus is the small acts that make a route feel personal: returning a bottle, remembering a doorstep detail, and moving quietly past sleeping homes.
The room’s signature move is to make scrolling behave like a clock. The visitor travels from 4:00 a.m. toward sunrise as an electric float advances through an isometric neighbourhood. Light shifts, houses respond, and a delivery ledger fills in along the way. The site itself was built by AI; that process is part of the story this exhibition presents.
As an affiliate, we earn on qualifying purchases.
One progress value, many connected details
A restrained palette carries the scene from midnight indigo through lilac and peach to the warm white of morning. Display lettering gives the main moments a generous editorial feel, while monospaced labels lend the times and quantities the character of a route sheet. Handwritten notes add a human touch to the otherwise measured layout.
The neighbourhood is drawn in inline SVG, with repeated architectural shapes forming the houses and street. As the visitor scrolls through a tall, sticky scene, a shared progress value moves the float along six route points. That same value reveals the route line, advances the clock and ledger, and warms each house as its delivery arrives. The result is a coordinated sequence: the map, interface, and changing sky all describe the same journey.
Materials made from code
There are no photographic or generated images in the room. CSS gradients suggest translucent glass; simple shapes build the crate and a small bird; lined paper and casual rotations give doorstep notes the feel of something left by hand. Even the final delivery is choreographed in the page: a bottle lands, a window brightens, the ledger reaches its imagined total, and a sunrise flare appears.
Sound is optional and begins only when the visitor switches it on. A pair of sine oscillators creates a brief glass-like chime, accompanied by a low electronic hum. The room also responds to accessibility preferences: reduced-motion settings remove much of the transition choreography, and the sound pauses when the page is out of view.
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 167 of 175, “milkrun”):
MILKRUN — FIRST LIGHT LOGISTICS: the 04:00 rounds (fictional dairy round, tender-labor register). Aesthetic: an isometric neighborhood waking one doorstep at a time. Palette: a dawn gradient that runs the WHOLE page (indigo→lilac→peach), milk-bottle white, crate red. Fonts: outfit (display), chivo-mono (round sheet), caveat (doorstep notes). SIGNATURE: THE ROUND — an isometric SVG neighborhood delivered house-by-house as you scroll: bottles appear on steps (glass clink), curtained windows warm one by one, the float hums forward (whirr behind switch); the sky gradient runs true dawn in the background the entire way. Doorstep notes from customers (folded paper, handwritten: “two extra Thursday, thank you”), the round-sheet ledger typography, empties-return choreography, electric-float heritage (why milk floats were EVs before EVs), robin-on-the-crate cameo. Last delivery lands exactly at sunrise. Unforgettable: a neighborhood waking under your scroll.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/milkrun/
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.
From build to art direction
The room follows a three-pass pipeline: build the code-driven dawn scene, critique it mercilessly for clarity and atmosphere, then certify the result through art direction. The accompanying guide, “Building Milkrun,” documents how the route, clock, changing light, responsive houses, and optional sound work together, and offers a prompt for reproducing the approach.
The full build notes live in the room’s design guide.
As an affiliate, we earn on qualifying purchases.
Take the route
Visit the live Milkrun room and follow its imagined deliveries from first light to sunrise. Then browse all 175 rooms at the hub for more AI-built exhibition experiments.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
- Room 161: Station Chiroptera — Read the Dark by Echo
- Room 163: MARU-K — Aisle Census, 03:12
- Room 155: Luciole — The Synchronous Fireflies of Vallon Creux
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.
interactive logistics art prints
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
