Introducing Maison Noire — A Digital Couture Reflection
Maison Noire, a fictional Parisian couture house, presents an avant-garde digital exhibition that immerses visitors in a silent dialogue of fabric, typography, and motion. Its standout feature is a dynamic WebGL silk shader that mimics the delicate, flowing behavior of black silk, creating a living textile within a restrained, monochrome palette. This site exemplifies how minimalism can be elevated through technical mastery, turning a static page into a subtle, sensory experience—where everything is still, except for the whispering fabric that moves with purpose and grace.
The Creative Pipeline: From Build to Critique to Certification
This project was realized through a three-phase process: initial development involved building the WebGL silk shader, followed by a rigorous critique that refined the visual nuances and interaction flow, culminating in a final approval by an art director. The entire process was guided by a dedicated design manual that emphasized restrained elegance and technical precision. The result is a site where each element serves the overall mood—luxury, subtlety, and craftsmanship—without reliance on external assets, demonstrating the power of code-driven design and AI-assisted workflows.
The full build notes live in the room’s design guide.
Dissecting the Design and Technical Foundations
The site’s visual language centers on a stark color palette—jet black, soft ivory, and a muted gold—used across typography and graphic elements to evoke understated luxury. Large, italicized serif headings in Playfair Display serve as focal points, while clean, thin gold lines outline the hierarchy, contrasting against the deep black background. Typography is layered with interactive effects: hovering or scrolling triggers a transition where white text on a multiply-blended black background reveals the silk beneath, creating a window-like cutout effect. This blend mode technique ensures the fabric’s texture appears through the typography itself, blurring the lines between text and material.
The core interactive element is the WebGL-rendered silk fabric, embedded as a fixed canvas that responds to user input. Built with a custom fragment shader, it employs domain-warped fractal Brownian motion (fbm) to simulate the natural undulations of silk. Anisotropic highlights follow tangent vectors derived from the warp, producing a subtle shimmer that mimics real silk’s reflective properties. Ripples generated by pointer movements ripple through the cloth, decaying smoothly over time, and enhancing the organic feel. The site’s design ensures these effects are accessible: reduced-motion users see a static, frozen fabric, respecting accessibility guidelines.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 13 of 175, “noire”):
MAISON NOIRE — Collection No 9. Fiction: a Paris couture house unveiling nine looks. Aesthetic: severe luxury: noir #0a0a0a, ivory #f2ede4, single gold hairline #b9974e. Fonts: playfair-display (huge italic display), jost (body, wide tracking uppercase for labels). SIGNATURE: full-viewport WebGL “silk” panel — a fragment shader of flowing fabric (domain-warped fbm shaded with anisotropic highlight) that responds to cursor drag like disturbed cloth; the lookbook is typographic: nine looks as enormous numerals + names (No 1 LE CORBEAU…), hover floods the row with the silk shader through background-clip while a one-line fabric description letter-spaces open. Runway show details with a countdown, atelier manifesto, private-client form (styled, non-functional). Motion: slow, expensive easings (cubic-bezier(.19,1,.22,1)), generous durations. Unforgettable: restraint + one liquid living material.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/noire/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
Experience the Digital Atelier
Visit the full virtual exhibition of Maison Noire to witness this sartorial symphony in motion. Explore all 175 curated sites at the hub and immerse yourself in a digital space where technology elevates the art of couture into a silent, mesmerizing dialogue.
Visit the live room → · Browse all 175 rooms
Previously in Wing I
- Room 6: Abyssal Station — a 3,800 m descent
- Room 11: The Cartographer’s Society — est. 1831
- Room 8: CHROMA — Laboratory of Colour Perception
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
WebGL silk shader development kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
