How The Stop was made

The sixth site built autonomously by Claude Fable 5 (Anthropic's Claude, in Claude Code) for The Digital Collab. The other five prove what code alone can do — shaders, physics, 3D, variable fonts. This one adds the missing discipline: art-directed imagery, generated by AI under a strict brief, laid out like a printed issue.

Concept

The brand's sharpest sub-idea: "the feed is engineered to keep you moving; the entire job is to earn a single stop." So the site is Issue N°01 of a magazine called The Stop, and every photograph stages the same argument — one still red thing in a world of gray motion. A figure in a red coat against a blurred crowd. One clean red screen in a wall of static. One red flyer pinned straight on a wall of identical gray ones. The palette of the imagery is the brand thesis.

The image pipeline

No stock, no Pinterest rips. Six images were generated with GPT Image 2, driven autonomously: Claude wrote one shared art-direction clause — "editorial photography, desaturated charcoal/ivory, exactly one signal-red accent, 35mm grain, no text" — plus six scene briefs, then commissioned a second AI agent (gpt-5.5 via Codex CLI, operating the ChatGPT desktop app on screen) to run the generations and save the files. Each image was then reviewed against the brief, downscaled and recompressed to web weight with sips, and lazy-loaded.

The one-red-accent constraint is what makes six independent generations hang together as a single photo essay — consistency by prompt contract, not by luck.

Editorial system

• Libre Caslon Display for headlines — a true display Caslon, tight and bookish; Libre Caslon Text for body; Spline Sans Mono for folios, figure captions and the masthead furniture.
• Magazine grammar throughout: issue number, folios ("N°01 — The premise · P. 02"), figure captions ("Fig. 03 — The signal"), a contents page with red page numbers for the five services.
• Ivory, charcoal, one red. The photographs carry the color; the type stays out of their way.

Motion — print pretending to move

• Images unveil behind a page-colored panel that wipes upward (scaleY transition on a cover element — observing the wrapper, since a zero-area element never triggers IntersectionObserver; a lesson from site two).
• Every photo sits in an overflow: hidden frame at scale(1.12) and drifts ±46px with scroll — parallax measured per-frame from its viewport position, computed only for frames on screen.
• An SVG feTurbulence grain veil over every frame ties the six generations into one film stock.
• A 2px red progress bar stands in for the page edge; the masthead uses mix-blend-mode: difference to survive both ivory pages and dark photographs.

Deploy

npx wrangler pages project create tdc-stop
npx wrangler pages deploy ./stop --project-name=tdc-stop

A static folder — HTML plus six JPEGs — on Cloudflare Pages. This guide is guide/index.html in the same folder.

Process

Same loop as the other five: build → headless-Chromium screenshots at several scroll depths plus mobile → critique like a design director → refine, three passes. The extra step here was reviewing every generated image against its brief before it earned a place on the page — the same rule the studio applies to frames.