The concept
Maison Noire is a fictional Paris couture house unveiling nine looks with no photography. The page behaves like an invitation held under low light: almost everything is still, black, and typographic, while one material moves. That restraint is the luxury. Ivory copy, thin gold rules, and wide Jost labels create the house voice; the Playfair Display italic titles provide the drama.
The WebGL silk
The living cloth is the fixed #silk canvas in main.js. initSilk() compiles a WebGL2 fragment shader where fbm() stacks value-noise octaves into a domain-warped height field. Two extra samples create a normal, then a Kajiya-Kay style anisotropic highlight follows a tangent derived from the warped weave. Broad light is ivory; the tightest specular core is gold.
addRipple() writes pointer positions into an eight-slot uniform ring buffer, so dragging sends decaying sine waves through the cloth domain. drawSilk() eases the hovered row glow with uFocusY and uFocusAmp. The render loop stops when document.hidden, and reduced-motion users receive one frozen frame.
The generated proof film
Pass 3 adds the local salon proof in index.html: /assets/gen/noire/hero.jpg is the poster and reduced-motion still, while /assets/gen/noire/silk.mp4 is the ambient loop. The workflow was GPT Image 2 for the couture editorial still, then Kling 3.0 through Higgsfield to animate the same image into five seconds of silk motion. Both assets are stored locally, so the page makes no external requests.
setAmbientPlayback() in main.js pauses the video offscreen and whenever document.hidden. The proof frame’s gold inspection line is controlled by data-proof-stage pointer and keyboard events. All other visuals remain code-generated: the WebGL silk, grain, runway plan, thread sample, and guide hero field.
The typographic lookbook
Each look row has two typographic layers. In styles.css, .look-silk is white type on a black block using mix-blend-mode: multiply; black hides the canvas and white reveals it, turning the letters into cut windows. The ivory layer sits above. Hover, touch, or syncLookFocus() on scroll adds .look.is-lit, crossfading the row into silk while the fabric description opens its tracking and a gold hairline sweeps across.
Palette & type tokens
- Noir
- #0a0a0a
- Ivoire
- #f2ede4
- Or
- #b9974e
- Display
- Playfair Display italic
- Body
- Jost 300–400
- Motion
- 1.2–1.7 s, slow ease
The load moment is the body::before curtain in styles.css: a black field with one gold incision lifting away before the hero text finishes rising.
Reproduce this
Prompt an AI agent to build a single-page couture house on noir #0a0a0a, ivory #f2ede4, and one gold #b9974e. Demand self-hosted Playfair Display and Jost, no external requests, one local generated editorial still plus a poster-backed video loop, and a full-viewport WebGL2 silk shader using domain-warped fbm, anisotropic highlights, pointer ripples, hidden-tab pausing, and a reduced-motion still. Ask for huge italic look rows that reveal the shader through blend-mode lettering, plus a runway plan, atelier ledger, and private-client form.
One living thing. Everything else should stand still enough to hear it move.