Axiom Intelligence: Motion and Sound Architecture Plan
1. The Motion System: "The Living Receipt"
Axiom's motion language rejects decorative flourish in favor of evidentiary choreography. Every animation acts out verification, contestation, or deliberate connection. We never use linear easing; movement is governed by physical spring presets and ink-on-paper mechanics.
- Spring Presets (RK4 / CSS cubic-bezier approximations):
spring.snappy(cubic-bezier(0.22, 1.35, 0.36, 1), 480ms): Mechanical latches, carabiner clips, and receipt stamps. High tension, slight overshoot.spring.heavy(cubic-bezier(0.16, 1, 0.3, 1), 780ms): Paper feeds, ledger drawers, and hero word settlements. High mass, zero bounce.spring.flock(cubic-bezier(0.34, 1.56, 0.64, 1), 620ms): Organic gathering, boid separation, and cursor magnetism.- Chromatic Semantics:
- Warm Orange (
#E07A3F): Human agency, contestation, active consent switches, carabiner hardware, and verification stamps. - Steel Blue (
#6BA3E0): System telemetry, optical focus rings, uncertainty distributions ("We can't tell"), and immutable audit timestamps. - Ink (
#F2F0EC) on Ground (#0E1116): High-contrast literary clarity, paired with dashed receipt perforations (1px dashed rgba(201,209,219,0.2)).
2. The Sound System: Tactile Telemetry
All audio is synthesized procedurally in real time via a single shared AudioContext, instantiated strictly upon the visitor's first explicit gesture. Peak gain is hard-clamped at 0.14 through a master dynamics compressor and warm low-pass filter (3.8kHz) so nothing ever pierces or fatigues the ear.
- Sonic Palette:
- Paper & Ink: Filtered pink-noise bursts (12ms to 35ms) shaped with exponential decay, evoking thermal receipt feeds and archival card stock.
- Hardware & Locks: Dual-detuned triangle and sine oscillators with rapid pitch drops (
180Hz -> 48Hzfor stamps;2.4kHz -> 900Hzmetallic pings for the carabiner gate). - Consensus & Flock: Soft pentatonic harmonic clusters (
C4, D4, F4, G4, A4) with slow attack envelopes that swell only when scattered voices align. - Consent & Introduction: A persistent header toggle reads
Audio Telemetry: OFFby default. Enabling it plays a subtle two-note confirmation chime. Users can also audition individual components via local speaker buttons without enabling scroll-triggered global audio.
3. Site Mapping & Scroll Pacing
Home Page (axiomintelligence.co.nz)
- Left Margin Spine (Card 02 - Audit Trail Spine): Runs continuously down the left viewport gutter. Quietly ticks and stamps UTC timestamps as sections cross the reading threshold.
- Hero Section (Card 01 - Tri-Modal Hero Resolve): High intensity. As the page loads, observable pulls into optical focus, contestable is struck through in orange and rewritten above, and participatory coalesces from 48 drifting particles. Followed directly by Card 03 (No Judgement Stamp) sealing the sub-headline.
- Pacing Rest: Plain Newsreader editorial prose with generous vertical breathing room. Only the margin spine advances.
- "What We Hold" Grid (Cards 04, 05, 06, 07): Medium-high interactive zone. Each of the four principles enters via a physical receipt feed:
- Principle 1 uses the thermal paper feed and tear-off perforation (Card 04).
- Principle 2 animates live stacked telemetry bars where the steel-blue
"We can't tell"bar updates its count (Card 05). - Principle 3 splits into two independent mechanical tracks for Deciding vs. Being Right (Card 06).
- Principle 4 links source text to a verified PhD citation node via Bezier SVG filaments (Card 07).
- Murmuration Feature (Cards 08 & 09): Signature visual peak. An interactive canvas flock (Card 08) spills across the frame boundaries, responding to cursor proximity. Immediately below, the three independent consent latches (Card 09) require distinct mechanical clicks, proving that participation is never bundled consent.
- Footer & Contact (Cards 11 & 12): Warm resolution. The magnetic contact button (Card 11) draws cursor light and fills with liquid orange ink. The footer closes with the mechanical gear-to-pendulum handoff (Card 12).
Essay Page (Human in the Harness)
- Essay Header & Cover Art: Opens with the Harness Carabiner Clip (Card 10). As the reader scrolls past the mountain screen artwork, an SVG climbing rope draws tension and clips into an orange anodized gate.
- Body Margins: Uses the Audit Trail Spine (Card 02) to mark reading checkpoints.
- Pre-Clip Disclosure Callout: Embeds Card 10's unclip state alongside "Stepping out does not unwrite the record", visually demonstrating that unclipping releases the climber while leaving the steel-blue ledger node permanently written.
4. Performance, Accessibility & Non-Invasive Delivery
- Zero-Touch DOM Architecture: Delivered as two standalone assets (
axiom-motion.cssandaxiom-motion.js) loaded withdefer. The script queries existing semantic landmarks (h1,blockquote,section,a[href^="mailto"]) by text signature and wraps matched phrases inaria-hidden="true"visual staging nodes while preserving a screen-reader-clean.sr-onlyoriginal text layer. Copy in the source HTML remains 100% untouched. - 60fps Budget & Lifecycle: All animations restrict mutations to
transform,opacity, andfilter(or isolated 2D<canvas>contexts). A sharedIntersectionObserver(threshold: 0.25) triggers entrance sequences once and pauses all canvasrequestAnimationFrameloops the moment a card leaves the viewport ordocument.hiddenbecomes true. - Reduced Motion: When
prefers-reduced-motion: reduceis active, all springs bypass interpolation, SVG strokes render atstroke-dashoffset: 0, and particle systems render in their settled typographic state.