How to carry
the dark.

The concept

Noctambule is a flâneur’s log designed as a route, not a conventional editorial page. The central rule is severe: story appears only where a streetlamp permits it. Seven irregular pools carry the reader from 01:03 to 04:56, while long dark gaps make scrolling feel like walking between islands of safety. Those gaps are not empty. A cat, folded terrace chair, zinc roofline, and passing N12 remain barely visible, rewarding a patient eye. At 04:30 the baker’s window breaks the system: café warmth floods sideways across the layout and begins the page’s transition toward dawn.

Lamp pools and footfall

Each .lamp-pool in index.html owns custom properties for horizontal position, vertical position, and radius. In styles.css, a layered radial gradient turns those values into soft-edged illumination; the adjoining .lamp-fixture is drawn entirely from borders, gradients, and pseudo-elements. updateWalk() in main.js samples scroll movement once per animation frame and writes a small sine-based --cadence offset, so the pools seem to settle with each step. It also advances the route meter and shifts river reflections. Nothing essential depends on motion, and reduced-motion mode removes both cadence and rain.

Wet air, river, silhouettes

The fixed #rain canvas holds at most 54 inexpensive line particles. drawRain() stops whenever the document is hidden, caps device-pixel ratio, and uses fewer drops on phones. A tiny inline SVG turbulence texture adds grain without requesting an image. The bridge’s Seine is a stack of CSS gradients; six warm slivers respond to the same scroll variable, making reflections drift sideways. The full river is also a keyboard-operable .river-touch button: main.js places paired CSS ripples at the pointer and lets a hidden sentence surface. Silhouettes use only clipped blocks, borders, and shadow, keeping every visual proudly code-made.

0 generated assets. Rain, cobbles, zinc, river, bus, chair, cat, lamps, and dawn are all code.

Palette and type

The wet-cobble base is #080a0c, with deeper masonry at #11161a. Zinc blue-grey #879aa5 describes distance and rain. Lamplight begins at #e5b85c, reaches a hot center at #fff0bc, and shifts to café-window orange #f0a85d. Instrument Serif supplies the intimate, slightly theatrical display voice; Manrope handles timestamps, route data, and prose. Both families are self-hosted from the exhibition font library.

Wet cobble

#080a0c

Zinc rain

#879aa5

Lamp

#e5b85c

Café window

#f0a85d

Reproduce this

Prompt an AI agent to build an immersive, code-only night walk in semantic HTML, CSS, and JavaScript. Ask for content to exist inside staggered radial light islands, with meaningful darkness between them, one interactive light carried by the pointer, and a narrative color-temperature turn near the end. Specify self-hosted editorial typography, invented place-specific writing, canvas atmosphere with strict particle limits, paused animation in hidden tabs, and a complete reduced-motion version. Demand phone, tablet, and desktop screenshots, then require a written critique before the final pass.

The useful constraint is not “make it dark.” It is: make darkness withhold the next sentence until light earns it.