Axiom motion and sound layer: the plan
1. One motion system
Tokens are defined once and reused everywhere: three named springs (soft: settles with barely an overshoot; snap: quick, small overshoot; over: visible overshoot), durations fast 220 / base 420 / slow 700 ms, and a dedicated draw easing for SVG strokes. In CSS the springs are cubic-bezier curves whose second control point passes 1; in JS they are a real mass-spring-damper integrator, used only where motion must be continuous (magnetic button, cursor light, gathering dots). Nothing is linear, and only two fields loop (the flock, the cursor light), both paused off screen.
Colour roles never swap: warm orange is the act (stamps, checks, gates, decisions, the live head of the trail); steel blue is the record (rails, links, brackets, connectors); ink and muted carry words. A shared receipt vocabulary (dashed rules, tabular timestamps, NO. numbers, torn zigzag edges, rotated stamps) threads through the principles, the ledger and the trail. The reveal grammar is blur-to-sharp with a short rise, and the signature device is the hand-off: one thing becomes the next (waveform bars become birds, a sweep line swaps a section, the rope is replaced by a dotted record).
2. One sound system
- One AudioContext, created only on a user gesture (the global toggle or a card's speaker icon). Master gain 0.9.
- Every event peaks at or below 0.15. The palette is soft sine and triangle tones, band-passed noise (paper, air, rope) and one low thump. Chords divide their ceiling across voices so the sum stays under it.
- Nothing is sustained except the contact hover hum, which stops on pointer leave. Nothing runs longer than about 1.2 s.
- The global toggle sits in the header, off by default, preference remembered in localStorage on the real site. The first switch-on plays one quiet chord as calibration. Each card's speaker icon auditions that card's sound alone, without enabling the rest.
3. Where the twelve go
Home page, in the order a visitor meets them: 01 Headline resolve (hero, first paint, the loud opening); 11 Section hand-off (between every block); 02 Receipt, 03 Counts, 04 Two records, 05 Citation check (the four principles: quiet, tactile, tick-level sound); 08 Audit trail (the left margin for the whole scroll, a whisper under everything); 06 The flock leaks out (Murmurations entry, the second loud moment); 07 Three separate decisions (the consent panel, where the visitor acts); 10 Magnetic contact (the close, warm rather than loud); 12 Tagline sign-off (the footer, resolution).
Human in the Harness page: 09 Clip in, step out opens the essay, the rope draws, the carabiner clips the call to action, then steps out and the dotted record remains, which is the page's signature and its argument in one gesture. 08 runs the margin as the essay's own record, 11 separates essay sections, 02 appears as a small receipt beside "We tell you what is kept before you clip in", and 10 closes.
Pacing: two loud beats (hero, murmuration) separated by a long quiet valley of principles; the trail is a constant whisper; contact is warm; the footer resolves. Sound follows the same curve: chords only at the two loud beats, ticks and taps elsewhere.
4. Sound without annoyance
Off by default, one visible toggle, remembered preference. Sounds are short, quiet, and at most two overlap. The hum is the only sustained sound and it is tied to a hover. Audition icons let the curious try one sound without commitment.
5. Performance rules
Animate transform, opacity and filter only; width and height animate nowhere; will-change only on the two magnetic elements. Canvas work (flock, dot gathering) is capped at 2x device pixel ratio. IntersectionObserver pauses every loop off screen and document.hidden pauses it further. Cards play once; Replay is opt-in. Flocking is capped at about 84 birds, so the O(n²) pass stays well under a millisecond.
6. Accessibility
prefers-reduced-motion renders every card's final state, starts no loops and plays no sound automatically; the toggles and buttons stay functional. Sound is always opt-in and gesture-gated. Switches use role="switch" with aria-checked, and every control has a visible focus ring. Motion never carries meaning alone: each animated idea is restated in the copy.
7. Shipping it as a motion layer
The site is static and the copy must not change, so motion ships as two files hooking the existing markup. motion.css holds the tokens and animation states, all scoped under an html.mx class that motion.js adds. motion.js holds the MOTION object, the sound module and the card builders, and finds elements by stable data attributes (data-m="hero", data-m="principle-1") added to the existing HTML: attributes only, no text touched. If JS fails or is slow, the page renders exactly as today, because base CSS holds the final states and JS only ever adds classes that animate toward them. Roll out in four steps, measuring long tasks at each: hero and section hand-off first, principles second, Murmurations third, harness and contact last.