Making N°9

A printed magazine that only exists in the browser

Maison N°9 is a fictional fashion webzine; issue nine is titled Structure — three looks about what holds a garment up. The page's one job: make scrolling feel like turning the pages of a printed editorial. So everything borrows print furniture — a sommaire, folios, a planche-contact, a colophon — and a fixed page indicator ties scroll position to page numbers.

The art direction is gallery white and carbon black with a single crimson, echoing the silk shoot. Boldness is spent in exactly one place: garment names set at ~19vw in a Didone, deliberately overlapping the photography.

Five inks, one of them loud

Crimson appears only where it means something: the issue number, section numerals, selected contact-sheet frames, and the DRAPÉ name over the silk. Stone carries every caption so the black stays reserved for content.

A Didone shouting, a grotesque whispering

Photographs that unmask themselves

The signature move is a scroll-driven clip-path reveal. Each photo sits in a figure marked with a direction; one rAF loop converts its viewport position into a progress value and writes an inset() that retreats as you scroll, while the image inside counter-scales from 1.12 to 1. The result reads like a page being peeled off the photograph.

// progress: 0 as the photo enters, 1 after ~72% of a screen
var raw = clamp((vh - rect.top) / (vh * 0.72));
var t   = 1 - Math.pow(1 - raw, 3);          // easeOutCubic
var rest = ((1 - t) * 100).toFixed(2) + "%";
el.style.clipPath = "inset(0 0 0 " + rest + ")"; // wipes left → right
img.style.transform = "scale(" + (1.12 - 0.12 * t) + ")";

The planche-contact uses the same loop: a 340vh section with a sticky 100vh viewport, where scroll progress becomes a horizontal translate3d across a film-strip of eight frames — the three photographs re-cropped with object-position so one day of shooting yields a whole contact sheet.

var p   = clamp(-rect.top / (rect.height - vh));
var max = track.scrollWidth - viewportWidth;
track.style.transform = "translate3d(" + (-p * max) + "px,0,0)";

The giant names overlap the photos with mix-blend-mode: multiply (white spreads) and screen (the dark spread), so the letterforms take the photograph's tone instead of sitting on top of it. Under prefers-reduced-motion the clips are removed entirely and the contact sheet becomes a plain horizontal scroller.

Three passes, three upgrades

1. I

   Correctness & composition — the cover title's exclusion-blend inversion rendered invisible on gallery white, so MAISON was recut in carbon with a multiply blend that prints across the photograph; the fixed folio collided with the cover footer and now appears only once the cover is turned; the dark spread's crimson kicker was lifted for contrast.

2. II

   Elevation — diagnosed why static renders showed blank photographs: the unmask now floors at 45% revealed (any un-scrolled render reads as deliberately mid-peel, never broken), lazy-loading that left the OBJET photograph undecoded was removed, and the contact sheet gained a light-table hover — frames sit dimmed until the cursor lifts them to full brightness.

3. III

   Taste — Chanel rule: cut the redundant "red ring = selected" legend (the frames' own "· sel." marks carry it); shortened the mobile pan to 260vh so the sheet turns at reading pace; lightened DRAPÉ's crimson on the flat mobile spread; verified 390px and the reduced-motion fallback, where the planche-contact becomes a plain film strip.

Do this yourself, with Claude

1. Pick a print artifact to imitate — an editorial, a zine, a catalogue — and name the issue. Real magazines have furniture: sommaire, folios, colophon. Ask Claude to build the furniture first.
2. Fix a palette of no more than five inks and give the loud one a rule ("crimson only where it means selection or a number"). Write the rule into the prompt.
3. Choose one display face with real optical sizing (Bodoni Moda, Fraunces) and one working grotesque. Set the display at a viewport size that scares you slightly, then subtract 1vw.
4. Generate or shoot 3 photographs with one shared lighting story, then multiply them: crops via object-position turn three frames into a contact sheet.
5. Ask for one scroll engine, not many effects: a single rAF loop that maps element position to progress, driving clip-path reveals and a sticky horizontal pan.
6. Overlap type and image with mix-blend-mode — multiply on light, screen on dark — so the letters belong to the photo.
7. Screenshot at 1440 and 390, and make Claude critique its own render before you do: spacing rhythm, contrast, what to delete.
8. End with the Chanel rule: remove one accessory, then ship with a reduced-motion fallback and zero console errors.

Colophon of the colophon

Photography generated with Nano Banana Pro (three frames: the ivory coat, the crimson silk, the hawthorn-silver bag). Layout, copy and code by Claude Fable 5 — hand-written HTML, CSS and JavaScript, no frameworks, no build step. Maison N°9 and its ateliers are fictional.

← Return to the issue