Direction: the receipt becomes the interface
Make the site feel like a living instrument, not a promotional reel. Orange represents human intervention: challenging, choosing, clipping in. Steel blue represents the system’s response: revealing, connecting, recording. Neither colour means “correct”. Paper edges, registration marks, numbered impressions and fine connecting rules form the shared visual vocabulary.
Keep every sentence of the existing copy intact. Motion should demonstrate the ideas beside that copy, never supply unsupported evidence, confidence scores or success claims.
One motion system
Use three named springs: Settle for text and paper, Snap for stamps and connections, and Weight for larger transitions. Their overshoot is small, with a quick arrival and a longer settling tail. Standard durations are 420, 780 and 1,200 milliseconds. Staggers are usually 60 milliseconds. A complete signature moment takes roughly two seconds.
Text moves only a short distance, resolving from a restrained blur. Large objects travel farther, but their reading surfaces settle before attention moves on. SVG reveal masks, rather than continuously repainted strokes, make ropes and audit lines appear to draw. Pointer responses use the same settling curve.
The gallery has exactly twelve studies. Each plays once on entry, with explicit replay. There are no ambient animation loops.
Home page: sequence and pacing
- Consequential headline. The opening signature moment. “Observable” focuses; an orange intervention under “contestable” is replaced by a blue response; particles gather around “participatory”. The sentence remains selectable, accessible text.
- Section hand-off, study 10. The headline’s horizontal rule becomes the next section’s registration edge. The subheading arrives quietly. Leave a full reading interval here.
- Receipts, not logs, study 02. The first principle feeds into view and receives a numbered impression.
- Counted uncertainty, study 03. The second principle resolves alongside an abstract tally grid. The prototype’s marks are decorative, not claimed publication counts. Production counts must come from real content.
- Two records, study 04. Two parallel strips settle independently under the third principle. Neither is styled as a pass or failure.
- First harness, study 05. A smaller receipt closes the principles sequence. All four cards use the same mechanics, with progressively less theatrical emphasis.
- Murmuration hand-off, study 06. The second major spectacle. Birds leave the bounded demonstration frame, collect into a connecting stream and hand attention to a receipt-like panel. Pointer influence is subtle and optional.
- Separate decisions, study 11. The consent statement resolves in three distinct groups. These are explanatory visuals, not pretend consent controls.
- Magnetic contact, study 09. A warm light and shallow magnetic pull invite contact. The button’s target stays stationary and generous.
Audit trail, study 07, connects these sections in the margin on wide screens. Its marks indicate reading progress, not fabricated operational events. On phones, reduce it to short section-local rules. End with the existing footer tagline, static.
Human in the Harness page
Open with the existing essay title and cover treatment. Use Clip in, step out, study 08 beside the harness passage: a rope reveals, the gate opens, and the connection settles. Do not animate the essay’s paragraphs continuously.
Reuse the restrained section hand-off and audit trail at genuine structural breaks. Near the passage about stepping out, Persistent record, study 12 separates a departing marker from a receipt that remains visible. This is the page’s closing signature moment. Follow it with stillness, then the shared contact treatment.
Sound without intrusion
Sound starts off. A persistent, clearly labelled toggle enables it only through a user gesture. Enabling sound does not replay everything already visible. Each gallery speaker button explicitly auditions one sound without changing the global preference.
Use one shared AudioContext and one restrained palette: filtered paper noise, rounded sine tones and short, muted clicks. Receipt feeds use sparse ticks; stamps use low thumps; gathering birds use a short ascending chord; the harness combines a soft zip with a two-part click. Contact receives a warm, brief tone, never a sustained hover drone.
All voices pass through a bounded output stage capped at 0.12. Stop scheduled sounds when their card leaves view or the tab becomes hidden. Do not add sounds to every link, keystroke or scroll movement.
Production layer and safeguards
Ship motion.css and motion.js separately from the site’s content and layout. Attach behaviours through data-motion attributes on existing sections. Add decorative wrappers and SVGs as aria-hidden siblings; never replace readable copy with canvas text.
Use IntersectionObserver for entry, exit and playback suspension. Animate transform, opacity and limited blur only. Keep pointer work local, avoid permanent compositor promotion, and cap flock size on small screens.
With reduced motion, show the final composition immediately, disable magnetic movement and skip automatic sound cues. Preserve keyboard focus, touch targets, contrast and logical reading order. If JavaScript, fonts or audio fail, the complete static site must still work. Test on a mid-range phone, keyboard alone, a screen reader and Safari before shipping.