// Constellation X — Cinematic. // A phrase materializes word-by-word in the center of the graph; each word // becomes a node and the constellation grows around it. Brand-statement. const HeroConstellationX = ({ pressed, t }) => { const open = Math.min(1, t); // "Fully lit" — last word has materialized (t0 = 0.34, lit at +~0.16) const fullyLit = open > 0.92; // Broadcast page-wide state via a CSS attribute on . Other components // (CSS, ScrollRail, etc) can react. React.useEffect(() => { document.documentElement.dataset.constellationLit = fullyLit ? '1' : '0'; }, [fullyLit]); // Idle "clock" derived from scroll progress so all motion in the canvas // moves with the user. Multiplied by 2π so wave functions span a full cycle // across one section of scroll. const idleClock = t * Math.PI * 2; // 0 (idle, fully visible idle layer) → 1 (pressed, idle layer fades to 0) const idleAmt = 1 - open; // Phrase split into word-nodes positioned across the canvas const phrase = [ { word: 'voice', x: 220, y: 320, accent: false, t0: 0.00 }, { word: 'is', x: 360, y: 280, accent: false, t0: 0.10 }, { word: 'the', x: 460, y: 320, accent: false, t0: 0.18 }, { word: 'new', x: 580, y: 270, accent: false, t0: 0.26 }, { word: 'interface', x: 760, y: 320, accent: true, t0: 0.34 }, ]; // Supporting (unlabeled) graph nodes that grow around the phrase const support = SUPPORT_NODES; return (
EXTRIAN · MANIFESTO_001
VOICE → MACHINE
{/* IDLE LAYER — gentle pulsing constellation visible at rest. Faint edges between nearest support pairs + breathing nodes. */} {IDLE_EDGES.map(([a, b], i) => { const na = SUPPORT_NODES[a], nb = SUPPORT_NODES[b]; // wave of brightness sweeps across edges const wave = Math.sin(idleClock * 0.8 - i * 0.45) * 0.5 + 0.5; return ( ); })} {/* Idle traveling pulses on a few edges */} {IDLE_EDGES.filter((_, i) => i % 3 === 0).map(([a, b], i) => { const na = SUPPORT_NODES[a], nb = SUPPORT_NODES[b]; const p = ((idleClock * 0.18 + i * 0.27) % 1); return ( ); })} {/* Idle support nodes — breathing */} {SUPPORT_NODES.map((n, i) => { const breath = Math.sin(idleClock * 1.1 + i * 0.6) * 0.5 + 0.5; return ( ); })} {/* Idle hint at the phrase position — faint dots where words will appear */} {[ { x: 220, y: 320 }, { x: 360, y: 280 }, { x: 460, y: 320 }, { x: 580, y: 270 }, { x: 760, y: 320 }, ].map((w, i) => { const breath = Math.sin(idleClock * 0.9 - i * 0.5) * 0.5 + 0.5; return ( ); })} {/* Support nodes appear from t=0.4 onward */} {support.map((n, i) => { const start = 0.4 + (i / support.length) * 0.5; const lit = open > start ? Math.min(1, (open - start) * 5) : 0; if (lit < 0.05) return null; return ( {n.label && ( {n.label} )} ); })} {/* Edges between phrase words and support, drawn as words appear */} {phrase.map((w, i) => { const wlit = open > w.t0 ? Math.min(1, (open - w.t0) * 6) : 0; if (wlit < 0.3) return null; // each phrase word connects to ~3 nearest support nodes const dists = support.map((n, j) => ({ j, d: Math.hypot(w.x - n.x, w.y - n.y) })).sort((a,b) => a.d - b.d); return ( {dists.slice(0, 3).map((dn, k) => { const start = 0.45 + (dn.j / support.length) * 0.5; const lit = open > start ? Math.min(1, (open - start) * 4) : 0; const a = phrase[i], b = support[dn.j]; return ( ); })} {/* edge to next word */} {i < phrase.length - 1 && open > phrase[i+1].t0 && ( )} ); })} {/* The phrase itself — words as nodes */} {phrase.map((w, i) => { const lit = open > w.t0 ? Math.min(1, (open - w.t0) * 6) : 0; if (lit < 0.05) return null; return ( {lit > 0.4 && ( )} {w.word} ); })}
{pressed ? '● MATERIALIZING' : '○ LISTENING'}
EXTRIAN · BUILDING THE LAYER BENEATH
); }; const SUPPORT_NODES = [ { x: 110, y: 110, label: 'PITCH' }, { x: 240, y: 80, label: 'PROSODY' }, { x: 420, y: 100 }, { x: 600, y: 90, label: 'STRESS' }, { x: 850, y: 130, label: 'TURN', lx: -42 }, { x: 880, y: 220 }, { x: 100, y: 260, label: 'BREATH', lx: -55 }, { x: 130, y: 420 }, { x: 280, y: 480, label: 'PAUSE' }, { x: 480, y: 510 }, { x: 660, y: 480, label: 'AFFECT' }, { x: 880, y: 460, label: 'REGISTER', lx: -78 }, { x: 920, y: 350 }, { x: 380, y: 200 }, { x: 700, y: 190 }, { x: 540, y: 180, label: 'INTENT' }, ]; // Edges between nearest support nodes — used by the idle pulsing layer const IDLE_EDGES = [ [0,1],[1,2],[2,3],[3,4],[4,5],[5,11],[11,12],[12,10],[10,9],[9,8], [8,7],[7,6],[6,0],[1,13],[13,14],[14,3],[15,13],[15,14],[15,10], [15,8],[2,13],[14,5], ]; window.HeroConstellationX = HeroConstellationX;