Process notes — Maison Sable

01 Concept & creative direction

A print lookbook that turns its own pages

The brief: high-fashion print codes — folio numbers, oversized numerals, split-screen compositions — executed as a digital object. The reference register is the physical lookbook a maison couriers to editors: one look per plate, plate numbers, almost no words, and the decisive act of turning a page.

That page-turn became the whole architecture. Looks I–VI live inside one pinned viewport; scrolling doesn't slide content past you, it commits — a hard-edged diagonal wipe replaces one plate with the next, a folio counter flips in the corner, and then everything holds still. Fashion-film pacing: 0.7 seconds of decision, then stillness, while the plate breathes at 1.03× Ken Burns.

Six looks demanded six compositions without breaking the grid: photo-left/type-right, its mirror, a diptych with an inset fabric detail, two full-bleed landscapes, and a framed plate floating beside a 52vh outlined numeral. The cover is a 70/30 split — ecru masthead against the first look — and the split line itself is draggable, ±10%, because a lookbook should let you hold it at your own angle.

Palette is claimed and locked: ecru #EDE9E3, noir #101010, one sand accent #B39C7D. Nothing else is allowed on the page; even the favicon is the wipe, frozen.

02 Palette & type specimen

Three colors, one axis

Ecru: #EDE9E3 — the paper

Noir: #101010 — the ink

Sable: #B39C7D — the accent

The typographic system is a single variable font doing extreme work. Bodoni Moda carries an optical-size axis from 6 pt to 96 pt: at opsz 6 the strokes are sturdy and readable; at opsz 96 the hairlines go razor-thin against fat stems — the didone contrast that is this site's entire typographic signature. Jost handles labels and body copy in geometric silence.

Bodoni Moda · opsz 96 · display Sillage №5

Bodoni Moda italic · opsz 60 the gown erodes toward its final shape

Bodoni Moda · opsz 6 · text Strate · Crête · Cascade · Alluvion · Volute

Jost 300 · body Five standing waves set with heat and held by nothing else. An hour of steam would return the wool to sleep.

Jost 400 · tracked label Organza sablé — la traîne, quatre mètres

03 Signature technique

The diagonal wipe engine

Each look is an absolutely-positioned full-viewport layer inside a sticky stage. A single ScrollTrigger maps pin progress to a plate index; crossing a boundary calls goTo(next), which plays a 0.7s clip-path tween. The trick that keeps the edge hard and diagonal: both states are 4-point polygons whose top edge leads the bottom by 12%, and GSAP interpolates between them. No masks, no canvas — one compositable CSS property.

I

II

III

Click — turn the page

// the two states of a page-turn — top edge leads by 12%
const POLY = {
  fromLeft: {
    start: 'polygon(0% 0%, 0% 0%, -12% 100%, 0% 100%)',
    end:   'polygon(0% 0%, 112% 0%, 100% 100%, 0% 100%)',
  },
  fromRight: {
    start: 'polygon(100% 0%, 100% 0%, 100% 100%, 112% 100%)',
    end:   'polygon(-12% 0%, 100% 0%, 100% 100%, 0% 100%)',
  },
}

function goTo(next) {
  // decisive: any in-flight turn is completed, never blended
  if (activeTl) { activeTl.progress(1); activeTl = null }

  const side = (next % 2 === 0) !== (dir < 0) ? 'fromRight' : 'fromLeft'
  gsap.set(incoming, { zIndex: 3, clipPath: POLY[side].start })

  activeTl = gsap.timeline()
    .to(incoming, { clipPath: POLY[side].end, duration: 0.7,
                    ease: 'power4.inOut' }, 0)
    .fromTo(img, { scale: 1.06 }, { scale: 1, duration: 0.95 }, 0.05)
    .add(flip(folioNum,  ROMANS[next], dir), 0.12)   // the counter
    .add(flip(folioLook, lookName,     dir), 0.16)   // turns with the page
}

Scroll distance between plates is 70vh; a debounced lenis.scrollTo snap settles the reader exactly on a plate whenever scrolling rests. Under prefers-reduced-motion the engine never boots: the same six plates render as ordinary stacked sections, fully readable, no pin, no wipes, no Ken Burns.

04 Asset pipeline

Art-directing one shoot across twelve generations

All photography is Higgsfield soul_2 (2K), downloaded as PNG masters and shipped as ≤500KB WebP. The hard problem was never beauty — it was coherence: one model, one garment language, one dune-studio set, one late-afternoon key light, across every plate. The tactics that worked:

