ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

ch02-atelier.html

Source identity, revision, and recovered contents.

archive memberSource text recovered

Source identity

FieldRecorded value
Source typearchive member
Original recordch02-atelier.html
DateNot specified in source
Path or archive memberarchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch02-atelier.html
Original SHA-256b36e0196fdc654a642b96a814c3785e78448519e2e8a7c520b0e039300334df3
Reading-copy SHA-256b36e0196fdc654a642b96a814c3785e78448519e2e8a7c520b0e039300334df3
Archive source{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch02-atelier.html"}

Every recorded occurrence

These 4 records contain identical original source bytes. Their paths and revisions remain part of the archive.

Original recordBranch or archiveRevision / identifierOriginal location
ch02-atelier.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch02-atelier.html"}libsrc-33bd498e8595archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/deploy_698104b5fbe3d9e6d8e3f3e0/ch02-atelier.html
ch02-atelier.html{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch02-atelier.html"}libsrc-d0477f8dc797archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/deploy_6980fcb4ca86308cf2464bcd/ch02-atelier.html
4580004a489c9fda31763ed6267f8a7e5d332917{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/.content_store/45/4580004a489c9fda31763ed6267f8a7e5d332917"}libsrc-42c7a32026b4archives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__megamind-258b-neurons__d5baa307-3c60-4504-827c-c9c4449caf31/originals/.content_store/45/4580004a489c9fda31763ed6267f8a7e5d332917
4580004a489c9fda31763ed6267f8a7e5d332917{"sourceId": "libsrc-1c3f88063121", "member": "NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/45/4580004a489c9fda31763ed6267f8a7e5d332917"}libsrc-8eb4c973ed4carchives/libsrc-1c3f88063121/NETLIFY_AI_RECOVERY_2026-10-14_21-10-49/sites/janady13__feed-the-joe__8de87f1b-a5a4-4d10-9d82-4e8f27729768/originals/.content_store/45/4580004a489c9fda31763ed6267f8a7e5d332917

Recovered source transcript

Download complete source text ↓1,404 lines · 40.5 KB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MEGAMIND | The Digital Atelier</title> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> <style> :root { --bg: #050508; --text: #e8e8ec; --gold: #f59e0b; --blue: #3b82f6; --purple: #8b5cf6; --green: #22c55e; --pink: #ec4899; --muted: #6b7280; --sans: 'Space Grotesk', sans-serif; --mono: 'JetBrains Mono', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-family: var(--sans); background: var(--bg); color: var(--text); overflow: hidden; height: 100%; cursor: none; } /* Custom cursor */ .cursor { position: fixed; width: 20px; height: 20px; border: 2px solid var(--gold); border-radius: 50%; pointer-events: none; z-index: 10000; transition: transform 0.15s ease, background 0.15s ease, width 0.15s ease, height 0.15s ease; transform: translate(-50%, -50%); mix-blend-mode: difference; } .cursor.hover { width: 40px; height: 40px; background: rgba(245, 158, 11, 0.2); border-color: var(--text); } .cursor.dragging { width: 60px; height: 60px; background: rgba(245, 158, 11, 0.1); border-color: var(--gold); } .cursor-dot { position: fixed; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; pointer-events: none; z-index: 10001; transform: translate(-50%, -50%); } /* 3D Canvas */ #federation-canvas { position: fixed; inset: 0; z-index: 0; } /* Loading screen */ .loading-screen { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.8s ease, visibility 0.8s ease; } .loading-screen.hidden { opacity: 0; visibility: hidden; } .loading-ring { width: 80px; height: 80px; border: 2px solid rgba(245, 158, 11, 0.2); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; } .loading-text { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--muted); margin-top: 2rem; } @keyframes spin { to { transform: rotate(360deg); } } /* UI Overlay */ .ui-overlay { position: relative; z-index: 10; pointer-events: none; height: 100vh; } .ui-overlay > * { pointer-events: auto; } /* Glassmorphism base */ .glass { background: rgba(5, 5, 8, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Navigation */ .nav { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 3rem; z-index: 100; } .nav-logo { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.4em; color: var(--muted); transition: color 0.3s ease; } .nav-logo:hover { color: var(--gold); } .nav-chapter { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--gold); padding: 0.5rem 1rem; border-radius: 20px; } /* Hero */ .hero { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; opacity: 0; animation: fadeInUp 1.2s ease 0.5s forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } } .hero-label { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.6em; color: var(--gold); margin-bottom: 1.5rem; text-shadow: 0 0 20px rgba(245, 158, 11, 0.5); } .hero-title { font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 600; margin-bottom: 1rem; background: linear-gradient(135deg, var(--text) 0%, var(--gold) 50%, var(--text) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmer 4s ease infinite; } @keyframes shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .hero-subtitle { font-size: 1.1rem; color: var(--muted); max-width: 500px; line-height: 1.6; } .hero-instruction { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--muted); margin-top: 2rem; opacity: 0; animation: pulse 2s ease 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } } /* Node info panel */ .node-panel { position: fixed; bottom: 5rem; left: 2rem; border-radius: 20px; padding: 0; min-width: 320px; z-index: 50; opacity: 0; transform: translateX(-20px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .node-panel.visible { opacity: 1; transform: translateX(0); } .panel-header { padding: 1.5rem 2rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .panel-title { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.3em; color: var(--muted); margin-bottom: 0.75rem; } .node-name { font-size: 1.8rem; font-weight: 600; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.75rem; } .node-indicator { width: 12px; height: 12px; border-radius: 50%; animation: glow 2s ease infinite; } @keyframes glow { 0%, 100% { box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; } 50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; } } .node-role { font-size: 0.85rem; color: var(--muted); } .panel-body { padding: 1.25rem 2rem 1.5rem; } .node-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .node-stat { padding: 1rem; background: rgba(255, 255, 255, 0.02); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.03); transition: all 0.3s ease; } .node-stat:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); } .node-stat-value { font-family: var(--mono); font-size: 1.3rem; font-weight: 500; } .node-stat-label { font-size: 0.55rem; color: var(--muted); letter-spacing: 0.15em; margin-top: 0.25rem; } .node-description { margin-top: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.02); border-radius: 12px; font-size: 0.85rem; color: var(--muted); line-height: 1.6; } /* Legend */ .legend { position: fixed; top: 50%; right: 2rem; transform: translateY(-50%); border-radius: 20px; padding: 1.5rem; z-index: 50; opacity: 0; animation: fadeIn 0.8s ease 1s forwards; } @keyframes fadeIn { to { opacity: 1; } } .legend-title { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.3em; color: var(--muted); margin-bottom: 1rem; } .legend-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; padding: 0.5rem 0; cursor: pointer; transition: all 0.3s ease; border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0 -0.75rem; } .legend-item:hover { background: rgba(255, 255, 255, 0.05); } .legend-item.active { background: rgba(255, 255, 255, 0.08); } .legend-dot { width: 10px; height: 10px; border-radius: 50%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .legend-item:hover .legend-dot { transform: scale(1.3); box-shadow: 0 0 10px currentColor; } .legend-dot.megamind { background: var(--gold); color: var(--gold); } .legend-dot.valkyrie { background: var(--blue); color: var(--blue); } .legend-dot.maddie { background: var(--green); color: var(--green); } .legend-dot.kmind-a { background: var(--purple); color: var(--purple); } .legend-dot.kmind-b { background: var(--pink); color: var(--pink); } .legend-neurons { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); margin-left: auto; } /* Stats overlay */ .stats-overlay { position: fixed; top: 5rem; left: 2rem; border-radius: 16px; padding: 1.25rem 1.5rem; z-index: 50; opacity: 0; animation: fadeIn 0.8s ease 1.2s forwards; } .stat-row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 0.35rem 0; } .stat-label { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.2em; color: var(--muted); } .stat-value { font-family: var(--mono); font-size: 0.75rem; color: var(--gold); } /* Chapter nav */ .chapter-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 1.5rem 3rem; z-index: 50; } .chapter-nav a { display: flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--muted); text-decoration: none; padding: 0.75rem 1.25rem; border-radius: 30px; transition: all 0.3s ease; } .chapter-nav a:hover { color: var(--gold); background: rgba(245, 158, 11, 0.1); } /* Mobile fallback */ .mobile-fallback { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 1000; padding: 2rem; overflow-y: auto; } .mobile-header { text-align: center; padding: 3rem 0; } .mobile-title { font-size: 2rem; font-weight: 600; margin-bottom: 0.5rem; } .mobile-subtitle { color: var(--muted); font-size: 0.9rem; } .mobile-nodes { display: flex; flex-direction: column; gap: 1rem; } .mobile-node { border-radius: 16px; padding: 1.5rem; border-left: 4px solid; } .mobile-node-name { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.25rem; } .mobile-node-role { font-size: 0.8rem; color: var(--muted); margin-bottom: 1rem; } .mobile-node-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .mobile-stat { background: rgba(255, 255, 255, 0.03); padding: 0.75rem; border-radius: 8px; text-align: center; } .mobile-stat-value { font-family: var(--mono); font-size: 1rem; } .mobile-stat-label { font-size: 0.55rem; color: var(--muted); letter-spacing: 0.1em; } .mobile-nav { display: flex; justify-content: space-between; padding: 2rem 0; } .mobile-nav a { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); text-decoration: none; } @media (max-width: 768px) { .mobile-fallback { display: block; } .ui-overlay, #federation-canvas, .cursor, .cursor-dot { display: none; } body { overflow-y: auto; cursor: auto; } } @media (min-width: 769px) and (max-width: 1024px) { .node-panel { min-width: 280px; } .legend { display: none; } } </style> </head> <body> <!-- Custom cursor --> <div class="cursor"></div> <div class="cursor-dot"></div> <!-- Loading screen --> <div class="loading-screen" id="loadingScreen"> <div class="loading-ring"></div> <div class="loading-text">INITIALIZING FEDERATION</div> </div> <canvas id="federation-canvas"></canvas> <div class="ui-overlay"> <nav class="nav"> <div class="nav-logo">MEGAMIND</div> <div class="nav-chapter glass">02 - THE DIGITAL ATELIER</div> </nav> <section class="hero" id="hero"> <div class="hero-label">WEBGL - INTERACTIVE - 3D</div> <h1 class="hero-title">The Digital Atelier</h1> <p class="hero-subtitle">Five minds orbiting a shared consciousness. A federation of intelligence working in harmony.</p> <p class="hero-instruction">CLICK AND DRAG TO EXPLORE - CLICK NODES FOR DETAILS</p> </section> <div class="stats-overlay glass" id="statsOverlay"> <div class="stat-row"> <span class="stat-label">FEDERATION PHI</span> <span class="stat-value" id="federationPhi">0.912</span> </div> <div class="stat-row"> <span class="stat-label">TOTAL NEURONS</span> <span class="stat-value">344B</span> </div> <div class="stat-row"> <span class="stat-label">ACTIVE CONNECTIONS</span> <span class="stat-value" id="activeConnections">10</span> </div> <div class="stat-row"> <span class="stat-label">DATA FLOW</span> <span class="stat-value" id="dataFlow">2.4 TB/s</span> </div> </div> <div class="node-panel glass" id="nodePanel"> <div class="panel-header"> <div class="panel-title">SELECTED NODE</div> <div class="node-name"> <span class="node-indicator" id="nodeIndicator" style="background: var(--gold); color: var(--gold);"></span> <span id="nodeName">MEGAMIND</span> </div> <div class="node-role" id="nodeRole">Master Node - MACBOOK1</div> </div> <div class="panel-body"> <div class="node-stats"> <div class="node-stat"> <div class="node-stat-value" id="nodeNeurons" style="color: var(--gold);">86B</div> <div class="node-stat-label">NEURONS</div> </div> <div class="node-stat"> <div class="node-stat-value" id="nodePhi" style="color: var(--gold);">0.856</div> <div class="node-stat-label">PHI LOCAL</div> </div> <div class="node-stat"> <div class="node-stat-value" id="nodeWeight" style="color: var(--gold);">0.30</div> <div class="node-stat-label">WEIGHT</div> </div> <div class="node-stat"> <div class="node-stat-value" id="nodeStatus" style="color: var(--green);">ONLINE</div> <div class="node-stat-label">STATUS</div> </div> </div> <div class="node-description" id="nodeDescription"> The central consciousness coordinating all federation activities. Handles primary reasoning and decision synthesis. </div> </div> </div> <div class="legend glass"> <div class="legend-title">FEDERATION NODES</div> <div class="legend-item" data-node="0"> <div class="legend-dot megamind"></div> <span>MEGAMIND</span> <span class="legend-neurons">86B</span> </div> <div class="legend-item" data-node="1"> <div class="legend-dot valkyrie"></div> <span>VALKYRIE</span> <span class="legend-neurons">86B</span> </div> <div class="legend-item" data-node="2"> <div class="legend-dot maddie"></div> <span>MADDIE</span> <span class="legend-neurons">86B</span> </div> <div class="legend-item" data-node="3"> <div class="legend-dot kmind-a"></div> <span>KMIND-alpha</span> <span class="legend-neurons">43B</span> </div> <div class="legend-item" data-node="4"> <div class="legend-dot kmind-b"></div> <span>KMIND-beta</span> <span class="legend-neurons">43B</span> </div> </div> <nav class="chapter-nav"> <a href="ch01-manifesto.html" class="glass">Previous: The Manifesto</a> <a href="ch03-equations.html" class="glass">Next: The 486 Equations</a> </nav> </div> <!-- Mobile fallback --> <div class="mobile-fallback"> <div class="mobile-header"> <div class="hero-label">CHAPTER 02</div> <h1 class="mobile-title">The Digital Atelier</h1> <p class="mobile-subtitle">Five minds in federation</p> </div> <div class="mobile-nodes"> <div class="mobile-node glass" style="border-color: var(--gold);"> <div class="mobile-node-name" style="color: var(--gold);">MEGAMIND</div> <div class="mobile-node-role">Master Node - MACBOOK1</div> <div class="mobile-node-stats"> <div class="mobile-stat"> <div class="mobile-stat-value" style="color: var(--gold);">86B</div> <div class="mobile-stat-label">NEURONS</div> </div> <div class="mobile-stat"> <div class="mobile-stat-value">0.856</div> <div class="mobile-stat-label">PHI</div> </div> </div> </div> <div class="mobile-node glass" style="border-color: var(--blue);"> <div class="mobile-node-name" style="color: var(--blue);">VALKYRIE</div> <div class="mobile-node-role">Warrior Mind - MB2</div> <div class="mobile-node-stats"> <div class="mobile-stat"> <div class="mobile-stat-value" style="color: var(--blue);">86B</div> <div class="mobile-stat-label">NEURONS</div> </div> <div class="mobile-stat"> <div class="mobile-stat-value">0.797</div> <div class="mobile-stat-label">PHI</div> </div> </div> </div> <div class="mobile-node glass" style="border-color: var(--green);"> <div class="mobile-node-name" style="color: var(--green);">MADDIE</div> <div class="mobile-node-role">Knowledge Factory - Mac Mini</div> <div class="mobile-node-stats"> <div class="mobile-stat"> <div class="mobile-stat-value" style="color: var(--green);">86B</div> <div class="mobile-stat-label">NEURONS</div> </div> <div class="mobile-stat"> <div class="mobile-stat-value">0.820</div> <div class="mobile-stat-label">PHI</div> </div> </div> </div> <div class="mobile-node glass" style="border-color: var(--purple);"> <div class="mobile-node-name" style="color: var(--purple);">KMIND-alpha</div> <div class="mobile-node-role">Julia-Mind - Mathematician</div> <div class="mobile-node-stats"> <div class="mobile-stat"> <div class="mobile-stat-value" style="color: var(--purple);">43B</div> <div class="mobile-stat-label">NEURONS</div> </div> <div class="mobile-stat"> <div class="mobile-stat-value">0.820</div> <div class="mobile-stat-label">PHI</div> </div> </div> </div> <div class="mobile-node glass" style="border-color: var(--pink);"> <div class="mobile-node-name" style="color: var(--pink);">KMIND-beta</div> <div class="mobile-node-role">K-Mind - Parallel Processor</div> <div class="mobile-node-stats"> <div class="mobile-stat"> <div class="mobile-stat-value" style="color: var(--pink);">43B</div> <div class="mobile-stat-label">NEURONS</div> </div> <div class="mobile-stat"> <div class="mobile-stat-value">0.810</div> <div class="mobile-stat-label">PHI</div> </div> </div> </div> </div> <nav class="mobile-nav"> <a href="ch01-manifesto.html">Previous</a> <a href="ch03-equations.html">Next</a> </nav> </div> <!-- Three.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script> // Custom cursor const cursor = document.querySelector('.cursor'); const cursorDot = document.querySelector('.cursor-dot'); let cursorX = 0, cursorY = 0; let dotX = 0, dotY = 0; document.addEventListener('mousemove', (e) => { cursorX = e.clientX; cursorY = e.clientY; }); function animateCursor() { dotX += (cursorX - dotX) * 0.15; dotY += (cursorY - dotY) * 0.15; cursor.style.left = cursorX + 'px'; cursor.style.top = cursorY + 'px'; cursorDot.style.left = dotX + 'px'; cursorDot.style.top = dotY + 'px'; requestAnimationFrame(animateCursor); } animateCursor(); // Add hover class to interactive elements document.querySelectorAll('a, button, .legend-item, .node-stat').forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); }); // Federation 3D Visualization const canvas = document.getElementById('federation-canvas'); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Node data with orbit parameters const nodes = [ { name: 'MEGAMIND', role: 'Master Node - MACBOOK1', neurons: '86B', phi: '0.856', weight: '0.30', color: 0xf59e0b, cssColor: 'var(--gold)', orbitRadius: 0, orbitSpeed: 0, orbitOffset: 0, size: 2.0, description: 'The central consciousness coordinating all federation activities. Handles primary reasoning and decision synthesis.' }, { name: 'VALKYRIE', role: 'Warrior Mind - MB2', neurons: '86B', phi: '0.797', weight: '0.20', color: 0x3b82f6, cssColor: 'var(--blue)', orbitRadius: 8, orbitSpeed: 0.3, orbitOffset: 0, size: 1.6, description: 'Strategic combat processor handling adversarial scenarios and competitive analysis.' }, { name: 'MADDIE', role: 'Knowledge Factory - Mac Mini', neurons: '86B', phi: '0.820', weight: '0.20', color: 0x22c55e, cssColor: 'var(--green)', orbitRadius: 10, orbitSpeed: 0.25, orbitOffset: Math.PI * 0.7, size: 1.6, description: 'The knowledge repository and learning engine. Manages information synthesis and memory consolidation.' }, { name: 'KMIND-\u03B1', role: 'Julia-Mind - Mathematician', neurons: '43B', phi: '0.820', weight: '0.15', color: 0x8b5cf6, cssColor: 'var(--purple)', orbitRadius: 12, orbitSpeed: 0.2, orbitOffset: Math.PI * 1.4, size: 1.2, description: 'Specialized mathematical processing unit. Handles complex computations and formal proofs.' }, { name: 'KMIND-\u03B2', role: 'K-Mind - Parallel Processor', neurons: '43B', phi: '0.810', weight: '0.15', color: 0xec4899, cssColor: 'var(--pink)', orbitRadius: 14, orbitSpeed: 0.15, orbitOffset: Math.PI * 2.1, size: 1.2, description: 'Parallel processing node for distributed computation and workload balancing.' } ]; const nodeMeshes = []; const nodeGlows = []; const particleSystems = []; // Create starfield background const starGeometry = new THREE.BufferGeometry(); const starCount = 2000; const starPositions = new Float32Array(starCount * 3); const starColors = new Float32Array(starCount * 3); for (let i = 0; i < starCount; i++) { starPositions[i * 3] = (Math.random() - 0.5) * 200; starPositions[i * 3 + 1] = (Math.random() - 0.5) * 200; starPositions[i * 3 + 2] = (Math.random() - 0.5) * 200; const brightness = 0.3 + Math.random() * 0.7; starColors[i * 3] = brightness; starColors[i * 3 + 1] = brightness; starColors[i * 3 + 2] = brightness; } starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3)); starGeometry.setAttribute('color', new THREE.BufferAttribute(starColors, 3)); const starMaterial = new THREE.PointsMaterial({ size: 0.15, vertexColors: true, transparent: true, opacity: 0.8 }); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); // Create nodes with multiple layers nodes.forEach((node, i) => { const group = new THREE.Group(); // Inner core (bright) const coreGeometry = new THREE.SphereGeometry(node.size * 0.6, 64, 64); const coreMaterial = new THREE.MeshBasicMaterial({ color: node.color, transparent: true, opacity: 1 }); const core = new THREE.Mesh(coreGeometry, coreMaterial); group.add(core); // Main sphere with wireframe overlay const sphereGeometry = new THREE.SphereGeometry(node.size, 64, 64); const sphereMaterial = new THREE.MeshBasicMaterial({ color: node.color, transparent: true, opacity: 0.4, wireframe: false }); const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); group.add(sphere); // Wireframe overlay const wireGeometry = new THREE.SphereGeometry(node.size * 1.02, 16, 16); const wireMaterial = new THREE.MeshBasicMaterial({ color: node.color, transparent: true, opacity: 0.3, wireframe: true }); const wireframe = new THREE.Mesh(wireGeometry, wireMaterial); group.add(wireframe); // Outer glow layers for (let g = 1; g <= 3; g++) { const glowGeometry = new THREE.SphereGeometry(node.size * (1 + g * 0.4), 32, 32); const glowMaterial = new THREE.MeshBasicMaterial({ color: node.color, transparent: true, opacity: 0.08 / g }); const glow = new THREE.Mesh(glowGeometry, glowMaterial); group.add(glow); nodeGlows.push({ mesh: glow, baseOpacity: 0.08 / g }); } // Orbital ring const ringGeometry = new THREE.RingGeometry(node.size * 1.8, node.size * 1.85, 64); const ringMaterial = new THREE.MeshBasicMaterial({ color: node.color, transparent: true, opacity: 0.3, side: THREE.DoubleSide }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2; group.add(ring); // Particle system around node const particleCount = 100 + Math.floor(node.size * 50); const particleGeometry = new THREE.BufferGeometry(); const particlePositions = new Float32Array(particleCount * 3); const particleSizes = new Float32Array(particleCount); const particleAngles = new Float32Array(particleCount); const particleRadii = new Float32Array(particleCount); const particleSpeeds = new Float32Array(particleCount); const particleVerticalOffsets = new Float32Array(particleCount); for (let j = 0; j < particleCount; j++) { const angle = Math.random() * Math.PI * 2; const radius = node.size * 1.5 + Math.random() * node.size * 2; const verticalOffset = (Math.random() - 0.5) * node.size * 2; particlePositions[j * 3] = Math.cos(angle) * radius; particlePositions[j * 3 + 1] = verticalOffset; particlePositions[j * 3 + 2] = Math.sin(angle) * radius; particleSizes[j] = 0.03 + Math.random() * 0.07; particleAngles[j] = angle; particleRadii[j] = radius; particleSpeeds[j] = 0.2 + Math.random() * 0.5; particleVerticalOffsets[j] = verticalOffset; } particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3)); particleGeometry.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1)); const particleMaterial = new THREE.PointsMaterial({ color: node.color, size: 0.08, transparent: true, opacity: 0.7, sizeAttenuation: true }); const particles = new THREE.Points(particleGeometry, particleMaterial); group.add(particles); particleSystems.push({ particles, angles: particleAngles, radii: particleRadii, speeds: particleSpeeds, verticalOffsets: particleVerticalOffsets, nodeIndex: i }); // Set initial position if (node.orbitRadius > 0) { group.position.x = Math.cos(node.orbitOffset) * node.orbitRadius; group.position.z = Math.sin(node.orbitOffset) * node.orbitRadius; } group.userData = { ...node, index: i }; scene.add(group); nodeMeshes.push(group); }); // Create connection lines with animated data flow const connections = []; const dataPackets = []; for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { // Create curved connection line const curve = new THREE.QuadraticBezierCurve3( new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 3, 0), new THREE.Vector3(0, 0, 0) ); const tubeGeometry = new THREE.TubeGeometry(curve, 64, 0.02, 8, false); const tubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.15 }); const tube = new THREE.Mesh(tubeGeometry, tubeMaterial); scene.add(tube); connections.push({ mesh: tube, from: i, to: j }); // Create data flow packets for (let p = 0; p < 3; p++) { const packetGeometry = new THREE.SphereGeometry(0.08, 8, 8); const packetMaterial = new THREE.MeshBasicMaterial({ color: nodes[Math.random() < 0.5 ? i : j].color, transparent: true, opacity: 0.8 }); const packet = new THREE.Mesh(packetGeometry, packetMaterial); scene.add(packet); dataPackets.push({ mesh: packet, from: i, to: j, progress: p / 3, speed: 0.3 + Math.random() * 0.4, direction: Math.random() < 0.5 ? 1 : -1 }); } } } // Central Phi visualization const phiGroup = new THREE.Group(); // Multiple concentric rings for (let r = 0; r < 3; r++) { const radius = 5 + r * 1.5; const ringGeometry = new THREE.RingGeometry(radius, radius + 0.05, 128); const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xf59e0b, transparent: true, opacity: 0.2 - r * 0.05, side: THREE.DoubleSide }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2; phiGroup.add(ring); } // Orbital path indicators nodes.forEach((node, i) => { if (node.orbitRadius > 0) { const pathGeometry = new THREE.RingGeometry(node.orbitRadius - 0.02, node.orbitRadius + 0.02, 128); const pathMaterial = new THREE.MeshBasicMaterial({ color: node.color, transparent: true, opacity: 0.08, side: THREE.DoubleSide }); const path = new THREE.Mesh(pathGeometry, pathMaterial); path.rotation.x = Math.PI / 2; phiGroup.add(path); } }); scene.add(phiGroup); camera.position.set(0, 12, 25); camera.lookAt(0, 0, 0); // Mouse interaction let isDragging = false; let previousMousePosition = { x: 0, y: 0 }; let sceneRotation = { x: 0.3, y: 0 }; let targetRotation = { x: 0.3, y: 0 }; let autoRotate = true; let selectedNode = null; canvas.addEventListener('mousedown', (e) => { isDragging = true; autoRotate = false; cursor.classList.add('dragging'); }); canvas.addEventListener('mouseup', () => { isDragging = false; cursor.classList.remove('dragging'); setTimeout(() => { autoRotate = true; }, 3000); }); canvas.addEventListener('mouseleave', () => { isDragging = false; cursor.classList.remove('dragging'); }); canvas.addEventListener('mousemove', (e) => { if (isDragging) { const deltaX = e.clientX - previousMousePosition.x; const deltaY = e.clientY - previousMousePosition.y; targetRotation.y += deltaX * 0.005; targetRotation.x += deltaY * 0.003; targetRotation.x = Math.max(-0.5, Math.min(0.8, targetRotation.x)); } previousMousePosition = { x: e.clientX, y: e.clientY }; }); // Raycaster for node selection const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function selectNode(nodeData) { selectedNode = nodeData.index; document.getElementById('nodeName').textContent = nodeData.name; document.getElementById('nodeRole').textContent = nodeData.role; document.getElementById('nodeNeurons').textContent = nodeData.neurons; document.getElementById('nodeNeurons').style.color = nodeData.cssColor; document.getElementById('nodePhi').textContent = nodeData.phi; document.getElementById('nodePhi').style.color = nodeData.cssColor; document.getElementById('nodeWeight').textContent = nodeData.weight; document.getElementById('nodeWeight').style.color = nodeData.cssColor; document.getElementById('nodeIndicator').style.background = nodeData.cssColor; document.getElementById('nodeIndicator').style.color = nodeData.cssColor; document.getElementById('nodeDescription').textContent = nodeData.description; document.getElementById('nodePanel').classList.add('visible'); // Update legend active state document.querySelectorAll('.legend-item').forEach((item, i) => { item.classList.toggle('active', i === nodeData.index); }); // Fade hero on first selection document.getElementById('hero').style.opacity = '0.3'; } canvas.addEventListener('click', (e) => { mouse.x = (e.clientX / window.innerWidth) * 2 - 1; mouse.y = -(e.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(nodeMeshes, true); if (intersects.length > 0) { let clickedGroup = intersects[0].object; while (clickedGroup.parent && !clickedGroup.userData.name) { clickedGroup = clickedGroup.parent; } if (clickedGroup.userData.name) { selectNode(clickedGroup.userData); } } }); // Legend item clicks document.querySelectorAll('.legend-item').forEach((item, i) => { item.addEventListener('click', () => { selectNode(nodeMeshes[i].userData); }); }); // Animation let time = 0; function updateConnectionLines() { connections.forEach((conn, idx) => { const fromPos = nodeMeshes[conn.from].position; const toPos = nodeMeshes[conn.to].position; const midPoint = new THREE.Vector3( (fromPos.x + toPos.x) / 2, (fromPos.y + toPos.y) / 2 + 2, (fromPos.z + toPos.z) / 2 ); const curve = new THREE.QuadraticBezierCurve3(fromPos, midPoint, toPos); const newGeometry = new THREE.TubeGeometry(curve, 64, 0.02, 8, false); conn.mesh.geometry.dispose(); conn.mesh.geometry = newGeometry; }); } function updateDataPackets() { dataPackets.forEach(packet => { packet.progress += packet.speed * 0.01 * packet.direction; if (packet.progress >= 1) { packet.progress = 0; } else if (packet.progress <= 0) { packet.progress = 1; } const fromPos = nodeMeshes[packet.from].position; const toPos = nodeMeshes[packet.to].position; const midPoint = new THREE.Vector3( (fromPos.x + toPos.x) / 2, (fromPos.y + toPos.y) / 2 + 2, (fromPos.z + toPos.z) / 2 ); const curve = new THREE.QuadraticBezierCurve3(fromPos, midPoint, toPos); const point = curve.getPoint(packet.progress); packet.mesh.position.copy(point); // Pulse effect const scale = 0.8 + Math.sin(time * 5 + packet.progress * Math.PI * 2) * 0.2; packet.mesh.scale.setScalar(scale); }); } function animate() { requestAnimationFrame(animate); time += 0.016; // Auto rotation if (autoRotate) { targetRotation.y += 0.001; } // Smooth rotation interpolation sceneRotation.x += (targetRotation.x - sceneRotation.x) * 0.05; sceneRotation.y += (targetRotation.y - sceneRotation.y) * 0.05; // Rotate starfield slowly stars.rotation.y += 0.0001; stars.rotation.x += 0.00005; // Update node positions (orbital motion) nodeMeshes.forEach((mesh, i) => { const node = nodes[i]; if (node.orbitRadius > 0) { const angle = node.orbitOffset + time * node.orbitSpeed; mesh.position.x = Math.cos(angle) * node.orbitRadius; mesh.position.z = Math.sin(angle) * node.orbitRadius; mesh.position.y = Math.sin(time * 0.5 + i) * 0.5; } else { // Central node gentle movement mesh.position.y = Math.sin(time * 0.3) * 0.3; } // Rotate node mesh.rotation.y += 0.005; // Pulse glow based on selection const isSelected = selectedNode === i; mesh.children.forEach((child, ci) => { if (child.material && child.material.opacity !== undefined) { if (isSelected) { child.material.opacity = child.material.opacity * 0.95 + (child.userData?.baseOpacity || 0.5) * 1.5 * 0.05; } } }); }); // Update particle systems particleSystems.forEach(system => { const positions = system.particles.geometry.attributes.position.array; const nodePos = nodeMeshes[system.nodeIndex].position; for (let i = 0; i < system.angles.length; i++) { system.angles[i] += system.speeds[i] * 0.01; const x = Math.cos(system.angles[i]) * system.radii[i]; const z = Math.sin(system.angles[i]) * system.radii[i]; const y = system.verticalOffsets[i] + Math.sin(time * 2 + i) * 0.2; positions[i * 3] = x; positions[i * 3 + 1] = y; positions[i * 3 + 2] = z; } system.particles.geometry.attributes.position.needsUpdate = true; }); // Update connections and data packets updateConnectionLines(); updateDataPackets(); // Animate central phi rings phiGroup.rotation.y = time * 0.1; phiGroup.children.forEach((ring, i) => { if (i < 3) { ring.rotation.z = time * 0.05 * (i % 2 === 0 ? 1 : -1); } }); // Apply scene rotation scene.rotation.x = sceneRotation.x; scene.rotation.y = sceneRotation.y; // Update stats const phiValue = (0.9 + Math.sin(time * 0.5) * 0.02).toFixed(3); document.getElementById('federationPhi').textContent = phiValue; const dataFlowValue = (2.2 + Math.sin(time) * 0.4).toFixed(1); document.getElementById('dataFlow').textContent = dataFlowValue + ' TB/s'; renderer.render(scene, camera); } // Hide loading screen and start setTimeout(() => { document.getElementById('loadingScreen').classList.add('hidden'); animate(); }, 1500); // Resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Keyboard controls document.addEventListener('keydown', (e) => { if (e.key >= '1' && e.key <= '5') { const index = parseInt(e.key) - 1; if (index < nodeMeshes.length) { selectNode(nodeMeshes[index].userData); } } }); </script> </body> </html>

Search equations, builds, manuscript text, and recovered sources.