Water keeps
the better
record.

01 / Concept

A working trough, not a craft-shop moodboard.

The Marbling Bath turns the browser into an apron-side instrument. Walnut is structural: it frames the live surface, holds the navigation, and returns at the footer like the rim of a long trough. Bath cream is the breathing field. Oxblood, indigo, ochre, and bottle green arrive as mineral interruptions rather than evenly distributed brand colours.

The story follows the order of a studio visit: meet the bath, work the colour, learn the pattern grammar, understand gall and size, trace the teaching hand, then reserve an apron. Editorial facts—14.2 litres, 41 brush knots, a first-print ledger—make the invented atelier feel inhabited.

02 / Live bath

The visible sweep is the actual transform.

Bloom

In main.js, addDrop() creates timed pigment state. organicPath() plots 88 perimeter points with layered sine noise; drawBloom() opens seven tonal rings with irregular wet edges. Settled colour is baked into an offscreen canvas, so every later gesture changes persistent pigment rather than a decorative overlay.

Draw and comb

advect() clips a stretched ellipse along the pointer vector and redraws sampled pigment in two offsets, pulling the surface into a tapered feather. For whole-bath tools, beginComb() stores the exact current layer. Each animation frame calls rowsFrom() or columnsFrom() only up to the moving comb front. Fine, rake, and bouquet therefore deform the image progressively while the teeth cross it. The same bath accepts pointer and keyboard input.

Inspect and lift

inspectSurface() turns the brass loupe into a true optical instrument: it samples the current visible canvas around the pointer or keyboard position and redraws that crop at 2.4× inside a clipped inspection lens. It follows new pigment, live advection, and comb motion rather than showing a duplicate decoration.

The pull handler settles any moving colour, paints the exact canvas into an 1800 × 1200 paper composition, and exposes a local PNG through toBlob(). A sheet visibly meets the trough before the keepsake is revealed. The pigment layer is then reduced to sixteen percent opacity: the next visitor begins over a real ghost of the previous pull.

03 / Palette & type

Mineral colour against wet paper.

Gloock carries display text at deliberately tight tracking and compressed leading; its broad curves resemble specimen-book titling without pretending to be Ottoman calligraphy. Manrope handles instructions, measurements, navigation, and live status. Body copy stays restrained so the serif can be theatrical.

Material depth comes from inset walnut shadows, paper grain, displaced SVG edges, uneven overlaps, and restrained radial light—not image files. The hero and closing field now use crossing fluid paths rather than concentric targets.

04 / Reproduce this

Prompt for a process, then demand proof.

Ask an AI frontend agent for a single-page atelier whose signature material is directly manipulable. Require persistent Canvas 2D state, organically opening pigment, vector-based pointer advection, progressive whole-surface comb transforms, keyboard equivalence, exact PNG export, and a post-print ghost. Name the workshop materials and the functions that express them.

“Build one tactile instrument that could carry the entire site. Let its state survive every gesture. Make the print pull preserve my exact bath, then audit the result at 390, 834, and 1440 pixels with no external assets, overflow, or motion that continues in a hidden tab.”

Lock one pale field, one dark structural colour, and a small historically grounded pigment set. Pair a dramatic display serif with a technically calm sans. Finally, critique the work for dead space, undersized labels, repetitive geometry, control reach, contrast, and whether the interaction still dominates on a phone.