Steal This: The Signature Technique Behind The Marbling Bath — Ebru Atelier & Live Print Trough

The Marbling Bath: An Interactive Digital Workshop

Within this AI-crafted exhibition piece, visitors are immersed in an innovative online atelier that simulates the traditional art of paper marbling through an interactive browser experience. The centerpiece is the ‘Live Print Trough,’ a digital reinterpretation of an artisan’s studio, where users can manipulate pigments, brush strokes, and patterns in real-time. This virtual environment transforms the browser into a tactile, artist’s tool, offering an authentic glimpse into the delicate process of marbling while maintaining the fluidity and unpredictability of water-based art.

Decoding the Palette, Typography, and Interaction

The visual design employs a restrained yet expressive typographic palette, pairing a dramatic display serif with a clean, technical sans-serif to balance artistry and precision. The color scheme draws directly from mineral pigments used in traditional marbling—deep oxblood, indigo, ochre, and bottle green—rendered as layered, organic hues that evoke the natural flow of water and pigment. The material depth is conveyed through subtle shadows, textured paper grain, and displaced SVG edges, avoiding reliance on image files. Functionally, the site hinges on a signature technique: a persistent Canvas 2D state that captures every user gesture, from pigment advection to pattern formation. These interactions are vector-based, enabling precise control and smooth animation. The core interaction involves ‘organic path plotting,’ where sine-noise layered perimeter points simulate the unpredictable movement of water, while progressive combing transforms reshape the patterns dynamically. The system allows users to inspect their work through a digital magnifier, sampling and redrawing portions of the canvas to mimic real-world lifting and examination, with each gesture leaving a residual ‘ghost’ of the previous state. The design emphasizes a seamless flow from initial pigment application to final print, with real-time feedback and export features that preserve the exact bath conditions and pattern state, fostering a tactile sense of craftsmanship within the digital realm.

The Three-Stage Pipeline: Build, Critique, Certify

This project follows a rigorous three-pass approach: first, constructing a tactile, persistent digital instrument that captures the essence of traditional marbling; second, subjecting the system to relentless critique—examining issues like dead space, label legibility, repetitive geometry, control reach, and contrast—especially on mobile devices; and third, applying an art-director’s validation to refine interaction fidelity and visual clarity. The process is guided by a detailed interactive manual, emphasizing material authenticity and technical precision, ensuring the final experience is both engaging and true to the craft’s spirit.

The full build notes live in the room’s design guide.

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 90 of 175, “marbling”):
THE MARBLING BATH — ebru & paper marbling atelier. Aesthetic: pigment on water; apron-and-trough workshop. Palette: bath cream, pigments (oxblood, indigo, ochre, bottle green) swirled, paper white, walnut trough. Fonts: shippori-mincho? no — use gloock (display), manrope (body). SIGNATURE: MARBLE LIVE — a fluid canvas bath: TAP to drop pigment (spreading rings with organic wobble), DRAG a stylus to draw through colors (advection pulls them into feathers and cathedrals), comb tools (fine/rake/bouquet) sweep patterns in one gesture; then PULL THE PRINT — a sheet lifts your exact bath as a keepsake (downloadable PNG), leaving faint ghosts for the next pull. Pattern encyclopedia (git-gel, nonpareil, peacock — each demoed), pigment-and-ox-gall chemistry note, master lineage. Unforgettable: pulling your own print.

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/marbling/

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 Marbling Live

Visit the virtual atelier to manipulate pigments and patterns in real-time, and explore the full collection of 175 unique marbling artworks at the dedicated hub. Immerse yourself in this AI-generated homage to an ancient craft, reimagined with modern web technology.

Visit the live room → · Browse all 175 rooms

Previously in Wing IV

• Room 88: The Lace School — Two Moves, Infinite Pattern
• Room 95: The Bureau of Bureaus | Form 27-B
• Room 92: Taller Calavera — Death, Drawn Dancing

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.

Powered by Thorsten Meyer AI