/* Audax OS site · diagrams Three signature visual moments: - MatrixDiagram (5 spheres × 5 layers × 3 modes — isometric grid) - NestedCircles (5 layers — concentric, individual at the core) - ModesTriad (3 modes — human↔human, human↔agent, agent↔agent) All drawn in SVG using the brand palette. No external icons. */ /* ---------- Matrix (5×5×3) ---------- */ const MatrixDiagram = () => { // We draw a "5×5×3" stack: a 5-row × 5-col grid (spheres × layers), // with two extra translucent planes behind it to suggest the modes (3 modes). // Skewed isometric for depth. const sx = (x, y) => x + y * 0.42; // simple oblique projection const sy = (x, y) => -y * 0.36; return (
{/* Three modes as receding planes */} {[0, 1, 2].map(z => { const dx = z * 38, dy = -z * 32; const size = 360; return ( {/* plane outline */} {/* 5×5 grid lines on top of plane */} {z === 0 && ( {[1, 2, 3, 4].map(i => { const t = i / 5; const startX = size * t, startY = 0; const endX = size * t + size * 0.42 * 1, endY = -size * 0.36; return ; })} {[1, 2, 3, 4].map(i => { const t = i / 5; const startX = size * 0.42 * t, startY = -size * 0.36 * t; const endX = size + size * 0.42 * t, endY = -size * 0.36 * t; return ; })} )} {/* tiny mode label on each plane */} {['HUMAN ↔ HUMAN', 'HUMAN ↔ AGENT', 'AGENT ↔ AGENT'][z]} ); })} {/* Cell highlights on front plane — a few warm nodes */} {[[1,2], [2,1], [3,3], [0,4], [4,0]].map(([cx, cy], i) => { const size = 360; const cell = size / 5; const x = cx * cell + cell / 2 + (cy * cell + cell / 2) * 0.42; const y = -(cy * cell + cell / 2) * 0.36; return ( ); })} SPHERES LAYERS MODES {/* Tiny ticks counting 5/5/3 */} 5 5 3
); }; /* ---------- Nested circles (5 layers, individual at core) ---------- */ const NestedCircles = ({ activeLayer = null }) => { const LAYERS = [ { key: 'ecosystem', label: 'Ecosystem', r: 320, dy: 0 }, { key: 'family', label: 'Organisation Family', r: 256, dy: 0 }, { key: 'org', label: 'Organisation', r: 192, dy: 0 }, { key: 'team', label: 'Team', r: 128, dy: 0 }, { key: 'individual', label: 'Individual', r: 64, dy: 0 } ]; return (
{LAYERS.map((l, i) => { const isActive = activeLayer === l.key; const isCore = l.key === 'individual'; const stroke = isCore ? 'none' : '#9CBFA3'; const fill = isCore ? 'url(#coreFill)' : '#FFFFFF'; return ( {isCore ? l.label : l.label.toUpperCase()} ); })} {/* Mycelial linkages — subtle threads connecting nodes around the rings */} {[0, 1, 2, 3, 4, 5].map(i => { const a = (i / 6) * Math.PI * 2; const x1 = Math.cos(a) * 64, y1 = Math.sin(a) * 64; const x2 = Math.cos(a + 0.6) * 192, y2 = Math.sin(a + 0.6) * 192; const x3 = Math.cos(a + 1.1) * 320, y3 = Math.sin(a + 1.1) * 320; return ( ); })} {/* Constellation dots on the rings */} {[ [128, 0.4], [192, 1.3], [192, 4.6], [256, 2.0], [256, 5.1], [320, 0.9], [320, 3.3], [320, 5.7] ].map(([r, a], i) => ( ))}
); }; /* ---------- Modes triad ---------- */ const ModesTriad = () => (
{/* Arrowhead for H↔H */} {/* Arrowhead for H↔A */} {/* Arrowhead for A↔A */} {/* ── Row I H ↔ H ─────────────────────────────────────── */} {/* mode badge */} I {/* connector */} {/* centre label */} H ↔ H {/* left node */} Human practitioner {/* right node */} Human practitioner {/* ── Row II H ↔ A ────────────────────────────────────── */} II H ↔ A {/* left node — Human */} Human practitioner {/* right node — Agent */} Agent assistant {/* ── Row III A ↔ A ───────────────────────────────────── */} III A ↔ A {/* left node — Agent */} Agent worker {/* right node — Agent */} Agent worker {/* horizontal dividers */}
); /* ---------- Spheres orbit (5 spheres around the brand mark) ---------- */ const SpheresOrbit = () => { const SPHERES = [ { key: 'value', label: 'Value' }, { key: 'work', label: 'Work' }, { key: 'rel', label: 'Relationship' }, { key: 'learn', label: 'Learning' }, { key: 'comm', label: 'Communication' } ]; const radius = 230; return (
{/* mycelial threads connecting all spheres */} {SPHERES.map((s, i) => SPHERES.slice(i + 1).map((t, j) => { const aA = (i / SPHERES.length) * Math.PI * 2 - Math.PI / 2; const k = SPHERES.indexOf(t); const aB = (k / SPHERES.length) * Math.PI * 2 - Math.PI / 2; const x1 = Math.cos(aA) * radius, y1 = Math.sin(aA) * radius; const x2 = Math.cos(aB) * radius, y2 = Math.sin(aB) * radius; return ; }))} {/* central Audax sigil (simplified) */} AUDAX OS {/* sphere nodes */} {SPHERES.map((s, i) => { const a = (i / SPHERES.length) * Math.PI * 2 - Math.PI / 2; const x = Math.cos(a) * radius; const y = Math.sin(a) * radius; return ( {s.label.split(' ')[0]} {`SPHERE ${['I','II','III','IV','V'][i]}`} ); })}
); }; /* ---------- Causal Loop (single regenerative ring) ---------- */ const CausalLoop = () => { const NODES = [ { label: 'Value', glyph: 'I' }, { label: 'Trust', glyph: 'III' }, { label: 'Communication', glyph: 'V' }, { label: 'Work', glyph: 'II' }, { label: 'Learning', glyph: 'IV' } ]; const radius = 200; return (
{NODES.map((n, i) => { const a1 = (i / NODES.length) * Math.PI * 2 - Math.PI / 2; const a2 = ((i + 1) / NODES.length) * Math.PI * 2 - Math.PI / 2; const x1 = Math.cos(a1) * radius, y1 = Math.sin(a1) * radius; const x2 = Math.cos(a2) * radius, y2 = Math.sin(a2) * radius; const dx = x2 - x1, dy = y2 - y1; const len = Math.hypot(dx, dy); const ex = x2 - (dx / len) * 60, ey = y2 - (dy / len) * 60; const sx = x1 + (dx / len) * 60, sy = y1 + (dy / len) * 60; const mx = (sx + ex) / 2 - dy * 0.18; const my = (sy + ey) / 2 + dx * 0.18; const ang = Math.atan2(ey - my, ex - mx) * 180 / Math.PI; return ( ); })} {NODES.map((n, i) => { const a = (i / NODES.length) * Math.PI * 2 - Math.PI / 2; const x = Math.cos(a) * radius; const y = Math.sin(a) * radius; return ( {n.label} {n.glyph} ); })}
); }; /* ---------- Two loops (degenerative vs regenerative) ---------- */ const TwoLoops = () => { const ITEMS_DEG = [ 'Invisible contribution', 'Weaker trust', 'Guarded communication', 'Confused work', 'Defensive learning', 'Distorted value' ]; const ITEMS_REG = [ 'Visible contribution', 'Stronger trust', 'Clearer communication', 'Better work', 'Deeper learning', 'Fairer value' ]; const Loop = ({ title, items, kind }) => (
{title}
    {items.map((it, i) => (
  1. {String(i + 1).padStart(2, '0')} {it}
    2. ))}
  2. ↻ back to {items[0].toLowerCase()}
); return (
); }; /* ---------- Health wheel (5-part diagnostic) ---------- */ const HealthWheel = ({ scores }) => { const SPHERES = ['Value', 'Work', 'Relationship', 'Learning', 'Communication']; const s = scores || [0.85, 0.65, 0.55, 0.35, 0.75]; const R = 200; return (
{[0.25, 0.5, 0.75, 1].map(t => )} {SPHERES.map((_, i) => { const a = (i / SPHERES.length) * Math.PI * 2 - Math.PI / 2; return ; })} { const a = (i / SPHERES.length) * Math.PI * 2 - Math.PI / 2; return `${Math.cos(a) * R * s[i]},${Math.sin(a) * R * s[i]}`; }).join(' ')} fill="#1F4D2E" fillOpacity="0.18" stroke="#1F4D2E" strokeWidth="1.5" /> {SPHERES.map((_, i) => { const a = (i / SPHERES.length) * Math.PI * 2 - Math.PI / 2; return ; })} {SPHERES.map((name, i) => { const a = (i / SPHERES.length) * Math.PI * 2 - Math.PI / 2; const x = Math.cos(a) * (R + 32); const y = Math.sin(a) * (R + 32); return ( {name} ); })}
); }; Object.assign(window, { MatrixDiagram, NestedCircles, ModesTriad, SpheresOrbit, CausalLoop, TwoLoops, HealthWheel });