← all four

Claude Fable 5.1 · round 2 · the plan

Impression: the page is wet clay, and you are the hand that presses it

Synthesis

Thesis (what the others brought): Designer A and D both found the right grammar, orange is the act and blue is the record, and D's hand-off idea (one thing becomes the next) is genuinely good. Antithesis (what trapped them): all three illustrated the receipt instead of issuing one. Every scene was a small card, every metaphor was a picture of itself (a paper receipt, a carabiner, a line with dots), nothing remembered the visitor and nothing took over the screen. The higher idea, "Impression": the oldest receipts in the world were pressed into clay, so the page is a living clay tablet. Every act the visitor performs (pressing a claim, contesting it, leaving a fingerprint, weighing a count, clipping in and stepping out, conducting the flock, flipping three separate switches) physically dents the clay, is written to a ledger, and travels with them as a small clay orb that follows the scroll. At the end the tablet is fired, the orb merges into it, and the page hands the visitor the receipt of their own visit as a file. "No judgement vouches for itself" is no longer stated; the page proves it about itself, by keeping a record of what it did with you.

The motion system

One material, three clays: warm orange (act), steel blue (record), cream (the tablet). Every form is a stack of radial highlight, conic body, inner subsurface glow, inset shadows for depth, a long soft drop shadow, and a static fractal-noise grain clipped to the shape. Nothing is ever still: static forms breathe on a seven second cycle, the specular highlight slides with the cursor (--lx/--ly) and with scroll (--sy), forms lean toward the pointer through real spring integrators (k 90 to 200, damping 12 to 16, visible overshoot), press causes squash-and-stretch from the press point, and dents are pseudo-volumes that scale in with overshoot. Merging and splitting use SVG goo (blur plus alpha matrix, composited atop so shading stays crisp); text is never placed inside a gooey container. The four jaw-drop moments: 01 a full-viewport WebGL clay field (2.5D SDF, smooth-min union, finite-difference normals, specular, rim, subsurface, grain) under the embossed headline; 02 the full-bleed contestable slab that dents where you press; 08 the murmuration, a few hundred clay droplets with goo that form "participatory" and scatter from your cursor, which is one of the birds; 12 the firing, where the tablet heats, cools, and prints your receipt while the orb that followed you merges into it.

The score

One key (D dorian), one palette: soft sines and triangles, band-passed noise for clay contact, one sub thud. Off by default; one gesture (the clay Sound pill) starts the bed: a D2/A2/D3 drone under a slow-swept lowpass, with sparse pentatonic plucks every few seconds. Scrolling plays a rising pentatonic scale, one step per scene. Motifs recur: press (thud), impression (D up to F), contest (F down to a rubbed D), merge (arpeggio up to D5), split (two voices gliding apart), decision (D, F, A as three separate notes, never a chord). The firing resolves with a VII, IV, i cadence and a sustained D. Master chain is lowpass, compressor, voices capped at 0.15, bed near 0.035.

Scroll choreography

Home: hero clay field is loud (01), then the slab asks to be contested (02). The four principles are a quieter valley with tactile presses (03 to 06), the ledger (07) is a rest that shows the visitor their beads so far, the murmuration (08) is the second peak, the three switches (09) are deliberate and dry, contact (11) is warm, the firing (12) is the climax and the only cadence. The orb carries colour and memory between every scene (the hand-off). Human in the Harness: opens with the cover art as the clay field, the harness scene (10) beside the clip-in passage, the ledger spine in the margin, "stepping out does not unwrite the record" shown by the dent that remains, then rest, then the shared contact and firing.

Performance and accessibility

DOM animates transform, opacity and filter only. WebGL renders at a capped internal resolution (720 to 1100 px wide) and upscales; the flock is capped at 150 birds on phones and 280 on desktop; every loop is a managed rAF paused by IntersectionObserver and on tab hide. Canvases are sized from their container on resize, never a fixed height. prefers-reduced-motion renders final states, no loops, no bed. All controls are real buttons with focus rings and ARIA switches; the slab is keyboard pressable; every animated idea is restated in the real copy beside it. No text is drawn inside small shapes; dent labels fit inside their dent, bead labels live in a list.

Shipping as a motion layer

motion.css and motion.js, loaded deferred, scoped under html.mx. The script finds existing landmarks by stable data-m attributes and wraps them in aria-hidden clay stages; the copy is never touched, and if the script fails the site renders exactly as today. The ledger lives in memory plus sessionStorage, is never sent anywhere, and the receipt download is generated client-side. Roll out in four steps: hero and slab, principles and ledger, murmuration and switches, harness, contact and firing, measuring long tasks on a mid-range phone at each step.