The Clay Ledger
Synthesis
Round 1's thesis, mine, was a disciplined evidentiary motion system, but it lived inside small cards that safely illustrated metaphors. The antithesis in the other galleries pushed the receipt-as-interface idea further, yet stayed component scale, component pacing and a shared dark-UI politeness: everything watched from a frame and nothing was ever done to the visitor. The higher idea is The Clay Ledger: the site is sculpted from clay, the one material that literally holds an impression, and the page keeps a real ledger of the visit itself. Every scene leaves a mark, the visitor presses, recounts, contests and clips, the flock grows with each act, and at the end the page prints the visitor's own receipt and refuses to vouch for itself. The contradiction between a serious governance company and the most alive site anyone has seen dissolves, because the aliveness is the accountability: nothing moves for decoration, everything moves because matter remembers.
The motion system
One material, three springs, one memory. Clay is built from layered radial and conic gradients, inset key light and shadow, a subsurface rim, a soft specular and a fine grain overlay, never a flat drop shadow. Three springs drive all motion: Snap (latches, stamps, about 300ms, small overshoot), Settle (text and paper, 520ms, almost none) and Over (contacts and landings, 700ms, visible squash and stretch). Nothing is linear and nothing is still: forms breathe on a slow cycle, ambient light drifts and parallaxes with scroll, and every contact squashes, wobbles and settles with weight. Colour roles never swap: warm orange clay is the human act, steel blue clay is the record, cream is shared ground. The ledger is the fifth element: a live margin strip records every event with a timestamp, and later scenes read it back, so the page remembers and hands off to itself.
The score
One key, D minor, and one timbre family: soft sine and triangle voices through a low-pass, band-passed paper and air, one low thump. A quiet generative bed of slow pentatonic tones under filtered air runs only while sound is on and the tab is visible; the visitor's actions play motifs over it: an opening rise, a gather run when the flock forms a word, a descending contest figure, a two-part carabiner click, a warm contact tone. The cadence, D, F, A, D, is reserved for the receipt and resolves the whole visit. Every voice peaks at or below 0.15 into one compressor; sound is off by default, one switch starts it, and each scene's speaker button auditions its motif from that click alone.
Scroll choreography
Home: 01 opens loud, the full-viewport clay headline, then 10's seed carries every section across. The principles (02 to 05) are the tactile valley: quiet, touchable, tick-level sound, each recording what is done to it. 06 is the second peak: the full-bleed flock with the visitor's cursor as the only warm bird, growing with every ledger event. 07 sits beneath every published claim as a reusable contest pattern. 08 is the whisper, the margin trail running the whole scroll. 11 is warm rather than loud. 12 resolves: the receipt rises, the cadence plays, the page hands back the visit and stops. Human in the Harness: 09 opens beside the essay (clip in, step out, the record stays), 02 sits small beside the disclosure line, 08 runs the margin, 10 separates essay sections, and 11 and 12 close both pages identically. The jaw drops are 01, 02, 06, 09 and 12; the rests between them are real reading intervals.
Performance and accessibility
DOM animation touches transform, opacity and filter only. The canvas scenes share one clay engine: blobs are stamped as cached radial sprites into a low-resolution field, and one per-pixel pass (normals from the height field, one key light, one specular, subsurface rim, static grain) lights it, then the buffer is upscaled, so cost is flat regardless of screen size. One rAF loop drives everything, IntersectionObserver pauses each scene off screen, hidden tabs pause everything and suspend audio, and flocking uses a spatial hash capped at 220 birds. prefers-reduced-motion renders every final state (formed word, dented tablet, split records, clipped harness, printed receipt) with no loops and no automatic sound. Sound is always opt-in; canvases are decorative and aria-hidden; controls are real buttons and switches with visible focus; below 700px everything is one column with no horizontal scroll. No figure is invented: the receipt's numbers are the visit's own counts, and the uncertainty piles are labelled illustrative.
Shipping as a motion layer
The site stays static and the copy stays byte-identical. motion.css carries the clay tokens, springs and state classes under an html.mx scope; motion.js carries the clay engine, the ledger, the score and the scene controllers, hooking existing sections by data attributes (data-mx="hero" and so on) plus stable phrase anchors for inline marks. Canvas stages and clay overlays are appended as aria-hidden siblings, never replacing readable text. Base CSS holds final states and JS only adds classes that animate toward them, so a failed or slow script leaves today's site intact. Rollout: hero and hand-off, principles, murmuration, harness and receipt, measuring long tasks at each step.