How NOIR was conceived, art-directed, photographed by machine, and engineered — the concept, the palette, the prompts, the code, and three ruthless passes.
NOIR Issue 07 is a fictional avant-garde fashion editorial — a printed lookbook brought to the browser. The brief: severe elegance. Yohji Yamamoto's attitude, the art direction of AnOther Magazine. A digital magazine you turn by scrolling sideways, where colour has been withdrawn so that only cut, structure and shadow remain.
The whole experience is a single horizontal track — cover, editor's letter, seven looks as spreads, credits, colophon — moving on inertia, with a running folio at the top right. On mobile and for reduced-motion visitors it re-flows into a clean vertical magazine. Nothing about the layout is accidental: mixed baselines, oversized folios, and type that overlaps the imagery, the way ink sits on a page.
Strictly monochrome — ink black and bone, with the greys between them. One accent: blood red, used exactly three times in the entire issue (the letter's rule, Look VII's lining, the final "End."). Restraint is the whole point.
An enormous editorial serif for display, a compressed grotesk for labels and captions, numbers set as oversized folios. Deliberate contrast — the tension between a couture serif and an industrial grotesk is the visual grammar of the issue.
Six original photographs generated with GPT Image 2 (gpt-image-2, quality high), all sharing one art direction: single hard key light, seamless studio backdrop, true blacks, fine grain, invented anonymous models — no likenesses. Five portraits (1024×1536) and one landscape (1536×1024). Each was inspected and would be regenerated if it read as AI-kitsch. A shared prompt preamble locked the house style:
High-fashion avant-garde editorial photograph, medium-format camera, single hard directional key light raking from the side, deep sculptural shadows, seamless studio backdrop, rich tonal range with true blacks and luminous highlights, fine film grain, matte finish. Strictly monochromatic near-black and bone palette. Invented anonymous model, face partially in shadow. Severe elegance in the spirit of Yohji Yamamoto and AnOther Magazine. No text, no watermark, no logo, no border.
A tall model enveloped in a voluminous oversized wool gazar opera coat in deep charcoal-black, enormous rounded collar swallowing the neck, fabric cascading in heavy architectural folds, arms hidden. Three-quarter portrait against a bone-grey backdrop, strong shadow to one side. Sculptural, monastic, imposing silhouette.
A model reclining horizontally, wrapped in yards of matte black silk crepe that pools and spills like liquid across the floor, one arm extended, fabric tension and negative space. Wide landscape composition, low raking light skimming the folds, bone floor and dark upper backdrop. Sculptural still-life quality.
A model in a rigid pleated column dress of black duchesse satin, vertical knife pleats catching hard light along each ridge, high funnel neck, statue-like posture. Full-length portrait, strong single side light making the pleats read as light-and-shadow stripes, luminous bone backdrop. Architectural, monumental, still.
Looks II, IV and V followed the same recipe: sharp-shouldered tailoring, an asymmetric folded felt panel, and a hooded wool cape with a silk-tulle veil. Look VII reprises Look I's opera-coat frame as a "coda" — mirrored and zoomed to an abstract lower-fold crop — developed with the single red accent on hover.
The wheel/drag delta feeds a target position; a RAF loop lerps toward it and sets translate3d on the track. Falls back to a native vertical magazine on mobile or reduced-motion.
// each frame
current += (target-current)*0.085;
track.style.transform =
'translate3d('+(-current)+'px,0,0)';Photography sits under a crushed grayscale filter; hovering a look eases it toward a fuller tonal range — the frame "develops". Look VII pushes a red duotone wash.
.figbox img{filter:grayscale(1)
contrast(1.1) brightness(.9)}
.figbox:hover img{filter:grayscale(.12)
contrast(1.03) brightness(1.02)}An IntersectionObserver adds .in as each look enters the viewport; a covering panel scales to zero, wiping the image open while captions rise on a stagger.
.reveal.in .clip{transform:scaleX(0);
transition:transform 1.15s var(--ease)}Inside the track, each look's image and text are offset by their distance from viewport-centre — text drifts further than the photograph, so the layers separate as they pass.
img.transform =
'translateX('+(rel*-18)+'px) scale(1.06)';
txt.transform='translateX('+(rel*46)+'px)';Within 150px the button eases toward the cursor at 0.32×, the inner arrow trailing — then clicks advance the track to the next spread's centre.
if(dist<150){mx=dx*.32; my=dy*.32;}
else{mx*=.86; my*=.86;}A procedural noise canvas is tiled over everything in mix-blend-mode: overlay; a radial vignette deepens the corners. Both are pointer-events:none and cheap.
// per-pixel random luminance → dataURL
d[i]=d[i+1]=d[i+2]=Math.random()*255;mix-blend-mode: difference so they read over any tone?static=1 fallbacks, :focus-visible and keyboard nav — console clean, no overflow, no failed requestsThe site is fully static — no build step. Deploy the folder to Cloudflare Pages:
npx wrangler pages deploy . --project-name noir
Images live in assets/, the guide at /guide. Everything else — fonts via Google Fonts, all motion in vanilla JS — needs nothing but the files themselves.