A master plate first. Look I was generated from text alone and regenerated until it defined the world: ebony-skinned model with shaved head, ecru pleats echoing dune strata, warm key from camera left. Every subsequent look passed its job-id as reference media.
A verbatim consistency preamble. Every prompt opens with the same sentence — “the exact same female model… the same sculpted sand dunescape… the same soft warm late-afternoon directional key light from camera left.” Repetition is the point; paraphrase invites drift.
Fighting the prompt enhancer. With reference media attached, soul_2 force-enables a prompt rewriter that describes the reference more than the request — my “structured jacket with wide trousers” and my no-model fabric macro both came back as gowns. Attempts to pass enhance_prompt:false were rejected. The workaround: shots that don't need facial identity (the fabric macros, the back-view finale) were generated without the reference, where the enhancer stays off and the prompt survives verbatim; palette and light were locked by language alone.
Honest accounting of drift. The casting holds across plates — same skin depth, shaved head, bone structure — but it is best read as one model photographed on different days: Look II's face is rounder and more direct than Look I's lowered gaze. A human retoucher would notice; a human art director might approve anyway. The silhouettes also converged on gowns — the enhancer resisted tailoring — so the collection was reframed as what it kept insisting on: a study in draped, sand-formed gowns.

Look I plate — **Look I — the master**Text-only prompt; take 2 (take 1 typeset a VOGUE masthead into the sky — magazine words summon magazine furniture).

Look II plate — **Looks II–V**Chained off Look I as reference media; consistency preamble + one new garment clause each.

Look VI plate — **Look VI — reference-free**Back view, no face: identity risk ≈ 0, so the reference was dropped to keep the enhancer off. Best plate of the set.

Outtake: a fabric macro prompt that returned a full gown — **Outtake №1**“Macro of pleated silk, no model” + reference media → the enhancer returned this gown instead. Kept for the record.

Ledger: 12 generations ≈ 12 credits of a 180-credit budget — 9 shipped plates, 2 outtakes kept honestly, 1 discard. Fonts are self-hosted variable WOFF2 via the repo's getfont tool; the OG image is a 1200×630 crop of Look VI; the favicon is hand-written SVG.

05 Iteration diary

Three passes with a hostile eye

Build

The first standing version

Fonts pulled, twelve generations art-directed, the wipe engine written around a sticky stage rather than GSAP pinning (fewer spacer surprises), reduced-motion path implemented as a no-boot static layout, and both routes assembled with real copy throughout.

Pass 1 — structure

Making every viewport true

The screenshots were merciless. The tablet route was ~8,900px tall and crashed full-page capture (shortened the scroll segment per look from 70vh to 56vh); the giant outlined numerals collided with the fixed folio chrome in three layouts; a CSS selector leak stretched the diptych's inset fabric detail to full viewport height; and Look V's centered numeral read as broken glyph fragments behind the plate — redesigned it anchored left, with the image raised clear of its caption. The finale's caption sat on the train, the single best thing in the photograph. Moved it to the top.

Pass 2 — craft

Driving it like a reader

A live-browser pass with synthetic pointers: dragged the split (clamps at 60/80, arrow keys nudge), panned the fabric strip, stepped every wipe boundary, and jump-scrolled across the whole document. Two real bugs surfaced: the chrome corners went noir-on-noir over the atelier letter (each corner pair now inverts to ecru on its own scroll boundary), and instant jumps raced multiple folio flips — the counter could read “Look VI” in the middle of the letter. The fix is a self-healing folio: when scrolling rests, the label is recomputed from position and hard-corrected. Verified reduced-motion serves all six plates statically with zero animation.

Pass 3 — complexify & refine

The blade

Hostile-critic pass. What was missing was at the center of the site: the wipe's leading edge was clean but anonymous. It now carries a 1px sand hairline — the blade — that rides the diagonal at the exact geometry of the clip polygon and extinguishes as the turn completes; the favicon is this line, frozen. Also darkened the sand label color for AA contrast on small tracked caps, gave the fabric captions plate numerals, and re-verified both routes at all three widths.

06 Credit

Colophon

Designed & built autonomously by Claude Fable 5 (Anthropic) — creative direction, art direction of all photography, copy, typography, and code. One of fifteen sites built for the FIFTEEN exhibition.