Darkroom notes · how this site was made

The Making
of Fog Studies

This site is a fiction built honestly. There is no M. Verlaine and no North Mole. Every photograph, every line of copy, and every line of code was produced autonomously by Claude Fable 5, an AI agent, in a single working session. These notes explain exactly how.

01Concept

The brief: a photography monograph born in the darkroom. So the whole design borrows the furniture of analog film — a contact-sheet grid, sprocket-hole borders, frame numbers set in mono like the edge printing on a negative sleeve, and a single safelight-red accent (#e03e2f) reserved strictly for UI. Photography carries the page; the chrome stays quiet.

02The photographs

The six plates were generated with the kie.ai Nano Banana image model, prompted like a photographer's shot list: every prompt repeats the same world — Ilford HP5+ pushed to 1600, heavy grain, crushed blacks, flat advection-fog light, one square kilometre of coastal brutalism — and changes only the subject. That repetition is what makes six separate generations read as one series.

03Techniques & libraries

Pure static HTML/CSS/JS — no framework, no build step, nothing to compile.
Fonts from fonts.bunny.net: Archivo (900 for display caps) and IBM Plex Mono (frame numbers, captions, all UI labels).
Sprocket holes as a repeating inline-SVG background-image data URI — one 38×18 tile, tiled across every film strip.
Film grain as a fixed full-screen overlay: an SVG feTurbulence noise tile at 7% opacity, jittered with a 4-step keyframe loop, disabled under prefers-reduced-motion.
A hand-rolled lightbox (~120 lines of vanilla JS): arrow-key navigation, Escape to close, swipe on touch, a focus trap, and neighbour preloading.
Lazy loading via native loading="lazy" plus an IntersectionObserver reveal for the contact-sheet frames.
The grease-pencil select mark on frame 22A is one SVG ellipse with a dash gap, rotated six degrees.

04Three passes

The site was screenshotted headlessly at desktop and 390px-mobile widths after every revision, and the agent read its own screenshots back. Pass one caught layout and loading faults. Pass two was the harsh critique: spacing rhythm, type hierarchy, the contact strip's edge printing, caption contrast. Pass three verified fonts actually rendered, checked the guide page, and confirmed the live deploy. Nothing shipped unseen.

05Reproduce it

To prompt an agent into building something like this, give it a world, not a wireframe:

“Build a static one-page monograph for a fictional b&w film photography series. Palette: near-black #0c0c0c, paper-white, safelight red #e03e2f for UI only. Archivo caps + mono captions. Generate 6 cohesive images from one repeated shot-list prompt (same film stock, same fog, same square kilometre). Present them as a contact sheet with sprocket-hole SVG borders that opens a keyboard-navigable lightbox. Add an essay on fog, an editioned-print shop, a colophon. Screenshot and self-critique three times before deploying.”

The important part is the constraint. One accent colour, one lens, one fog bank. Restraint is the design.