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 night walk where light decides what you can read
Noctambule is an AI-built exhibition piece: an imagined Paris experienced on foot between 01:00 and dawn. It is not a travel guide to a real route or a website for a real company. Its fictional streets are the setting for a design experiment in attention.
The signature move is simple to describe and difficult to pull off: the story appears in scattered pools of lamplight, with stretches of darkness between them. Instead of presenting a continuous page of editorial content, the room makes scrolling feel like moving through a city at night. You encounter one illuminated fragment, cross a visual gap, and arrive at the next.
That darkness is part of the composition, not unused space. Small silhouettes—a cat, a folded chair, a passing bus—reward visitors who linger. Near the end, a baker’s window shifts the mood: warm light spreads sideways, and the journey begins to turn toward morning.
ambient light projectors for home
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
From prompt to exhibition room
The project followed a three-pass pipeline: build the experience, critique it mercilessly across phone, tablet, and desktop, then apply an art-director certification pass before release. Its accompanying guide explains the palette, typography, light-pool construction, and code choices, offering a practical starting point for anyone adapting the technique.
The full build notes live in the room’s design guide.
As an affiliate, we earn on qualifying purchases.
How the room makes darkness work
The palette sets the distance between the viewer and the city. Near-black cobble and masonry carry most of the page, while a muted zinc blue-grey suggests rain and far-off rooftops. Lamplight moves from amber at its edges to a pale, hot center; the bakery introduces a deeper orange. That change in color temperature gives the final stretch a narrative role without needing a conventional chapter heading.
Typography supports the same contrast. Instrument Serif supplies an intimate, slightly theatrical voice for display text, while Manrope keeps timestamps, route details, and body copy direct and legible. Both type families are self-hosted from the exhibition’s font library, keeping the presentation under the project’s control.
Illumination as layout
Each light island gets its own position and radius through CSS custom properties. Layered radial gradients soften the boundary between bright center, amber falloff, and wet-black surroundings. The lamps themselves are assembled from CSS borders, gradients, and pseudo-elements rather than imported illustrations.
A small JavaScript routine reads scroll movement once per animation frame. It uses that movement to adjust the pools’ cadence, advance the route indicator, and shift the river reflections. The effect is deliberately restrained: light seems to settle as you move, but the text and route do not depend on animation to make sense.
Weather made from code
The rain lives on a fixed canvas with a strict particle limit. It uses fewer drops on phones, caps pixel density, and stops drawing when the tab is hidden. An inline SVG turbulence texture adds grain, while CSS gradients build the Seine and its reflections. Even the silhouettes are made from clipped shapes, borders, and shadows. The room reports zero generated image assets: rain, street, river, bus, chair, cat, lamps, and dawn are all drawn in code.
The river also works as an interactive control rather than just a backdrop. Visitors can operate it by keyboard or pointer; touching it places ripples and reveals a tucked-away line of text. Reduced-motion preferences remove the rain and cadence, preserving a quieter version of the experience. The underlying lesson is broader than “make it dark”: make the next piece of content feel earned by the light that reveals it.
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 166 of 175, “noctambule”):
NOCTAMBULE — Paris on foot, 01:00–05:00 (fictional walker’s log, flâneur register). Aesthetic: wet cobbles, lamplight pools, zinc roofs; the city with its guard down. Palette: wet-cobble charcoal, lamplight gold, zinc blue-grey, café-window warm. Fonts: instrument-serif (display), manrope (body). SIGNATURE: LAMP POOLS — the page is dark; content lives ONLY inside streetlamp light pools (radial islands down the page), and scrolling WALKS between them — footstep-cadence easing, darkness between pools where only silhouettes hint at what’s next (a cat, a chair left out, someone else awake far off). The walker’s log: four hours of invented encounters written close (the baker’s first light at 04:30 is the page’s turning point — warmth spills across the layout from one window). Bridge-crossing interlude with river shimmer, the “city sounds at 3AM” catalogue set as type sizes, night-bus route N12 cameo. Unforgettable: walking lamplight to lamplight.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/noctambule/
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.
Take the walk
Visit the live Noctambule room and move through its four-hour imagined Paris at your own pace. Then browse the exhibition hub for all 175 rooms—a collection of AI-built design experiments, each exploring a different way to shape the web.
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.
As an affiliate, we earn on qualifying purchases.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
