Source identity
| Field | Recorded value |
|---|---|
| Source type | archive member |
| Original record | ch02-atelier.html |
| Date | Not specified in source |
| Path or archive member | archives/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-256 | b36e0196fdc654a642b96a814c3785e78448519e2e8a7c520b0e039300334df3 |
| Reading-copy SHA-256 | b36e0196fdc654a642b96a814c3785e78448519e2e8a7c520b0e039300334df3 |
| 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 record | Branch or archive | Revision / identifier | Original 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-33bd498e8595 | archives/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-d0477f8dc797 | archives/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-42c7a32026b4 | archives/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-8eb4c973ed4c | archives/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>