Upload 32 files

.gitattributes

@@ -33,3 +33,12 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/songs/AntlerKing2.mp3 filter=lfs diff=lfs merge=lfs -text
+public/songs/Are_You_One_Of_Us.mp3 filter=lfs diff=lfs merge=lfs -text
+public/songs/Barren_Sky.mp3 filter=lfs diff=lfs merge=lfs -text
+public/songs/Burn_For_You.mp3 filter=lfs diff=lfs merge=lfs -text
+public/songs/Home.mp3 filter=lfs diff=lfs merge=lfs -text
+public/songs/Maybe.mp3 filter=lfs diff=lfs merge=lfs -text
+public/songs/Mountain.mp3 filter=lfs diff=lfs merge=lfs -text
+public/songs/Senua.mp3 filter=lfs diff=lfs merge=lfs -text
+public/songs/Unraveled.mp3 filter=lfs diff=lfs merge=lfs -text

config.json

@@ -0,0 +1,492 @@
+{
+  "visualization": {
+    "general": {
+      "maxSpheres": 5,
+      "defaultActiveSpheres": 5,
+      "performanceMode": false,
+      "debugLogging": false,
+      "debugLogFrequency": 0.01
+    },
+    "particles": {
+      "defaultParticleCount": 6000,
+      "minParticleCount": 2000,
+      "maxParticleCount": 8000,
+      "particleSize": 0.9,
+      "particleLifetime": 12.0,
+      "particleSizeVariation": 0.15,
+      "particleOpacity": 0.8,
+      "organicGlow": 0.7,
+      "naturalScattering": 0.25
+    },
+    "spheres": {
+      "baseRadius": 1.0,
+      "radiusIncrement": 0.08,
+      "innerSphereRadius": 0.7,
+      "maxSphereRadius": 2.0,
+      "containmentPullback": 0.12,
+      "overflowDamping": 0.92
+    },
+    "physics": {
+      "turbulenceStrength": 0.004,
+      "noiseScale": 2.0,
+      "noiseScaleVariation": 0.25,
+      "noiseSpeed": 0.25,
+      "defaultDamping": 0.97,
+      "velocityDecay": 0.98,
+      "beatForceMultiplier": 0.0006,
+      "maxVelocity": 0.06,
+      "stabilityThreshold": 6.0,
+      "emergencyDamping": 0.2,
+      "organicFlowFactor": 0.9,
+      "naturalBreathing": 0.35
+    },
+    "rotation": {
+      "rotationSpeedMin": 0.001,
+      "rotationSpeedMax": 0.05,
+      "rotationSpeedIncrement": 0.006,
+      "rotationSmoothness": 0.12,
+      "autoRotateSpeed": 0.4
+    }
+  },
+  "audio": {
+    "frequencyRanges": [
+      {
+        "name": "sub-bass",
+        "minFrequency": 20,
+        "maxFrequency": 80,
+        "beatThreshold": 0.6,
+        "volumeChangeThreshold": 0.05
+      },
+      {
+        "name": "bass",
+        "minFrequency": 120,
+        "maxFrequency": 250,
+        "beatThreshold": 0.65,
+        "volumeChangeThreshold": 0.08
+      },
+      {
+        "name": "mid",
+        "minFrequency": 250,
+        "maxFrequency": 800,
+        "beatThreshold": 0.7,
+        "volumeChangeThreshold": 0.1
+      },
+      {
+        "name": "high-mid",
+        "minFrequency": 1000,
+        "maxFrequency": 4000,
+        "beatThreshold": 0.75,
+        "volumeChangeThreshold": 0.12
+      },
+      {
+        "name": "high",
+        "minFrequency": 5000,
+        "maxFrequency": 10000,
+        "beatThreshold": 0.8,
+        "volumeChangeThreshold": 0.15
+      }
+    ],
+    "beatDetection": {
+      "energyHistoryLength": 25,
+      "minTimeBetweenPeaks": 180,
+      "beatStrength": 0.018,
+      "waveDecayRate": 0.98,
+      "peakThresholdMultiplier": 1.25
+    },
+    "volumeSmoothing": {
+      "enabled": true,
+      "smoothingFactor": 0.12,
+      "changeThresholdDefault": 0.08
+    }
+  },
+  "entronaut": {
+    "enabled": true,
+    "sefaAnalysis": {
+      "fieldSize": 256,
+      "fieldWidth": 16,
+      "fieldHeight": 16,
+      "updateFrequency": 5,
+      "temporalSmoothing": 0.92,
+      "intensitySmoothing": 0.08
+    },
+    "weights": {
+      "alpha_amplitude": 1.0,
+      "alpha_phase": 0.7,
+      "alpha_entropy": 1.2,
+      "alpha_curvature": 0.8,
+      "alpha_spectral": 0.9
+    },
+    "adaptiveCoupling": {
+      "enabled": true,
+      "updateFrequency": 6,
+      "dampingBase": 0.92,
+      "dampingVariation": 0.25,
+      "diffusionBase": 0.008,
+      "diffusionVariation": 0.5,
+      "couplingBase": 0.015,
+      "couplingVariation": 0.03,
+      "flockingRadius": 0.2,
+      "flockingInfluence": 0.15,
+      "metabolicPulseStrength": 0.4,
+      "neighborCheckStep": 8,
+      "neighborRange": 15
+    },
+    "biomimeticBehavior": {
+      "collectiveMemory": 0.85,
+      "emergenceThreshold": 0.4,
+      "coherenceWeight": 0.8,
+      "complexityWeight": 0.8,
+      "networkInfluence": 0.15,
+      "syncPulseStrength": 0.15
+    }
+  },
+  "tendrils": {
+    "enabled": true,
+    "maxTendrils": 6000,
+    "defaultDensity": 0.25,
+    "maxTendrilLength": 0.7,
+    "tendrilSegments": 6,
+    "updateInterval": 120,
+    "sampleParticlesPerSphere": 8,
+    "particleSampleStep": 1200,
+    "curvature": {
+      "midPointMultiplier": 0.18,
+      "undulationStrength": 0.04,
+      "timeFactorBase": 0.0008,
+      "timeFactorCurve": 0.0012,
+      "spatialFrequency": 8
+    },
+    "visual": {
+      "baseOpacity": 0.25,
+      "glowIntensity": 0.8,
+      "colorIntensityBase": 0.25,
+      "colorIntensityVariation": 0.6,
+      "blendingMode": "additive"
+    }
+  },
+  "cymatics": {
+    "enabled": false,
+    "intensity": 0.0015,
+    "patterns": {
+      "radialWaves": {
+        "frequencyFactor": 0.08,
+        "petalCount": 5,
+        "amplitudeZ": 0.4
+      },
+      "sphericalHarmonics": {
+        "lMultiplier": 0.4,
+        "mMultiplier": 0.25,
+        "timeMultiplier": 1.5
+      },
+      "geometricLattice": {
+        "frequencyFactor": 0.15
+      },
+      "flowerOfLife": {
+        "frequencyFactor": 0.12,
+        "basePetals": 5,
+        "petalVariation": 0.08,
+        "amplitudeZ": 0.25
+      }
+    },
+    "breathing": {
+      "enabled": true,
+      "speed": 0.4,
+      "intensityBase": 0.25,
+      "intensityVariation": 0.6
+    }
+  },
+  "dysonSphere": {
+    "enabled": false,
+    "vines": {
+      "maxVines": 18,
+      "maxSegmentsPerVine": 24,
+      "sphereRadius": 2.6,
+      "growthSpeed": 0.015,
+      "vineThickness": 0.006,
+      "branchingProbability": 0.12,
+      "maxBranches": 2,
+      "curvature": 0.25,
+      "audioReactivity": 1.0,
+      "organicVariation": 0.35
+    },
+    "nodes": {
+      "nodeCount": 36,
+      "nodeSize": 0.018,
+      "pulseIntensity": 1.2,
+      "connectionThreshold": 0.7,
+      "energyFlow": 0.5
+    },
+    "growth": {
+      "seedPoints": 6,
+      "growthCycles": 50,
+      "maturityTime": 40.0,
+      "renewalRate": 0.06,
+      "emergenceThreshold": 0.25
+    },
+    "visual": {
+      "bloomIntensity": 1.5,
+      "wireframeOpacity": 0.5,
+      "nodeGlow": 1.8,
+      "vineGlow": 1.2,
+      "pulsationSpeed": 0.7
+    }
+  },
+  "colors": {
+    "sphereColorSchemes": [
+      {
+        "name": "sub-bass",
+        "start": "#2d5016",
+        "end": "#7d4f39"
+      },
+      {
+        "name": "bass",
+        "start": "#8b5a2b",
+        "end": "#4a6741"
+      },
+      {
+        "name": "mid",
+        "start": "#cd853f",
+        "end": "#556b2f"
+      },
+      {
+        "name": "high-mid",
+        "start": "#daa520",
+        "end": "#2e8b57"
+      },
+      {
+        "name": "high",
+        "start": "#b8860b",
+        "end": "#20b2aa"
+      }
+    ],
+    "organicPalette": {
+      "deepForest": "#2d5016",
+      "ancientBronze": "#cd7f32",
+      "copperGlow": "#b87333",
+      "goldLeaf": "#daa520",
+      "earthBrown": "#8b4513",
+      "stoneBark": "#696969",
+      "mossGreen": "#556b2f",
+      "tealDepth": "#20b2aa",
+      "amberWarm": "#ffbf00",
+      "ironOxide": "#7d4f39",
+      "forestShadow": "#1e3a0f",
+      "vineGreen": "#4a6741",
+      "copperPatina": "#87ceeb",
+      "burnishedGold": "#b8860b",
+      "darkTeal": "#2f4f4f"
+    },
+    "dysonVines": {
+      "primaryVine": "#4a6741",
+      "secondaryVine": "#556b2f",
+      "vineHighlight": "#7d8471",
+      "nodeColor": "#cd7f32",
+      "connectionColor": "#b87333",
+      "growthTip": "#daa520",
+      "anchorPoints": "#2d5016"
+    },
+    "tendrilColors": {
+      "baseColor": [0.4, 0.3, 0.2],
+      "frequencyColorMap": {
+        "lowFreq": [0.8, 0.5, 0.3],
+        "midFreq": [0.6, 0.7, 0.3],
+        "highFreq": [0.3, 0.6, 0.6]
+      },
+      "organicBlend": {
+        "forest": [0.18, 0.31, 0.09],
+        "bronze": [0.80, 0.50, 0.20],
+        "copper": [0.72, 0.45, 0.20],
+        "gold": [0.85, 0.65, 0.13],
+        "teal": [0.13, 0.70, 0.67]
+      }
+    }
+  },
+  "camera": {
+    "defaultPosition": [0, 0, 2.5],
+    "fov": 75,
+    "near": 0.1,
+    "far": 1000,
+    "controls": {
+      "enableDamping": true,
+      "dampingFactor": 0.05,
+      "maxDistance": 50,
+      "minDistance": 0.1,
+      "maxPolarAngle": 3.14159,
+      "autoRotateSpeed": 0.4
+    },
+    "presets": {
+      "default": [0, 0, 2.5],
+      "inside": [0, 0, 0.5],
+      "far": [0, 0, 8],
+      "top": [0, 5, 0],
+      "side": [5, 0, 0]
+    }
+  },
+  "fog": {
+    "enabled": false,
+    "color": "#000000",
+    "near": 2.7,
+    "far": 3.7,
+    "density": 0.1
+  },
+  "rendering": {
+    "antialias": true,
+    "background": "#0F1B13",
+    "particleBlending": "additive",
+    "targetFPS": 60,
+    "adaptiveQuality": {
+      "enabled": true,
+      "minFPS": 35,
+      "qualityReductionStep": 0.08,
+      "qualityRecoveryDelay": 1500
+    },
+    "organicRendering": {
+      "warmthFactor": 1.1,
+      "naturalContrast": 0.9,
+      "earthyTones": true
+    }
+  },
+  "ui": {
+    "controls": {
+      "defaultCollapsed": true,
+      "position": "bottom-right",
+      "maxWidth": "280px",
+      "maxHeight": "70vh",
+      "opacity": 0.85
+    },
+    "about": {
+      "defaultCollapsed": true,
+      "position": "bottom-center",
+      "width": "350px"
+    },
+    "animation": {
+      "transitionDuration": "0.3s",
+      "hoverScale": 1.1,
+      "backdropBlur": "10px"
+    }
+  },
+  "performance": {
+    "adaptiveSettings": {
+      "enabled": true,
+      "thresholds": {
+        "particleReduction": 40,
+        "tendrilReduction": 35,
+        "sefaDisable": 30,
+        "couplingDisable": 25
+      }
+    },
+    "optimizations": {
+      "particleUpdateStep": 1,
+      "tendrilUpdateStep": 8,
+      "sefaUpdateStep": 15,
+      "couplingUpdateStep": 10,
+      "neighborCheckReduction": 10,
+      "maxCacheSize": 30,
+      "cacheLifetime": 400,
+      "bufferPoolSize": 3,
+      "adaptiveFrameSkipping": false,
+      "lodEnabled": false,
+      "memoryCleanupInterval": 8000
+    },
+    "huggingFaceOptimized": {
+      "enabled": true,
+      "maxParticlesPerSphere": 5000,
+      "minParticlesPerSphere": 2000,
+      "reducedComplexityMode": true,
+      "aggressiveCaching": false,
+      "cpuOptimized": true
+    }
+  },
+  "presets": {
+    "performance": {
+      "visualization": {
+        "particles": {
+          "defaultParticleCount": 4000
+        },
+        "physics": {
+          "turbulenceStrength": 0.003,
+          "maxVelocity": 0.04,
+          "stabilityThreshold": 4.0
+        }
+      },
+      "entronaut": {
+        "enabled": false
+      },
+      "tendrils": {
+        "enabled": false
+      },
+      "cymatics": {
+        "enabled": false
+      }
+    },
+    "extreme": {
+      "visualization": {
+        "general": {
+          "performanceMode": true
+        },
+        "particles": {
+          "defaultParticleCount": 80000
+        },
+        "physics": {
+          "turbulenceStrength": 0.001,
+          "maxVelocity": 0.02,
+          "stabilityThreshold": 2.0,
+          "emergencyDamping": 0.02
+        }
+      },
+      "entronaut": {
+        "enabled": false
+      },
+      "tendrils": {
+        "enabled": false,
+        "maxTendrils": 300
+      },
+      "cymatics": {
+        "enabled": false
+      },
+      "performance": {
+        "adaptiveSettings": {
+          "enabled": true,
+          "thresholds": {
+            "particleReduction": 40,
+            "tendrilReduction": 35,
+            "sefaDisable": 30,
+            "couplingDisable": 25
+          }
+        }
+      }
+    },
+    "quality": {
+      "particles": {
+        "defaultParticleCount": 20000,
+        "turbulenceStrength": 0.008
+      },
+      "entronaut": {
+        "enabled": true,
+        "sefaAnalysis": {
+          "fieldSize": 1024
+        }
+      },
+      "tendrils": {
+        "maxTendrils": 2000,
+        "tendrilSegments": 10
+      }
+    },
+    "minimal": {
+      "visualization": {
+        "general": {
+          "defaultActiveSpheres": 2
+        }
+      },
+      "particles": {
+        "defaultParticleCount": 2500
+      },
+      "entronaut": {
+        "enabled": false
+      },
+      "tendrils": {
+        "enabled": false
+      }
+    }
+  }
+} 

index.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liminal Sessions - Interdimensional Transmission</title>
+    <meta name="description" content="Intercepted transmission from distant coordinates - biomimetic audio-visual emergence fields from the Liminal Sessions entity.">
+    
+    <!-- Preconnect to Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    
+    <!-- Ancient Transmission Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Uncial+Antiqua&family=Metamorphous&display=swap" rel="stylesheet">
+    
+    <!-- Favicon and Meta -->
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="theme-color" content="#FFD700">
+    
+    <!-- OpenGraph / Social Media Meta -->
+    <meta property="og:title" content="Liminal Sessions - Interdimensional Transmission">
+    <meta property="og:description" content="Intercepted biomimetic audio-visual emergence fields from distant coordinates">
+    <meta property="og:type" content="website">
+    <meta property="og:image" content="/og-image.png">
+    
+    <!-- Twitter Meta -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Liminal Sessions">
+    <meta name="twitter:description" content="◦ Interdimensional transmission interface ◦">
+    
+    <style>
+        /* Critical CSS for loading */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        html, body {
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
+            font-family: 'Cinzel', 'Times New Roman', serif;
+            background: #0F1B13;
+            color: #A67B5B;
+        }
+
+        #root {
+            height: 100vh;
+            width: 100vw;
+            position: relative;
+        }
+
+        /* Loading screen */
+        .loading-screen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #0F1B13;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 9999;
+            transition: opacity 0.5s ease;
+        }
+
+        .loading-text {
+            font-family: 'Metamorphous', serif;
+            font-size: 20px;
+            color: #A67B5B;
+            text-align: center;
+            animation: organicPulse 3s ease-in-out infinite;
+        }
+
+        @keyframes organicPulse {
+            0%, 100% { 
+                opacity: 0.8;
+                transform: scale(1) rotate(0deg);
+            }
+            25% { 
+                opacity: 0.9;
+                transform: scale(1.01) rotate(0.2deg);
+            }
+            50% { 
+                opacity: 1;
+                transform: scale(1.02) rotate(0deg);
+            }
+            75% { 
+                opacity: 0.85;
+                transform: scale(1.01) rotate(-0.2deg);
+            }
+        }
+
+        .loading-screen.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="root">
+        <!-- Loading Screen -->
+        <div class="loading-screen" id="loading">
+            <div class="loading-text">
+                ⟐ awakening the nexus ⟐<br/>
+                <span style="font-size: 0.7em; opacity: 0.8; font-family: 'Uncial Antiqua', serif;">
+                ◦ growing organic pathways ◦
+                </span>
+            </div>
+        </div>
+    </div>
+    
+    <script>
+        // Hide loading screen once React app is ready
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                const loading = document.getElementById('loading');
+                if (loading) {
+                    loading.classList.add('hidden');
+                    setTimeout(() => loading.remove(), 600);
+                }
+            }, 1200);
+        });
+    </script>
+    
+    <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

main.js

@@ -0,0 +1,1531 @@
+import * as THREE from 'https://unpkg.com/three@0.136.0/build/three.module.js';
+import { AudioLoader, AudioListener, Audio, AudioAnalyser } from 'https://unpkg.com/three@0.136.0/build/three.module.js';
+import * as dat from 'https://cdn.jsdelivr.net/npm/dat.gui/build/dat.gui.module.js';
+
+console.log('Script started');
+
+// Cleanup function
+function cleanupPreviousElements() {
+    const elementsToRemove = [
+        '#songSelect', '#playPause', '#volume', 
+        'button', 'select', '.dg.main', 'canvas', '.controls-container',
+        '#volumeControl', '#audioControls', '.audio-control'
+    ];
+    
+    elementsToRemove.forEach(selector => {
+        document.querySelectorAll(selector).forEach(element => {
+            if (selector !== '#presetContainer') {
+                element.remove();
+            }
+        });
+    });
+    
+    document.querySelectorAll('div').forEach(div => {
+        if ((div.id?.includes('control') || 
+            div.className?.includes('control') ||
+            div.id?.includes('audio') ||
+            div.className?.includes('audio')) && 
+            div.id !== 'presetContainer') {
+            div.remove();
+        }
+    });
+}
+
+cleanupPreviousElements();
+console.log('Cleanup completed');
+
+// Fixed position GUI and presets
+const guiAndPresetsStyleFix = document.createElement('style');
+guiAndPresetsStyleFix.textContent = `
+    /* Fixed position GUI spheres */
+    .dg.main {
+        position: absolute !important;
+        top: 10px !important;
+        right: 10px !important;
+        z-index: 1000 !important;
+    }
+
+    #presetContainer {
+        position: fixed !important;
+        top: 10px !important; 
+        left: 10px !important;
+        z-index: 1000 !important; 
+        display: flex !important; 
+        gap: 10px !important; 
+    }
+
+    #presetContainer input[type="text"] {
+        flex: 1 1 auto;
+        min-width: 150px;
+        padding: 5px;
+        border-radius: 3px;
+    }
+
+    #presetContainer select, 
+    #presetContainer button {
+        flex: 0 0 auto;
+        padding: 5px;
+        border-radius: 3px;
+    }
+`;
+document.head.appendChild(guiAndPresetsStyleFix);
+
+// Scene setup
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x000000);
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = 2.5;
+
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+
+console.log('Scene and renderer initialized');
+
+// Audio setup
+let audioContext;
+let analyser;
+let audioElement;
+let sourceNode = null;
+let micStream;
+let micSource = null;
+
+// Audio Controls Container
+const controls = document.createElement('div');
+controls.style.cssText = 'position: absolute; top: 10px; right: 310px; z-index: 1000; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px;';
+document.body.appendChild(controls);
+
+const audioControls = document.createElement('div');
+audioControls.style.cssText = 'display: flex; align-items: center; gap: 10px;';
+controls.appendChild(audioControls);
+
+const songSelect = document.createElement('select');
+songSelect.style.cssText = 'padding: 5px; border-radius: 3px; background: #333; color: white; border: 1px solid #666;';
+audioControls.appendChild(songSelect);
+
+const playPause = document.createElement('button');
+playPause.textContent = 'Play';
+playPause.style.cssText = 'padding: 5px 15px; border-radius: 3px; background: #444; color: white; border: 1px solid #666;';
+audioControls.appendChild(playPause);
+
+const volumeControl = document.createElement('input');
+volumeControl.type = 'range';
+volumeControl.min = 0;
+volumeControl.max = 1;
+volumeControl.step = 0.1;
+volumeControl.value = 0.5;
+volumeControl.style.width = '100px';
+audioControls.appendChild(volumeControl);
+
+const timelineControl = document.createElement('input');
+timelineControl.type = 'range';
+timelineControl.min = 0;
+timelineControl.max = 100;
+timelineControl.step = 1;
+timelineControl.value = 0;
+timelineControl.style.width = '200px';  
+timelineControl.style.marginLeft = '10px';
+audioControls.appendChild(timelineControl);
+
+const inputToggle = document.createElement('button');
+inputToggle.textContent = 'Use Mic';
+inputToggle.style.cssText = 'padding: 5px 15px; border-radius: 3px; background: #444; color: white; border: 1px solid #666; margin-left: 10px;';
+audioControls.appendChild(inputToggle);
+
+let usingMic = false;
+inputToggle.onclick = toggleInput;
+
+playPause.onclick = togglePlay;
+songSelect.onchange = changeSong;
+
+console.log('Controls created');
+
+// Noise generator
+const noise = {
+    p: new Array(256).fill(0).map((_, i) => i),
+    perm: new Array(512),
+    
+    init() {
+        for (let i = this.p.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [this.p[i], this.p[j]] = [this.p[j], this.p[i]];
+        }
+        for (let i = 0; i < 512; i++) {
+            this.perm[i] = this.p[i & 255];
+        }
+    },
+    
+    fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); },
+    lerp(t, a, b) { return a + t * (b - a); },
+    
+    grad(hash, x, y, z) {
+        const h = hash & 15;
+        const u = h < 8 ? x : y;
+        const v = h < 4 ? y : h == 12 || h == 14 ? x : z;
+        return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v);
+    },
+    
+    noise3D(x, y, z) {
+        const X = Math.floor(x) & 255;
+        const Y = Math.floor(y) & 255;
+        const Z = Math.floor(z) & 255;
+        
+        x -= Math.floor(x);
+        y -= Math.floor(y);
+        z -= Math.floor(z);
+        
+        const u = this.fade(x);
+        const v = this.fade(y);
+        const w = this.fade(z);
+        
+        const A = this.perm[X] + Y;
+        const AA = this.perm[A] + Z;
+        const AB = this.perm[A + 1] + Z;
+        const B = this.perm[X + 1] + Y;
+        const BA = this.perm[B] + Z;
+        const BB = this.perm[B + 1] + Z;
+        
+        return this.lerp(w, this.lerp(v, this.lerp(u, this.grad(this.perm[AA], x, y, z),
+                                                     this.grad(this.perm[BA], x-1, y, z)),
+                                        this.lerp(u, this.grad(this.perm[AB], x, y-1, z),
+                                                  this.grad(this.perm[BB], x-1, y-1, z))),
+                           this.lerp(v, this.lerp(u, this.grad(this.perm[AA+1], x, y, z-1),
+                                                  this.grad(this.perm[BA+1], x-1, y, z-1)),
+                                     this.lerp(u, this.grad(this.perm[AB+1], x, y-1, z-1),
+                                               this.grad(this.perm[BB+1], x-1, y-1, z-1))));
+    }
+};
+noise.init();
+console.log('Noise initialized');
+
+// Beat manager
+const beatManager = {
+    currentWaveRadius: 0,
+    waveStrength: 0,
+    isWaveActive: false,
+    
+    triggerWave(rangeEnergy) {
+        const maxEnergy = 255; 
+        const energyExcess = rangeEnergy - 200; 
+        this.waveStrength = (energyExcess / (maxEnergy - 200)) * 20.0;
+        this.currentWaveRadius = 0;
+        this.isWaveActive = true;
+    },
+    
+    update(deltaTime) {
+        if (this.isWaveActive) {
+            this.currentWaveRadius += deltaTime * 1.0;
+            this.waveStrength *= 0.98;
+            
+            if (this.currentWaveRadius > 1.0 || this.waveStrength < 0.1) {
+                this.isWaveActive = false;
+            }
+        }
+    },
+    
+    getWaveForce(position) {
+        if (!this.isWaveActive) return 0;
+        const distanceFromCenter = position.length();
+        const distanceFromWave = Math.abs(distanceFromCenter - this.currentWaveRadius);
+        if (distanceFromWave < 0.1) {
+            return this.waveStrength * Math.exp(-distanceFromWave * 10);
+        }
+        return 0;
+    }
+};
+
+async function toggleInput() {
+    
+    if (!audioContext) {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        analyser = audioContext.createAnalyser();
+        analyser.fftSize = 2048;
+    }
+    await audioContext.resume();
+    
+    if (usingMic) {
+        usingMic = false;
+        inputToggle.textContent = 'Use Mic';
+        songSelect.disabled = false;
+        playPause.disabled = false;
+        volumeControl.disabled = false;
+        timelineControl.disabled = false;
+
+        if (micSource) {
+            micSource.disconnect();
+            micSource = null;
+        }
+
+        if (sourceNode) {
+            sourceNode.connect(analyser);
+        }
+        analyser.connect(audioContext.destination);
+
+    } else {
+        usingMic = true;
+        inputToggle.textContent = 'Use Player';
+        songSelect.disabled = true;
+        playPause.disabled = true;
+        volumeControl.disabled = true;
+        timelineControl.disabled = true;
+
+        try {
+            micStream = await navigator.mediaDevices.getUserMedia({
+                audio: {
+                    echoCancellation: true,
+                    noiseSuppression: true,
+                    autoGainControl: false
+                }
+            });
+
+            if (sourceNode) {
+                sourceNode.disconnect();
+            }
+
+            micSource = audioContext.createMediaStreamSource(micStream);
+            micSource.connect(analyser);
+            analyser.disconnect(audioContext.destination);
+
+            console.log('Microphone is active');
+
+        } catch (error) {
+            console.error("Microphone access failed:", error.name, error.message);
+            usingMic = false;
+            inputToggle.textContent = 'Use Mic';
+        }
+    }
+}
+
+async function initAudio() {
+    try {
+        if (!audioContext) {
+            audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            analyser = audioContext.createAnalyser();
+            analyser.fftSize = 2048;
+        }
+
+        if (!usingMic) {
+            if (!audioElement) {
+                audioElement = document.createElement('audio');
+                audioElement.crossOrigin = "anonymous";
+                audioElement.volume = volumeControl.value;
+            }
+
+            try {
+                if (!sourceNode) {
+                    sourceNode = audioContext.createMediaElementSource(audioElement);
+                    sourceNode.connect(analyser);
+                    analyser.connect(audioContext.destination);
+                } else {
+                    sourceNode.disconnect();
+                    sourceNode.connect(analyser);
+                }
+
+            } catch (error) {
+                console.error("Failed to connect audio element to analyser:", error.name, error.message);
+            }
+
+            try {
+                const response = await fetch('Songs/');
+                const text = await response.text();
+                
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(text, 'text/html');
+                
+                const files = Array.from(doc.querySelectorAll('a'))
+                    .map(a => decodeURIComponent(a.href))
+                    .filter(href => href.match(/\.(mp3|wav|ogg)$/i))
+                    .map(href => {
+                        const fileName = href.split('/').pop();
+                        return {
+                            path: `Songs/${fileName}`,
+                            name: fileName.replace(/\.(mp3|wav|ogg)$/i, '')
+                        };
+                    });
+                
+                songSelect.innerHTML = '';
+                
+                files.forEach(file => {
+                    const option = document.createElement('option');
+                    option.value = file.path;
+                    option.textContent = file.name;
+                    songSelect.appendChild(option);
+                });
+                
+                if (files.length > 0 && !audioElement.src) {
+                    audioElement.src = files[0].path;
+                }
+                
+            } catch (error) {
+                console.error("Failed to load song list:", error);
+            }
+            
+            volumeControl.oninput = e => {
+                if (audioElement) {
+                    audioElement.volume = e.target.value;
+                }
+            };
+            
+            setupTimelineControl();
+        }
+
+        console.log('Audio initialized');
+        
+    } catch (error) {
+        console.error("Audio initialization failed:", error);
+    }
+}
+
+function getAudioData(sphere) {
+    if (!analyser || (!audioContext && !usingMic)) return { 
+        average: 0, 
+        frequencies: new Float32Array(), 
+        peakDetected: false,
+        rangeEnergy: 0
+    };
+    
+    try {
+        const frequencies = new Uint8Array(analyser.frequencyBinCount);
+        analyser.getByteFrequencyData(frequencies);
+        
+        const gainMultiplier = sphere.params.gainMultiplier; 
+        frequencies.forEach((value, index) => {
+            frequencies[index] = Math.min(value * gainMultiplier, 255);
+        });
+
+        const frequencyToIndex = (frequency) => Math.round(frequency / (audioContext.sampleRate / 2) * analyser.frequencyBinCount);
+
+        const minFreqIndex = frequencyToIndex(sphere.params.minFrequency);
+        const maxFreqIndex = frequencyToIndex(sphere.params.maxFrequency);
+        const frequencyRange = frequencies.slice(minFreqIndex, maxFreqIndex + 1);
+        const rangeEnergy = frequencyRange.reduce((a, b) => a + b, 0) / frequencyRange.length;
+
+        const minFreqBeatIndex = frequencyToIndex(sphere.params.minFrequencyBeat); // Nové pásmo pro beaty
+        const maxFreqBeatIndex = frequencyToIndex(sphere.params.maxFrequencyBeat);
+        const frequencyRangeBeat = frequencies.slice(minFreqBeatIndex, maxFreqBeatIndex + 1);
+        const rangeEnergyBeat = frequencyRangeBeat.reduce((a, b) => a + b, 0) / frequencyRangeBeat.length;
+
+        sphere.peakDetection.energyHistory.push(rangeEnergy);
+        if (sphere.peakDetection.energyHistory.length > sphere.peakDetection.historyLength) {
+            sphere.peakDetection.energyHistory.shift();
+        }
+        
+        const averageEnergy = sphere.peakDetection.energyHistory.reduce((a, b) => a + b, 0) / 
+                            sphere.peakDetection.energyHistory.length;
+        
+        const now = performance.now();
+        const peakDetected = rangeEnergy > averageEnergy * sphere.params.peakSensitivity &&
+                           now - sphere.peakDetection.lastPeakTime > sphere.peakDetection.minTimeBetweenPeaks;
+        
+        if (peakDetected) {
+            sphere.peakDetection.lastPeakTime = now;
+            console.log(`Sphere ${sphere.index + 1} PEAK DETECTED! Energy: ${rangeEnergy}, Average: ${averageEnergy}`);
+        }
+        
+
+        return {
+            average: rangeEnergy / 255,
+            frequencies,
+            peakDetected,
+            rangeEnergy: rangeEnergy,
+            rangeEnergyBeat: rangeEnergyBeat
+        };
+
+    } catch (error) {
+        console.error("Audio analysis failed:", error);
+        return { 
+            average: 0, 
+            frequencies: new Float32Array(), 
+            peakDetected: false,
+            rangeEnergy: 0
+        };
+    }
+}
+
+
+function updateTimeline() {
+    if (audioElement && !audioElement.paused && audioElement.duration) {
+        const percent = (audioElement.currentTime / audioElement.duration) * 100;
+        timelineControl.value = percent;
+    }
+}
+
+function setupTimelineControl() {
+    audioElement.addEventListener('loadedmetadata', () => {
+        timelineControl.value = 0;
+        console.log('Song duration:', audioElement.duration);
+    });
+
+    audioElement.addEventListener('timeupdate', updateTimeline);
+
+    timelineControl.addEventListener('input', (e) => {
+        if (audioElement.duration) {
+            const time = (e.target.value / 100) * audioElement.duration;
+            audioElement.currentTime = time;
+        }
+    });
+}
+
+function togglePlay() {
+    if (usingMic) return; 
+
+    if (audioContext.state === 'suspended') {
+        audioContext.resume();
+    }
+    
+    if (!sourceNode && audioElement) {
+        try {
+            sourceNode = audioContext.createMediaElementSource(audioElement);
+            sourceNode.connect(analyser);
+            analyser.connect(audioContext.destination);
+        } catch (error) {
+            console.error("Audio connection failed:", error);
+            return;
+        }
+    }
+    
+    if (audioElement.paused) {
+        audioElement.play()
+            .then(() => playPause.textContent = 'Pause')
+            .catch(error => console.error("Playback failed:", error));
+    } else {
+        audioElement.pause();
+        playPause.textContent = 'Play';
+    }
+}
+
+function changeSong() {
+    if (audioContext.state === 'suspended') {
+        audioContext.resume();
+    }
+    
+    audioElement.src = songSelect.value;
+    audioElement.load();
+    
+    if (!sourceNode) {
+        try {
+            sourceNode = audioContext.createMediaElementSource(audioElement);
+            sourceNode.connect(analyser);
+            analyser.connect(audioContext.destination);
+        } catch (error) {
+            console.error("Audio connection failed:", error);
+            return;
+        }
+    }
+    
+    audioElement.play()
+        .then(() => {
+            playPause.textContent = 'Pause';
+            console.log("Playback started");
+        })
+        .catch(error => console.error("Playback failed:", error));
+
+    timelineControl.value = 0;
+}
+
+function generateNewNoiseScale(params, lastNoiseScale) {
+    if (!params.dynamicNoiseScale) {
+        return params.noiseScale;
+    }
+
+    let { minNoiseScale, maxNoiseScale, noiseStep } = params;
+
+    // --- PŘIDANÁ POJISTKA A DROBNÉ LOGY ---
+    if (minNoiseScale >= maxNoiseScale) {
+        console.warn(`Fixing minNoiseScale (${minNoiseScale}) >= maxNoiseScale (${maxNoiseScale}).`);
+        maxNoiseScale = minNoiseScale + 0.1; // Natvrdo posunout, aby byl rozdíl aspoň 0.1
+    }
+
+    let range = maxNoiseScale - minNoiseScale;
+    if (range < 0.1) {
+        console.warn(`Range < 0.1 => Forcing minimal range = 0.1`);
+        range = 0.1;
+        maxNoiseScale = minNoiseScale + range;
+    }
+
+    if (noiseStep > range) {
+        console.warn(`noiseStep (${noiseStep}) > range (${range}) => Forcing noiseStep = range / 2`);
+        noiseStep = range / 2;
+    }
+
+    // LastNoiseScale valid range
+    lastNoiseScale = Math.max(minNoiseScale, Math.min(lastNoiseScale, maxNoiseScale));
+
+    const stepsUp = Math.floor((maxNoiseScale - lastNoiseScale) / noiseStep);
+    const stepsDown = Math.floor((lastNoiseScale - minNoiseScale) / noiseStep);
+
+    if (stepsUp === 0 && stepsDown === 0) {
+        return lastNoiseScale;
+    }
+
+    const direction = Math.random() < 0.5 && stepsDown > 0 ? -1 : 1;
+    const steps = direction === 1 
+        ? Math.floor(Math.random() * (stepsUp + 1))
+        : Math.floor(Math.random() * (stepsDown + 1));
+
+    let newValue = lastNoiseScale + direction * steps * noiseStep;
+
+    newValue = Math.max(minNoiseScale, Math.min(newValue, maxNoiseScale));
+
+    return newValue;
+}
+
+// Reinit particles
+function reinitializeParticlesForSphere(sphere, sphereParams, sphereGeometry) {
+    console.log(`Reinitializing sphere ${sphere.index + 1} with ${sphereParams.particleCount} particles`);
+
+    const newPositions = new Float32Array(sphereParams.particleCount * 3);
+    const newColors = new Float32Array(sphereParams.particleCount * 3);
+    const newVelocities = new Float32Array(sphereParams.particleCount * 3);
+    const newBasePositions = new Float32Array(sphereParams.particleCount * 3);
+    const newLifetimes = new Float32Array(sphereParams.particleCount);
+    const newMaxLifetimes = new Float32Array(sphereParams.particleCount);
+    const newBeatEffects = new Float32Array(sphereParams.particleCount);
+
+    for (let i = 0; i < sphereParams.particleCount; i++) {
+        const i3 = i * 3;
+        const radius = THREE.MathUtils.lerp(0, sphereParams.sphereRadius, sphereParams.innerSphereRadius);
+        const theta = Math.random() * Math.PI * 2;
+        const phi = Math.acos(2 * Math.random() - 1);
+        const r = Math.cbrt(Math.random()) * radius;
+
+        const x = r * Math.sin(phi) * Math.cos(theta);
+        const y = r * Math.sin(phi) * Math.sin(theta);
+        const z = r * Math.cos(phi);
+
+        newPositions[i3] = x;
+        newPositions[i3 + 1] = y;
+        newPositions[i3 + 2] = z;
+
+        newBasePositions[i3] = x;
+        newBasePositions[i3 + 1] = y;
+        newBasePositions[i3 + 2] = z;
+
+        newVelocities[i3] = 0;
+        newVelocities[i3 + 1] = 0;
+        newVelocities[i3 + 2] = 0;
+
+        const lt = Math.random() * sphereParams.particleLifetime;
+        newLifetimes[i] = lt;
+        newMaxLifetimes[i] = lt;
+
+        newBeatEffects[i] = 0;
+    }
+
+    sphereGeometry.setAttribute('position', new THREE.BufferAttribute(newPositions, 3));
+    sphereGeometry.setAttribute('color', new THREE.BufferAttribute(newColors, 3));
+
+    updateColorsForSphere(sphereParams, sphereGeometry, newColors);
+
+    return {
+        newPositions,
+        newColors,
+        newVelocities,
+        newBasePositions,
+        newLifetimes,
+        newMaxLifetimes,
+        newBeatEffects
+    };
+}
+
+function updateColorsForSphere(sphereParams, sphereGeometry, sphereColors) {
+    const color1 = new THREE.Color(sphereParams.colorStart);
+    const color2 = new THREE.Color(sphereParams.colorEnd);
+
+    for (let i = 0; i < sphereParams.particleCount; i++) {
+        const t = i / sphereParams.particleCount;
+        sphereColors[i * 3] = color1.r * (1 - t) + color2.r * t;
+        sphereColors[i * 3 + 1] = color1.g * (1 - t) + color2.g * t;
+        sphereColors[i * 3 + 2] = color1.b * (1 - t) + color2.b * t;
+    }
+    sphereGeometry.attributes.color.needsUpdate = true;
+}
+
+// Preset management
+const presets = JSON.parse(localStorage.getItem('presets')) || {}; // Uložené presety
+const defaultParams = []; // Pro ukládání výchozích hodnot každé sféry
+
+// HTML elements presets
+
+let presetContainer = document.querySelector('#presetContainer');
+let presetInput, saveButton, resetButton, presetSelect, deleteButton, exportButton, importButton;
+
+if (!presetContainer) {
+    presetContainer = document.createElement('div');
+    presetContainer.id = 'presetContainer';
+    presetContainer.style.cssText = `
+        position: fixed !important;
+        top: 10px !important; 
+        left: 10px !important;
+        z-index: 1000 !important; 
+        display: flex !important; 
+        gap: 10px !important; 
+    `;
+
+    presetInput = document.createElement('input');
+    presetInput.type = 'text';
+    presetInput.placeholder = 'Preset name';
+    presetInput.style.cssText = 'padding: 5px; border-radius: 3px;';
+
+    saveButton = document.createElement('button');
+    saveButton.textContent = 'Save';
+    saveButton.style.cssText = 'padding: 5px 10px; border-radius: 3px; background: #444; color: white; border: 1px solid #666;';
+
+    resetButton = document.createElement('button');
+    resetButton.textContent = 'Reset';
+    resetButton.style.cssText = 'padding: 5px 10px; border-radius: 3px; background: #444; color: white; border: 1px solid #666;';
+
+    presetSelect = document.createElement('select');
+    presetSelect.style.cssText = 'padding: 5px; border-radius: 3px; background: #333; color: white; border: 1px solid #666;';
+
+    deleteButton = document.createElement('button');
+    deleteButton.textContent = 'Delete';
+    deleteButton.style.cssText = 'padding: 5px 10px; border-radius: 3px; background: #444; color: white; border: 1px solid #666;';
+
+    exportButton = document.createElement('button');
+    exportButton.textContent = 'Export Presets';
+    exportButton.style.cssText = 'padding: 5px 10px; border-radius: 3px; background: #444; color: white; border: 1px solid #666;';
+
+    importButton = document.createElement('button');
+    importButton.textContent = 'Import Presets';
+    importButton.style.cssText = 'padding: 5px 10px; border-radius: 3px; background: #444; color: white; border: 1px solid #666;';
+
+    presetContainer.appendChild(presetInput);
+    presetContainer.appendChild(saveButton);
+    presetContainer.appendChild(resetButton);
+    presetContainer.appendChild(deleteButton);
+    presetContainer.appendChild(exportButton);
+    presetContainer.appendChild(importButton);
+    presetContainer.appendChild(presetSelect);
+
+    document.body.appendChild(presetContainer);
+}
+
+// Save presets logic
+saveButton.onclick = () => {
+    const presetName = presetInput.value.trim();
+    if (!presetName) return;
+    presets[presetName] = spheres.map(sphere => JSON.parse(JSON.stringify(sphere.params)));
+    localStorage.setItem('presets', JSON.stringify(presets));
+    updatePresetOptions();
+};
+
+// Reset logic
+resetButton.onclick = () => {
+    spheres.forEach((sphere, index) => {
+        const previousParticleCount = sphere.params.particleCount; // Uložíme původní počet částic
+        
+        Object.assign(sphere.params, defaultParams[index]);
+        sphere.particleSystem.visible = sphere.params.enabled;
+
+        if (sphere.params.particleCount !== previousParticleCount) {
+            const {
+                newPositions,
+                newColors,
+                newVelocities,
+                newBasePositions,
+                newLifetimes,
+                newMaxLifetimes,
+                newBeatEffects
+            } = reinitializeParticlesForSphere(sphere, sphere.params, sphere.geometry);
+
+            sphere.positions = newPositions;
+            sphere.colors = newColors;
+            sphere.velocities = newVelocities;
+            sphere.basePositions = newBasePositions;
+            sphere.lifetimes = newLifetimes;
+            sphere.maxLifetimes = newMaxLifetimes;
+            sphere.beatEffects = newBeatEffects;
+
+            sphere.geometry.attributes.position.needsUpdate = true;
+            sphere.geometry.attributes.color.needsUpdate = true;
+        }
+
+        const sphereFolder = mainGui.__folders[`Sphere ${index + 1}`];
+        if (sphereFolder) {
+            sphereFolder.__controllers.forEach(controller => controller.updateDisplay());
+        }
+    });
+
+    console.log("Parameters reset to default values");
+    mainGui.updateDisplay();
+};
+
+// Delete preset logic
+deleteButton.onclick = () => {
+    const presetName = presetSelect.value;
+    if (!presetName) {
+        console.warn('Žádný preset není vybraný.');
+        return;
+    }
+
+    const sure = confirm(`Skutečně smazat preset "${presetName}"?`);
+    if (!sure) return;
+
+    delete presets[presetName];
+    localStorage.setItem('presets', JSON.stringify(presets));
+    updatePresetOptions();
+
+    presetSelect.value = '';
+    presetInput.value = '';
+
+    console.log(`Preset "${presetName}" byl smazán.`);
+};
+
+// Export presets
+exportButton.onclick = () => {
+    const presetData = JSON.stringify(presets, null, 2);
+    const blob = new Blob([presetData], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'particula_presets.json';
+    link.click();
+    URL.revokeObjectURL(url);
+};
+
+// Import presets
+importButton.onclick = () => {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'application/json';
+    fileInput.onchange = (event) => {
+        const file = event.target.files[0];
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const importedPresets = JSON.parse(e.target.result);
+            Object.assign(presets, importedPresets);
+            localStorage.setItem('presets', JSON.stringify(presets));
+            updatePresetOptions();
+            console.log('Presety byly úspěšně importovány.');
+        };
+        reader.readAsText(file);
+    };
+    fileInput.click();
+};
+
+// Upload presets logic
+presetSelect.onchange = () => {
+    const presetName = presetSelect.value;
+    if (!presetName) return;
+    const preset = presets[presetName];
+    if (!preset) return;
+
+    spheres.forEach((sphere, index) => {
+        const previousParticleCount = sphere.params.particleCount; // Původní počet částic
+
+        Object.assign(sphere.params, preset[index]);
+
+        if (!('minFrequencyBeat' in sphere.params)) {
+            sphere.params.minFrequencyBeat = sphere.params.minFrequency;
+        }
+        if (!('maxFrequencyBeat' in sphere.params)) {
+            sphere.params.maxFrequencyBeat = sphere.params.maxFrequency;
+        }
+
+        if (sphere.params.minNoiseScale >= sphere.params.maxNoiseScale) {
+            console.warn(`Preset fix: minNoiseScale (${sphere.params.minNoiseScale}) >= maxNoiseScale (${sphere.params.maxNoiseScale}).`);
+            sphere.params.maxNoiseScale = sphere.params.minNoiseScale + 0.1;
+        }
+
+        if (sphere.params.particleCount !== previousParticleCount) {
+            const {
+                newPositions,
+                newColors,
+                newVelocities,
+                newBasePositions,
+                newLifetimes,
+                newMaxLifetimes,
+                newBeatEffects
+            } = reinitializeParticlesForSphere(sphere, sphere.params, sphere.geometry);
+
+            sphere.positions = newPositions;
+            sphere.colors = newColors;
+            sphere.velocities = newVelocities;
+            sphere.basePositions = newBasePositions;
+            sphere.lifetimes = newLifetimes;
+            sphere.maxLifetimes = newMaxLifetimes;
+            sphere.beatEffects = newBeatEffects;
+
+            sphere.geometry.attributes.position.needsUpdate = true;
+            sphere.geometry.attributes.color.needsUpdate = true;
+        }
+
+        sphere.particleSystem.visible = sphere.params.enabled;
+    });
+
+    mainGui.updateDisplay();
+};
+
+// Roll presets
+function updatePresetOptions() {
+    while (presetSelect.firstChild) {
+        presetSelect.removeChild(presetSelect.firstChild);
+    }
+    
+    const defaultOption = document.createElement('option');
+    defaultOption.textContent = 'Select preset';
+    defaultOption.value = '';
+    presetSelect.appendChild(defaultOption);
+
+    Object.keys(presets).forEach(name => {
+        const option = document.createElement('option');
+        option.textContent = name;
+        option.value = name;
+        presetSelect.appendChild(option);
+    });
+}
+
+// Main GUI panel
+const mainGui = new dat.GUI();
+
+// FOG PARAMS
+const fogParams = {
+    enabled: true,
+    color: '#000000',
+    near: 2.7,
+    far: 3.7,
+};
+
+// After fog update
+function updateFog() {
+    if (!fogParams.enabled) {
+        scene.fog = null;
+    } else {
+        const color = new THREE.Color(fogParams.color);
+        scene.fog = new THREE.Fog(color, fogParams.near, fogParams.far);
+
+    }
+    renderer.render(scene, camera); // Překreslení scény
+}
+
+// Fog init
+if (fogParams.enabled) {
+    updateFog();
+}
+
+// Adding to main GUI
+mainGui.add(fogParams, 'enabled').name('Fog Enabled').onChange(updateFog);
+mainGui.addColor(fogParams, 'color').name('Fog Color').onChange(updateFog);
+mainGui.add(fogParams, 'near', 0.1, 5, 0.1).name('Fog Near').onChange(updateFog);
+mainGui.add(fogParams, 'far', 0.1, 5, 0.1).name('Fog Far').onChange(updateFog);
+
+// Main GUI particleCount
+mainGui.add({
+    globalParticleCount: 20000
+}, 'globalParticleCount', 1000, 100000).step(1000).onChange(value => {
+    spheres.forEach((sphere, index) => {
+        sphere.params.particleCount = value;
+        const {
+            newPositions,
+            newColors,
+            newVelocities,
+            newBasePositions,
+            newLifetimes,
+            newMaxLifetimes,
+            newBeatEffects
+        } = reinitializeParticlesForSphere(
+            sphere, sphere.params, sphere.geometry
+        );
+
+        sphere.positions = newPositions;
+        sphere.colors = newColors;
+        sphere.velocities = newVelocities;
+        sphere.basePositions = newBasePositions;
+        sphere.lifetimes = newLifetimes;
+        sphere.maxLifetimes = newMaxLifetimes;
+        sphere.beatEffects = newBeatEffects;
+
+        sphere.geometry.attributes.position.needsUpdate = true;
+        sphere.geometry.attributes.color.needsUpdate = true;
+
+        const sphereFolder = mainGui.__folders[`Sphere ${index + 1}`];
+        if (sphereFolder) {
+            const particleCountController = sphereFolder.__controllers.find(controller => controller.property === 'particleCount');
+            if (particleCountController) {
+                particleCountController.updateDisplay();
+            }
+        }
+    });
+});
+
+const spheres = [];
+
+function createSphereVisualization(index) {
+    
+    // Spheres default frequencies
+    const defaultFrequencies = [
+        { minFrequency: 20, maxFrequency: 80 },  // Sub-bass
+        { minFrequency: 120, maxFrequency: 250 }, // Bass
+        { minFrequency: 250, maxFrequency: 800 }, // Mid
+        { minFrequency: 1000, maxFrequency: 4000 }, // High mid
+        { minFrequency: 5000, maxFrequency: 10000 } // High
+    ];
+
+    const sphereParams = {
+        enabled: index === 0,
+        sphereRadius: 1.0,
+        innerSphereRadius: 0.25,
+        rotationSpeed: 0.001,
+        rotationSpeedMin: 0,
+        rotationSpeedMax: 0.065,
+        rotationSmoothness: 0.3,
+        particleCount: 20000,
+        particleSize: 0.003,
+        particleLifetime: 3.0,
+        minFrequency: defaultFrequencies[index]?.minFrequency || 0,
+        maxFrequency: defaultFrequencies[index]?.maxFrequency || 22050,
+        minFrequencyBeat: defaultFrequencies[index]?.minFrequency || 0,
+        maxFrequencyBeat: defaultFrequencies[index]?.maxFrequency || 22050,
+        noiseScale: 4.0,
+        dynamicNoiseScale: true,
+        minNoiseScale: 0.5,       
+        maxNoiseScale: 5.0,       
+        noiseStep: 0.2,           
+        noiseSpeed: 0.1,
+        turbulenceStrength: 0.005,
+        colorStart: '#ff3366',
+        colorEnd: '#3366ff',
+        volumeChangeThreshold: 0.1,
+        peakSensitivity: 1.1,
+        beatThreshold: 200,
+        baseWaveStrength: 20.0,
+        beatStrength: 0.01,
+        gainMultiplier: 1
+    };
+
+    const sphereGeometry = new THREE.BufferGeometry();
+    const spherePositions = new Float32Array(sphereParams.particleCount * 3);
+    const sphereColors = new Float32Array(sphereParams.particleCount * 3);
+    const velocities = new Float32Array(sphereParams.particleCount * 3);
+    const basePositions = new Float32Array(sphereParams.particleCount * 3);
+    const lifetimes = new Float32Array(sphereParams.particleCount);
+    const maxLifetimes = new Float32Array(sphereParams.particleCount);
+    const beatEffects = new Float32Array(sphereParams.particleCount);
+
+    // Init particles
+    for (let i = 0; i < sphereParams.particleCount; i++) {
+        const i3 = i * 3;
+        const radius = THREE.MathUtils.lerp(0, sphereParams.sphereRadius, sphereParams.innerSphereRadius);
+        const theta = Math.random() * Math.PI * 2;
+        const phi = Math.acos(2 * Math.random() - 1);
+        const r = Math.cbrt(Math.random()) * radius;
+
+        const x = r * Math.sin(phi) * Math.cos(theta);
+        const y = r * Math.sin(phi) * Math.sin(theta);
+        const z = r * Math.cos(phi);
+
+        spherePositions[i3] = x;
+        spherePositions[i3 + 1] = y;
+        spherePositions[i3 + 2] = z;
+
+        basePositions[i3] = x;
+        basePositions[i3 + 1] = y;
+        basePositions[i3 + 2] = z;
+
+        velocities[i3] = 0;
+        velocities[i3 + 1] = 0;
+        velocities[i3 + 2] = 0;
+
+        const lt = Math.random() * sphereParams.particleLifetime;
+        lifetimes[i] = lt;
+        maxLifetimes[i] = lt;
+
+        beatEffects[i] = 0;
+    }
+
+    sphereGeometry.setAttribute('position', new THREE.BufferAttribute(spherePositions, 3));
+    sphereGeometry.setAttribute('color', new THREE.BufferAttribute(sphereColors, 3));
+
+    const sphereMaterial = new THREE.PointsMaterial({
+        size: sphereParams.particleSize,
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.8,
+        blending: THREE.AdditiveBlending,
+        fog: true
+    });
+
+    const sphereParticleSystem = new THREE.Points(sphereGeometry, sphereMaterial);
+    scene.add(sphereParticleSystem);
+
+    // Sphere visibility `enabled`
+    sphereParticleSystem.visible = sphereParams.enabled;
+
+    const sphere = {
+        index: index,
+        params: sphereParams,
+        geometry: sphereGeometry,
+        colors: sphereColors,
+        material: sphereMaterial,
+        particleSystem: sphereParticleSystem,
+        positions: spherePositions,
+        velocities: velocities,
+        basePositions: basePositions,
+        lifetimes: lifetimes,
+        maxLifetimes: maxLifetimes,
+        beatEffects: beatEffects,
+        lastNoiseScale: sphereParams.noiseScale,
+        lastValidVolume: 0,
+        lastRotationSpeed: 0
+    };
+
+    sphere.peakDetection = {
+        energyHistory: [],
+        historyLength: 30,
+        lastPeakTime: 0,
+        minTimeBetweenPeaks: 200
+    };
+
+    // Colors update
+    updateColorsForSphere(sphereParams, sphereGeometry, sphereColors);
+
+    // GUI folder
+    const sphereFolder = mainGui.addFolder('Sphere ' + (index + 1));
+
+    sphereFolder.add(sphere.params, 'particleCount', 1000, 100000).step(1000)
+        .onChange(() => {
+            const {
+                newPositions,
+                newColors,
+                newVelocities,
+                newBasePositions,
+                newLifetimes,
+                newMaxLifetimes,
+                newBeatEffects
+            } = reinitializeParticlesForSphere(
+                sphere, sphere.params, sphere.geometry
+            );
+
+            sphere.positions = newPositions;
+            sphere.colors = newColors;
+            sphere.velocities = newVelocities;
+            sphere.basePositions = newBasePositions;
+            sphere.lifetimes = newLifetimes;
+            sphere.maxLifetimes = newMaxLifetimes;
+            sphere.beatEffects = newBeatEffects;
+
+            sphere.geometry.attributes.position.needsUpdate = true;
+            sphere.geometry.attributes.color.needsUpdate = true;
+        });
+    
+    sphereFolder.add(sphere.params, 'particleSize', 0.001, 0.01).step(0.001)
+        .onChange(value => {
+            sphere.material.size = value;
+        });
+
+    if (index === 0) { 
+    sphereFolder.add({ copyToOthers: () => {
+        for (let i = 1; i < spheres.length; i++) {
+            Object.assign(spheres[i].params, JSON.parse(JSON.stringify(sphere.params)));
+            
+            const {
+                newPositions,
+                newColors,
+                newVelocities,
+                newBasePositions,
+                newLifetimes,
+                newMaxLifetimes,
+                newBeatEffects
+            } = reinitializeParticlesForSphere(
+                spheres[i], spheres[i].params, spheres[i].geometry
+            );
+
+            spheres[i].positions = newPositions;
+            spheres[i].colors = newColors;
+            spheres[i].velocities = newVelocities;
+            spheres[i].basePositions = newBasePositions;
+            spheres[i].lifetimes = newLifetimes;
+            spheres[i].maxLifetimes = newMaxLifetimes;
+            spheres[i].beatEffects = newBeatEffects;
+
+            spheres[i].geometry.attributes.position.needsUpdate = true;
+            spheres[i].geometry.attributes.color.needsUpdate = true;
+
+
+            spheres[i].particleSystem.visible = spheres[i].params.enabled;
+
+            const targetFolder = mainGui.__folders[`Sphere ${i + 1}`];
+            if (targetFolder) {
+                targetFolder.__controllers.forEach(controller => controller.updateDisplay());
+            }
+        }
+        mainGui.updateDisplay();
+        console.log('Parameters copied from Sphere 1 to Spheres 2-5.');
+    }}, 'copyToOthers').name('Copy to Spheres 2-5');
+}
+    sphereFolder.add(sphere.params, 'particleLifetime', 1, 20).step(1);
+
+    sphereFolder.add(sphere.params, 'sphereRadius', 0.05, 3.0).step(0.05);
+    sphereFolder.add(sphere.params, 'innerSphereRadius', 0, 1).step(0.01)
+        .onChange(() => {
+            const {
+                newPositions,
+                newColors,
+                newVelocities,
+                newBasePositions,
+                newLifetimes,
+                newMaxLifetimes,
+                newBeatEffects
+            } = reinitializeParticlesForSphere(sphere, sphere.params, sphere.geometry);
+
+            sphere.positions = newPositions;
+            sphere.colors = newColors;
+            sphere.velocities = newVelocities;
+            sphere.basePositions = newBasePositions;
+            sphere.lifetimes = newLifetimes;
+            sphere.maxLifetimes = newMaxLifetimes;
+            sphere.beatEffects = newBeatEffects;
+            
+            sphere.geometry.attributes.position.needsUpdate = true;
+            sphere.geometry.attributes.color.needsUpdate = true;
+        });
+
+    sphereFolder.add(sphere.params, 'rotationSpeedMin', 0, 0.02).step(0.001);
+    sphereFolder.add(sphere.params, 'rotationSpeedMax', 0, 0.1).step(0.001);
+    sphereFolder.add(sphere.params, 'rotationSmoothness', 0.01, 1).step(0.01);
+    sphereFolder.add(sphere.params, 'volumeChangeThreshold', 0.01, 0.2).step(0.01);
+    
+    sphereFolder.add(sphereParams, 'minFrequency', 0, 22050).step(1).name('Min Frequency (Hz)')
+        .onChange(value => sphereParams.minFrequency = value);
+    sphereFolder.add(sphereParams, 'maxFrequency', 0, 22050).step(1).name('Max Frequency (Hz)')
+        .onChange(value => sphereParams.maxFrequency = value);
+
+    // GUI defaults
+    const minFreqController = sphereFolder.__controllers.find(c => c.property === 'minFrequency');
+    const maxFreqController = sphereFolder.__controllers.find(c => c.property === 'maxFrequency');
+    if (minFreqController) minFreqController.setValue(sphereParams.minFrequency);
+    if (maxFreqController) maxFreqController.setValue(sphereParams.maxFrequency);
+
+    sphereFolder.add(sphere.params, 'noiseScale', 0.1, 10.0).step(0.1);
+    sphereFolder.add(sphere.params, 'minNoiseScale', 0.0, 10.0).step(0.1).name('Min NoiseScale')
+        .onChange(() => {
+            if (sphere.params.minNoiseScale > sphere.params.maxNoiseScale) {
+                sphere.params.minNoiseScale = sphere.params.maxNoiseScale;
+            }
+            updateNoiseStep(sphere.params);
+        });
+    sphereFolder.add(sphere.params, 'maxNoiseScale', 0.0, 10.0).step(0.1).name('Max NoiseScale')
+        .onChange(() => {
+            if (sphere.params.maxNoiseScale < sphere.params.minNoiseScale) {
+                sphere.params.maxNoiseScale = sphere.params.minNoiseScale;
+            }
+            updateNoiseStep(sphere.params);
+        });
+    sphereFolder.add(sphere.params, 'noiseStep', 0.1, 5.0).step(0.1).name('Noise Step')
+        .onChange(() => {
+            updateNoiseStep(sphere.params);
+        });
+    function updateNoiseStep(params) {
+        const range = params.maxNoiseScale - params.minNoiseScale;
+        if (params.noiseStep > range) {
+            params.noiseStep = range / 2;
+        }
+    }
+    sphereFolder.add(sphere.params, 'noiseSpeed', 0, 1.0).step(0.01);
+
+    sphereFolder.add(sphere.params, 'peakSensitivity', 1.01, 2).step(0.01);
+    sphereFolder.add(sphere.peakDetection, 'historyLength', 10, 1200).step(1).name('History Length');
+    sphereFolder.add(sphere.peakDetection, 'minTimeBetweenPeaks', 50, 5000).step(10).name('Min Time Between Peaks');
+
+    sphereFolder.add(sphere.params, 'turbulenceStrength', 0, 0.03).step(0.0001);
+    sphereFolder.addColor(sphere.params, 'colorStart')
+        .onChange(() => updateColorsForSphere(sphere.params, sphere.geometry, sphere.colors));
+    sphereFolder.addColor(sphere.params, 'colorEnd')
+        .onChange(() => updateColorsForSphere(sphere.params, sphere.geometry, sphere.colors));
+
+    sphereFolder.add(sphereParams, 'minFrequencyBeat', 0, 22050).step(1).name('Min Freq Beat (Hz)')
+        .onChange(value => sphereParams.minFrequencyBeat = value);
+    sphereFolder.add(sphereParams, 'maxFrequencyBeat', 0, 22050).step(1).name('Max Freq Beat (Hz)')
+        .onChange(value => sphereParams.maxFrequencyBeat = value);
+
+    sphereFolder.add(sphere.params, 'beatThreshold', 50, 255).step(1);
+    sphereFolder.add(sphere.params, 'beatStrength', 0, 0.05).step(0.001);
+    sphereFolder.add(sphere.params, 'gainMultiplier', 1.0, 3.0).step(0.1);
+    sphereFolder.add(sphere.params, 'dynamicNoiseScale');
+    sphereFolder.add(sphere.params, 'enabled').onChange(value => {
+        sphere.particleSystem.visible = value;
+    });
+
+    sphereFolder.close();
+
+    return sphere;
+}
+
+for (let i = 0; i < 5; i++) {
+    const sphereVis = createSphereVisualization(i);
+    spheres.push(sphereVis);
+}
+
+// Saving defaults spheres
+spheres.forEach(sphere => {
+    defaultParams.push(JSON.parse(JSON.stringify(sphere.params)));
+});
+
+// Init presets
+updatePresetOptions();
+
+// Only sphere 1 allowed
+spheres.forEach((sphere, index) => {
+    if (index !== 0) {
+        sphere.params.enabled = false;
+        sphere.particleSystem.visible = false;
+    }
+});
+
+function getSmoothVolume(params, lastValidVolume, volumeChangeThreshold) {
+    if (!analyser) return { volume: 0, shouldUpdate: false };
+
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    analyser.getByteFrequencyData(dataArray);
+
+    let sum = 0;
+    for (let i = 0; i < bufferLength; i++) {
+        sum += dataArray[i];
+    }
+    const average = sum / bufferLength;
+    const normalizedVolume = average / 255;
+
+    let shouldUpdate = true;
+    if (lastValidVolume === 0) {
+        lastValidVolume = normalizedVolume;
+    } else {
+        const change = Math.abs(normalizedVolume - lastValidVolume);
+        if (change <= volumeChangeThreshold) {
+            lastValidVolume = normalizedVolume;
+        } else {
+            shouldUpdate = false;
+        }
+    }
+
+    return { volume: lastValidVolume, shouldUpdate };
+}
+
+let lastTime = 0;
+function animate(currentTime) {
+    requestAnimationFrame(animate);
+    
+    const deltaTime = lastTime ? (currentTime - lastTime) / 1000 : 0;
+    lastTime = currentTime;
+
+    // Beat wave update
+    beatManager.update(deltaTime);
+
+    // Sphere update
+    spheres.forEach(sphere => {
+        if (!sphere.params.enabled) return;
+
+        const audioData = getAudioData(sphere);
+
+        if (audioData.peakDetected) {
+            if (sphere.params.dynamicNoiseScale) {
+                sphere.params.noiseScale = generateNewNoiseScale(
+                    sphere.params,
+                    sphere.lastNoiseScale
+                );
+                sphere.lastNoiseScale = sphere.params.noiseScale;
+            }
+        }
+
+        const { params, geometry, positions, velocities, basePositions, lifetimes, maxLifetimes, beatEffects } = sphere;
+
+        // Beat detection sphere
+        const beatDetected = audioData.rangeEnergyBeat > params.beatThreshold;
+
+        // Beat wave sphere
+        if (beatDetected && !beatManager.isWaveActive && params.beatStrength > 0) {
+            beatManager.triggerWave(audioData.rangeEnergyBeat);
+        }
+
+        // Update particles
+        const pc = params.particleCount;
+        for (let i = 0; i < pc; i++) {
+            const i3 = i * 3;
+
+            let x = positions[i3];
+            let y = positions[i3 + 1];
+            let z = positions[i3 + 2];
+
+            let vx = velocities[i3];
+            let vy = velocities[i3 + 1];
+            let vz = velocities[i3 + 2];
+
+            let lt = lifetimes[i];
+            let be = beatEffects[i];
+
+            // Update lifetime
+            lt -= deltaTime;
+
+            // Noise calc
+            const ns = params.noiseScale;
+            const speed = params.noiseSpeed;
+            const timeFactor = currentTime * 0.001;
+            const noiseX = noise.noise3D(x * ns + timeFactor * speed, y * ns, z * ns);
+            const noiseY = noise.noise3D(x * ns, y * ns + timeFactor * speed, z * ns);
+            const noiseZ = noise.noise3D(x * ns, y * ns, z * ns + timeFactor * speed);
+
+            vx += noiseX * params.turbulenceStrength;
+            vy += noiseY * params.turbulenceStrength;
+            vz += noiseZ * params.turbulenceStrength;
+
+            // Beat effect
+            if (beatDetected) {
+                be = 1.0;
+            }
+            be *= 0.95;
+            if (be > 0.01) {
+                // směr z centra
+                const dist = Math.sqrt(x*x + y*y + z*z);
+                if (dist > 0) {
+                    const dx = x / dist;
+                    const dy = y / dist;
+                    const dz = z / dist;
+
+                    const beatForce = be * params.beatStrength;
+                    vx += dx * beatForce;
+                    vy += dy * beatForce;
+                    vz += dz * beatForce;
+                }
+            }
+
+            // Update positions
+            x += vx;
+            y += vy;
+            z += vz;
+
+            // Slowing speed
+            vx *= 0.98;
+            vy *= 0.98;
+            vz *= 0.98;
+
+            // Radius control
+            const dist = Math.sqrt(x*x + y*y + z*z);
+            if (dist > params.sphereRadius) {
+                const overflow = dist - params.sphereRadius;
+                const pullback = overflow * 0.1;
+                if (dist > 0) {
+                    const dx = x / dist;
+                    const dy = y / dist;
+                    const dz = z / dist;
+                    x -= dx * pullback;
+                    y -= dy * pullback;
+                    z -= dz * pullback;
+                }
+                vx *= 0.9;
+                vy *= 0.9;
+                vz *= 0.9;
+            }
+
+            // Reset of dead particles
+            if (lt <= 0) {
+                const radius = THREE.MathUtils.lerp(0, params.sphereRadius, params.innerSphereRadius);
+                const theta = Math.random() * Math.PI * 2;
+                const phi = Math.acos(2 * Math.random() - 1);
+                const rr = Math.cbrt(Math.random()) * radius;
+
+                x = rr * Math.sin(phi) * Math.cos(theta);
+                y = rr * Math.sin(phi) * Math.sin(theta);
+                z = rr * Math.cos(phi);
+
+                vx = 0;
+                vy = 0;
+                vz = 0;
+
+                const newLt = Math.random() * params.particleLifetime;
+                lt = newLt;
+                maxLifetimes[i] = newLt;
+                be = 0;
+
+                basePositions[i3] = x;
+                basePositions[i3 + 1] = y;
+                basePositions[i3 + 2] = z;
+            }
+
+            positions[i3] = x;
+            positions[i3 + 1] = y;
+            positions[i3 + 2] = z;
+
+            velocities[i3] = vx;
+            velocities[i3 + 1] = vy;
+            velocities[i3 + 2] = vz;
+
+            lifetimes[i] = lt;
+            beatEffects[i] = be;
+        }
+
+        geometry.attributes.position.needsUpdate = true;
+
+        // Dyn rotation
+        const { volume: smoothVolume, shouldUpdate } = getSmoothVolume(
+            params, 
+            sphere.lastValidVolume, 
+            params.volumeChangeThreshold
+        );
+
+        if (shouldUpdate) {
+            const targetRotationSpeed = THREE.MathUtils.lerp(
+                params.rotationSpeedMin,
+                params.rotationSpeedMax,
+                smoothVolume
+            );
+            sphere.lastRotationSpeed = params.rotationSpeed + 
+                (targetRotationSpeed - params.rotationSpeed) * 
+                params.rotationSmoothness;
+        }
+
+        sphere.particleSystem.rotation.y += sphere.lastRotationSpeed;
+
+        // Saving volume
+        if (shouldUpdate) sphere.lastValidVolume = smoothVolume;
+    });
+
+    renderer.render(scene, camera);
+    updateTimeline();
+}
+
+window.addEventListener('resize', () => {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+});
+
+let controlsVisible = true; // Stav viditelnosti
+
+// Switching control elements
+function toggleControlsVisibility() {
+    controlsVisible = !controlsVisible;
+
+    const allControls = document.querySelectorAll(
+        '.controls-container, .dg.main, #audioControls, #presetContainer, #songSelect, #playPause, input[type="range"], button, select, input[type="text"]'
+    );
+
+    allControls.forEach(control => {
+        control.style.display = controlsVisible ? 'block' : 'none';
+    });
+}
+
+// Event listener on click
+document.addEventListener('click', (event) => {
+    const clickedElement = event.target;
+    if (!clickedElement.closest('.controls-container') && 
+        !clickedElement.closest('.dg.main') &&
+        !clickedElement.closest('#audioControls') &&
+        !clickedElement.closest('#presetContainer') &&
+        !clickedElement.closest('#songSelect') &&
+        !clickedElement.closest('#playPause') &&
+        !clickedElement.closest('input[type="range"]') &&
+        !clickedElement.closest('button') &&
+        !clickedElement.closest('select') &&
+        !clickedElement.closest('input[type="text"]')) {
+        toggleControlsVisibility();
+    }
+});
+
+document.querySelectorAll('.controls-container, .dg.main, #audioControls, #presetContainer').forEach(control => {
+    control.style.position = 'absolute';
+});
+
+console.log('Starting animation');
+initAudio();
+animate(0);

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "living-nexus",
+  "version": "1.0.0",
+  "description": "An interactive audio-visual artifact - Living Nexus",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  },
+  "dependencies": {
+    "@types/three": "^0.177.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.177.0",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "terser": "^5.43.1",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

public/songs/AntlerKing2.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c5f71cf80d76266758c8e9daa1c645f3a8d4e616ee969ed5068e7da9227802b2
+size 9168256

public/songs/Are_You_One_Of_Us.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dfb3215d515f7683b5760aee21e8c31471e559f6bbb53e582525416354d20e83
+size 7706176

public/songs/Barren_Sky.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ce3cc2374d939bd9e58fb7660f10d90b83fa6aed04b8b778b15bf2a2648f4842
+size 10041856

public/songs/Burn_For_You.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4a9f0faa4baf19ecb82a950d06d03bc3726ccb003e86dbc422fe386e957df928
+size 6928576

public/songs/Home.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ece72252597b084d127c44ea324297b10df3bdb093a09f63ca2a28f63ee6943f
+size 6928576

public/songs/Maybe.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bf8025a1531bbbe830073696b88f6dc733dc0374d9e44ca9e369dc44e0056ed4
+size 7638976

public/songs/Mountain.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d98b1d70d7f9f1635144775c7f7e9a8cf9f159c8a144857e79e2176d94272822
+size 5945536

public/songs/Senua.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a4920909303eacce7801a9843130f08703f4540ee81f7ed260c348e3642bdb5f
+size 11046016

public/songs/Unraveled.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eb7ca01646797b4be39248bf9a4e1a56258edfa9cc167c759873db593239fc21
+size 7420096

src/components/ConfigPanel.tsx

@@ -0,0 +1,403 @@
+import React, { useState, useEffect } from 'react'
+import configLoader from '../utils/configLoader'
+
+interface ConfigPanelProps {
+  visible: boolean
+  onToggle: () => void
+}
+
+export const ConfigPanel: React.FC<ConfigPanelProps> = ({ visible, onToggle }) => {
+  const [config, setConfig] = useState<any>(null)
+  const [activeSection, setActiveSection] = useState<string>('particles')
+  const [searchTerm, setSearchTerm] = useState<string>('')
+
+  useEffect(() => {
+    const loadConfig = async () => {
+      const loadedConfig = await configLoader.loadConfig()
+      setConfig(loadedConfig)
+    }
+    loadConfig()
+  }, [])
+
+  const updateConfig = (path: string, value: any) => {
+    if (!config) return
+
+    const pathArray = path.split('.')
+    const newConfig = { ...config }
+    let current = newConfig
+
+    // Navigate to the parent object
+    for (let i = 0; i < pathArray.length - 1; i++) {
+      current = current[pathArray[i]]
+    }
+
+    // Set the value
+    current[pathArray[pathArray.length - 1]] = value
+    setConfig(newConfig)
+
+    // Apply to configLoader (this would trigger re-render of visualizer)
+    configLoader['config'] = newConfig
+    console.log(`🔧 Config updated: ${path} = ${value}`)
+  }
+
+  const applyPreset = (presetName: string) => {
+    configLoader.applyPreset(presetName)
+    const newConfig = configLoader.getConfig()
+    setConfig(newConfig)
+    console.log(`🎨 Applied preset: ${presetName}`)
+  }
+
+  const exportConfig = () => {
+    if (!config) return
+    const configBlob = new Blob([JSON.stringify(config, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(configBlob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'visualizer-config.json'
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  const reloadConfig = async () => {
+    const newConfig = await configLoader.reloadConfig()
+    setConfig(newConfig)
+    console.log('🔄 Config reloaded from file')
+  }
+
+  const renderConfigSection = (sectionData: any, basePath: string = '') => {
+    if (!sectionData) return null
+
+    return Object.keys(sectionData).map(key => {
+      const value = sectionData[key]
+      const fullPath = basePath ? `${basePath}.${key}` : key
+      
+      // Filter by search term
+      if (searchTerm && !fullPath.toLowerCase().includes(searchTerm.toLowerCase()) && 
+          typeof value !== 'object') {
+        return null
+      }
+
+      if (typeof value === 'object' && !Array.isArray(value)) {
+        return (
+          <details key={fullPath} open={!basePath}>
+            <summary style={{ 
+              fontWeight: 'bold', 
+              marginBottom: '8px',
+              cursor: 'pointer',
+              color: '#FFD700'
+            }}>
+              {key}
+            </summary>
+            <div style={{ marginLeft: '16px', borderLeft: '1px solid rgba(255, 215, 0, 0.3)', paddingLeft: '12px' }}>
+              {renderConfigSection(value, fullPath)}
+            </div>
+          </details>
+        )
+      }
+
+      return (
+        <div key={fullPath} style={{ marginBottom: '8px' }}>
+          <label style={{ 
+            display: 'block', 
+            marginBottom: '4px', 
+            fontSize: '11px',
+            color: '#C9B037'
+          }}>
+            {key}: <span style={{ opacity: 0.7 }}>({typeof value})</span>
+          </label>
+          {typeof value === 'boolean' ? (
+            <input
+              type="checkbox"
+              checked={value}
+              onChange={(e) => updateConfig(fullPath, e.target.checked)}
+              style={{ marginBottom: '4px' }}
+            />
+          ) : typeof value === 'number' ? (
+            <input
+              type="number"
+              value={value}
+              onChange={(e) => updateConfig(fullPath, parseFloat(e.target.value) || 0)}
+              step={value < 1 ? 0.001 : value < 10 ? 0.1 : 1}
+              style={{
+                width: '100%',
+                padding: '4px',
+                background: 'rgba(0, 0, 0, 0.5)',
+                color: '#FFD700',
+                border: '1px solid rgba(255, 215, 0, 0.3)',
+                borderRadius: '3px',
+                fontSize: '10px'
+              }}
+            />
+          ) : typeof value === 'string' ? (
+            value.startsWith('#') ? (
+              <input
+                type="color"
+                value={value}
+                onChange={(e) => updateConfig(fullPath, e.target.value)}
+                style={{ width: '100%', height: '24px' }}
+              />
+            ) : (
+              <input
+                type="text"
+                value={value}
+                onChange={(e) => updateConfig(fullPath, e.target.value)}
+                style={{
+                  width: '100%',
+                  padding: '4px',
+                  background: 'rgba(0, 0, 0, 0.5)',
+                  color: '#FFD700',
+                  border: '1px solid rgba(255, 215, 0, 0.3)',
+                  borderRadius: '3px',
+                  fontSize: '10px'
+                }}
+              />
+            )
+          ) : Array.isArray(value) ? (
+            <textarea
+              value={JSON.stringify(value, null, 2)}
+              onChange={(e) => {
+                try {
+                  updateConfig(fullPath, JSON.parse(e.target.value))
+                } catch (err) {
+                  console.warn('Invalid JSON in array field:', err)
+                }
+              }}
+              rows={3}
+              style={{
+                width: '100%',
+                padding: '4px',
+                background: 'rgba(0, 0, 0, 0.5)',
+                color: '#FFD700',
+                border: '1px solid rgba(255, 215, 0, 0.3)',
+                borderRadius: '3px',
+                fontSize: '9px',
+                fontFamily: 'monospace'
+              }}
+            />
+          ) : (
+            <span style={{ fontSize: '10px', opacity: 0.7 }}>
+              Complex object - edit in JSON
+            </span>
+          )}
+        </div>
+      )
+    }).filter(Boolean)
+  }
+
+  if (!visible || !config) return null
+
+  const sections = [
+    { key: 'particles', label: 'Particles', data: config.visualization?.particles },
+    { key: 'spheres', label: 'Spheres', data: config.visualization?.spheres },
+    { key: 'physics', label: 'Physics', data: config.visualization?.physics },
+    { key: 'rotation', label: 'Rotation', data: config.visualization?.rotation },
+    { key: 'audio', label: 'Audio', data: config.audio },
+    { key: 'entronaut', label: 'Entronaut SEFA', data: config.entronaut },
+    { key: 'tendrils', label: 'Tendrils', data: config.tendrils },
+    { key: 'cymatics', label: 'Cymatics', data: config.cymatics },
+    { key: 'colors', label: 'Colors', data: config.colors },
+    { key: 'camera', label: 'Camera', data: config.camera },
+    { key: 'fog', label: 'Fog', data: config.fog },
+    { key: 'rendering', label: 'Rendering', data: config.rendering },
+    { key: 'performance', label: 'Performance', data: config.performance }
+  ]
+
+  return (
+    <>
+      {/* Toggle Button */}
+      <button
+        onClick={onToggle}
+        style={{
+          position: 'fixed',
+          top: '20px',
+          left: '20px',
+          zIndex: 10001,
+          background: 'rgba(0, 0, 0, 0.8)',
+          border: '1px solid rgba(255, 215, 0, 0.5)',
+          borderRadius: '4px',
+          color: '#FFD700',
+          padding: '8px 12px',
+          cursor: 'pointer',
+          fontSize: '12px',
+          fontFamily: 'Cinzel, serif'
+        }}
+        title="Toggle Config Panel"
+      >
+        ⚙️ Config
+      </button>
+
+      {/* Config Panel */}
+      <div
+        style={{
+          position: 'fixed',
+          top: '0',
+          left: '0',
+          width: '400px',
+          height: '100vh',
+          background: 'rgba(0, 0, 0, 0.95)',
+          color: '#FFD700',
+          fontFamily: 'Cinzel, serif',
+          zIndex: 10000,
+          overflowY: 'auto',
+          borderRight: '2px solid rgba(255, 215, 0, 0.3)',
+          backdropFilter: 'blur(10px)',
+          pointerEvents: 'auto'
+        }}
+        onMouseEnter={() => {
+          // Disable camera controls when mouse enters config panel
+          const event = new CustomEvent('disableCameraControls', { detail: true })
+          window.dispatchEvent(event)
+        }}
+        onMouseLeave={() => {
+          // Re-enable camera controls when mouse leaves config panel
+          const event = new CustomEvent('disableCameraControls', { detail: false })
+          window.dispatchEvent(event)
+        }}
+      >
+        <div style={{ padding: '20px' }}>
+          {/* Header */}
+          <div style={{ marginBottom: '20px' }}>
+            <h2 style={{ margin: '0 0 10px 0', fontSize: '18px' }}>
+              🛠️ Developer Config
+            </h2>
+            <div style={{ fontSize: '10px', opacity: 0.8, marginBottom: '15px' }}>
+              Live configuration editor
+            </div>
+
+            {/* Search */}
+            <input
+              type="text"
+              placeholder="Search parameters..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              style={{
+                width: '100%',
+                padding: '6px',
+                background: 'rgba(0, 0, 0, 0.5)',
+                color: '#FFD700',
+                border: '1px solid rgba(255, 215, 0, 0.3)',
+                borderRadius: '4px',
+                fontSize: '11px',
+                marginBottom: '15px'
+              }}
+            />
+
+            {/* Action Buttons */}
+            <div style={{ 
+              display: 'grid', 
+              gridTemplateColumns: '1fr 1fr', 
+              gap: '8px',
+              marginBottom: '15px'
+            }}>
+              <button
+                onClick={exportConfig}
+                style={{
+                  background: 'rgba(255, 215, 0, 0.2)',
+                  border: '1px solid rgba(255, 215, 0, 0.4)',
+                  color: '#FFD700',
+                  padding: '6px',
+                  borderRadius: '4px',
+                  fontSize: '10px',
+                  cursor: 'pointer'
+                }}
+              >
+                💾 Export
+              </button>
+              <button
+                onClick={reloadConfig}
+                style={{
+                  background: 'rgba(255, 215, 0, 0.2)',
+                  border: '1px solid rgba(255, 215, 0, 0.4)',
+                  color: '#FFD700',
+                  padding: '6px',
+                  borderRadius: '4px',
+                  fontSize: '10px',
+                  cursor: 'pointer'
+                }}
+              >
+                🔄 Reload
+              </button>
+            </div>
+
+            {/* Presets */}
+            {config.presets && Object.keys(config.presets).length > 0 && (
+              <div style={{ marginBottom: '15px' }}>
+                <div style={{ fontSize: '11px', marginBottom: '5px' }}>Presets:</div>
+                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '4px' }}>
+                  {Object.keys(config.presets).map(presetName => (
+                    <button
+                      key={presetName}
+                      onClick={() => applyPreset(presetName)}
+                      style={{
+                        background: 'rgba(255, 215, 0, 0.1)',
+                        border: '1px solid rgba(255, 215, 0, 0.3)',
+                        color: '#FFD700',
+                        padding: '4px',
+                        borderRadius: '3px',
+                        fontSize: '9px',
+                        cursor: 'pointer'
+                      }}
+                    >
+                      {presetName}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Section Tabs */}
+          <div style={{ 
+            display: 'flex', 
+            flexWrap: 'wrap', 
+            gap: '4px', 
+            marginBottom: '15px',
+            borderBottom: '1px solid rgba(255, 215, 0, 0.3)',
+            paddingBottom: '10px'
+          }}>
+            {sections.map(section => (
+              <button
+                key={section.key}
+                onClick={() => setActiveSection(section.key)}
+                style={{
+                  background: activeSection === section.key ? 'rgba(255, 215, 0, 0.3)' : 'rgba(255, 215, 0, 0.1)',
+                  border: '1px solid rgba(255, 215, 0, 0.4)',
+                  color: '#FFD700',
+                  padding: '4px 8px',
+                  borderRadius: '3px',
+                  fontSize: '9px',
+                  cursor: 'pointer'
+                }}
+              >
+                {section.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Active Section Content */}
+          <div style={{ fontSize: '11px' }}>
+            {(() => {
+              const activeData = sections.find(s => s.key === activeSection)?.data
+              if (!activeData) return <div>Section not found</div>
+              
+              return (
+                <div>
+                  <h3 style={{ 
+                    margin: '0 0 15px 0', 
+                    fontSize: '14px',
+                    color: '#FFD700',
+                    borderBottom: '1px solid rgba(255, 215, 0, 0.2)',
+                    paddingBottom: '5px'
+                  }}>
+                    {sections.find(s => s.key === activeSection)?.label}
+                  </h3>
+                  {renderConfigSection(activeData, `${activeSection === 'audio' || activeSection === 'entronaut' || activeSection === 'tendrils' || activeSection === 'cymatics' || activeSection === 'colors' || activeSection === 'camera' || activeSection === 'fog' || activeSection === 'rendering' || activeSection === 'performance' ? activeSection : `visualization.${activeSection}`}`)}
+                </div>
+              )
+            })()}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+} 

src/components/ControlPlinth.tsx

@@ -0,0 +1,681 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { useNexusStore } from '../store/nexusStore'
+import type { Track } from '../types/audio'
+
+interface AudioControls {
+  loadTrack: (track: Track) => Promise<void>
+  play: () => Promise<void>
+  pause: () => void
+  seekTo: (time: number) => void
+  setVolume: (volume: number) => void
+  getAudioElement?: () => HTMLAudioElement | null
+  getCurrentTime?: () => number
+  testAudioPlayback?: (url: string) => Promise<boolean>
+}
+
+interface ControlPlinthProps {
+  tracks: Track[]
+  audioControls: AudioControls
+}
+
+const ControlPlinth: React.FC<ControlPlinthProps> = ({ tracks, audioControls }) => {
+  const [isTestingAudio, setIsTestingAudio] = useState(false)
+  const [isDockCollapsed, setIsDockCollapsed] = useState(false)
+  const timelineRef = useRef<HTMLDivElement>(null)
+  
+  const {
+    playback,
+    autoPlayEnabled,
+    setIsPlaying,
+    setCurrentTrack,
+    setVolume,
+    setCurrentTime,
+    setAutoPlayEnabled,
+    getNextTrack,
+    getPreviousTrack
+  } = useNexusStore()
+
+  // Load initial track
+  useEffect(() => {
+    const loadInitialTrack = async () => {
+      if (tracks.length > 0 && !playback.currentTrack) {
+        try {
+          console.log('Loading initial track:', tracks[0].title)
+          
+          // Test basic audio playback first
+          if (audioControls.testAudioPlayback) {
+            setIsTestingAudio(true)
+            console.log('🧪 Running audio test...')
+            const canPlay = await audioControls.testAudioPlayback(tracks[0].url)
+            setIsTestingAudio(false)
+            
+            if (!canPlay) {
+              console.error('❌ Basic audio test failed - audio may not work')
+              return
+            }
+            console.log('✅ Basic audio test passed')
+          }
+          
+          setCurrentTrack(tracks[0])
+          await audioControls.loadTrack(tracks[0])
+          console.log('Initial track loaded successfully')
+        } catch (error) {
+          console.error('Failed to load initial track:', error)
+          setIsTestingAudio(false)
+        }
+      }
+    }
+
+    loadInitialTrack()
+  }, [tracks, playback.currentTrack, setCurrentTrack, audioControls])
+
+  const handlePlayPause = async () => {
+    if (!playback.currentTrack) {
+      console.log('No track selected, cannot play')
+      return
+    }
+
+    if (isTestingAudio) {
+      console.log('Audio test in progress, please wait...')
+      return
+    }
+
+    try {
+      if (playback.isPlaying) {
+        audioControls.pause()
+        setIsPlaying(false)
+      } else {
+        // Ensure track is loaded before playing
+        console.log('Starting playback for:', playback.currentTrack.title)
+        await audioControls.play()
+        setIsPlaying(true)
+      }
+    } catch (error) {
+      console.error('Playback control failed:', error)
+      setIsPlaying(false)
+    }
+  }
+
+  const handleTrackSelect = async (track: Track) => {
+    console.log('Selecting track:', track.title)
+    
+    try {
+      // Pause current track if playing
+      if (playback.isPlaying) {
+        audioControls.pause()
+        setIsPlaying(false)
+      }
+
+      // Update UI immediately
+      setCurrentTrack(track)
+
+      // Load the new track
+      console.log('Loading track:', track.title)
+      await audioControls.loadTrack(track)
+      console.log('Track loaded, starting playback')
+      
+      // Start playback
+      await audioControls.play()
+      setIsPlaying(true)
+    } catch (error) {
+      console.error('Track selection failed:', error)
+      setIsPlaying(false)
+    }
+  }
+
+  const handlePrevious = async () => {
+    const previousTrack = getPreviousTrack()
+    if (previousTrack) {
+      await handleTrackSelect(previousTrack)
+    }
+  }
+
+  const handleNext = async () => {
+    const nextTrack = getNextTrack()
+    if (nextTrack) {
+      await handleTrackSelect(nextTrack)
+    }
+  }
+
+  const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!timelineRef.current || !playback.currentTrack) return
+
+    const rect = timelineRef.current.getBoundingClientRect()
+    const clickX = e.clientX - rect.left
+    const percentage = clickX / rect.width
+    
+    // Get actual duration from audio controls
+    const audioElement = audioControls.getAudioElement?.()
+    const duration = audioElement?.duration || 0
+    
+    if (duration > 0) {
+      const newTime = percentage * duration
+      audioControls.seekTo(newTime)
+      setCurrentTime(newTime)
+    }
+  }
+
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const volume = parseFloat(e.target.value)
+    setVolume(volume)
+    audioControls.setVolume(volume)
+  }
+
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+
+  const getPlayPauseGlyph = () => {
+    return playback.isPlaying ? '‖' : '���'
+  }
+
+  const getCurrentProgress = (): number => {
+    // Get actual duration and current time
+    const audioElement = audioControls.getAudioElement?.()
+    const duration = audioElement?.duration || 0
+    const currentTime = audioControls.getCurrentTime?.() || playback.currentTime
+    
+    return duration > 0 ? (currentTime / duration) * 100 : 0
+  }
+
+  const getCurrentDuration = (): number => {
+    const audioElement = audioControls.getAudioElement?.()
+    return audioElement?.duration || 0
+  }
+
+  return (
+    <div 
+      className="control-plinth-dock" 
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        width: isDockCollapsed ? '50px' : '380px',
+        background: 'rgba(0, 0, 0, 0.95)',
+        border: '1px solid rgba(255, 215, 0, 0.3)',
+        borderLeft: 'none',
+        borderTopRightRadius: '8px',
+        borderBottomRightRadius: '8px',
+        backdropFilter: 'blur(15px)',
+        transition: 'all 0.3s ease-in-out',
+        zIndex: 1000,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'visible',
+        pointerEvents: 'auto'
+      }}
+      onMouseEnter={() => {
+        // Disable camera controls when mouse enters audio dock
+        const event = new CustomEvent('disableCameraControls', { detail: true })
+        window.dispatchEvent(event)
+      }}
+      onMouseLeave={() => {
+        // Re-enable camera controls when mouse leaves audio dock
+        const event = new CustomEvent('disableCameraControls', { detail: false })
+        window.dispatchEvent(event)
+      }}
+    >
+      {/* Dock Toggle Tab - Prominent and Always Visible */}
+      <div
+        style={{
+          position: 'absolute',
+          right: '-45px',
+          top: '50%',
+          transform: 'translateY(-50%)',
+          zIndex: 1003
+        }}
+      >
+        <button
+          onClick={() => setIsDockCollapsed(!isDockCollapsed)}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'scale(1.1)'
+            e.currentTarget.style.backgroundColor = 'rgba(255, 215, 0, 0.4)'
+            e.currentTarget.style.boxShadow = '0 0 20px rgba(255, 215, 0, 0.8)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'scale(1)'
+            e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.95)'
+            e.currentTarget.style.boxShadow = '2px 0 15px rgba(0, 0, 0, 0.7)'
+          }}
+          style={{
+            background: 'rgba(0, 0, 0, 0.95)',
+            border: '3px solid rgba(255, 215, 0, 0.6)',
+            borderRadius: '0 15px 15px 0',
+            borderLeft: 'none',
+            width: '45px',
+            height: '90px',
+            color: '#FFD700',
+            cursor: 'pointer',
+            fontSize: '22px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backdropFilter: 'blur(15px)',
+            transition: 'all 0.3s ease-in-out',
+            boxShadow: '2px 0 15px rgba(0, 0, 0, 0.7)',
+            fontWeight: 'bold',
+            outline: 'none'
+          }}
+          title={isDockCollapsed ? 'Expand Audio Player' : 'Collapse Audio Player'}
+        >
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '2px'
+          }}>
+            <div style={{ fontSize: '18px' }}>{isDockCollapsed ? '▶' : '◀'}</div>
+            <div style={{ 
+              fontSize: '8px', 
+              opacity: 0.8,
+              writingMode: 'vertical-rl',
+              textOrientation: 'mixed',
+              letterSpacing: '1px'
+            }}>
+              {isDockCollapsed ? 'EXPAND' : 'HIDE'}
+            </div>
+          </div>
+        </button>
+      </div>
+
+      {/* Collapsed State - Enhanced with Progress */}
+      {isDockCollapsed && (
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          padding: '20px 10px',
+          gap: '15px',
+          height: '100%',
+          justifyContent: 'center',
+          position: 'relative'
+        }}>
+          {/* Vertical Progress Indicator */}
+          <div style={{
+            position: 'absolute',
+            left: '5px',
+            top: '20px',
+            bottom: '20px',
+            width: '3px',
+            background: 'rgba(255, 215, 0, 0.3)',
+            borderRadius: '2px'
+          }}>
+            <div style={{
+              position: 'absolute',
+              bottom: 0,
+              width: '100%',
+              height: `${getCurrentProgress()}%`,
+              background: 'linear-gradient(to top, #FFD700, #FF6B35)',
+              borderRadius: '2px',
+              transition: 'height 0.1s ease'
+            }} />
+          </div>
+
+          <button 
+            className="central-glyph"
+            onClick={handlePlayPause}
+            disabled={!playback.currentTrack}
+            style={{
+              width: '40px',
+              height: '40px',
+              fontSize: '16px',
+              animation: playback.isPlaying ? 'glyphPulse 2s ease-in-out infinite' : 'none'
+            }}
+          >
+            {getPlayPauseGlyph()}
+          </button>
+          
+          {/* Volume Indicator */}
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '5px'
+          }}>
+            <div style={{
+              fontSize: '8px',
+              color: '#8B6914'
+            }}>
+              🔊
+            </div>
+            <div style={{
+              width: '2px',
+              height: '30px',
+              background: 'rgba(255, 215, 0, 0.3)',
+              borderRadius: '1px',
+              position: 'relative'
+            }}>
+              <div style={{
+                position: 'absolute',
+                bottom: 0,
+                width: '100%',
+                height: `${playback.volume * 100}%`,
+                background: '#FFD700',
+                borderRadius: '1px',
+                transition: 'height 0.2s ease'
+              }} />
+            </div>
+          </div>
+          
+          <div style={{
+            writingMode: 'vertical-rl',
+            textOrientation: 'mixed',
+            fontSize: '9px',
+            color: '#FFD700',
+            textAlign: 'center',
+            maxHeight: '150px',
+            overflow: 'hidden',
+            lineHeight: '1.2'
+          }}>
+            {playback.currentTrack?.title || 'No Track'}
+          </div>
+
+          {/* Track Position Indicator with Auto-play Status */}
+          {playback.currentTrack && (
+            <div style={{
+              fontSize: '8px',
+              color: '#8B6914',
+              textAlign: 'center',
+              transform: 'rotate(-90deg)',
+              whiteSpace: 'nowrap',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '4px'
+            }}>
+              <div>{tracks.findIndex(t => t.id === playback.currentTrack?.id) + 1}/{tracks.length}</div>
+              {autoPlayEnabled && (
+                <div style={{ 
+                  fontSize: '6px', 
+                  color: '#FFD700',
+                  opacity: 0.8
+                }}>
+                  AUTO
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Expanded State - Full Controls */}
+      {!isDockCollapsed && (
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          padding: '20px',
+          gap: '15px'
+        }}>
+          {/* Track Information Display */}
+          <div className="track-info" style={{
+            textAlign: 'center',
+            borderBottom: '1px solid rgba(255, 215, 0, 0.2)',
+            paddingBottom: '15px'
+          }}>
+            <div className="track-title" style={{
+              fontSize: '16px',
+              fontWeight: 600,
+              color: '#FFD700',
+              marginBottom: '4px'
+            }}>
+              {playback.currentTrack?.title || 'Select Track'}
+            </div>
+            <div className="track-artist" style={{
+              fontSize: '12px',
+              color: '#8B6914'
+            }}>
+              {playback.currentTrack?.artist || ''}
+            </div>
+          </div>
+
+          {/* Main Controls */}
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '15px'
+          }}>
+            {/* Transport Controls */}
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '10px'
+            }}>
+              <button 
+                className="plinth-control"
+                onClick={handlePrevious}
+                disabled={!playback.currentTrack}
+                style={{
+                  padding: '8px',
+                  fontSize: '14px'
+                }}
+              >
+                ◁
+              </button>
+
+              <button 
+                className="central-glyph"
+                onClick={handlePlayPause}
+                disabled={!playback.currentTrack}
+                style={{
+                  width: '50px',
+                  height: '50px',
+                  fontSize: '20px'
+                }}
+              >
+                {getPlayPauseGlyph()}
+              </button>
+
+              <button 
+                className="plinth-control"
+                onClick={handleNext}
+                disabled={!playback.currentTrack}
+                style={{
+                  padding: '8px',
+                  fontSize: '14px'
+                }}
+              >
+                ▷
+              </button>
+            </div>
+
+            {/* Timeline Scrubber */}
+            <div style={{ width: '100%' }}>
+              <div 
+                ref={timelineRef}
+                className="timeline-channel"
+                onClick={handleTimelineClick}
+                style={{
+                  width: '100%',
+                  height: '8px',
+                  margin: '0'
+                }}
+              >
+                <div 
+                  className="timeline-indicator"
+                  style={{ width: `${getCurrentProgress()}%` }}
+                />
+              </div>
+              
+              {/* Time Display */}
+              <div className="time-display" style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                gap: '8px',
+                fontSize: '10px',
+                color: '#8B6914',
+                marginTop: '5px'
+              }}>
+                <span>{formatTime(audioControls.getCurrentTime?.() || playback.currentTime)}</span>
+                <span>{formatTime(getCurrentDuration())}</span>
+              </div>
+            </div>
+
+            {/* Volume Control */}
+            <div className="volume-control" style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '8px',
+              width: '100%'
+            }}>
+              <label style={{ fontSize: '12px', color: '#FFD700' }}>Volume</label>
+              <input
+                type="range"
+                min="0"
+                max="1"
+                step="0.05"
+                value={playback.volume}
+                onChange={handleVolumeChange}
+                className="volume-slider"
+                style={{ width: '100%' }}
+              />
+            </div>
+
+            {/* Auto-play Control */}
+            <div className="autoplay-control" style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '8px',
+              width: '100%',
+              padding: '8px',
+              background: 'rgba(255, 215, 0, 0.1)',
+              border: '1px solid rgba(255, 215, 0, 0.3)',
+              borderRadius: '6px'
+            }}>
+              <label style={{ 
+                fontSize: '12px', 
+                color: '#FFD700',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '6px'
+              }}>
+                <input
+                  type="checkbox"
+                  checked={autoPlayEnabled}
+                  onChange={(e) => setAutoPlayEnabled(e.target.checked)}
+                  style={{
+                    transform: 'scale(1.2)',
+                    accentColor: '#FFD700'
+                  }}
+                />
+                Auto-play Album
+              </label>
+            </div>
+          </div>
+
+          {/* Track List - Extended Vertically */}
+          <div className="track-list-tablet" style={{
+            flex: 1,
+            background: 'rgba(0, 0, 0, 0.5)',
+            border: '1px solid rgba(255, 215, 0, 0.2)',
+            borderRadius: '6px',
+            padding: '15px',
+            marginTop: '15px',
+            overflow: 'hidden',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '300px', // Ensure minimum height for better track visibility
+            maxHeight: 'calc(100vh - 280px)' // Allow it to grow but leave space for controls
+          }}>
+            <div className="tablet-header" style={{
+              textAlign: 'center',
+              marginBottom: '10px',
+              paddingBottom: '8px',
+              borderBottom: '1px solid rgba(255, 215, 0, 0.3)'
+            }}>
+              <h3 style={{
+                margin: 0,
+                color: '#FFD700',
+                fontSize: '12px'
+              }}>Album Tracks</h3>
+            </div>
+            
+            <div className="track-list" style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '8px',
+              overflowY: 'auto',
+              overflowX: 'hidden',
+              flex: 1,
+              paddingRight: '8px' // Add padding for scrollbar
+            }}>
+              {tracks.map((track, index) => (
+                <div
+                  key={track.id}
+                  className={`track-item ${
+                    playback.currentTrack?.id === track.id ? 'active' : ''
+                  }`}
+                  onClick={() => handleTrackSelect(track)}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    padding: '10px 8px',
+                    borderRadius: '6px',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s ease',
+                    border: '1px solid transparent',
+                    background: playback.currentTrack?.id === track.id 
+                      ? 'linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(139, 105, 20, 0.3))' 
+                      : 'transparent',
+                    borderColor: playback.currentTrack?.id === track.id ? 'rgba(255, 215, 0, 0.4)' : 'transparent'
+                  }}
+                  onMouseEnter={(e) => {
+                    if (playback.currentTrack?.id !== track.id) {
+                      e.currentTarget.style.background = 'rgba(255, 215, 0, 0.1)'
+                      e.currentTarget.style.borderColor = 'rgba(255, 215, 0, 0.2)'
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (playback.currentTrack?.id !== track.id) {
+                      e.currentTarget.style.background = 'transparent'
+                      e.currentTarget.style.borderColor = 'transparent'
+                    }
+                  }}
+                >
+                                     <span className="track-number" style={{
+                     fontSize: '10px',
+                     color: playback.currentTrack?.id === track.id ? '#FFD700' : '#8B6914',
+                     minWidth: '20px',
+                     fontWeight: playback.currentTrack?.id === track.id ? 'bold' : 'normal'
+                   }}>
+                     {playback.currentTrack?.id === track.id && playback.isPlaying ? '◈' : (index + 1)}
+                   </span>
+                                     <div className="track-details" style={{ 
+                     flex: 1, 
+                     overflow: 'hidden',
+                     paddingRight: '5px'
+                   }}>
+                     <div className="track-name" style={{
+                       fontSize: '12px',
+                       color: playback.currentTrack?.id === track.id ? '#FFD700' : '#F5E6D3',
+                       marginBottom: '2px',
+                       whiteSpace: 'nowrap',
+                       overflow: 'hidden',
+                       textOverflow: 'ellipsis',
+                       fontWeight: playback.currentTrack?.id === track.id ? 'bold' : 'normal'
+                     }}>{track.title}</div>
+                     <div className="track-artist" style={{
+                       fontSize: '9px',
+                       color: '#8B6914',
+                       opacity: 0.8
+                     }}>{track.artist}</div>
+                   </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ControlPlinth 

src/components/LivingNexusApp.tsx

@@ -0,0 +1,293 @@
+import React, { useEffect, useRef, useCallback, useMemo } from 'react'
+import { useNexusStore } from '../store/nexusStore'
+import { AudioEngine } from '../engine/AudioEngine'
+import { WorldTreeVisualizer } from './WorldTreeVisualizer.tsx'
+import ControlPlinth from './ControlPlinth.tsx'
+import SocialGlyphs from './SocialGlyphs.tsx'
+import type { Track } from '../types/audio'
+
+const LivingNexusApp: React.FC = () => {
+  const audioEngineRef = useRef<AudioEngine | null>(null)
+  const lastTimeRef = useRef<number>(0)
+  
+  const {
+    isAudioInitialized,
+    playback,
+    interactionState,
+    autoPlayEnabled,
+    updateAudioData,
+    setCurrentTime,
+    setPlaybackState,
+    setCurrentTrack,
+    setIsPlaying,
+    initializeAudio,
+    getNextTrack
+  } = useNexusStore()
+
+  // The Living Nexus Album Tracks
+  const albumTracks: Track[] = useMemo(() => [
+    {
+      id: '1',
+      title: 'AntlerKing2',
+      artist: 'The Living Nexus',
+      url: '/songs/AntlerKing2.mp3'
+    },
+    {
+      id: '2',
+      title: 'Are You One Of Us?',
+      artist: 'The Living Nexus',
+      url: '/songs/Are_You_One_Of_Us.mp3'
+    },
+    {
+      id: '3',
+      title: 'Barren Sky',
+      artist: 'The Living Nexus',
+      url: '/songs/Barren_Sky.mp3'
+    },
+    {
+      id: '4',
+      title: 'Burn For You',
+      artist: 'The Living Nexus',
+      url: '/songs/Burn_For_You.mp3'
+    },
+    {
+      id: '5',
+      title: 'Home',
+      artist: 'The Living Nexus',
+      url: '/songs/Home.mp3'
+    },
+    {
+      id: '6',
+      title: 'Maybe',
+      artist: 'The Living Nexus',
+      url: '/songs/Maybe.mp3'
+    },
+    {
+      id: '7',
+      title: 'Mountain',
+      artist: 'The Living Nexus',
+      url: '/songs/Mountain.mp3'
+    },
+    {
+      id: '8',
+      title: 'Senua',
+      artist: 'The Living Nexus',
+      url: '/songs/Senua.mp3'
+    },
+    {
+      id: '9',
+      title: 'Unraveled',
+      artist: 'The Living Nexus',
+      url: '/songs/Unraveled.mp3'
+    }
+  ], [])
+
+  // Audio engine control methods - memoized to prevent re-renders
+  const audioControls = useMemo(() => ({
+    async loadTrack(track: Track) {
+      if (audioEngineRef.current) {
+        console.log('AudioControls: Loading track', track.title)
+        await audioEngineRef.current.loadTrack(track)
+      }
+    },
+
+    async play() {
+      if (audioEngineRef.current) {
+        console.log('AudioControls: Starting playback')
+        await audioEngineRef.current.play()
+      }
+    },
+
+    pause() {
+      if (audioEngineRef.current) {
+        console.log('AudioControls: Pausing playback')
+        audioEngineRef.current.pause()
+      }
+    },
+
+    seekTo(time: number) {
+      if (audioEngineRef.current) {
+        audioEngineRef.current.seekTo(time)
+      }
+    },
+
+    setVolume(volume: number) {
+      if (audioEngineRef.current) {
+        audioEngineRef.current.setVolume(volume)
+      }
+    },
+
+    getAudioElement() {
+      return audioEngineRef.current?.getAudioElement() || null
+    },
+
+    getCurrentTime() {
+      return audioEngineRef.current?.getCurrentTime() || 0
+    },
+
+    getDuration() {
+      return audioEngineRef.current?.getDuration() || 0
+    },
+
+    isPlaying() {
+      return audioEngineRef.current?.isPlaying() || false
+    },
+
+    async testAudioPlayback(url: string) {
+      if (audioEngineRef.current && audioEngineRef.current.testAudioPlayback) {
+        return await audioEngineRef.current.testAudioPlayback(url)
+      }
+      return false
+    }
+  }), [])
+
+  // Auto-play next track function
+  const handleAutoPlayNext = useCallback(async () => {
+    if (!autoPlayEnabled) {
+      console.log('🎵 Auto-play disabled, stopping playback')
+      setIsPlaying(false)
+      return
+    }
+
+    const nextTrack = getNextTrack()
+    if (nextTrack) {
+      console.log('🎵 Auto-playing next track:', nextTrack.title)
+      try {
+        setCurrentTrack(nextTrack)
+        await audioControls.loadTrack(nextTrack)
+        await audioControls.play()
+        setIsPlaying(true)
+      } catch (error) {
+        console.error('❌ Auto-play failed:', error)
+        setIsPlaying(false)
+      }
+    } else {
+      console.log('🎵 Reached end of album, stopping playback')
+      setIsPlaying(false)
+    }
+  }, [autoPlayEnabled, getNextTrack, audioControls, setCurrentTrack, setIsPlaying])
+
+  // Initialize tracks in store and set up auto-play
+  useEffect(() => {
+    // Initialize tracks in store
+    setPlaybackState({ tracks: albumTracks })
+    console.log('🎵 Initialized', albumTracks.length, 'tracks in store')
+  }, [albumTracks, setPlaybackState])
+
+  // Set up auto-play callback when audio engine is ready
+  useEffect(() => {
+    if (audioEngineRef.current && isAudioInitialized) {
+      audioEngineRef.current.setOnTrackEndedCallback(handleAutoPlayNext)
+      console.log('🎵 Auto-play callback registered')
+    }
+  }, [isAudioInitialized, handleAutoPlayNext])
+
+  // Initialize audio engine
+  useEffect(() => {
+    const initializeAudioEngine = async () => {
+      console.log('🎵 Initializing AudioEngine...')
+      try {
+        audioEngineRef.current = new AudioEngine()
+        await audioEngineRef.current.initialize()
+        initializeAudio()
+        console.log('🎵 Living Nexus audio initialized')
+      } catch (error) {
+        console.error('❌ Failed to initialize audio:', error)
+      }
+    }
+
+    // Only initialize once
+    if (!isAudioInitialized && !audioEngineRef.current) {
+      initializeAudioEngine()
+    }
+  }, [isAudioInitialized, initializeAudio])
+
+  // Cleanup only on unmount
+  useEffect(() => {
+    return () => {
+      if (audioEngineRef.current) {
+        audioEngineRef.current.cleanup()
+        audioEngineRef.current = null
+      }
+    }
+  }, [])
+
+  // Animation loop for audio analysis and visualization updates
+  useEffect(() => {
+    let animationId: number
+
+    const animate = (currentTime: number) => {
+      const deltaTime = lastTimeRef.current ? (currentTime - lastTimeRef.current) / 1000 : 0
+      lastTimeRef.current = currentTime
+
+      if (audioEngineRef.current) {
+        // Update beat manager if alive
+        if (interactionState.isAlive) {
+          audioEngineRef.current.updateBeatManager(deltaTime)
+        }
+        
+        // Always get audio data for visualization
+        const audioData = audioEngineRef.current.getAudioData()
+        updateAudioData(audioData)
+
+        // Update current time from actual audio element
+        if (playback.isPlaying && playback.currentTrack && audioEngineRef.current.getCurrentTime) {
+          const actualCurrentTime = audioEngineRef.current.getCurrentTime()
+          if (Math.abs(actualCurrentTime - playback.currentTime) > 0.5) {
+            setCurrentTime(actualCurrentTime)
+          }
+        }
+      }
+
+      animationId = requestAnimationFrame(animate)
+    }
+
+    // Start animation loop when audio is initialized
+    if (isAudioInitialized) {
+      animationId = requestAnimationFrame(animate)
+      
+      return () => {
+        if (animationId) {
+          cancelAnimationFrame(animationId)
+        }
+      }
+    }
+  }, [isAudioInitialized, interactionState.isAlive, playback.isPlaying, playback.currentTrack, updateAudioData, setCurrentTime])
+
+  // Determine the overall artifact state classes
+  const getArtifactClasses = useCallback(() => {
+    const classes = ['living-nexus-artifact']
+    
+    if (interactionState.isDormant) {
+      classes.push('dormant')
+    } else if (interactionState.isAwakening) {
+      classes.push('awakening')
+    } else if (interactionState.isAlive) {
+      classes.push('alive')
+    }
+    
+    return classes.join(' ')
+  }, [interactionState.isDormant, interactionState.isAwakening, interactionState.isAlive])
+
+  return (
+    <div className={getArtifactClasses()}>
+      {/* Main Visualization Container - Full Viewport */}
+      <div className="visualization-container">
+        <WorldTreeVisualizer audioEngine={audioEngineRef.current} />
+      </div>
+      
+      {/* Audio Player Interface - Fixed Bottom */}
+      <div className="audio-player-container">
+        <ControlPlinth 
+          tracks={albumTracks}
+          audioControls={audioControls}
+        />
+      </div>
+      
+      {/* Social Media Glyphs - Fixed Top */}
+      <SocialGlyphs />
+    </div>
+  )
+}
+
+export default LivingNexusApp 

src/components/SocialGlyphs.tsx

@@ -0,0 +1,175 @@
+import React, { useState } from 'react'
+import { useNexusStore } from '../store/nexusStore'
+
+const SocialGlyphs: React.FC = () => {
+  const [hoveredGlyph, setHoveredGlyph] = useState<string | null>(null)
+  const { socialLinks } = useNexusStore()
+
+  const handleGlyphClick = (url: string) => {
+    window.open(url, '_blank', 'noopener,noreferrer')
+  }
+
+  const getGlyphData = (platform: string) => {
+    switch (platform.toLowerCase()) {
+      case 'spotify':
+        return { icon: '◉', color: '#1DB954', label: 'Spotify' }
+      case 'apple music':
+        return { icon: '⚹', color: '#FA243C', label: 'Apple Music' }
+      case 'instagram':
+        return { icon: '⟡', color: '#E4405F', label: 'Instagram' }
+      case 'youtube':
+        return { icon: '◈', color: '#FF0000', label: 'YouTube' }
+      case 'twitter':
+        return { icon: '◊', color: '#1DA1F2', label: 'Twitter' }
+      case 'facebook':
+        return { icon: '⬢', color: '#1877F2', label: 'Facebook' }
+      case 'bandcamp':
+        return { icon: '♮', color: '#629AA0', label: 'Bandcamp' }
+      case 'soundcloud':
+        return { icon: '◊', color: '#FF8800', label: 'SoundCloud' }
+      case 'website':
+        return { icon: '⟐', color: '#FFD700', label: 'Website' }
+      case 'email':
+        return { icon: '✦', color: '#D14836', label: 'Email' }
+      default:
+        return { icon: '⟡', color: '#FFD700', label: platform }
+    }
+  }
+
+  return (
+    <div style={{
+      position: 'fixed',
+      top: '20px',
+      right: '20px',
+      zIndex: 1000,
+      display: 'flex',
+      gap: '10px',
+      padding: '10px 15px',
+      background: 'rgba(0, 0, 0, 0.8)',
+      borderRadius: '25px',
+      backdropFilter: 'blur(10px)',
+      border: '1px solid rgba(255, 215, 0, 0.2)',
+      fontFamily: 'Cinzel, serif'
+    }}>
+      {socialLinks.map((link) => {
+        const glyphData = getGlyphData(link.platform)
+        const isHovered = hoveredGlyph === link.id
+        
+        return (
+          <div
+            key={link.id}
+            onClick={() => handleGlyphClick(link.url)}
+            onMouseEnter={() => setHoveredGlyph(link.id)}
+            onMouseLeave={() => setHoveredGlyph(null)}
+            style={{
+              position: 'relative',
+              width: '35px',
+              height: '35px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: '50%',
+              background: isHovered 
+                ? `linear-gradient(135deg, ${glyphData.color}22, ${glyphData.color}44)`
+                : 'rgba(255, 215, 0, 0.1)',
+              border: `1px solid ${isHovered ? glyphData.color : 'rgba(255, 215, 0, 0.3)'}`,
+              cursor: 'pointer',
+              transition: 'all 0.3s ease-in-out',
+              transform: isHovered ? 'scale(1.1)' : 'scale(1)',
+              boxShadow: isHovered 
+                ? `0 4px 15px ${glyphData.color}33`
+                : '0 2px 8px rgba(0, 0, 0, 0.3)',
+              fontSize: '14px',
+              color: isHovered ? glyphData.color : '#FFD700'
+            }}
+          >
+            {glyphData.icon}
+            
+                         {/* Enhanced Tooltip */}
+             {isHovered && (
+               <div style={{
+                 position: 'absolute',
+                 top: '60px',
+                 left: '50%',
+                 transform: 'translateX(-50%)',
+                 background: 'rgba(0, 0, 0, 0.95)',
+                 color: glyphData.color,
+                 padding: '8px 12px',
+                 borderRadius: '8px',
+                 fontSize: '11px',
+                 fontWeight: 'bold',
+                 whiteSpace: 'nowrap',
+                 border: `1px solid ${glyphData.color}`,
+                 backdropFilter: 'blur(10px)',
+                 animation: 'fadeInDown 0.2s ease-out',
+                 boxShadow: `0 4px 15px ${glyphData.color}33`
+               }}>
+                 {glyphData.label}
+                 {/* Tooltip Arrow */}
+                 <div style={{
+                   position: 'absolute',
+                   bottom: '100%',
+                   left: '50%',
+                   transform: 'translateX(-50%)',
+                   width: 0,
+                   height: 0,
+                   borderLeft: '6px solid transparent',
+                   borderRight: '6px solid transparent',
+                   borderBottom: `6px solid ${glyphData.color}`
+                 }} />
+               </div>
+             )}
+            
+            {/* Pulsing Ring Effect for Music Platforms */}
+            {(link.platform.toLowerCase().includes('spotify') || 
+              link.platform.toLowerCase().includes('bandcamp') ||
+              link.platform.toLowerCase().includes('soundcloud')) && isHovered && (
+              <div style={{
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                borderRadius: '50%',
+                border: `2px solid ${glyphData.color}`,
+                animation: 'pulse 1.5s infinite',
+                pointerEvents: 'none'
+              }} />
+            )}
+          </div>
+        )
+      })}
+      
+      {/* Add CSS animations via style tag */}
+      <style>
+        {`
+          @keyframes fadeInDown {
+            from {
+              opacity: 0;
+              transform: translateX(-50%) translateY(-10px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(-50%) translateY(0);
+            }
+          }
+          
+          @keyframes pulse {
+            0% {
+              transform: scale(1);
+              opacity: 1;
+            }
+            50% {
+              transform: scale(1.2);
+              opacity: 0.5;
+            }
+            100% {
+              transform: scale(1.4);
+              opacity: 0;
+            }
+          }
+        `}
+      </style>
+    </div>
+  )
+}
+
+export default SocialGlyphs 

src/components/WorldTreeVisualizer.tsx

@@ -0,0 +1,2394 @@
+import React, { useRef, useEffect, useState, useCallback } from 'react'
+import { AudioEngine } from '../engine/AudioEngine'
+import { 
+  ParticleSystemParams, 
+  ParticleSphere, 
+  DEFAULT_FREQUENCY_RANGES, 
+  DEFAULT_SPHERE_PARAMS,
+  FogParams
+} from '../types/visualization'
+import { NoiseGenerator, BeatManager, generateNewNoiseScale } from '../utils/noise'
+import configLoader from '../utils/configLoader'
+
+interface WorldTreeVisualizerProps {
+  audioEngine: AudioEngine | null
+}
+
+// ENTRONAUT INTEGRATION: Symbolic Emergence Field Analysis
+interface EntronautState {
+  sefaScore: Float32Array
+  emergenceField: Float32Array
+  adaptiveParams: {
+    damping: Float32Array
+    diffusion: Float32Array
+    coupling: Float32Array
+  }
+  informationMetrics: {
+    complexity: number
+    emergence: number
+    coherence: number
+  }
+}
+
+// Advanced 3D Particle System Visualizer - Enhanced with Entronaut SEFA
+export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioEngine }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const animationRef = useRef<number>()
+  const lastTimeRef = useRef<number>(0)
+  
+  // Three.js core objects
+  const sceneRef = useRef<any>()
+  const rendererRef = useRef<any>()
+  const cameraRef = useRef<any>()
+  const controlsRef = useRef<any>()
+  
+  // Advanced visualization state
+  const spheresRef = useRef<ParticleSphere[]>([])
+  const noiseGeneratorRef = useRef<NoiseGenerator>()
+  const beatManagerRef = useRef<BeatManager>()
+  const tendrilSystemRef = useRef<any>()
+  const dysonSphereRef = useRef<any>()
+  
+  // ENTRONAUT: Symbolic emergence tracking
+  const entronautStateRef = useRef<EntronautState>()
+  
+  // State for UI controls
+  const [isVisualizationReady, setIsVisualizationReady] = useState(false)
+  const [activeSpheresCount, setActiveSpheresCount] = useState(5) // All spheres active by default
+  const [cymateGeometry, setCymateGeometry] = useState(true)
+  const [entronautEnabled, setEntronautEnabled] = useState(true)
+  const [adaptiveCoupling, setAdaptiveCoupling] = useState(true)
+  const [performanceMode, setPerformanceMode] = useState(false)
+  const [controlsCollapsed, setControlsCollapsed] = useState(true)
+  const [cameraControlsEnabled, setCameraControlsEnabled] = useState(true)
+  const [autoRotate, setAutoRotate] = useState(false)
+  const [aboutCollapsed, setAboutCollapsed] = useState(true)
+  const [tendrilsEnabled, setTendrilsEnabled] = useState(true)
+  const [tendrilDensity, setTendrilDensity] = useState(0.3)
+  const [dysonSphereEnabled, setDysonSphereEnabled] = useState(true)
+  const [vineGrowthRate, setVineGrowthRate] = useState(0.02)
+  const [vineComplexity, setVineComplexity] = useState(24)
+  const [fogParams, setFogParams] = useState<FogParams>({
+    enabled: true,
+    color: '#000000',
+    near: 2.7,
+    far: 3.7
+  })
+
+  // Store state (currently minimal, expanded as needed)
+  // const { playback } = useNexusStore()
+  
+  // Simplified performance monitoring - no complex optimizer
+  const [performanceStats, setPerformanceStats] = useState({
+    fps: 60,
+    particleCount: 0,
+    lastFpsUpdate: 0,
+    frameCount: 0
+  })
+
+  // ENTRONAUT: Initialize emergence field analysis - SIMPLIFIED for performance
+  const initializeEntronaut = useCallback(() => {
+    // Simplified - basic structure for UI display only
+    console.log('🧠 Entronaut SEFA system simplified for performance')
+    entronautStateRef.current = {
+      sefaScore: new Float32Array(0),
+      emergenceField: new Float32Array(0),
+      adaptiveParams: {
+        damping: new Float32Array(0),
+        diffusion: new Float32Array(0),
+        coupling: new Float32Array(0)
+      },
+      informationMetrics: {
+        complexity: 0,
+        emergence: 0,
+        coherence: 0
+      }
+    }
+  }, [])
+
+  // ENTRONAUT: Analyze audio - SIMPLIFIED
+  const analyzeSymbolicEmergence = useCallback((audioData: any, currentTime: number) => {
+    // Simplified - only basic metrics without complex calculations
+    if (!entronautStateRef.current || !entronautEnabled) return
+    
+    // Just update basic metrics without heavy computation
+    const { informationMetrics } = entronautStateRef.current
+    informationMetrics.complexity = audioData.overallAmplitude || 0
+    informationMetrics.emergence = audioData.beatDetected ? 1.0 : 0.1
+    informationMetrics.coherence = (audioData.deepEnergy + audioData.midEnergy + audioData.highEnergy) / 3.0
+    
+  }, [entronautEnabled])
+
+  // ENTRONAUT: Apply adaptive coupling - SIMPLIFIED
+  const applyEntronautCoupling = useCallback((sphere: ParticleSphere, particleIndex: number) => {
+    // Return simple defaults - no complex field calculations
+    return { damping: 0.95, diffusion: 0.008, coupling: 0.02 }
+  }, [])
+
+  // Initialize Three.js scene and particle systems
+  const initializeVisualization = useCallback(async () => {
+    if (!canvasRef.current) return
+
+    console.log('🎨 Initializing advanced particle visualization with Entronaut SEFA...')
+
+    try {
+      // Dynamically import Three.js
+      const THREE = await import('three')
+      
+      // Create scene
+      const scene = new THREE.Scene()
+      scene.background = new THREE.Color(0x000000)
+      sceneRef.current = scene
+
+      // Create camera
+      const camera = new THREE.PerspectiveCamera(
+        75, 
+        window.innerWidth / window.innerHeight, 
+        0.1, 
+        1000
+      )
+      camera.position.set(0, 0, 2.5)
+      cameraRef.current = camera
+
+      // Create renderer
+      const renderer = new THREE.WebGLRenderer({ 
+        canvas: canvasRef.current!,
+        antialias: true 
+      })
+      renderer.setSize(window.innerWidth, window.innerHeight)
+      rendererRef.current = renderer
+
+      // Initialize camera controls
+      const { OrbitControls } = await import('three/examples/jsm/controls/OrbitControls.js')
+      const controls = new OrbitControls(camera, renderer.domElement)
+      
+      // Configure controls
+      controls.enableDamping = true
+      controls.dampingFactor = 0.05
+      controls.enableZoom = true
+      controls.enablePan = true
+      controls.enableRotate = true
+      
+      // Set limits
+      controls.maxDistance = 50
+      controls.minDistance = 0.1
+      controls.maxPolarAngle = Math.PI // Allow full rotation
+      
+      // Auto-rotate settings
+      controls.autoRotate = autoRotate
+      controls.autoRotateSpeed = 0.5
+      
+      // Prevent controls from interfering with UI elements
+      controls.addEventListener('change', () => {
+        // Only update if camera controls are enabled
+        if (!cameraControlsEnabled) {
+          controls.enabled = false
+        }
+      })
+      
+      controlsRef.current = controls
+
+      // Initialize noise generator and beat manager
+      noiseGeneratorRef.current = new NoiseGenerator()
+      beatManagerRef.current = new BeatManager()
+
+      // Initialize Entronaut
+      initializeEntronaut()
+
+      // Create particle spheres
+      await createParticleSpheres(THREE, scene)
+
+      // Create dynamic tendril system
+      if (tendrilsEnabled) {
+        await createTendrilSystem(THREE, scene)
+      }
+
+      // Create Dyson sphere/growing vines system
+      if (dysonSphereEnabled) {
+        await createDysonSphere(THREE, scene)
+      }
+
+      // Setup fog
+      updateFog(THREE)
+
+      setIsVisualizationReady(true)
+      console.log('✅ Advanced particle visualization with Entronaut initialized')
+
+    } catch (error) {
+      console.error('❌ Failed to initialize visualization:', error)
+    }
+  }, [initializeEntronaut])
+
+  // Create multiple particle sphere systems
+  const createParticleSpheres = useCallback(async (THREE: any, scene: any) => {
+    const spheres: ParticleSphere[] = []
+
+    // Load organic color schemes from config
+    const config = configLoader.getConfig()
+    const configColorSchemes = (config as any)?.colors?.sphereColorSchemes
+
+    // Enhanced organic color schemes for each sphere
+    const colorSchemes = configColorSchemes || [
+      { start: '#2d5016', end: '#7d4f39' }, // Deep forest to iron oxide (sub-bass)
+      { start: '#8b5a2b', end: '#4a6741' }, // Earth brown to vine green (bass)
+      { start: '#cd853f', end: '#556b2f' }, // Sandy brown to moss green (mid)
+      { start: '#daa520', end: '#2e8b57' }, // Gold leaf to sea green (high-mid)
+      { start: '#b8860b', end: '#20b2aa' }  // Burnished gold to teal depth (high)
+    ]
+
+    for (let i = 0; i < 5; i++) {
+      const sphereParams: ParticleSystemParams = {
+        ...DEFAULT_SPHERE_PARAMS,
+        enabled: true, // All spheres enabled by default
+        ...DEFAULT_FREQUENCY_RANGES[i] || DEFAULT_FREQUENCY_RANGES[0],
+        colorStart: colorSchemes[i].start,
+        colorEnd: colorSchemes[i].end,
+        // Enhanced settings for organic, rich visuals
+        particleCount: 15000, // Increased for more density
+        turbulenceStrength: 0.006, // Reduced for more organic movement
+        beatStrength: 0.015, // Gentler beat response for organic feel
+        noiseScale: 2.5 + i * 0.3, // Smoother noise variation
+        sphereRadius: 1.0 + i * 0.06, // More subtle spatial variation
+        rotationSpeedMax: 0.04 + i * 0.006, // Slower, more organic rotation
+        particleLifetime: 12.0 + i * 2.0 // Longer lifetimes for stability
+      }
+
+      const sphere = await createParticleSphere(THREE, scene, i, sphereParams)
+      spheres.push(sphere)
+    }
+
+    spheresRef.current = spheres
+    console.log(`🔮 Created ${spheres.length} particle sphere systems`)
+  }, [])
+
+  // Create dynamic tendril system that connects particles
+  const createTendrilSystem = useCallback(async (THREE: any, scene: any) => {
+    if (!tendrilsEnabled) return
+
+    console.log('🌿 Creating dynamic tendril system...')
+    
+    // Create tendril network between particles
+    const maxTendrils = 2000 // Maximum number of tendrils
+    const maxTendrilLength = 0.8 // Maximum distance for tendril connections
+    const tendrilSegments = 8 // Segments per tendril for smooth curves
+    
+    // Create tendril geometry
+    const tendrilGeometry = new THREE.BufferGeometry()
+    const tendrilPositions = new Float32Array(maxTendrils * tendrilSegments * 6) // 2 points per segment
+    const tendrilColors = new Float32Array(maxTendrils * tendrilSegments * 6) // RGB for each point
+    const tendrilOpacities = new Float32Array(maxTendrils * tendrilSegments * 2) // Alpha for each point
+    
+    // Initialize with empty data
+    tendrilPositions.fill(0)
+    tendrilColors.fill(0.3) // Dim gold base
+    tendrilOpacities.fill(0)
+    
+    tendrilGeometry.setAttribute('position', new THREE.BufferAttribute(tendrilPositions, 3))
+    tendrilGeometry.setAttribute('color', new THREE.BufferAttribute(tendrilColors, 3))
+    tendrilGeometry.setAttribute('alpha', new THREE.BufferAttribute(tendrilOpacities, 1))
+    
+    // Create custom shader material for tendrils
+    const tendrilMaterial = new THREE.ShaderMaterial({
+      uniforms: {
+        time: { value: 0.0 },
+        sefaField: { value: 0.0 },
+        audioEnergy: { value: 0.0 }
+      },
+      vertexShader: `
+        attribute float alpha;
+        varying float vAlpha;
+        varying vec3 vColor;
+        uniform float time;
+        uniform float sefaField;
+        uniform float audioEnergy;
+        
+        void main() {
+          vAlpha = alpha * (0.3 + 0.7 * sin(time * 2.0 + position.x * 10.0));
+          vColor = color * (0.5 + 0.5 * audioEnergy);
+          
+          vec3 pos = position;
+          // Add SEFA-driven undulation
+          pos += 0.02 * sefaField * sin(time * 3.0 + position.y * 15.0) * normal;
+          
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+        }
+      `,
+      fragmentShader: `
+        varying float vAlpha;
+        varying vec3 vColor;
+        
+        void main() {
+          // Create glowing tendril effect
+          float glow = 1.0 - length(gl_PointCoord - vec2(0.5));
+          glow = pow(glow, 2.0);
+          
+          gl_FragColor = vec4(vColor, vAlpha * glow);
+        }
+      `,
+      transparent: true,
+      blending: THREE.AdditiveBlending,
+      side: THREE.DoubleSide
+    })
+    
+    // Create tendril line system
+    const tendrilLines = new THREE.LineSegments(tendrilGeometry, tendrilMaterial)
+    tendrilLines.userData = { type: 'tendrils' }
+    scene.add(tendrilLines)
+    
+    tendrilSystemRef.current = {
+      geometry: tendrilGeometry,
+      material: tendrilMaterial,
+      lines: tendrilLines,
+      positions: tendrilPositions,
+      colors: tendrilColors,
+      opacities: tendrilOpacities,
+      maxTendrils,
+      maxTendrilLength,
+      tendrilSegments,
+      lastUpdate: 0
+    }
+    
+    console.log('✅ Dynamic tendril system created')
+  }, [tendrilsEnabled])
+
+  // Create Dyson sphere/growing vines system
+  const createDysonSphere = useCallback(async (THREE: any, scene: any) => {
+    if (!dysonSphereEnabled) return
+
+    console.log('🌿 Creating Dyson sphere growing vines system...')
+    
+    const config = configLoader.getConfig()
+    const dysonConfig = (config as any)?.dysonSphere
+    const colors = (config as any)?.colors?.dysonVines
+    
+    if (!dysonConfig || !colors) {
+      console.warn('Dyson sphere configuration missing')
+      return
+    }
+    
+    // Initialize vine system
+    const maxVines = vineComplexity
+    const maxSegments = dysonConfig.vines.maxSegmentsPerVine
+    const sphereRadius = dysonConfig.vines.sphereRadius
+    
+    // Create vine geometry
+    const vineGeometry = new THREE.BufferGeometry()
+    const vinePositions = new Float32Array(maxVines * maxSegments * 6) // Line segments
+    const vineColors = new Float32Array(maxVines * maxSegments * 6)
+    const vineOpacities = new Float32Array(maxVines * maxSegments * 2)
+    
+    // Initialize with empty data
+    vinePositions.fill(0)
+    vineColors.fill(0)
+    vineOpacities.fill(0)
+    
+    vineGeometry.setAttribute('position', new THREE.BufferAttribute(vinePositions, 3))
+    vineGeometry.setAttribute('color', new THREE.BufferAttribute(vineColors, 3))
+    vineGeometry.setAttribute('alpha', new THREE.BufferAttribute(vineOpacities, 1))
+    
+    // Create node geometry for connection points
+    const nodeGeometry = new THREE.SphereGeometry(dysonConfig.nodes.nodeSize, 8, 6)
+    const nodeMaterial = new THREE.MeshBasicMaterial({
+      color: new THREE.Color(colors.nodeColor),
+      transparent: true,
+      opacity: 0.8
+    })
+    
+    // Create vine shader material
+    const vineMaterial = new THREE.ShaderMaterial({
+      uniforms: {
+        time: { value: 0.0 },
+        growthProgress: { value: 0.0 },
+        audioEnergy: { value: 0.0 },
+        emergenceField: { value: 0.0 },
+        vineGlow: { value: dysonConfig.visual.vineGlow },
+        primaryColor: { value: new THREE.Color(colors.primaryVine) },
+        secondaryColor: { value: new THREE.Color(colors.secondaryVine) },
+        highlightColor: { value: new THREE.Color(colors.vineHighlight) }
+      },
+      vertexShader: `
+        attribute float alpha;
+        varying float vAlpha;
+        varying vec3 vColor;
+        varying vec3 vPosition;
+        uniform float time;
+        uniform float growthProgress;
+        uniform float audioEnergy;
+        uniform vec3 primaryColor;
+        uniform vec3 secondaryColor;
+        uniform vec3 highlightColor;
+        
+        void main() {
+          vAlpha = alpha * (0.4 + 0.6 * sin(time * 2.0 + position.x * 8.0));
+          vPosition = position;
+          
+          // Organic color blending
+          float colorMix = sin(time * 1.5 + position.y * 6.0) * 0.5 + 0.5;
+          vColor = mix(primaryColor, secondaryColor, colorMix);
+          vColor = mix(vColor, highlightColor, audioEnergy * 0.3);
+          
+          vec3 pos = position;
+          // Add organic growth undulation
+          float growth = min(1.0, growthProgress + sin(time * 0.5) * 0.1);
+          pos *= growth;
+          
+          // Audio-reactive pulsing
+          pos += 0.01 * audioEnergy * sin(time * 4.0 + length(position) * 12.0) * normalize(position);
+          
+          gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
+        }
+      `,
+      fragmentShader: `
+        varying float vAlpha;
+        varying vec3 vColor;
+        varying vec3 vPosition;
+        uniform float vineGlow;
+        
+        void main() {
+          // Distance-based glow effect
+          float dist = length(vPosition);
+          float glow = 1.0 / (1.0 + dist * 2.0);
+          glow = pow(glow, vineGlow);
+          
+          // Organic pulsing opacity
+          float pulse = sin(dist * 8.0 - time * 3.0) * 0.3 + 0.7;
+          
+          gl_FragColor = vec4(vColor * glow, vAlpha * pulse);
+        }
+      `,
+      transparent: true,
+      blending: THREE.AdditiveBlending,
+      side: THREE.DoubleSide
+    })
+    
+    // Create vine line system
+    const vineLines = new THREE.LineSegments(vineGeometry, vineMaterial)
+    vineLines.userData = { type: 'dysonVines' }
+    scene.add(vineLines)
+    
+    // Create node instances
+    const nodeInstances = []
+    for (let i = 0; i < dysonConfig.nodes.nodeCount; i++) {
+      const node = new THREE.Mesh(nodeGeometry, nodeMaterial.clone())
+      node.userData = { type: 'dysonNode', index: i }
+      scene.add(node)
+      nodeInstances.push(node)
+    }
+    
+    // Initialize vine growth data
+    const vineData = {
+      vines: [] as any[],
+      growthProgress: 0,
+      lastUpdate: 0
+    }
+    
+    // Create initial vine seeds
+    for (let i = 0; i < dysonConfig.growth.seedPoints; i++) {
+      const theta = (i / dysonConfig.growth.seedPoints) * Math.PI * 2
+      const phi = Math.acos(2 * Math.random() - 1)
+      
+      const startPos = {
+        x: sphereRadius * Math.sin(phi) * Math.cos(theta),
+        y: sphereRadius * Math.sin(phi) * Math.sin(theta),
+        z: sphereRadius * Math.cos(phi)
+      }
+      
+      vineData.vines.push({
+        segments: [startPos],
+        growth: 0,
+        direction: { x: Math.random() - 0.5, y: Math.random() - 0.5, z: Math.random() - 0.5 },
+        branches: [],
+        maturity: 0,
+        energy: Math.random()
+      })
+    }
+    
+    dysonSphereRef.current = {
+      vineGeometry,
+      vineMaterial,
+      vineLines,
+      nodeGeometry,
+      nodeInstances,
+      vinePositions,
+      vineColors,
+      vineOpacities,
+      vineData,
+      maxVines,
+      maxSegments,
+      sphereRadius,
+      lastUpdate: 0,
+      config: dysonConfig,
+      colors
+    }
+    
+    console.log('✅ Dyson sphere growing vines system created')
+  }, [dysonSphereEnabled, vineComplexity])
+
+  // Create individual particle sphere
+  const createParticleSphere = async (
+    THREE: any, 
+    scene: any, 
+    index: number, 
+    params: ParticleSystemParams
+  ): Promise<ParticleSphere> => {
+    
+    // Create geometry and buffers
+    const geometry = new THREE.BufferGeometry()
+    const positions = new Float32Array(params.particleCount * 3)
+    const colors = new Float32Array(params.particleCount * 3)
+    const velocities = new Float32Array(params.particleCount * 3)
+    const basePositions = new Float32Array(params.particleCount * 3)
+    const lifetimes = new Float32Array(params.particleCount)
+    const maxLifetimes = new Float32Array(params.particleCount)
+    const beatEffects = new Float32Array(params.particleCount)
+
+    // Initialize particles
+    for (let i = 0; i < params.particleCount; i++) {
+      const i3 = i * 3
+      const radius = THREE.MathUtils.lerp(0, params.sphereRadius, params.innerSphereRadius)
+      const theta = Math.random() * Math.PI * 2
+      const phi = Math.acos(2 * Math.random() - 1)
+      const r = Math.cbrt(Math.random()) * radius
+
+      const x = r * Math.sin(phi) * Math.cos(theta)
+      const y = r * Math.sin(phi) * Math.sin(theta)
+      const z = r * Math.cos(phi)
+
+      positions[i3] = x
+      positions[i3 + 1] = y
+      positions[i3 + 2] = z
+
+      basePositions[i3] = x
+      basePositions[i3 + 1] = y
+      basePositions[i3 + 2] = z
+
+      velocities[i3] = 0
+      velocities[i3 + 1] = 0
+      velocities[i3 + 2] = 0
+
+      const lt = Math.random() * params.particleLifetime
+      lifetimes[i] = lt
+      maxLifetimes[i] = lt
+      beatEffects[i] = 0
+    }
+
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
+    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
+
+    // Create material with organic styling
+    const material = new THREE.PointsMaterial({
+      size: params.particleSize * (0.8 + index * 0.05), // Subtle size variation per sphere
+      vertexColors: true,
+      transparent: true,
+      opacity: 0.85 - index * 0.05, // Decreasing opacity for depth
+      blending: THREE.AdditiveBlending,
+      fog: true,
+      sizeAttenuation: true // Natural size falloff with distance
+    })
+
+    // Create particle system
+    const particleSystem = new THREE.Points(geometry, material)
+    particleSystem.visible = params.enabled
+    particleSystem.userData = { sphereIndex: index }  // Critical: Link to sphere
+    scene.add(particleSystem)
+
+    // Create sphere object
+    const sphere: ParticleSphere = {
+      index,
+      params,
+      positions,
+      velocities,
+      basePositions,
+      lifetimes,
+      maxLifetimes,
+      beatEffects,
+      colors,
+      lastNoiseScale: params.noiseScale,
+      lastValidVolume: 0,
+      lastRotationSpeed: 0,
+      peakDetection: {
+        energyHistory: [],
+        historyLength: 30,
+        lastPeakTime: 0,
+        minTimeBetweenPeaks: 200
+      }
+    }
+
+    // Update colors
+    updateSphereColors(THREE, sphere)
+
+    return sphere
+  }
+
+  // Update sphere colors with organic palette blending
+  const updateSphereColors = (THREE: any, sphere: ParticleSphere) => {
+    const color1 = new THREE.Color(sphere.params.colorStart)
+    const color2 = new THREE.Color(sphere.params.colorEnd)
+    
+    // Load organic palette for enhanced blending
+    const config = configLoader.getConfig()
+    const organicPalette = (config as any)?.colors?.organicPalette
+    
+    for (let i = 0; i < sphere.params.particleCount; i++) {
+      const t = i / sphere.params.particleCount
+      
+      // Base color interpolation
+      let r = color1.r * (1 - t) + color2.r * t
+      let g = color1.g * (1 - t) + color2.g * t
+      let b = color1.b * (1 - t) + color2.b * t
+      
+      // Apply organic palette enhancement if available
+      if (organicPalette && entronautEnabled) {
+        const emergence = entronautStateRef.current?.informationMetrics?.emergence || 0
+        
+        // Blend with organic colors based on SEFA emergence
+        const organicInfluence = emergence * 0.3
+        
+        // Choose organic color based on frequency range
+        let organicColor
+        if (sphere.index === 0) { // Sub-bass -> deep forest/bronze
+          organicColor = hexToRgb(organicPalette.deepForest) || { r: 0.18, g: 0.31, b: 0.09 }
+        } else if (sphere.index === 1) { // Bass -> earth brown/copper
+          organicColor = hexToRgb(organicPalette.earthBrown) || { r: 0.54, g: 0.27, b: 0.07 }
+        } else if (sphere.index === 2) { // Mid -> copper glow/gold
+          organicColor = hexToRgb(organicPalette.copperGlow) || { r: 0.72, g: 0.45, b: 0.20 }
+        } else if (sphere.index === 3) { // High-mid -> gold leaf/moss
+          organicColor = hexToRgb(organicPalette.goldLeaf) || { r: 0.85, g: 0.65, b: 0.13 }
+        } else { // High -> teal depth/amber
+          organicColor = hexToRgb(organicPalette.tealDepth) || { r: 0.13, g: 0.70, b: 0.67 }
+        }
+        
+        // Blend with organic color
+        r = r * (1 - organicInfluence) + organicColor.r * organicInfluence
+        g = g * (1 - organicInfluence) + organicColor.g * organicInfluence
+        b = b * (1 - organicInfluence) + organicColor.b * organicInfluence
+      }
+      
+      sphere.colors[i * 3] = r
+      sphere.colors[i * 3 + 1] = g
+      sphere.colors[i * 3 + 2] = b
+    }
+  }
+
+  // Update fog
+  const updateFog = (THREE: any) => {
+    if (!sceneRef.current) return
+
+    if (!fogParams.enabled) {
+      sceneRef.current.fog = null
+    } else {
+      const color = new THREE.Color(fogParams.color)
+      sceneRef.current.fog = new THREE.Fog(color, fogParams.near, fogParams.far)
+    }
+  }
+
+  // Main animation loop
+  const animate = useCallback((currentTime: number) => {
+    if (!isVisualizationReady || !rendererRef.current || !sceneRef.current || !cameraRef.current) {
+      animationRef.current = requestAnimationFrame(animate)
+      return
+    }
+
+    const deltaTime = lastTimeRef.current ? (currentTime - lastTimeRef.current) / 1000 : 0
+    lastTimeRef.current = currentTime
+
+    // Simple FPS monitoring - no complex optimization
+    setPerformanceStats(prev => {
+      const frameCount = prev.frameCount + 1
+      const timeSinceLastUpdate = currentTime - prev.lastFpsUpdate
+      
+      if (timeSinceLastUpdate > 1000) { // Update FPS every second
+        const fps = Math.round(frameCount * 1000 / timeSinceLastUpdate)
+        const totalParticles = spheresRef.current.reduce((sum, sphere) => 
+          sum + (sphere.params.enabled ? sphere.params.particleCount : 0), 0)
+        
+        return {
+          fps,
+          particleCount: totalParticles,
+          lastFpsUpdate: currentTime,
+          frameCount: 0
+        }
+      }
+      
+      return { ...prev, frameCount }
+    })
+
+    // Update camera controls
+    if (controlsRef.current) {
+      controlsRef.current.enabled = cameraControlsEnabled
+      controlsRef.current.autoRotate = autoRotate && cameraControlsEnabled
+      if (cameraControlsEnabled) {
+        controlsRef.current.update()
+      }
+    }
+
+    // Update beat manager
+    beatManagerRef.current?.update(deltaTime)
+
+    // ENTRONAUT: Analyze emergence patterns in audio data (reduced frequency for performance)
+    if (audioEngine && entronautEnabled && (Math.floor(currentTime * 0.01) % 3 === 0)) { // Run every 3rd frame
+      const audioData = audioEngine.getAudioData()
+      if (Math.random() < 0.005) { // Reduced logging frequency
+        console.log('🧠 SEFA Analysis - Audio Data:', {
+          deepEnergy: audioData.deepEnergy,
+          midEnergy: audioData.midEnergy,
+          highEnergy: audioData.highEnergy,
+          overallAmplitude: audioData.overallAmplitude,
+          beatDetected: audioData.beatDetected
+        })
+      }
+      analyzeSymbolicEmergence(audioData, currentTime)
+    }
+
+    // Update particle spheres
+    updateParticleSpheres(currentTime, deltaTime)
+
+    // Update dynamic tendrils
+    updateTendrilSystem(currentTime, deltaTime)
+
+    // Update Dyson sphere/growing vines
+    updateDysonSphere(currentTime, deltaTime)
+
+    // Render scene
+    rendererRef.current.render(sceneRef.current, cameraRef.current)
+    
+    animationRef.current = requestAnimationFrame(animate)
+  }, [isVisualizationReady, audioEngine, entronautEnabled, analyzeSymbolicEmergence])
+
+  // Update all particle spheres with inter-sphere communication
+  const updateParticleSpheres = (currentTime: number, deltaTime: number) => {
+    if (!audioEngine || !noiseGeneratorRef.current || !beatManagerRef.current) return
+
+    // Calculate global emergence state for inter-sphere communication
+    const globalEmergence = entronautStateRef.current ? 
+      entronautStateRef.current.informationMetrics.emergence : 0
+    const globalComplexity = entronautStateRef.current ? 
+      entronautStateRef.current.informationMetrics.complexity : 0
+
+    spheresRef.current.forEach((sphere, sphereIndex) => {
+      if (!sphere.params.enabled) return
+
+      // Get audio data for this sphere
+      const audioData = audioEngine.getAdvancedAudioData(sphere)
+      
+      // Add debug logging for the first sphere
+      if (sphere.index === 0 && Math.random() < 0.01) { // 1% chance to log
+        console.log('🎯 Audio data for sphere 0:', {
+          rangeEnergy: audioData.rangeEnergy,
+          rangeEnergyBeat: audioData.rangeEnergyBeat,
+          peakDetected: audioData.peakDetected,
+          beatThreshold: sphere.params.beatThreshold
+        })
+      }
+
+      // OPTIMIZED INTER-SPHERE COMMUNICATION (run less frequently)
+      if (entronautEnabled && adaptiveCoupling && (sphereIndex === 0 || Math.random() < 0.1)) {
+        // Simplified sphere influence with reduced frequency
+        let avgNoiseScale = 0
+        let activeNeighbors = 0
+        
+        spheresRef.current.forEach((otherSphere, otherIndex) => {
+          if (otherIndex !== sphereIndex && otherSphere.params.enabled) {
+            avgNoiseScale += otherSphere.params.noiseScale
+            activeNeighbors++
+          }
+        })
+        
+        if (activeNeighbors > 0) {
+          avgNoiseScale /= activeNeighbors
+          const networkInfluence = globalEmergence * 0.1 // Reduced influence
+          sphere.params.noiseScale = sphere.params.noiseScale * (1 - networkInfluence) + 
+                                   avgNoiseScale * networkInfluence
+        }
+        
+        // Simplified synchronization
+        const syncPulse = globalComplexity * 0.2
+        sphere.params.turbulenceStrength *= (1 + syncPulse)
+      }
+
+      // Handle peak detection and dynamic noise scaling
+      if (audioData.peakDetected && sphere.params.dynamicNoiseScale) {
+        sphere.params.noiseScale = generateNewNoiseScale(sphere.params, sphere.lastNoiseScale)
+        sphere.lastNoiseScale = sphere.params.noiseScale
+      }
+
+      // Beat detection and wave triggering
+      const beatDetected = audioData.rangeEnergyBeat > sphere.params.beatThreshold
+      if (beatDetected && !beatManagerRef.current!.isWaveActive && sphere.params.beatStrength > 0) {
+        beatManagerRef.current!.triggerWave(audioData.rangeEnergyBeat)
+      }
+
+      // Update particles
+      updateSphereParticles(sphere, currentTime, deltaTime, beatDetected)
+
+      // Update rotation based on audio
+      updateSphereRotation(sphere, audioData)
+    })
+  }
+
+  // Update dynamic tendril system with performance optimization
+  const updateTendrilSystem = (currentTime: number, _deltaTime: number) => {
+    if (!tendrilsEnabled || !tendrilSystemRef.current || !audioEngine || !entronautStateRef.current) return
+
+    // Performance optimization for tendril system
+    const adaptiveLevel = 1.0 // Simplified - no performance monitoring
+
+    const tendrilSystem = tendrilSystemRef.current
+    const { positions, colors, opacities, maxTendrils, maxTendrilLength, tendrilSegments } = tendrilSystem
+
+    // Update shader uniforms
+    const audioData = audioEngine.getAudioData()
+    const sefaMetrics = entronautStateRef.current.informationMetrics
+    
+    tendrilSystem.material.uniforms.time.value = currentTime * 0.001
+    tendrilSystem.material.uniforms.sefaField.value = sefaMetrics.emergence
+    tendrilSystem.material.uniforms.audioEnergy.value = audioData.overallAmplitude || 0
+
+    // Only update connections periodically for performance
+    if (currentTime - tendrilSystem.lastUpdate < 100) return // Update every 100ms
+    tendrilSystem.lastUpdate = currentTime
+
+    let tendrilIndex = 0
+    const performanceMultiplier = Math.max(0.2, adaptiveLevel) // Minimum 20% tendrils even at low performance
+    const activeTendrils = Math.floor(maxTendrils * tendrilDensity * performanceMultiplier * (0.5 + 0.5 * audioData.overallAmplitude))
+
+    // Reset all positions
+    positions.fill(0)
+    opacities.fill(0)
+
+    // Create connections between particles from different spheres
+    for (let sphereA = 0; sphereA < spheresRef.current.length && tendrilIndex < activeTendrils; sphereA++) {
+      const sphere1 = spheresRef.current[sphereA]
+      if (!sphere1.params.enabled) continue
+
+      for (let sphereB = sphereA + 1; sphereB < spheresRef.current.length && tendrilIndex < activeTendrils; sphereB++) {
+        const sphere2 = spheresRef.current[sphereB]
+        if (!sphere2.params.enabled) continue
+
+        // Sample particles from each sphere
+        const sampleCount = Math.min(10, Math.floor(sphere1.params.particleCount / 1000))
+        
+        for (let i = 0; i < sampleCount && tendrilIndex < activeTendrils; i++) {
+          const p1Index = Math.floor(Math.random() * sphere1.params.particleCount)
+          const p2Index = Math.floor(Math.random() * sphere2.params.particleCount)
+
+          const p1x = sphere1.positions[p1Index * 3]
+          const p1y = sphere1.positions[p1Index * 3 + 1]
+          const p1z = sphere1.positions[p1Index * 3 + 2]
+
+          const p2x = sphere2.positions[p2Index * 3]
+          const p2y = sphere2.positions[p2Index * 3 + 1]
+          const p2z = sphere2.positions[p2Index * 3 + 2]
+
+          const distance = Math.sqrt(
+            (p2x - p1x) ** 2 + (p2y - p1y) ** 2 + (p2z - p1z) ** 2
+          )
+
+          // Only create tendril if particles are within range
+          if (distance < maxTendrilLength) {
+            // Calculate SEFA influence on tendril strength
+            const fieldWidth = 32
+            const fieldX = Math.floor(((p1x + p2x) * 0.5 + 1) * 0.5 * fieldWidth)
+            const fieldY = Math.floor(((p1y + p2y) * 0.5 + 1) * 0.5 * fieldWidth)
+            const sefaIndex = Math.max(0, Math.min(
+              entronautStateRef.current.sefaScore.length - 1,
+              fieldY * fieldWidth + fieldX
+            ))
+            const sefaStrength = entronautStateRef.current.sefaScore[sefaIndex]
+
+            // Create curved tendril with multiple segments
+            for (let segment = 0; segment < tendrilSegments - 1; segment++) {
+              const t1 = segment / (tendrilSegments - 1)
+              const t2 = (segment + 1) / (tendrilSegments - 1)
+
+              // Calculate curved path with SEFA-driven undulation
+              const curve1 = getCurvedTendrilPoint(p1x, p1y, p1z, p2x, p2y, p2z, t1, currentTime, sefaStrength)
+              const curve2 = getCurvedTendrilPoint(p1x, p1y, p1z, p2x, p2y, p2z, t2, currentTime, sefaStrength)
+
+              const baseIndex = tendrilIndex * tendrilSegments * 6 + segment * 6
+
+              // Set positions for line segment
+              positions[baseIndex] = curve1.x
+              positions[baseIndex + 1] = curve1.y
+              positions[baseIndex + 2] = curve1.z
+              positions[baseIndex + 3] = curve2.x
+              positions[baseIndex + 4] = curve2.y
+              positions[baseIndex + 5] = curve2.z
+
+                        // Set colors based on frequency and SEFA with organic palette blending
+          const colorIntensity = 0.4 + 0.6 * sefaStrength // More subtle intensity range
+          const freq1Color = getFrequencyColor(sphere1.params.minFrequency, colorIntensity)
+          const freq2Color = getFrequencyColor(sphere2.params.minFrequency, colorIntensity)
+          
+          // Blend colors organically
+          const blendFactor = Math.sin(currentTime * 0.0008 + distance * 5) * 0.5 + 0.5
+          
+          colors[baseIndex] = freq1Color.r * (1 - blendFactor) + freq2Color.r * blendFactor
+          colors[baseIndex + 1] = freq1Color.g * (1 - blendFactor) + freq2Color.g * blendFactor
+          colors[baseIndex + 2] = freq1Color.b * (1 - blendFactor) + freq2Color.b * blendFactor
+          colors[baseIndex + 3] = freq2Color.r * (1 - blendFactor) + freq1Color.r * blendFactor
+          colors[baseIndex + 4] = freq2Color.g * (1 - blendFactor) + freq1Color.g * blendFactor
+          colors[baseIndex + 5] = freq2Color.b * (1 - blendFactor) + freq1Color.b * blendFactor
+
+              // Set opacity based on audio energy and distance
+              const opacity = (1 - distance / maxTendrilLength) * sefaStrength * audioData.overallAmplitude
+              const opacityIndex = tendrilIndex * tendrilSegments * 2 + segment * 2
+              opacities[opacityIndex] = opacity
+              opacities[opacityIndex + 1] = opacity
+            }
+
+            tendrilIndex++
+          }
+        }
+      }
+    }
+
+    // Mark geometry for update
+    tendrilSystem.geometry.attributes.position.needsUpdate = true
+    tendrilSystem.geometry.attributes.color.needsUpdate = true
+    tendrilSystem.geometry.attributes.alpha.needsUpdate = true
+  }
+
+  // Update Dyson sphere/growing vines system with performance optimization
+  const updateDysonSphere = (currentTime: number, deltaTime: number) => {
+    if (!dysonSphereEnabled || !dysonSphereRef.current || !audioEngine) return
+
+    // Performance optimization for Dyson sphere
+    // Simplified - no dynamic update frequency
+
+    const dysonSystem = dysonSphereRef.current
+    const { vineMaterial, vinePositions, vineColors, vineOpacities, vineData, config, colors } = dysonSystem
+
+    // Update shader uniforms
+    const audioData = audioEngine.getAudioData()
+    const sefaMetrics = entronautStateRef.current?.informationMetrics || { emergence: 0, complexity: 0 }
+    
+    vineMaterial.uniforms.time.value = currentTime * 0.001
+    vineMaterial.uniforms.audioEnergy.value = audioData.overallAmplitude || 0
+    vineMaterial.uniforms.emergenceField.value = sefaMetrics.emergence
+    vineMaterial.uniforms.growthProgress.value = vineData.growthProgress
+
+    // Only update vine growth periodically for performance
+    if (currentTime - dysonSystem.lastUpdate < 50) return // Update every 50ms
+    dysonSystem.lastUpdate = currentTime
+
+    // Update vine growth
+    vineData.growthProgress = Math.min(1.0, vineData.growthProgress + vineGrowthRate * deltaTime)
+
+    let vineIndex = 0
+    
+    // Reset all positions
+    vinePositions.fill(0)
+    vineOpacities.fill(0)
+
+    // Update each vine
+    vineData.vines.forEach((vine: any, vIndex: number) => {
+      if (vineIndex >= dysonSystem.maxVines) return
+
+      // Grow vine segments based on audio energy and SEFA
+      const audioInfluence = (audioData.overallAmplitude || 0) * config.vines.audioReactivity
+      const growthRate = config.vines.growthSpeed * (1 + audioInfluence) * vineData.growthProgress
+      
+      vine.growth += growthRate * deltaTime
+      vine.maturity = Math.min(1.0, vine.maturity + deltaTime / config.growth.maturityTime)
+
+      // Add new segments as vine grows
+      if (vine.growth > 1.0 && vine.segments.length < config.vines.maxSegmentsPerVine) {
+        vine.growth = 0
+        
+        const lastSegment = vine.segments[vine.segments.length - 1]
+        
+        // Calculate organic growth direction
+        const centerForce = {
+          x: -lastSegment.x * 0.1,
+          y: -lastSegment.y * 0.1,
+          z: -lastSegment.z * 0.1
+        }
+        
+        // Add curvature and organic variation
+        vine.direction.x += (Math.random() - 0.5) * config.vines.organicVariation + centerForce.x
+        vine.direction.y += (Math.random() - 0.5) * config.vines.organicVariation + centerForce.y
+        vine.direction.z += (Math.random() - 0.5) * config.vines.organicVariation + centerForce.z
+        
+        // Normalize direction
+        const dirLength = Math.sqrt(vine.direction.x ** 2 + vine.direction.y ** 2 + vine.direction.z ** 2)
+        if (dirLength > 0) {
+          vine.direction.x /= dirLength
+          vine.direction.y /= dirLength
+          vine.direction.z /= dirLength
+        }
+        
+        // Create new segment
+        const segmentLength = 0.1 + sefaMetrics.emergence * 0.05
+        const newSegment = {
+          x: lastSegment.x + vine.direction.x * segmentLength,
+          y: lastSegment.y + vine.direction.y * segmentLength,
+          z: lastSegment.z + vine.direction.z * segmentLength
+        }
+        
+        vine.segments.push(newSegment)
+        
+        // Update node positions
+        if (dysonSystem.nodeInstances[vIndex]) {
+          dysonSystem.nodeInstances[vIndex].position.set(newSegment.x, newSegment.y, newSegment.z)
+          
+          // Update node material based on audio
+          const nodeMat = dysonSystem.nodeInstances[vIndex].material as any
+          nodeMat.opacity = 0.5 + 0.5 * audioData.overallAmplitude
+          nodeMat.color.setHex(parseInt(colors.nodeColor.replace('#', ''), 16))
+        }
+      }
+
+      // Render vine segments
+      for (let i = 0; i < vine.segments.length - 1 && vineIndex < dysonSystem.maxVines; i++) {
+        const segment1 = vine.segments[i]
+        const segment2 = vine.segments[i + 1]
+        
+        const baseIndex = vineIndex * 6
+        
+        // Set positions for line segment
+        vinePositions[baseIndex] = segment1.x
+        vinePositions[baseIndex + 1] = segment1.y
+        vinePositions[baseIndex + 2] = segment1.z
+        vinePositions[baseIndex + 3] = segment2.x
+        vinePositions[baseIndex + 4] = segment2.y
+        vinePositions[baseIndex + 5] = segment2.z
+
+        // Set colors based on maturity and audio
+        const maturityColor = vine.maturity
+        const audioColor = audioData.overallAmplitude || 0
+        
+        const primaryColor = hexToRgb(colors.primaryVine)
+        const secondaryColor = hexToRgb(colors.secondaryVine)
+        const highlightColor = hexToRgb(colors.vineHighlight)
+        
+        if (primaryColor && secondaryColor && highlightColor) {
+          const blendedColor = {
+            r: primaryColor.r * (1 - maturityColor) + secondaryColor.r * maturityColor,
+            g: primaryColor.g * (1 - maturityColor) + secondaryColor.g * maturityColor,
+            b: primaryColor.b * (1 - maturityColor) + secondaryColor.b * maturityColor
+          }
+          
+          // Apply audio highlight
+          blendedColor.r = Math.min(1, blendedColor.r + highlightColor.r * audioColor * 0.3)
+          blendedColor.g = Math.min(1, blendedColor.g + highlightColor.g * audioColor * 0.3)
+          blendedColor.b = Math.min(1, blendedColor.b + highlightColor.b * audioColor * 0.3)
+          
+          vineColors[baseIndex] = blendedColor.r
+          vineColors[baseIndex + 1] = blendedColor.g
+          vineColors[baseIndex + 2] = blendedColor.b
+          vineColors[baseIndex + 3] = blendedColor.r
+          vineColors[baseIndex + 4] = blendedColor.g
+          vineColors[baseIndex + 5] = blendedColor.b
+        }
+
+        // Set opacity based on growth and audio
+        const opacity = vine.maturity * (0.6 + 0.4 * audioData.overallAmplitude)
+        const opacityIndex = vineIndex * 2
+        vineOpacities[opacityIndex] = opacity
+        vineOpacities[opacityIndex + 1] = opacity
+
+        vineIndex++
+      }
+    })
+
+    // Mark geometry for update
+    dysonSystem.vineGeometry.attributes.position.needsUpdate = true
+    dysonSystem.vineGeometry.attributes.color.needsUpdate = true
+    dysonSystem.vineGeometry.attributes.alpha.needsUpdate = true
+  }
+
+  // Helper function to convert hex color to RGB
+  const hexToRgb = (hex: string) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result ? {
+      r: parseInt(result[1], 16) / 255,
+      g: parseInt(result[2], 16) / 255,
+      b: parseInt(result[3], 16) / 255
+    } : null
+  }
+
+  // Helper function to create curved tendril points
+  const getCurvedTendrilPoint = (x1: number, y1: number, z1: number, x2: number, y2: number, z2: number, t: number, time: number, sefaStrength: number) => {
+    // Linear interpolation
+    const x = x1 + (x2 - x1) * t
+    const y = y1 + (y2 - y1) * t
+    const z = z1 + (z2 - z1) * t
+
+    // Add curvature and SEFA-driven undulation
+    const midPoint = t * (1 - t) * 4 // Peaks at t=0.5
+    const curve = midPoint * 0.2 * sefaStrength
+    const undulation = 0.05 * sefaStrength * Math.sin(time * 0.002 + t * 10)
+
+    return {
+      x: x + curve * Math.sin(time * 0.001 + t * 5) + undulation,
+      y: y + curve * Math.cos(time * 0.001 + t * 5) + undulation * 0.5,
+      z: z + curve * Math.sin(time * 0.0015 + t * 3) + undulation * 0.3
+    }
+  }
+
+  // Helper function to get frequency-based color with organic palette
+  const getFrequencyColor = (frequency: number, intensity: number) => {
+    const config = configLoader.getConfig()
+    const organicBlend = (config as any)?.colors?.tendrilColors?.organicBlend
+    
+    if (organicBlend) {
+      const normalizedFreq = Math.min(1, frequency / 10000)
+      
+      // Use organic color blending
+      let color
+      if (normalizedFreq < 0.2) {
+        color = organicBlend.forest // Deep greens for low frequencies
+      } else if (normalizedFreq < 0.4) {
+        color = organicBlend.bronze // Bronze for low-mid frequencies
+      } else if (normalizedFreq < 0.6) {
+        color = organicBlend.copper // Copper for mid frequencies
+      } else if (normalizedFreq < 0.8) {
+        color = organicBlend.gold // Gold for high-mid frequencies
+      } else {
+        color = organicBlend.teal // Teal for high frequencies
+      }
+      
+      return {
+        r: color[0] * intensity,
+        g: color[1] * intensity,
+        b: color[2] * intensity
+      }
+    }
+    
+    // Fallback to original calculation
+    const normalizedFreq = Math.min(1, frequency / 10000)
+    return {
+      r: (0.8 + 0.2 * normalizedFreq) * intensity,
+      g: (0.6 + 0.4 * Math.sin(normalizedFreq * Math.PI)) * intensity,
+      b: (0.2 + 0.8 * (1 - normalizedFreq)) * intensity
+    }
+  }
+
+  // Organic cymatic pattern generator - creates natural, sound-driven formations
+  const getCymatePattern = useCallback((x: number, y: number, z: number, frequency: number, time: number) => {
+    // Create organic patterns inspired by natural growth and cymatics
+    const r = Math.sqrt(x*x + y*y + z*z)
+    const theta = Math.atan2(y, x)
+    const phi = Math.acos(z / (r || 1))
+    
+    // Frequency-based pattern selection with organic variation
+    const freqFactor = frequency / 1000
+    const pattern = Math.floor(freqFactor) % 5 // Added 5th pattern
+    
+    let patternX = 0, patternY = 0, patternZ = 0
+    
+    // Load config for cymatic pattern settings
+    const config = configLoader.getConfig()
+    const cymateConfig = (config as any)?.cymatics?.patterns
+    
+    switch (pattern) {
+      case 0: // Organic radial waves (tree rings, water ripples)
+        const radialFreq = cymateConfig?.radialWaves?.frequencyFactor || 0.08
+        const radialPetals = cymateConfig?.radialWaves?.petalCount || 6
+        const radialPattern = Math.sin(r * radialFreq + time * 0.8) * Math.cos(theta * radialPetals + time * 0.3)
+        patternX = radialPattern * Math.cos(theta) * 0.7
+        patternY = radialPattern * Math.sin(theta) * 0.7
+        patternZ = Math.sin(phi * 3 + time * 0.4) * (cymateConfig?.radialWaves?.amplitudeZ || 0.4)
+        break
+        
+      case 1: // Natural spiral harmonics (nautilus, plant growth)
+        const l = Math.max(1, Math.floor(freqFactor * 0.4) + 1)
+        const m = Math.floor(freqFactor * 0.25)
+        const spiralFactor = 1 + 0.3 * Math.sin(time * 0.6)
+        patternX = Math.sin(l * phi * spiralFactor) * Math.cos(m * theta + time * 0.7)
+        patternY = Math.sin(l * phi * spiralFactor) * Math.sin(m * theta + time * 0.7)
+        patternZ = Math.cos(l * phi) * Math.sin(time * 1.2) * 0.6
+        break
+        
+      case 2: // Organic lattice (honeycomb, crystal growth)
+        const latticeFreq = cymateConfig?.geometricLattice?.frequencyFactor || 0.15
+        const organic = 0.8 + 0.2 * Math.sin(time * 0.5)
+        patternX = (Math.sin(x * latticeFreq + time * 0.6) + Math.sin(y * latticeFreq * 1.1)) * organic
+        patternY = (Math.sin(y * latticeFreq + time * 0.8) + Math.sin(z * latticeFreq * 0.9)) * organic
+        patternZ = (Math.sin(z * latticeFreq + time * 0.7) + Math.sin(x * latticeFreq * 1.05)) * organic
+        break
+        
+      case 3: // Enhanced flower of life (sacred geometry)
+        const flowerFreq = cymateConfig?.flowerOfLife?.frequencyFactor || 0.12
+        const basePetals = cymateConfig?.flowerOfLife?.basePetals || 6
+        const petalVariation = cymateConfig?.flowerOfLife?.petalVariation || 0.1
+        const flowerPetals = basePetals + Math.floor(freqFactor * petalVariation * 10)
+        const bloom = 0.7 + 0.3 * Math.sin(time * 0.4)
+        patternX = Math.sin(theta * flowerPetals + time * 0.5) * Math.sin(r * flowerFreq) * bloom
+        patternY = Math.cos(theta * flowerPetals + time * 0.5) * Math.sin(r * flowerFreq) * bloom
+        patternZ = Math.sin(phi * flowerPetals * 0.7 + time * 0.6) * (cymateConfig?.flowerOfLife?.amplitudeZ || 0.25)
+        break
+        
+      case 4: // New: Organic vine growth pattern
+        const vineFreq = freqFactor * 0.1
+        const vineSpiral = theta + r * 0.5 + time * 0.3
+        const growth = 0.6 + 0.4 * Math.sin(time * 0.35)
+        patternX = Math.sin(vineSpiral) * Math.exp(-r * 0.2) * growth
+        patternY = Math.cos(vineSpiral) * Math.exp(-r * 0.2) * growth
+        patternZ = Math.sin(r * vineFreq + time * 0.5) * 0.4 * growth
+        break
+    }
+    
+    // Organic breathing effect with natural variation
+    const breathing = cymateConfig?.breathing
+    const breathingSpeed = breathing?.speed || 0.4
+    const intensityBase = breathing?.intensityBase || 0.25
+    const intensityVariation = breathing?.intensityVariation || 0.6
+    
+    const intensity = intensityBase + intensityVariation * Math.sin(time * breathingSpeed) * 
+                     (0.8 + 0.2 * Math.sin(time * breathingSpeed * 0.7)) // Natural variation
+    
+    return {
+      x: patternX * intensity,
+      y: patternY * intensity,
+      z: patternZ * intensity
+    }
+  }, [cymateGeometry])
+
+  // Update individual sphere particles with performance optimization
+  const updateSphereParticles = (
+    sphere: ParticleSphere, 
+    currentTime: number, 
+    deltaTime: number, 
+    beatDetected: boolean
+  ) => {
+    const { params, positions, velocities, lifetimes, beatEffects } = sphere
+    const noise = noiseGeneratorRef.current!
+    const beatManager = beatManagerRef.current!
+    
+    // Performance optimization: Skip heavy calculations if needed
+    const adaptiveLevel = 1.0 // Simplified - no performance monitoring
+    
+    // Frame skipping for low performance - simplified
+
+    // STABILITY: Clamp deltaTime to prevent integration instability
+    const clampedDeltaTime = Math.min(deltaTime, 1/30) // Max 30 FPS equivalent timestep
+    const config = configLoader.getConfig()
+    const maxVelocity = config?.visualization?.physics?.maxVelocity || 0.1
+    const stabilityThreshold = config?.visualization?.physics?.stabilityThreshold || 10.0
+
+    // Adaptive particle count based on performance
+    const adaptiveParticleCount = Math.min(params.particleCount, 
+      adaptiveLevel * 15000) // Simplified - no dynamic particle count
+    
+    // Level of detail calculation
+    const particleUpdateStep = Math.max(1, Math.floor(1 / adaptiveLevel))
+    
+    for (let i = 0; i < adaptiveParticleCount; i += particleUpdateStep) {
+      const i3 = i * 3
+
+      let x = positions[i3]
+      let y = positions[i3 + 1]
+      let z = positions[i3 + 2]
+
+      let vx = velocities[i3]
+      let vy = velocities[i3 + 1]
+      let vz = velocities[i3 + 2]
+
+      let lt = lifetimes[i]
+      let be = beatEffects[i]
+
+      // STABILITY: Check for NaN or infinite values
+      if (!isFinite(x) || !isFinite(y) || !isFinite(z) || 
+          !isFinite(vx) || !isFinite(vy) || !isFinite(vz)) {
+        // Reset particle to safe position
+        const theta = Math.random() * Math.PI * 2
+        const phi = Math.acos(2 * Math.random() - 1)
+        const r = Math.cbrt(Math.random()) * params.sphereRadius * 0.5
+        
+        x = r * Math.sin(phi) * Math.cos(theta)
+        y = r * Math.sin(phi) * Math.sin(theta)
+        z = r * Math.cos(phi)
+        
+        vx = vy = vz = 0
+        console.warn(`🚨 Particle ${i} reset due to invalid values`)
+      }
+
+      // STABILITY: Check distance from origin - emergency containment
+      const distFromOrigin = Math.sqrt(x*x + y*y + z*z)
+      if (distFromOrigin > stabilityThreshold) {
+        // Pull particle back to safe zone
+        const pullFactor = 0.1
+        x *= pullFactor
+        y *= pullFactor
+        z *= pullFactor
+        vx *= 0.1 // Severe velocity damping
+        vy *= 0.1
+        vz *= 0.1
+        console.warn(`🚨 Particle ${i} emergency reset - distance: ${distFromOrigin.toFixed(2)}`)
+      }
+
+      // Update lifetime
+      lt -= clampedDeltaTime
+
+      // Apply noise-based turbulence with caching
+      const ns = params.noiseScale * adaptiveLevel // Scale noise with performance
+      const speed = params.noiseSpeed
+      const timeFactor = currentTime * 0.001
+      
+      // Calculate noise values directly - no caching overhead
+      const noiseValues = {
+        x: noise.noise3D(x * ns + timeFactor * speed, y * ns, z * ns),
+        y: noise.noise3D(x * ns, y * ns + timeFactor * speed, z * ns),
+        z: noise.noise3D(x * ns, y * ns, z * ns + timeFactor * speed)
+      }
+      
+      const noiseX = noiseValues.x
+      const noiseY = noiseValues.y
+      const noiseZ = noiseValues.z
+
+      // STABILITY: Scale turbulence by performance and distance
+      const performanceScale = Math.min(1.0, 60 * clampedDeltaTime) // Scale down for low FPS
+      const turbulenceScale = params.turbulenceStrength * performanceScale
+      
+      vx += noiseX * turbulenceScale
+      vy += noiseY * turbulenceScale
+      vz += noiseZ * turbulenceScale
+
+      // Apply beat effects
+      if (beatDetected) {
+        be = 1.0
+      }
+      be *= 0.95
+
+      if (be > 0.01) {
+        const dist = Math.sqrt(x*x + y*y + z*z)
+        if (dist > 0) {
+          const dx = x / dist
+          const dy = y / dist
+          const dz = z / dist
+
+          const beatForce = be * params.beatStrength
+          vx += dx * beatForce
+          vy += dy * beatForce
+          vz += dz * beatForce
+        }
+      }
+
+      // Apply wave forces
+      const waveForce = beatManager.getWaveForce({ x, y, z })
+      if (waveForce > 0) {
+        const dist = Math.sqrt(x*x + y*y + z*z)
+        if (dist > 0) {
+          const dx = x / dist
+          const dy = y / dist
+          const dz = z / dist
+
+          vx += dx * waveForce * 0.001
+          vy += dy * waveForce * 0.001
+          vz += dz * waveForce * 0.001
+        }
+      }
+
+      // Cymatic geometry patterns - sound-driven geometric formations with organic influence
+      if (cymateGeometry && audioEngine) {
+        const freq = sphere.params.minFrequency + 
+          (sphere.params.maxFrequency - sphere.params.minFrequency) * 0.5
+        
+        // Create geometric patterns based on frequency
+        const geometricPattern = getCymatePattern(x, y, z, freq, currentTime * 0.001)
+        
+        // Reduce intensity for more organic, subtle movement
+        const organicIntensity = 0.0015 * (0.8 + 0.2 * Math.sin(currentTime * 0.0005))
+        vx += geometricPattern.x * organicIntensity
+        vy += geometricPattern.y * organicIntensity  
+        vz += geometricPattern.z * organicIntensity
+      }
+
+      // Update positions
+      x += vx
+      y += vy
+      z += vz
+
+      // ENTRONAUT: Apply enhanced biomimetic coupling parameters
+      const entronautParams = applyEntronautCoupling(sphere, i)
+      
+      // Optimized living entity behavior: adaptive computational load
+      const entronautStep = Math.max(10, Math.floor(30 / adaptiveLevel)) // More aggressive stepping at low performance
+      if (entronautEnabled && adaptiveCoupling && (i % entronautStep === 0)) { // Adaptive step size
+        // Simplified flocking behavior with fewer neighbor checks
+        let avgVx = 0, avgVy = 0, avgVz = 0
+        let neighborCount = 0
+        const flockRadius = 0.25
+        
+        // Check only a few nearby particles for performance
+        for (let j = Math.max(0, i - 20); j < Math.min(params.particleCount, i + 20); j += 5) {
+          if (j === i) continue
+          const j3 = j * 3
+          const dx = positions[j3] - x
+          const dy = positions[j3 + 1] - y
+          const dz = positions[j3 + 2] - z
+          const distSq = dx*dx + dy*dy + dz*dz // Use squared distance to avoid sqrt
+          
+          if (distSq < flockRadius * flockRadius && distSq > 0) {
+            avgVx += velocities[j3]
+            avgVy += velocities[j3 + 1]
+            avgVz += velocities[j3 + 2]
+            neighborCount++
+          }
+        }
+        
+        if (neighborCount > 0) {
+          avgVx /= neighborCount
+          avgVy /= neighborCount
+          avgVz /= neighborCount
+          
+          // Apply simplified collective behavior
+          const flockInfluence = entronautParams.coupling * 0.2
+          vx += (avgVx - vx) * flockInfluence
+          vy += (avgVy - vy) * flockInfluence
+          vz += (avgVz - vz) * flockInfluence
+        }
+      }
+      
+      // Simplified metabolic pulsing for all particles
+      if (entronautEnabled && adaptiveCoupling) {
+        const metabolicPulse = entronautParams.diffusion * 0.5
+        vx += metabolicPulse * Math.cos(i * 0.01)
+        vy += metabolicPulse * Math.sin(i * 0.01)
+      }
+      
+      // STABILITY: Velocity clamping to prevent runaway particles
+      const velocity = Math.sqrt(vx*vx + vy*vy + vz*vz)
+      if (velocity > maxVelocity) {
+        const scale = maxVelocity / velocity
+        vx *= scale
+        vy *= scale
+        vz *= scale
+      }
+
+      // Apply adaptive drag/damping with living characteristics
+      const dampingFactor = entronautParams.damping
+      vx *= dampingFactor
+      vy *= dampingFactor
+      vz *= dampingFactor
+
+      // Enhanced containment system with progressive damping
+      const dist = Math.sqrt(x*x + y*y + z*z)
+      const sphereRadius = params.sphereRadius
+      
+      if (dist > sphereRadius) {
+        const overflow = dist - sphereRadius
+        const pullback = overflow * (config?.visualization?.physics?.emergencyDamping || 0.1)
+        
+        if (dist > 0) {
+          const dx = x / dist
+          const dy = y / dist
+          const dz = z / dist
+          
+          // Progressive pullback force
+          x -= dx * pullback
+          y -= dy * pullback
+          z -= dz * pullback
+          
+          // Stronger damping for particles outside bounds
+          const dampingStrength = Math.min(0.5, overflow / sphereRadius)
+          vx *= (1 - dampingStrength)
+          vy *= (1 - dampingStrength)
+          vz *= (1 - dampingStrength)
+        }
+      }
+      
+      // Soft containment - add inward force near boundaries
+      const boundaryZone = sphereRadius * 0.8
+      if (dist > boundaryZone && dist > 0) {
+        const boundaryForce = (dist - boundaryZone) / (sphereRadius - boundaryZone) * 0.001
+        const dx = x / dist
+        const dy = y / dist
+        const dz = z / dist
+        
+        vx -= dx * boundaryForce
+        vy -= dy * boundaryForce
+        vz -= dz * boundaryForce
+      }
+
+      // Respawn dead particles
+      if (lt <= 0) {
+        const radius = params.sphereRadius * params.innerSphereRadius
+        const theta = Math.random() * Math.PI * 2
+        const phi = Math.acos(2 * Math.random() - 1)
+        const r = Math.cbrt(Math.random()) * radius
+
+        x = r * Math.sin(phi) * Math.cos(theta)
+        y = r * Math.sin(phi) * Math.sin(theta)
+        z = r * Math.cos(phi)
+
+        vx = 0
+        vy = 0
+        vz = 0
+
+        lt = Math.random() * params.particleLifetime
+        be = 0
+      }
+
+      // Update arrays
+      positions[i3] = x
+      positions[i3 + 1] = y
+      positions[i3 + 2] = z
+
+      velocities[i3] = vx
+      velocities[i3 + 1] = vy
+      velocities[i3 + 2] = vz
+
+      lifetimes[i] = lt
+      beatEffects[i] = be
+    }
+
+    // Mark geometry for update
+    if (sceneRef.current) {
+      const particleSystem = sceneRef.current.children.find((child: any) => 
+        child.userData?.sphereIndex === sphere.index
+      ) as any
+      if (particleSystem?.geometry) {
+        particleSystem.geometry.attributes.position.needsUpdate = true
+      }
+    }
+  }
+
+  // Update sphere rotation based on audio
+  const updateSphereRotation = (sphere: ParticleSphere, _audioData: any) => {
+    if (!audioEngine) return
+
+    const volumeData = audioEngine.getSmoothVolume(
+      sphere.lastValidVolume, 
+      sphere.params.volumeChangeThreshold
+    )
+
+    if (volumeData.shouldUpdate) {
+      const targetRotationSpeed = sphere.params.rotationSpeedMin + 
+        (sphere.params.rotationSpeedMax - sphere.params.rotationSpeedMin) * volumeData.volume
+
+      sphere.lastRotationSpeed = sphere.params.rotationSpeed + 
+        (targetRotationSpeed - sphere.params.rotationSpeed) * sphere.params.rotationSmoothness
+
+      sphere.lastValidVolume = volumeData.volume
+    }
+
+    // Apply rotation
+    if (sceneRef.current) {
+      const particleSystem = sceneRef.current.children.find((child: any) => 
+        child.userData?.sphereIndex === sphere.index
+      ) as any
+      if (particleSystem) {
+        particleSystem.rotation.y += sphere.lastRotationSpeed
+      }
+    }
+  }
+
+  // Camera control functions
+  const resetCameraPosition = useCallback(() => {
+    if (!cameraRef.current || !controlsRef.current) return
+    
+    cameraRef.current.position.set(0, 0, 2.5)
+    controlsRef.current.target.set(0, 0, 0)
+    controlsRef.current.update()
+  }, [])
+
+  const setCameraPreset = useCallback((preset: 'default' | 'inside' | 'far' | 'top' | 'side') => {
+    if (!cameraRef.current || !controlsRef.current) return
+    
+    switch (preset) {
+      case 'default':
+        cameraRef.current.position.set(0, 0, 2.5)
+        break
+      case 'inside':
+        cameraRef.current.position.set(0, 0, 0.5)
+        break
+      case 'far':
+        cameraRef.current.position.set(0, 0, 8)
+        break
+      case 'top':
+        cameraRef.current.position.set(0, 5, 0)
+        break
+      case 'side':
+        cameraRef.current.position.set(5, 0, 0)
+        break
+    }
+    
+    controlsRef.current.target.set(0, 0, 0)
+    controlsRef.current.update()
+  }, [])
+
+  // Handle window resize
+  const handleResize = useCallback(() => {
+    if (!cameraRef.current || !rendererRef.current) return
+
+    cameraRef.current.aspect = window.innerWidth / window.innerHeight
+    cameraRef.current.updateProjectionMatrix()
+    rendererRef.current.setSize(window.innerWidth, window.innerHeight)
+    
+    // Update controls on resize
+    if (controlsRef.current) {
+      controlsRef.current.handleResize?.()
+    }
+  }, [])
+
+  // Initialize on mount
+  useEffect(() => {
+    initializeVisualization()
+    window.addEventListener('resize', handleResize)
+
+    // Listen for camera control disable events from audio dock
+    const handleCameraControlToggle = (event: CustomEvent) => {
+      if (controlsRef.current) {
+        controlsRef.current.enabled = !event.detail && cameraControlsEnabled
+      }
+    }
+
+    window.addEventListener('disableCameraControls', handleCameraControlToggle as EventListener)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+      window.removeEventListener('disableCameraControls', handleCameraControlToggle as EventListener)
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+      if (controlsRef.current) {
+        controlsRef.current.dispose()
+      }
+    }
+  }, [initializeVisualization, handleResize, cameraControlsEnabled])
+
+  // Start animation when ready
+  useEffect(() => {
+    if (isVisualizationReady) {
+      animationRef.current = requestAnimationFrame(animate)
+    }
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [isVisualizationReady, animate])
+
+  return (
+    <div className="world-tree-visualizer">
+      <canvas
+        ref={canvasRef}
+        className="visualization-canvas"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          background: '#0D0A07',
+          pointerEvents: 'auto'
+        }}
+        onMouseEnter={() => {
+          // Enable camera controls when mouse enters visualization area
+          if (controlsRef.current && cameraControlsEnabled) {
+            controlsRef.current.enabled = true
+          }
+        }}
+      />
+      
+      {/* Compact Controls Panel */}
+      <div 
+        className="particle-controls ancient-panel"
+        style={{
+          position: 'fixed',
+          bottom: '20px',
+          right: '20px',
+          zIndex: 1000,
+          background: 'linear-gradient(135deg, var(--marble-dark), var(--teal-dark))',
+          borderRadius: '8px',
+          color: 'var(--copper-light)',
+          fontFamily: 'Metamorphous, serif',
+          maxWidth: '280px',
+          maxHeight: '75vh',
+          transition: 'all 0.4s ease-in-out',
+          transform: controlsCollapsed ? 'translateX(calc(100% - 55px))' : 'translateX(0)',
+          backdropFilter: 'blur(15px)',
+          border: '2px solid var(--copper-medium)',
+          pointerEvents: 'auto',
+          boxShadow: '0 0 20px var(--copper-dark), inset 0 0 10px var(--teal-dark)',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+        onMouseEnter={() => {
+          // Disable camera controls when mouse enters controls panel
+          const event = new CustomEvent('disableCameraControls', { detail: true })
+          window.dispatchEvent(event)
+        }}
+        onMouseLeave={() => {
+          // Re-enable camera controls when mouse leaves controls panel
+          const event = new CustomEvent('disableCameraControls', { detail: false })
+          window.dispatchEvent(event)
+        }}
+      >
+        {/* Collapse/Expand Toggle */}
+        <button
+          onClick={() => setControlsCollapsed(!controlsCollapsed)}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'translateY(-50%) scale(1.1)'
+            e.currentTarget.style.borderColor = 'var(--transmission-glow)'
+            e.currentTarget.style.boxShadow = '0 0 15px var(--transmission-glow)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'translateY(-50%) scale(1)'
+            e.currentTarget.style.borderColor = 'var(--copper-medium)'
+            e.currentTarget.style.boxShadow = '0 0 5px var(--copper-bright)'
+          }}
+          style={{
+            position: 'absolute',
+            left: controlsCollapsed ? '8px' : '-30px',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            background: 'linear-gradient(135deg, var(--teal-dark), var(--marble-dark))',
+            border: '2px solid var(--copper-medium)',
+            borderRadius: '50%',
+            width: '28px',
+            height: '28px',
+            color: 'var(--copper-bright)',
+            cursor: 'pointer',
+            fontSize: '12px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backdropFilter: 'blur(15px)',
+            transition: 'all 0.4s ease-in-out',
+            zIndex: 1001,
+            fontFamily: 'Uncial Antiqua, serif',
+            boxShadow: '0 0 5px var(--copper-bright)'
+          }}
+          title={controlsCollapsed ? 'Expand Transmission Interface' : 'Collapse Interface'}
+        >
+          {controlsCollapsed ? '⟨' : '⟩'}
+        </button>
+
+        {/* Collapsed State Indicator */}
+        {controlsCollapsed && (
+          <div style={{
+            padding: '12px 8px',
+            textAlign: 'center',
+            fontSize: '9px',
+            lineHeight: '1.1',
+            opacity: 1,
+            transition: 'opacity 0.3s ease-in-out 0.2s',
+            fontFamily: 'Uncial Antiqua, serif'
+          }}>
+            <div className="rune" style={{ fontSize: '14px', color: 'var(--copper-bright)' }}>⟐</div>
+            <div style={{ fontSize: '7px', marginTop: '2px', color: 'var(--copper-medium)' }}>
+              entity<br/>interface
+            </div>
+          </div>
+        )}
+
+        {/* Full Controls Panel */}
+        <div style={{
+          padding: controlsCollapsed ? '0' : '20px 20px 0 20px',
+          opacity: controlsCollapsed ? 0 : 1,
+          transition: 'opacity 0.3s ease-in-out 0.1s',
+          pointerEvents: controlsCollapsed ? 'none' : 'auto',
+          maxHeight: controlsCollapsed ? '0' : 'auto',
+          overflow: 'hidden',
+          flexShrink: 0
+        }}>
+          <h3 className="ancient-title" style={{ 
+            marginBottom: '10px', 
+            fontSize: '16px', 
+            textAlign: 'center',
+            fontFamily: 'Metamorphous, serif'
+          }}>
+            <span className="rune">⟐</span> Liminal Sessions <span className="rune">⟐</span>
+          </h3>
+          <div className="transmission-text" style={{ 
+            textAlign: 'center', 
+            fontSize: '9px', 
+            marginBottom: '15px', 
+            opacity: 0.9,
+            fontFamily: 'Uncial Antiqua, serif' 
+          }}>
+            ≈ intercepted transmission ≈<br/>
+            ◦ audio-reactive entity ◦
+          </div>
+        </div>
+
+        {/* Scrollable Content Area */}
+        <div style={{
+          padding: controlsCollapsed ? '0' : '0 20px 20px 20px',
+          opacity: controlsCollapsed ? 0 : 1,
+          transition: 'opacity 0.3s ease-in-out 0.1s',
+          pointerEvents: controlsCollapsed ? 'none' : 'auto',
+          maxHeight: controlsCollapsed ? '0' : 'calc(75vh - 120px)',
+          overflow: controlsCollapsed ? 'hidden' : 'auto',
+          overflowY: controlsCollapsed ? 'hidden' : 'scroll',
+          flexGrow: 1,
+          // Custom scrollbar styling for better aesthetics
+          scrollbarWidth: 'thin',
+          scrollbarColor: 'var(--copper-medium) transparent'
+        }}
+        // Custom webkit scrollbar styles
+        onMouseEnter={(e) => {
+          e.currentTarget.style.setProperty('--webkit-scrollbar-width', '6px')
+          e.currentTarget.style.setProperty('--webkit-scrollbar-track-background', 'transparent')
+          e.currentTarget.style.setProperty('--webkit-scrollbar-thumb-background', 'var(--copper-medium)')
+          e.currentTarget.style.setProperty('--webkit-scrollbar-thumb-border-radius', '3px')
+        }}
+        >
+          <style>{`
+            .particle-controls::-webkit-scrollbar {
+              width: 6px;
+            }
+            .particle-controls::-webkit-scrollbar-track {
+              background: transparent;
+            }
+            .particle-controls::-webkit-scrollbar-thumb {
+              background: var(--copper-medium);
+              border-radius: 3px;
+            }
+            .particle-controls::-webkit-scrollbar-thumb:hover {
+              background: var(--copper-bright);
+            }
+          `}</style>
+        
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <span className="rune">◯</span> active entities: {activeSpheresCount}
+          </label>
+          <input
+            type="range"
+            min="1"
+            max="5"
+            value={activeSpheresCount}
+            onChange={(e) => {
+              const count = parseInt(e.target.value)
+              setActiveSpheresCount(count)
+              spheresRef.current.forEach((sphere, index) => {
+                sphere.params.enabled = index < count
+                if (sceneRef.current) {
+                  const particleSystem = sceneRef.current.children.find((child: any) => 
+                    child.userData?.sphereIndex === sphere.index
+                  ) as any
+                  if (particleSystem) {
+                    particleSystem.visible = sphere.params.enabled
+                  }
+                }
+              })
+            }}
+            style={{ width: '100%' }}
+          />
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <input
+              type="checkbox"
+              checked={cymateGeometry}
+              onChange={(e) => setCymateGeometry(e.target.checked)}
+              style={{ marginRight: '8px' }}
+            />
+            <span className="rune">◈</span> cymatic patterns
+          </label>
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <input
+              type="checkbox"
+              checked={tendrilsEnabled}
+              onChange={(e) => setTendrilsEnabled(e.target.checked)}
+              style={{ marginRight: '8px' }}
+            />
+            <span className="rune">⟨⟩</span> neural tendrils
+          </label>
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <span className="rune">≋</span> neural density: {Math.round(tendrilDensity * 100)}%
+          </label>
+          <input
+            type="range"
+            min="0.1"
+            max="1.0"
+            step="0.1"
+            value={tendrilDensity}
+            onChange={(e) => setTendrilDensity(parseFloat(e.target.value))}
+            disabled={!tendrilsEnabled}
+            style={{ width: '100%' }}
+          />
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <input
+              type="checkbox"
+              checked={dysonSphereEnabled}
+              onChange={(e) => setDysonSphereEnabled(e.target.checked)}
+              style={{ marginRight: '8px' }}
+            />
+            <span className="rune">🌿</span> growing vines
+          </label>
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <span className="rune">🌱</span> vine complexity: {vineComplexity}
+          </label>
+          <input
+            type="range"
+            min="8"
+            max="48"
+            step="4"
+            value={vineComplexity}
+            onChange={(e) => setVineComplexity(parseInt(e.target.value))}
+            disabled={!dysonSphereEnabled}
+            style={{ width: '100%' }}
+          />
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <span className="rune">⟲</span> growth rate: {Math.round(vineGrowthRate * 1000)}%
+          </label>
+          <input
+            type="range"
+            min="0.005"
+            max="0.05"
+            step="0.005"
+            value={vineGrowthRate}
+            onChange={(e) => setVineGrowthRate(parseFloat(e.target.value))}
+            disabled={!dysonSphereEnabled}
+            style={{ width: '100%' }}
+          />
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <input
+              type="checkbox"
+              checked={entronautEnabled}
+              onChange={(e) => setEntronautEnabled(e.target.checked)}
+              style={{ marginRight: '8px' }}
+            />
+            <span className="rune">⟐</span> entronaut sefa
+          </label>
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <input
+              type="checkbox"
+              checked={adaptiveCoupling}
+              onChange={(e) => setAdaptiveCoupling(e.target.checked)}
+              disabled={!entronautEnabled || performanceMode}
+              style={{ marginRight: '8px' }}
+            />
+            <span className="rune">⧨</span> adaptive coupling
+          </label>
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label className="runic-text" style={{ 
+            display: 'block', 
+            marginBottom: '5px', 
+            fontSize: '11px',
+            color: 'var(--copper-bright)'
+          }}>
+            <input
+              type="checkbox"
+              checked={performanceMode}
+              onChange={(e) => {
+                setPerformanceMode(e.target.checked)
+                if (e.target.checked) {
+                  setAdaptiveCoupling(false)
+                  setEntronautEnabled(false)
+                }
+              }}
+              style={{ marginRight: '8px' }}
+            />
+            <span className="rune">⚡</span> performance mode
+          </label>
+        </div>
+
+        {/* Performance Stats Display */}
+        <div style={{ 
+          marginBottom: '10px', 
+          padding: '8px', 
+          background: 'rgba(0,0,0,0.3)', 
+          borderRadius: '4px',
+          border: '1px solid var(--copper-dark)'
+        }}>
+          <div className="runic-text" style={{ 
+            fontSize: '9px', 
+            lineHeight: '1.3',
+            color: 'var(--copper-medium)'
+          }}>
+            <div><span className="rune">⚡</span> quality: 100%</div>
+            <div><span className="rune">🖥️</span> particles: {performanceStats.particleCount.toLocaleString()}</div>
+            <div style={{ 
+              color: performanceStats.fps < 30 ? 'var(--error-rust)' : 
+                     performanceStats.fps < 45 ? 'var(--warning-copper)' : 'var(--transmission-glow)' 
+            }}>
+              <span className="rune">📊</span> performance: {performanceStats.fps >= 45 ? 'optimal' : performanceStats.fps >= 30 ? 'good' : 'stressed'}
+            </div>
+          </div>
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label style={{ display: 'block', marginBottom: '5px', fontSize: '12px' }}>
+            <input
+              type="checkbox"
+              checked={cameraControlsEnabled}
+              onChange={(e) => setCameraControlsEnabled(e.target.checked)}
+              style={{ marginRight: '8px' }}
+            />
+            Camera Controls
+          </label>
+        </div>
+
+        <div style={{ marginBottom: '10px' }}>
+          <label style={{ display: 'block', marginBottom: '5px', fontSize: '12px' }}>
+            <input
+              type="checkbox"
+              checked={autoRotate}
+              onChange={(e) => setAutoRotate(e.target.checked)}
+              disabled={!cameraControlsEnabled}
+              style={{ marginRight: '8px' }}
+            />
+            Auto Rotate
+          </label>
+        </div>
+
+        {/* Camera Preset Buttons */}
+        {cameraControlsEnabled && (
+          <div style={{ marginBottom: '10px' }}>
+            <div style={{ fontSize: '11px', marginBottom: '5px', color: '#FFD700' }}>Camera Presets:</div>
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px' }}>
+              <button
+                onClick={() => setCameraPreset('default')}
+                style={{
+                  background: 'rgba(255, 215, 0, 0.2)',
+                  border: '1px solid rgba(255, 215, 0, 0.4)',
+                  color: '#FFD700',
+                  padding: '4px 8px',
+                  borderRadius: '4px',
+                  fontSize: '9px',
+                  cursor: 'pointer'
+                }}
+              >
+                Default
+              </button>
+              <button
+                onClick={() => setCameraPreset('inside')}
+                style={{
+                  background: 'rgba(255, 215, 0, 0.2)',
+                  border: '1px solid rgba(255, 215, 0, 0.4)',
+                  color: '#FFD700',
+                  padding: '4px 8px',
+                  borderRadius: '4px',
+                  fontSize: '9px',
+                  cursor: 'pointer'
+                }}
+              >
+                Inside
+              </button>
+              <button
+                onClick={() => setCameraPreset('far')}
+                style={{
+                  background: 'rgba(255, 215, 0, 0.2)',
+                  border: '1px solid rgba(255, 215, 0, 0.4)',
+                  color: '#FFD700',
+                  padding: '4px 8px',
+                  borderRadius: '4px',
+                  fontSize: '9px',
+                  cursor: 'pointer'
+                }}
+              >
+                Far View
+              </button>
+              <button
+                onClick={() => setCameraPreset('top')}
+                style={{
+                  background: 'rgba(255, 215, 0, 0.2)',
+                  border: '1px solid rgba(255, 215, 0, 0.4)',
+                  color: '#FFD700',
+                  padding: '4px 8px',
+                  borderRadius: '4px',
+                  fontSize: '9px',
+                  cursor: 'pointer'
+                }}
+              >
+                Top View
+              </button>
+            </div>
+            <button
+              onClick={resetCameraPosition}
+              style={{
+                background: 'rgba(255, 215, 0, 0.3)',
+                border: '1px solid rgba(255, 215, 0, 0.5)',
+                color: '#FFD700',
+                padding: '4px 8px',
+                borderRadius: '4px',
+                fontSize: '9px',
+                cursor: 'pointer',
+                width: '100%',
+                marginTop: '4px'
+              }}
+            >
+              Reset Camera
+            </button>
+          </div>
+        )}
+
+        <div style={{ marginBottom: '10px' }}>
+          <label style={{ display: 'block', marginBottom: '5px', fontSize: '12px' }}>
+            <input
+              type="checkbox"
+              checked={fogParams.enabled}
+              onChange={async (e) => {
+                setFogParams(prev => ({ ...prev, enabled: e.target.checked }))
+                const THREE = await import('three')
+                updateFog(THREE)
+              }}
+              style={{ marginRight: '8px' }}
+            />
+            Fog Effect
+          </label>
+        </div>
+
+                <div className="transmission-text" style={{ 
+          fontSize: '9px', 
+          opacity: 0.9, 
+          marginTop: '15px', 
+          lineHeight: '1.4',
+          fontFamily: 'Uncial Antiqua, serif',
+          color: 'var(--copper-medium)'
+        }}>
+          <div>◦ audio-reactive ◦ | ≋ beat-detection ≋ | ⟐ dynamic-noise ⟐</div>
+          <div style={{ marginTop: '5px' }}>
+            <span className="rune">◯</span> {spheresRef.current.filter(s => s.params.enabled).length} entities | 
+            <span className="rune">✦</span> {performanceStats.particleCount.toLocaleString()} particles
+          </div>
+          <div style={{ 
+            marginTop: '5px', 
+            color: performanceStats.fps < 30 ? 'var(--error-rust)' : performanceStats.fps < 45 ? 'var(--warning-copper)' : 'var(--transmission-glow)' 
+          }}>
+            <span className="rune">⧨</span> {performanceStats.fps} fps | transmission {performanceStats.fps >= 45 ? 'stable' : performanceStats.fps >= 30 ? 'fluctuating' : 'unstable'}
+          </div>
+          {cymateGeometry && <div style={{ marginTop: '3px' }}><span className="rune">◈</span> cymatic patterns active</div>}
+          {tendrilsEnabled && <div style={{ marginTop: '3px' }}><span className="rune">⟨⟩</span> neural tendrils ({Math.round(tendrilDensity * 100)}% density)</div>}
+          {dysonSphereEnabled && <div style={{ marginTop: '3px' }}><span className="rune">🌿</span> growing vines ({vineComplexity} complexity, {Math.round(vineGrowthRate * 1000)}% growth)</div>}
+          {cameraControlsEnabled && (
+            <div style={{ marginTop: '3px', fontSize: '8px', color: 'var(--teal-light)' }}>
+              <span className="rune">⟐</span> observer: orbit | zoom | pan
+            </div>
+          )}
+          {entronautEnabled && (
+            <div style={{ marginTop: '5px', fontSize: '8px', lineHeight: '1.3' }}>
+              <div><span className="rune">⟐</span> sefa analysis: {entronautStateRef.current ? 'active' : 'initializing'}</div>
+              {entronautStateRef.current && (
+                <>
+                  <div>complexity: {(entronautStateRef.current.informationMetrics.complexity * 100).toFixed(1)}%</div>
+                  <div>emergence: {(entronautStateRef.current.informationMetrics.emergence * 100).toFixed(1)}%</div>
+                  <div>coherence: {(entronautStateRef.current.informationMetrics.coherence * 100).toFixed(1)}%</div>
+                  {adaptiveCoupling && (
+                    <div style={{ marginTop: '3px', color: 'var(--teal-light)' }}>
+                      <span className="rune">⧨</span> biomimetic coupling active
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+          <div style={{ marginTop: '5px', fontSize: '8px', opacity: 0.8 }}>
+            <div>sub-bass (20-80hz) | bass (120-250hz) | mid (250-800hz)</div>
+            <div>high-mid (1k-4khz) | high (5k-10khz)</div>
+          </div>
+        </div>
+        </div>
+      </div>
+
+      {/* About Section - Clickable Widget */}
+      <div 
+        className="about-section ancient-panel" 
+        onClick={() => setAboutCollapsed(!aboutCollapsed)}
+        style={{
+          position: 'fixed',
+          bottom: '20px',
+          left: '50%',
+          transform: aboutCollapsed ? 'translateX(-50%) translateY(calc(100% - 65px))' : 'translateX(-50%) translateY(0)',
+          zIndex: 1000,
+          background: 'linear-gradient(135deg, var(--marble-dark), var(--teal-dark))',
+          borderRadius: '10px',
+          color: 'var(--copper-light)',
+          fontFamily: 'Metamorphous, serif',
+          width: '380px',
+          minWidth: '380px',
+          transition: 'all 0.4s ease-in-out',
+          backdropFilter: 'blur(20px)',
+          border: '2px solid var(--copper-medium)',
+          pointerEvents: 'auto',
+          boxShadow: '0 4px 20px var(--copper-dark), inset 0 0 15px var(--teal-dark)',
+          cursor: 'pointer'
+        }}
+        onMouseEnter={(e) => {
+          // Disable camera controls when mouse enters about section
+          const event = new CustomEvent('disableCameraControls', { detail: true })
+          window.dispatchEvent(event)
+          // Add hover effect
+          e.currentTarget.style.borderColor = 'var(--transmission-glow)'
+          e.currentTarget.style.boxShadow = '0 6px 25px var(--transmission-glow)'
+        }}
+        onMouseLeave={(e) => {
+          // Re-enable camera controls when mouse leaves about section
+          const event = new CustomEvent('disableCameraControls', { detail: false })
+          window.dispatchEvent(event)
+          // Remove hover effect
+          e.currentTarget.style.borderColor = 'var(--copper-medium)'
+          e.currentTarget.style.boxShadow = '0 4px 20px var(--copper-dark)'
+        }}
+      >
+        {/* Collapsed State - Clickable Widget */}
+        {aboutCollapsed && (
+          <div style={{
+            padding: '15px 20px',
+            textAlign: 'center',
+            fontSize: '11px',
+            lineHeight: '1.3',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '10px',
+            minHeight: '50px'
+          }}>
+            <div className="rune" style={{ fontSize: '18px', color: 'var(--copper-bright)' }}>⟐</div>
+            <div style={{ 
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: '2px'
+            }}>
+              <div className="ancient-title" style={{ 
+                fontSize: '11px', 
+                color: 'var(--copper-bright)', 
+                fontWeight: 'bold',
+                fontFamily: 'Metamorphous, serif' 
+              }}>
+                transmission source
+              </div>
+              <div className="runic-text" style={{ 
+                fontSize: '8px', 
+                color: 'var(--copper-medium)', 
+                opacity: 0.9,
+                fontFamily: 'Uncial Antiqua, serif'
+              }}>
+                ◦ access entity data ◦
+              </div>
+            </div>
+            <div className="rune" style={{ fontSize: '12px', opacity: 0.7, color: 'var(--transmission-glow)' }}>⟨</div>
+          </div>
+        )}
+
+        {/* Expanded State - Full About Panel */}
+        {!aboutCollapsed && (
+          <div style={{
+            padding: '20px',
+            transition: 'all 0.3s ease-in-out'
+          }}>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginBottom: '15px'
+            }}>
+              <h3 className="ancient-title" style={{ 
+                margin: 0, 
+                fontSize: '15px', 
+                textAlign: 'center', 
+                flex: 1,
+                fontFamily: 'Metamorphous, serif',
+                color: 'var(--copper-bright)'
+              }}>
+                <span className="rune">⟐</span> Liminal Sessions <span className="rune">⟐</span>
+              </h3>
+              <div className="rune" style={{ fontSize: '12px', opacity: 0.7, color: 'var(--transmission-glow)' }}>⟩</div>
+            </div>
+            
+            <div className="transmission-text" style={{ 
+              fontSize: '9px', 
+              lineHeight: '1.6', 
+              marginBottom: '12px',
+              fontFamily: 'Uncial Antiqua, serif',
+              color: 'var(--copper-medium)'
+            }}>
+              <p style={{ marginBottom: '8px' }}>
+                ≈ threshold frequencies between electronic and organic realms ≈
+              </p>
+              
+              <p style={{ marginBottom: '8px' }}>
+                ◦ biomimetic algorithms manifest living visual entities ◦<br/>
+                responding to spectral emergence patterns
+              </p>
+              
+              <p style={{ fontSize: '8px', opacity: 0.8 }}>
+                [ transmission intercepted from distant coordinate ]
+              </p>
+            </div>
+
+            <div className="runic-text" style={{ 
+              fontSize: '8px', 
+              opacity: 0.9, 
+              lineHeight: '1.4',
+              fontFamily: 'Uncial Antiqua, serif',
+              color: 'var(--copper-bright)'
+            }}>
+              <div><span className="rune">♪</span> ambient electronic resonance</div>
+              <div><span className="rune">◯</span> audio-visual emergence field</div>
+              <div><span className="rune">≋</span> real-time particle dynamics</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+} 

src/engine/AudioEngine.ts

@@ -0,0 +1,665 @@
+import type { 
+  AudioData, 
+  AudioEngine as AudioEngineInterface, 
+  Track, 
+  PeakDetection, 
+  BeatManager, 
+  FrequencyMapping 
+} from '../types/audio'
+
+export class AudioEngine implements AudioEngineInterface {
+  private audioContext: AudioContext | null = null
+  private analyser: AnalyserNode | null = null
+  private audioElement: HTMLAudioElement | null = null
+  private sourceNode: MediaElementAudioSourceNode | null = null
+  private isInitialized = false
+  private isContextStarted = false
+  private currentTrack: Track | null = null
+  
+  // Auto-play functionality
+  private onTrackEndedCallback: (() => void) | null = null
+  
+  // Audio analysis configuration
+  private readonly frequencyMapping: FrequencyMapping = {
+    deepFreq: { min: 20, max: 250 },     // Deep Earth Pulse (trunk/roots)
+    midFreq: { min: 250, max: 4000 },    // Heartwood Resonance (core glyphs) 
+    highFreq: { min: 4000, max: 20000 }  // Canopy Shiver (fractal branches)
+  }
+  
+  private peakDetection: PeakDetection = {
+    energyHistory: [],
+    historyLength: 30,
+    lastPeakTime: 0,
+    minTimeBetweenPeaks: 200,
+    sensitivity: 1.1
+  }
+  
+  private beatManager: BeatManager = {
+    currentWaveRadius: 0,
+    waveStrength: 0,
+    isWaveActive: false,
+    
+    triggerWave: (energy: number) => {
+      const maxEnergy = 255
+      const energyExcess = energy - 200
+      this.beatManager.waveStrength = (energyExcess / (maxEnergy - 200)) * 20.0
+      this.beatManager.currentWaveRadius = 0
+      this.beatManager.isWaveActive = true
+    },
+    
+    update: (deltaTime: number) => {
+      if (this.beatManager.isWaveActive) {
+        this.beatManager.currentWaveRadius += deltaTime * 1.0
+        this.beatManager.waveStrength *= 0.98
+        
+        if (this.beatManager.currentWaveRadius > 1.0 || this.beatManager.waveStrength < 0.1) {
+          this.beatManager.isWaveActive = false
+        }
+      }
+    },
+    
+    getWaveForce: (distance: number) => {
+      if (!this.beatManager.isWaveActive) return 0
+      const distanceFromWave = Math.abs(distance - this.beatManager.currentWaveRadius)
+      if (distanceFromWave < 0.1) {
+        return this.beatManager.waveStrength * Math.exp(-distanceFromWave * 10)
+      }
+      return 0
+    }
+  }
+
+  async initialize(): Promise<void> {
+    if (this.isInitialized) return
+
+    try {
+      // Create AudioContext but don't start it yet (browser security)
+      this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+      this.analyser = this.audioContext.createAnalyser()
+      this.analyser.fftSize = 2048
+      
+      // Don't resume context here - wait for user gesture
+      this.isInitialized = true
+      console.log('AudioEngine initialized (context suspended until user gesture)')
+    } catch (error) {
+      console.error('Failed to initialize AudioEngine:', error)
+      throw error
+    }
+  }
+
+  private async ensureContextStarted(): Promise<void> {
+    if (!this.audioContext || this.isContextStarted) return
+    
+    if (this.audioContext.state === 'suspended') {
+      try {
+        await this.audioContext.resume()
+        this.isContextStarted = true
+        console.log('AudioContext resumed after user gesture')
+      } catch (error) {
+        console.error('Failed to resume AudioContext:', error)
+        throw error
+      }
+    } else {
+      this.isContextStarted = true
+    }
+  }
+
+  async loadTrack(track: Track): Promise<void> {
+    if (!this.isInitialized) {
+      throw new Error('AudioEngine not initialized')
+    }
+
+    try {
+      console.log(`🎵 Loading track: ${track.title} from ${track.url}`)
+
+      // Test if the file is accessible
+      console.log('🔍 Testing file accessibility...')
+      try {
+        const response = await fetch(track.url, { method: 'HEAD' })
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+        }
+        console.log('✅ File is accessible via HTTP')
+        console.log('📊 Response headers:', {
+          contentType: response.headers.get('content-type'),
+          contentLength: response.headers.get('content-length'),
+          status: response.status
+        })
+      } catch (fetchError) {
+        console.error('❌ File accessibility test failed:', fetchError)
+        throw new Error(`Cannot access audio file: ${fetchError}`)
+      }
+
+      // Create audio element if it doesn't exist
+      if (!this.audioElement) {
+        console.log('🎧 Creating new audio element')
+        this.audioElement = document.createElement('audio')
+        this.audioElement.crossOrigin = 'anonymous'
+        this.audioElement.preload = 'metadata'
+        this.audioElement.volume = 0.7 // Set initial volume
+        
+        console.log('🔊 Audio element volume set to:', this.audioElement.volume)
+        
+        // Add comprehensive event listeners
+        this.audioElement.addEventListener('loadedmetadata', () => {
+          console.log(`✅ Track metadata loaded: ${this.audioElement?.duration}s`)
+        })
+        
+        this.audioElement.addEventListener('timeupdate', () => {
+          // This enables real-time current time tracking
+        })
+        
+        this.audioElement.addEventListener('ended', () => {
+          console.log('🔚 Track ended:', this.currentTrack?.title)
+          // Trigger auto-play callback if set
+          if (this.onTrackEndedCallback) {
+            console.log('🎵 Triggering auto-play to next track')
+            this.onTrackEndedCallback()
+          }
+        })
+        
+        this.audioElement.addEventListener('error', (e) => {
+          console.error('❌ Audio error:', e)
+          console.error('Error code:', this.audioElement?.error?.code)
+          console.error('Error message:', this.audioElement?.error?.message)
+        })
+
+        this.audioElement.addEventListener('canplaythrough', () => {
+          console.log('✅ Track can play through')
+        })
+
+        this.audioElement.addEventListener('loadstart', () => {
+          console.log('🔄 Started loading track')
+        })
+
+        this.audioElement.addEventListener('progress', () => {
+          console.log('📊 Loading progress')
+        })
+
+        this.audioElement.addEventListener('canplay', () => {
+          console.log('✅ Track can start playing')
+        })
+
+        this.audioElement.addEventListener('stalled', () => {
+          console.warn('⚠️ Track loading stalled')
+        })
+
+        this.audioElement.addEventListener('suspend', () => {
+          console.warn('⚠️ Track loading suspended')
+        })
+
+        this.audioElement.addEventListener('abort', () => {
+          console.warn('⚠️ Track loading aborted')
+        })
+
+        console.log('✅ Audio element created with event listeners')
+      }
+
+      // Load the new track
+      console.log('📝 Setting audio source...')
+      this.audioElement.src = track.url
+      this.currentTrack = track
+
+      console.log('📊 Audio element initial state:', {
+        src: this.audioElement.src,
+        readyState: this.audioElement.readyState,
+        networkState: this.audioElement.networkState
+      })
+
+      // Wait for metadata to load
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          this.audioElement?.removeEventListener('loadedmetadata', onLoadedMetadata)
+          this.audioElement?.removeEventListener('error', onError)
+          console.error('❌ Track loading timeout after 10 seconds')
+          reject(new Error('Track loading timeout after 10 seconds'))
+        }, 10000)
+
+        const onLoadedMetadata = () => {
+          clearTimeout(timeout)
+          this.audioElement?.removeEventListener('loadedmetadata', onLoadedMetadata)
+          this.audioElement?.removeEventListener('error', onError)
+          console.log(`✅ Track loaded successfully: ${track.title}`)
+          console.log('📊 Final audio element state:', {
+            duration: this.audioElement?.duration,
+            readyState: this.audioElement?.readyState,
+            networkState: this.audioElement?.networkState
+          })
+          resolve()
+        }
+
+        const onError = () => {
+          clearTimeout(timeout)
+          this.audioElement?.removeEventListener('loadedmetadata', onLoadedMetadata)
+          this.audioElement?.removeEventListener('error', onError)
+          console.error(`❌ Failed to load track: ${track.title}`)
+          console.error('❌ Audio element error state:', {
+            error: this.audioElement?.error,
+            readyState: this.audioElement?.readyState,
+            networkState: this.audioElement?.networkState
+          })
+          reject(new Error('Failed to load audio track'))
+        }
+
+        console.log('⏳ Waiting for metadata to load...')
+        this.audioElement?.addEventListener('loadedmetadata', onLoadedMetadata)
+        this.audioElement?.addEventListener('error', onError)
+        this.audioElement?.load()
+      })
+    } catch (error) {
+      console.error('❌ Failed to load track:', error)
+      throw error
+    }
+  }
+
+  async play(): Promise<void> {
+    if (!this.audioElement || !this.currentTrack) {
+      throw new Error('No track loaded')
+    }
+
+    console.log(`🎵 Attempting to play: ${this.currentTrack.title}`)
+    console.log(`📊 Audio element state:`, {
+      src: this.audioElement.src,
+      readyState: this.audioElement.readyState,
+      paused: this.audioElement.paused,
+      duration: this.audioElement.duration,
+      currentTime: this.audioElement.currentTime,
+      volume: this.audioElement.volume
+    })
+
+    try {
+      // Ensure AudioContext is started (user gesture required)
+      await this.ensureContextStarted()
+
+      // Create audio source connection if not already done
+      if (!this.sourceNode && this.audioContext && this.analyser && this.isContextStarted) {
+        console.log('🔗 Connecting audio source to analyser')
+        this.sourceNode = this.audioContext.createMediaElementSource(this.audioElement)
+        this.sourceNode.connect(this.analyser)
+        this.analyser.connect(this.audioContext.destination)
+        console.log('✅ Audio source connected to analyser')
+      }
+
+      console.log('▶️ Calling audio.play()')
+      await this.audioElement.play()
+      console.log('✅ Playback started successfully')
+    } catch (error) {
+      console.error('❌ Playback failed:', error)
+      if (error instanceof DOMException) {
+        console.error('DOMException details:', {
+          name: error.name,
+          message: error.message,
+          code: error.code
+        })
+      }
+      throw error
+    }
+  }
+
+  pause(): void {
+    if (this.audioElement) {
+      this.audioElement.pause()
+      console.log('Playback paused')
+    }
+  }
+
+  seekTo(time: number): void {
+    if (this.audioElement) {
+      this.audioElement.currentTime = time
+    }
+  }
+
+  setVolume(volume: number): void {
+    if (this.audioElement) {
+      this.audioElement.volume = Math.max(0, Math.min(1, volume))
+    }
+  }
+
+  getAudioData(): AudioData {
+    if (!this.analyser || !this.audioContext) {
+      return {
+        frequencies: new Uint8Array(1024),
+        deepEnergy: 0,
+        midEnergy: 0,
+        highEnergy: 0,
+        overallAmplitude: 0,
+        peakDetected: false,
+        beatDetected: false
+      }
+    }
+
+    try {
+      const frequencies = new Uint8Array(this.analyser.frequencyBinCount)
+      this.analyser.getByteFrequencyData(frequencies)
+
+      // Convert frequency to array index
+      const frequencyToIndex = (frequency: number): number => {
+        return Math.round(frequency / (this.audioContext!.sampleRate / 2) * this.analyser!.frequencyBinCount)
+      }
+
+      // Extract energy for each frequency range
+      const deepIndices = {
+        min: frequencyToIndex(this.frequencyMapping.deepFreq.min),
+        max: frequencyToIndex(this.frequencyMapping.deepFreq.max)
+      }
+      const midIndices = {
+        min: frequencyToIndex(this.frequencyMapping.midFreq.min), 
+        max: frequencyToIndex(this.frequencyMapping.midFreq.max)
+      }
+      const highIndices = {
+        min: frequencyToIndex(this.frequencyMapping.highFreq.min),
+        max: frequencyToIndex(this.frequencyMapping.highFreq.max)
+      }
+
+      // Calculate normalized energy levels
+      const deepRange = frequencies.slice(deepIndices.min, deepIndices.max + 1)
+      const midRange = frequencies.slice(midIndices.min, midIndices.max + 1)
+      const highRange = frequencies.slice(highIndices.min, highIndices.max + 1)
+
+      const deepEnergy = deepRange.reduce((a, b) => a + b, 0) / deepRange.length / 255
+      const midEnergy = midRange.reduce((a, b) => a + b, 0) / midRange.length / 255
+      const highEnergy = highRange.reduce((a, b) => a + b, 0) / highRange.length / 255
+
+      // Overall amplitude
+      const overallAmplitude = frequencies.reduce((a, b) => a + b, 0) / frequencies.length / 255
+
+      // Peak detection
+      const currentEnergy = midEnergy * 255 // Use mid-range for peak detection
+      this.peakDetection.energyHistory.push(currentEnergy)
+      
+      if (this.peakDetection.energyHistory.length > this.peakDetection.historyLength) {
+        this.peakDetection.energyHistory.shift()
+      }
+
+      const averageEnergy = this.peakDetection.energyHistory.reduce((a, b) => a + b, 0) / 
+                           this.peakDetection.energyHistory.length
+
+      const now = performance.now()
+      const peakDetected = currentEnergy > averageEnergy * this.peakDetection.sensitivity &&
+                          now - this.peakDetection.lastPeakTime > this.peakDetection.minTimeBetweenPeaks
+
+      if (peakDetected) {
+        this.peakDetection.lastPeakTime = now
+      }
+
+      // Beat detection (based on deep frequencies)
+      const beatThreshold = 150 // Normalized threshold
+      const beatDetected = deepEnergy * 255 > beatThreshold
+
+      if (beatDetected && !this.beatManager.isWaveActive) {
+        this.beatManager.triggerWave(deepEnergy * 255)
+      }
+
+      return {
+        frequencies,
+        deepEnergy,
+        midEnergy,
+        highEnergy,
+        overallAmplitude,
+        peakDetected,
+        beatDetected
+      }
+
+    } catch (error) {
+      console.error('Audio analysis failed:', error)
+      return {
+        frequencies: new Uint8Array(1024),
+        deepEnergy: 0,
+        midEnergy: 0,
+        highEnergy: 0,
+        overallAmplitude: 0,
+        peakDetected: false,
+        beatDetected: false
+      }
+    }
+  }
+
+  // Public method to update beat manager
+  updateBeatManager(deltaTime: number): void {
+    this.beatManager.update(deltaTime)
+  }
+
+  // Public method to get wave force for visualization
+  getWaveForce(distance: number): number {
+    return this.beatManager.getWaveForce(distance)
+  }
+
+  cleanup(): void {
+    if (this.sourceNode) {
+      this.sourceNode.disconnect()
+      this.sourceNode = null
+    }
+    
+    if (this.audioContext) {
+      this.audioContext.close()
+      this.audioContext = null
+    }
+    
+    if (this.audioElement) {
+      this.audioElement.pause()
+      this.audioElement.src = ''
+      this.audioElement = null
+    }
+    
+    this.analyser = null
+    this.isInitialized = false
+    
+    console.log('AudioEngine cleaned up')
+  }
+
+  // New methods for better audio element integration
+  getCurrentTime(): number {
+    return this.audioElement?.currentTime || 0
+  }
+
+  getDuration(): number {
+    return this.audioElement?.duration || 0
+  }
+
+  getAudioElement(): HTMLAudioElement | null {
+    return this.audioElement
+  }
+
+  isPlaying(): boolean {
+    return this.audioElement ? !this.audioElement.paused : false
+  }
+
+  // Test method to verify basic audio functionality
+  async testAudioPlayback(url: string): Promise<boolean> {
+    console.log('🧪 Testing audio file accessibility and format...')
+    
+    try {
+      // First test HTTP accessibility
+      const response = await fetch(url, { method: 'HEAD' })
+      if (!response.ok) {
+        console.error('❌ HTTP test failed:', response.status, response.statusText)
+        return false
+      }
+      
+      const contentType = response.headers.get('content-type')
+      console.log('📊 Content-Type:', contentType)
+      
+      if (!contentType || !contentType.includes('audio/')) {
+        console.error('❌ Invalid content type:', contentType)
+        return false
+      }
+      
+      // Test audio element loading (without playing to avoid user gesture requirement)
+      const testAudio = document.createElement('audio')
+      testAudio.volume = 0.1 // Very low volume for safety
+      testAudio.src = url
+      
+      return new Promise((resolve) => {
+        const timeout = setTimeout(() => {
+          cleanup()
+          console.error('❌ Audio test timeout')
+          resolve(false)
+        }, 5000)
+        
+        const cleanup = () => {
+          clearTimeout(timeout)
+          testAudio.removeEventListener('loadedmetadata', onLoadedMetadata)
+          testAudio.removeEventListener('error', onError)
+          testAudio.src = ''
+        }
+        
+        const onLoadedMetadata = () => {
+          console.log('✅ Audio metadata loaded successfully, duration:', testAudio.duration)
+          cleanup()
+          resolve(true)
+        }
+        
+        const onError = (e: Event) => {
+          console.error('❌ Audio loading error:', e)
+          console.error('Error details:', testAudio.error)
+          cleanup()
+          resolve(false)
+        }
+        
+        testAudio.addEventListener('loadedmetadata', onLoadedMetadata)
+        testAudio.addEventListener('error', onError)
+        testAudio.load()
+      })
+    } catch (error) {
+      console.error('❌ Audio test failed:', error)
+      return false
+    }
+  }
+
+  // Enhanced frequency analysis for particle systems
+  public getAdvancedAudioData(sphere: {
+    params: {
+      minFrequency: number
+      maxFrequency: number
+      minFrequencyBeat: number
+      maxFrequencyBeat: number
+      gainMultiplier: number
+      peakSensitivity: number
+    }
+    peakDetection: {
+      energyHistory: number[]
+      historyLength: number
+      lastPeakTime: number
+      minTimeBetweenPeaks: number
+    }
+  }): {
+    average: number
+    frequencies: Uint8Array
+    peakDetected: boolean
+    rangeEnergy: number
+    rangeEnergyBeat: number
+  } {
+    if (!this.analyser || !this.audioContext) {
+      return {
+        average: 0,
+        frequencies: new Uint8Array(),
+        peakDetected: false,
+        rangeEnergy: 0,
+        rangeEnergyBeat: 0
+      }
+    }
+
+    try {
+      const frequencies = new Uint8Array(this.analyser.frequencyBinCount)
+      this.analyser.getByteFrequencyData(frequencies)
+
+      // Apply gain multiplier
+      const gainMultiplier = sphere.params.gainMultiplier
+      frequencies.forEach((value, index) => {
+        frequencies[index] = Math.min(value * gainMultiplier, 255)
+      })
+
+      // Calculate frequency range indices
+      const frequencyToIndex = (frequency: number) => 
+        Math.round(frequency / (this.audioContext!.sampleRate / 2) * this.analyser!.frequencyBinCount)
+
+      // Main frequency range for visualization
+      const minFreqIndex = frequencyToIndex(sphere.params.minFrequency)
+      const maxFreqIndex = frequencyToIndex(sphere.params.maxFrequency)
+      const frequencyRange = frequencies.slice(minFreqIndex, maxFreqIndex + 1)
+      const rangeEnergy = frequencyRange.reduce((a, b) => a + b, 0) / frequencyRange.length
+
+      // Beat detection frequency range
+      const minFreqBeatIndex = frequencyToIndex(sphere.params.minFrequencyBeat)
+      const maxFreqBeatIndex = frequencyToIndex(sphere.params.maxFrequencyBeat)
+      const frequencyRangeBeat = frequencies.slice(minFreqBeatIndex, maxFreqBeatIndex + 1)
+      const rangeEnergyBeat = frequencyRangeBeat.reduce((a, b) => a + b, 0) / frequencyRangeBeat.length
+
+      // Peak detection logic
+      sphere.peakDetection.energyHistory.push(rangeEnergy)
+      if (sphere.peakDetection.energyHistory.length > sphere.peakDetection.historyLength) {
+        sphere.peakDetection.energyHistory.shift()
+      }
+
+      const averageEnergy = sphere.peakDetection.energyHistory.reduce((a, b) => a + b, 0) / 
+                           sphere.peakDetection.energyHistory.length
+
+      const now = performance.now()
+      const peakDetected = rangeEnergy > averageEnergy * sphere.params.peakSensitivity &&
+                          now - sphere.peakDetection.lastPeakTime > sphere.peakDetection.minTimeBetweenPeaks
+
+      if (peakDetected) {
+        sphere.peakDetection.lastPeakTime = now
+        console.log(`🎵 PEAK DETECTED! Energy: ${rangeEnergy.toFixed(1)}, Average: ${averageEnergy.toFixed(1)}`)
+      }
+
+      return {
+        average: rangeEnergy / 255,
+        frequencies,
+        peakDetected,
+        rangeEnergy,
+        rangeEnergyBeat
+      }
+
+    } catch (error) {
+      console.error('❌ Enhanced audio analysis failed:', error)
+      return {
+        average: 0,
+        frequencies: new Uint8Array(),
+        peakDetected: false,
+        rangeEnergy: 0,
+        rangeEnergyBeat: 0
+      }
+    }
+  }
+
+  // Get smooth volume for rotation effects
+  public getSmoothVolume(lastValidVolume: number, volumeChangeThreshold: number): {
+    volume: number
+    shouldUpdate: boolean
+  } {
+    if (!this.analyser) {
+      return { volume: 0, shouldUpdate: false }
+    }
+
+    const bufferLength = this.analyser.frequencyBinCount
+    const dataArray = new Uint8Array(bufferLength)
+    this.analyser.getByteFrequencyData(dataArray)
+
+    let sum = 0
+    for (let i = 0; i < bufferLength; i++) {
+      sum += dataArray[i]
+    }
+    const average = sum / bufferLength
+    const normalizedVolume = average / 255
+
+    let shouldUpdate = true
+    if (lastValidVolume === 0) {
+      lastValidVolume = normalizedVolume
+    } else {
+      const change = Math.abs(normalizedVolume - lastValidVolume)
+      if (change <= volumeChangeThreshold) {
+        lastValidVolume = normalizedVolume
+      } else {
+        shouldUpdate = false
+      }
+    }
+
+    return { volume: lastValidVolume, shouldUpdate }
+  }
+
+  // Auto-play functionality
+  public setOnTrackEndedCallback(callback: (() => void) | null): void {
+    this.onTrackEndedCallback = callback
+    console.log('🎵 Auto-play callback', callback ? 'enabled' : 'disabled')
+  }
+} 

src/main.tsx

@@ -0,0 +1,7 @@
+import ReactDOM from 'react-dom/client'
+import LivingNexusApp from './components/LivingNexusApp'
+import './styles/global.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <LivingNexusApp />
+) 

src/store/nexusStore.ts

@@ -0,0 +1,190 @@
+import { create } from 'zustand'
+import type { AudioData, PlaybackState, Track } from '../types/audio'
+import type { InteractionState, VisualizationParams } from '../types/visualization'
+
+interface NexusStore {
+  // Audio State
+  audioData: AudioData
+  playback: PlaybackState
+  isAudioInitialized: boolean
+  autoPlayEnabled: boolean
+  
+  // Visualization State  
+  visualParams: VisualizationParams
+  interactionState: InteractionState
+  
+  // Social Links
+  socialLinks: Array<{
+    id: string
+    platform: string
+    url: string
+    glyphPath: string
+  }>
+  
+  // Actions
+  updateAudioData: (data: AudioData) => void
+  setPlaybackState: (state: Partial<PlaybackState>) => void
+  setCurrentTrack: (track: Track | null) => void
+  setIsPlaying: (playing: boolean) => void
+  setVolume: (volume: number) => void
+  setCurrentTime: (time: number) => void
+  updateVisualizationParams: (params: Partial<VisualizationParams>) => void
+  setInteractionState: (state: Partial<InteractionState>) => void
+  initializeAudio: () => void
+  setAutoPlayEnabled: (enabled: boolean) => void
+  getNextTrack: () => Track | null
+  getPreviousTrack: () => Track | null
+  getCurrentTrackIndex: () => number
+}
+
+const defaultAudioData: AudioData = {
+  frequencies: new Uint8Array(1024),
+  deepEnergy: 0,
+  midEnergy: 0, 
+  highEnergy: 0,
+  overallAmplitude: 0,
+  peakDetected: false,
+  beatDetected: false
+}
+
+const defaultPlaybackState: PlaybackState = {
+  isPlaying: false,
+  currentTrack: null,
+  currentTime: 0,
+  volume: 0.7,
+  tracks: []
+}
+
+const defaultVisualizationParams: VisualizationParams = {
+  worldBreathRate: 0.8,
+  deepPulseIntensity: 1.0,
+  midGlowIntensity: 1.0, 
+  highShimmerCount: 50,
+  noiseScale: 4.0,
+  colorPalette: {
+    primary: '#2D1B0E',   // Deep earth brown
+    secondary: '#8B6914', // Burnished bronze  
+    accent: '#FFD700',    // Mystical gold
+    ember: '#FF6B35'      // Ember orange
+  }
+}
+
+const defaultInteractionState: InteractionState = {
+  isDormant: true,
+  isAwakening: false,
+  isAlive: false,
+  lastInteraction: 0
+}
+
+export const useNexusStore = create<NexusStore>((set, get) => ({
+  // Initial State
+  audioData: defaultAudioData,
+  playback: defaultPlaybackState,
+  isAudioInitialized: false,
+  autoPlayEnabled: true, // Enable auto-play by default
+  visualParams: defaultVisualizationParams,
+  interactionState: defaultInteractionState,
+  
+  socialLinks: [
+    {
+      id: 'spotify',
+      platform: 'Spotify', 
+      url: 'https://open.spotify.com/artist/your-band',
+      glyphPath: 'M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z'
+    },
+    {
+      id: 'apple',
+      platform: 'Apple Music',
+      url: 'https://music.apple.com/artist/your-band', 
+      glyphPath: 'M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z'
+    },
+    {
+      id: 'instagram',
+      platform: 'Instagram',
+      url: 'https://instagram.com/your-band',
+      glyphPath: 'M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z'
+    }
+  ],
+
+  // Actions
+  updateAudioData: (data: AudioData) => set({ audioData: data }),
+  
+  setPlaybackState: (state: Partial<PlaybackState>) => 
+    set(prev => ({ playback: { ...prev.playback, ...state } })),
+    
+  setCurrentTrack: (track: Track | null) => 
+    set(prev => ({ playback: { ...prev.playback, currentTrack: track } })),
+    
+  setIsPlaying: (playing: boolean) => {
+    set(prev => ({ playback: { ...prev.playback, isPlaying: playing } }))
+    
+    // Trigger interaction state changes
+    const now = Date.now()
+    if (playing) {
+      set(prev => ({
+        interactionState: {
+          ...prev.interactionState,
+          isDormant: false,
+          isAwakening: true,
+          lastInteraction: now
+        }
+      }))
+      
+      // After awakening animation, set to alive
+      setTimeout(() => {
+        set(prev => ({
+          interactionState: {
+            ...prev.interactionState,
+            isAwakening: false,
+            isAlive: true
+          }
+        }))
+      }, 2000) // 2 second awakening sequence
+    } else {
+      set(prev => ({
+        interactionState: {
+          ...prev.interactionState,
+          isAlive: false,
+          isDormant: true,
+          isAwakening: false
+        }
+      }))
+    }
+  },
+  
+  setVolume: (volume: number) => 
+    set(prev => ({ playback: { ...prev.playback, volume } })),
+    
+  setCurrentTime: (time: number) => 
+    set(prev => ({ playback: { ...prev.playback, currentTime: time } })),
+    
+  updateVisualizationParams: (params: Partial<VisualizationParams>) =>
+    set(prev => ({ visualParams: { ...prev.visualParams, ...params } })),
+    
+  setInteractionState: (state: Partial<InteractionState>) =>
+    set(prev => ({ interactionState: { ...prev.interactionState, ...state } })),
+    
+  initializeAudio: () => set({ isAudioInitialized: true }),
+  
+  setAutoPlayEnabled: (enabled: boolean) => set({ autoPlayEnabled: enabled }),
+  
+  getCurrentTrackIndex: (): number => {
+    const { playback } = get()
+    if (!playback.currentTrack || playback.tracks.length === 0) return -1
+    return playback.tracks.findIndex(track => track.id === playback.currentTrack?.id)
+  },
+  
+  getNextTrack: (): Track | null => {
+    const { playback } = get()
+    const currentIndex = get().getCurrentTrackIndex()
+    if (currentIndex === -1 || currentIndex >= playback.tracks.length - 1) return null
+    return playback.tracks[currentIndex + 1]
+  },
+  
+  getPreviousTrack: (): Track | null => {
+    const { playback } = get()
+    const currentIndex = get().getCurrentTrackIndex()
+    if (currentIndex <= 0) return null
+    return playback.tracks[currentIndex - 1]
+  }
+})) 

src/styles/global.css

@@ -0,0 +1,965 @@
+/* Typography - Ancient Transmission Scripts */
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Uncial+Antiqua&family=Metamorphous&display=swap');
+
+/* Living Nexus Global Styles - Ancient Botanical Interface */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  font-family: 'Metamorphous', 'Uncial Antiqua', serif;
+  background: #0F1B13; /* Deep forest void */
+  color: #A67B5B; /* Earthy copper text */
+  
+  /* Subtle organic texture */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0,0h1v1h-1zM2,2h1v1h-1z' fill='%232D5016' opacity='0.03'/%3E%3C/svg%3E");
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+  position: relative;
+}
+
+/* Main Living Nexus Artifact Container */
+.living-nexus-artifact {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #0F1B13;
+}
+
+/* Main Visualization Container - Full viewport background */
+.visualization-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;
+}
+
+/* Audio Player Container - Fixed as left vertical dock */
+.audio-player-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
+  pointer-events: none;
+  width: 350px; /* Fixed width for the dock */
+}
+
+.audio-player-container .control-plinth {
+  pointer-events: all;
+}
+
+/* Interaction States for the Artifact */
+.living-nexus-artifact.dormant {
+  opacity: 0.8;
+}
+
+.living-nexus-artifact.awakening {
+  animation: awakeningSequence 2s ease-in-out;
+}
+
+.living-nexus-artifact.alive {
+  opacity: 1;
+}
+
+/* Ancient Botanical & Celestial Color Palette */
+:root {
+  /* Deep Forest & Earth Tones */
+  --forest-deep: #0F1B13;        /* Deep forest background */
+  --forest-medium: #1C2E1F;      /* Medium forest */
+  --forest-light: #2D5016;       /* Light forest green */
+  --moss-dark: #3A4D2A;          /* Dark moss */
+  --moss-medium: #4F6B3E;        /* Medium moss */
+  --moss-light: #6B8C42;         /* Light moss */
+  
+  /* Earthy Copper & Bronze */
+  --copper-dark: #5D4037;        /* Deep earth copper */
+  --copper-medium: #795548;      /* Medium copper */
+  --copper-light: #A67B5B;       /* Light copper text */
+  --bronze-warm: #8D6E63;        /* Warm bronze */
+  
+  /* Celestial Nebula Accents */
+  --nebula-deep: #2A1810;        /* Deep space brown */
+  --nebula-purple: #4A306B;      /* Celestial purple */
+  --nebula-teal: #3E5B4C;        /* Nebula teal */
+  --stellar-copper: #B8860B;     /* Stellar copper highlights */
+  
+  /* Organic Textures */
+  --bark-brown: #3E2723;         /* Tree bark */
+  --root-brown: #4E342E;         /* Root brown */
+  --earth-dark: #1B0E0A;         /* Deep earth */
+  
+  /* Gradients */
+  --forest-gradient: linear-gradient(
+    135deg, 
+    var(--forest-light) 0%, 
+    var(--forest-medium) 50%, 
+    var(--forest-deep) 100%
+  );
+  --copper-gradient: linear-gradient(
+    135deg, 
+    var(--stellar-copper) 0%, 
+    var(--bronze-warm) 50%, 
+    var(--copper-dark) 100%
+  );
+  --nebula-gradient: linear-gradient(
+    45deg,
+    var(--nebula-purple) 0%,
+    var(--nebula-teal) 50%,
+    var(--forest-medium) 100%
+  );
+}
+
+/* Organic Energy Matrix */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(77, 107, 62, 0.06) 0%, transparent 60%),
+    radial-gradient(circle at 80% 20%, rgba(74, 48, 107, 0.04) 0%, transparent 60%),
+    radial-gradient(circle at 40% 40%, rgba(166, 123, 91, 0.03) 0%, transparent 70%),
+    radial-gradient(circle at 60% 60%, rgba(62, 91, 76, 0.02) 0%, transparent 80%);
+  background-size: 900px 900px, 700px 700px, 1100px 1100px, 500px 500px;
+  animation: organicPulse 20s ease-in-out infinite;
+  pointer-events: none;
+  z-index: -1;
+}
+
+@keyframes organicPulse {
+  0%, 100% { 
+    opacity: 0.15;
+    transform: scale(1) rotate(0deg);
+  }
+  25% { 
+    opacity: 0.25;
+    transform: scale(1.01) rotate(0.2deg);
+  }
+  50% { 
+    opacity: 0.35;
+    transform: scale(1.02) rotate(0deg);
+  }
+  75% { 
+    opacity: 0.2;
+    transform: scale(1.01) rotate(-0.2deg);
+  }
+}
+
+h1, h2, h3 {
+  font-family: 'Cinzel', serif;
+  font-weight: 700;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: var(--copper-light);
+}
+
+/* Runic Text Classes */
+.runic-text {
+  font-family: 'Uncial Antiqua', serif;
+  letter-spacing: 0.15em;
+  text-transform: lowercase;
+  color: var(--bronze-warm);
+}
+
+.transmission-text {
+  font-family: 'Metamorphous', serif;
+  color: var(--moss-medium);
+}
+
+.ancient-title {
+  font-family: 'Cinzel', serif;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.3em;
+  color: var(--stellar-copper);
+}
+
+/* Runic Glyph Animation Base */
+.glyph, .rune {
+  display: inline-block;
+  color: var(--stellar-copper);
+  transition: all 0.4s ease;
+}
+
+.glyph:hover, .rune:hover {
+  transform: scale(1.15) rotate(5deg);
+  color: var(--copper-light);
+}
+
+/* Living Tree Styles */
+.world-tree {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;
+  pointer-events: none; /* Allow clicks to pass through to controls */
+}
+
+.living-nexus-artifact .world-tree {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.tree-trunk {
+  stroke: var(--bark-brown);
+  stroke-width: 8;
+  animation: trunkPulse 3s ease-in-out infinite;
+}
+
+@keyframes trunkPulse {
+  0%, 100% { 
+    stroke-width: 8;
+    opacity: 0.8;
+  }
+  50% { 
+    stroke-width: 12;
+    opacity: 1;
+  }
+}
+
+.tree-branches {
+  stroke: var(--bronze-warm);
+  stroke-width: 2;
+  opacity: 0.7;
+  animation: branchShimmer 2s ease-in-out infinite;
+}
+
+@keyframes branchShimmer {
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 0.9; }
+}
+
+.tree-roots {
+  stroke: var(--root-brown);
+  stroke-width: 6;
+  opacity: 0.8;
+  animation: rootGlow 4s ease-in-out infinite;
+}
+
+@keyframes rootGlow {
+  0%, 100% { 
+    opacity: 0.8;
+  }
+  50% { 
+    opacity: 1;
+  }
+}
+
+/* Core Glyphs */
+.core-glyph {
+  fill: var(--stellar-copper);
+  stroke: var(--bronze-warm);
+  stroke-width: 1;
+  animation: glyphPulse 2.5s ease-in-out infinite;
+}
+
+@keyframes glyphPulse {
+  0%, 100% { 
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% { 
+    transform: scale(1.1);
+    opacity: 1;
+  }
+}
+
+/* Ember Particles */
+.ember-particle {
+  fill: var(--moss-light);
+  opacity: 0.7;
+  animation: emberFloat 3s ease-in-out infinite;
+}
+
+@keyframes emberFloat {
+  0% { 
+    transform: translateY(0px);
+    opacity: 0.7;
+  }
+  50% { 
+    transform: translateY(-10px);
+    opacity: 1;
+  }
+  100% { 
+    transform: translateY(0px);
+    opacity: 0.7;
+  }
+}
+
+/* Energy Flow Paths */
+.energy-path {
+  stroke: var(--stellar-copper);
+  stroke-width: 2;
+  fill: none;
+  opacity: 0.4;
+  stroke-dasharray: 5 5;
+  animation: energyFlow 4s linear infinite;
+}
+
+/* Control Plinth Component Styles - Updated for Dock */
+.control-plinth {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  min-width: 600px;
+}
+
+/* Vertical Dock Specific Styles */
+.control-plinth-dock {
+  font-family: 'Cinzel', serif;
+}
+
+.control-plinth-dock .central-glyph {
+  background: var(--copper-gradient);
+  border: 2px solid var(--stellar-copper);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--forest-deep);
+  transition: all 0.3s ease;
+  border-radius: 50%;
+}
+
+.control-plinth-dock .central-glyph:hover {
+  transform: scale(1.1);
+  background: var(--nebula-gradient);
+}
+
+.control-plinth-dock .plinth-control {
+  background: transparent;
+  border: 1px solid var(--bronze-warm);
+  color: var(--copper-light);
+  border-radius: 6px;
+  font-family: 'Cinzel', serif;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.control-plinth-dock .plinth-control:hover {
+  background: var(--bronze-warm);
+  color: var(--forest-deep);
+}
+
+.control-plinth-dock .timeline-channel {
+  background: var(--bark-brown);
+  border-radius: 4px;
+  position: relative;
+  border: 1px solid var(--bronze-warm);
+  overflow: hidden;
+}
+
+.control-plinth-dock .timeline-indicator {
+  height: 100%;
+  background: var(--copper-gradient);
+  border-radius: 4px;
+  transition: width 0.1s ease;
+}
+
+.control-plinth-dock .volume-slider {
+  height: 4px;
+  background: var(--bark-brown);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+.control-plinth-dock .volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--stellar-copper);
+  cursor: pointer;
+}
+
+/* Enhanced Dock Animations */
+@keyframes glyphPulse {
+  0%, 100% { 
+    transform: scale(1);
+  }
+  50% { 
+    transform: scale(1.05);
+  }
+}
+
+/* Collapsed Dock Scrollbar Styling */
+.control-plinth-dock .track-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.control-plinth-dock .track-list::-webkit-scrollbar-track {
+  background: rgba(166, 123, 91, 0.1);
+  border-radius: 3px;
+}
+
+.control-plinth-dock .track-list::-webkit-scrollbar-thumb {
+  background: rgba(166, 123, 91, 0.4);
+  border-radius: 3px;
+}
+
+.control-plinth-dock .track-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(166, 123, 91, 0.6);
+}
+
+.track-info {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.track-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--stellar-copper);
+  margin-bottom: 4px;
+}
+
+.track-artist {
+  font-size: 14px;
+  color: var(--bronze-warm);
+}
+
+.plinth-controls {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+  justify-content: center;
+}
+
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.volume-slider {
+  width: 80px;
+  height: 4px;
+  background: var(--bark-brown);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--stellar-copper);
+  cursor: pointer;
+}
+
+.time-display {
+  display: flex;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--bronze-warm);
+  font-family: 'Cinzel', serif;
+}
+
+.track-list-tablet {
+  background: rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255, 215, 0, 0.2);
+  border-radius: 6px;
+  padding: 15px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+  max-height: 200px;
+  overflow-y: auto;
+  min-width: 350px;
+  margin-top: 10px;
+  backdrop-filter: blur(10px);
+}
+
+.tablet-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
+}
+
+.tablet-header h3 {
+  margin: 0;
+  color: #FFD700;
+  font-size: 14px;
+}
+
+.close-tablet {
+  background: none;
+  border: 1px solid var(--burnished-bronze);
+  color: var(--burnished-bronze);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+
+.close-tablet:hover {
+  background: var(--burnished-bronze);
+  color: var(--deep-earth);
+}
+
+.track-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.track-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.track-item:hover {
+  background: var(--stone-gray);
+  border-color: var(--burnished-bronze);
+}
+
+.track-item.active {
+  background: var(--burnished-bronze);
+  border-color: var(--mystical-gold);
+}
+
+.track-item.active .track-name {
+  color: var(--mystical-gold);
+}
+
+.track-number {
+  font-size: 12px;
+  color: var(--bronze-warm);
+  min-width: 20px;
+}
+
+.track-details {
+  flex: 1;
+}
+
+.track-name {
+  font-size: 12px;
+  color: var(--copper-light);
+  margin-bottom: 1px;
+}
+
+/* Social Glyphs Component Styles */
+.social-glyphs {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  z-index: 1000;
+}
+
+.social-glyph {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: var(--earth-dark);
+  border: 1px solid var(--bronze-warm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--bronze-warm);
+  font-size: 18px;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.social-glyph:hover {
+  background: var(--bronze-warm);
+  color: var(--stellar-copper);
+  transform: scale(1.1);
+  border-color: var(--stellar-copper);
+}
+
+.social-glyph::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  background: linear-gradient(45deg, var(--stellar-copper), var(--bronze-warm));
+  border-radius: 9px;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.social-glyph:hover::before {
+  opacity: 0.2;
+}
+
+.tooltip {
+  position: absolute;
+  bottom: 120%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--earth-dark);
+  color: var(--copper-light);
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--bronze-warm);
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 1;
+  pointer-events: none;
+  z-index: 1001;
+  font-family: 'Cinzel', serif;
+  letter-spacing: 1px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.tooltip::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: var(--bronze-warm);
+}
+
+/* Glyph Animation */
+.social-glyph {
+  animation: glyphAppear 0.6s ease-out backwards;
+}
+
+.social-glyph:nth-child(1) { animation-delay: 0.1s; }
+.social-glyph:nth-child(2) { animation-delay: 0.2s; }
+.social-glyph:nth-child(3) { animation-delay: 0.3s; }
+.social-glyph:nth-child(4) { animation-delay: 0.4s; }
+.social-glyph:nth-child(5) { animation-delay: 0.5s; }
+
+@keyframes glyphAppear {
+  0% {
+    opacity: 0;
+    transform: scale(0.5) translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Platform-specific subtle effects */
+.social-glyph[data-platform="spotify"]:hover {
+  border-color: #1DB954;
+}
+
+.social-glyph[data-platform="apple"]:hover {
+  border-color: #FA57C1;
+}
+
+.social-glyph[data-platform="instagram"]:hover {
+  border-color: #E4405F;
+}
+
+.social-glyph[data-platform="youtube"]:hover {
+  border-color: #FF0000;
+}
+
+.social-glyph[data-platform="twitter"]:hover {
+  border-color: #1DA1F2;
+}
+
+@keyframes energyFlow {
+  0% { stroke-dashoffset: 0; }
+  100% { stroke-dashoffset: 40; }
+}
+
+/* Control Plinth Styles */
+.control-plinth {
+  position: relative;
+  margin: 15px auto;
+  background: rgba(15, 27, 19, 0.9);
+  border: 1px solid rgba(166, 123, 91, 0.3);
+  border-radius: 8px;
+  padding: 15px 25px;
+  box-shadow: 
+    0 4px 20px rgba(0, 0, 0, 0.8),
+    inset 0 1px 3px rgba(166, 123, 91, 0.1);
+  backdrop-filter: blur(15px);
+  max-width: 700px;
+  width: 85%;
+}
+
+.control-plinth::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: var(--forest-gradient);
+  border-radius: 14px;
+  z-index: -1;
+  opacity: 0.3;
+  animation: plinthGlow 6s ease-in-out infinite;
+}
+
+@keyframes plinthGlow {
+  0%, 100% { opacity: 0.2; }
+  50% { opacity: 0.3; }
+}
+
+/* Plinth Controls */
+.plinth-control {
+  background: transparent;
+  border: 1px solid var(--bronze-warm);
+  color: var(--copper-light);
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-family: 'Cinzel', serif;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin: 0 5px;
+}
+
+.plinth-control:hover {
+  background: var(--bronze-warm);
+  color: var(--forest-deep);
+  transform: translateY(-2px);
+}
+
+.plinth-control:active {
+  transform: translateY(0px);
+}
+
+/* Play/Pause Central Glyph */
+.central-glyph {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: var(--copper-gradient);
+  border: 3px solid var(--stellar-copper);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: var(--forest-deep);
+  transition: all 0.3s ease;
+  margin: 0 15px;
+}
+
+.central-glyph:hover {
+  transform: scale(1.1);
+  background: var(--nebula-gradient);
+}
+
+/* Timeline Scrubber */
+.timeline-channel {
+  width: 300px;
+  height: 8px;
+  background: var(--bark-brown);
+  border-radius: 4px;
+  position: relative;
+  margin: 0 15px;
+  border: 1px solid var(--bronze-warm);
+  overflow: hidden;
+}
+
+.timeline-indicator {
+  height: 100%;
+  background: var(--copper-gradient);
+  border-radius: 4px;
+  transition: width 0.1s ease;
+}
+
+.timeline-scrubber {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 8px;
+  background: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+}
+
+.timeline-scrubber::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--stellar-copper);
+  cursor: pointer;
+}
+
+/* Volume Control */
+.volume-dial {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid var(--bronze-warm);
+  background: var(--earth-dark);
+  position: relative;
+  cursor: pointer;
+}
+
+.volume-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2px;
+  height: 16px;
+  background: var(--stellar-copper);
+  transform-origin: bottom center;
+  transform: translate(-50%, -100%);
+  transition: transform 0.3s ease;
+}
+
+/* Social Glyphs */
+.social-glyphs {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  z-index: 1000;
+}
+
+.social-glyph {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: var(--deep-earth);
+  border: 1px solid var(--burnished-bronze);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--burnished-bronze);
+}
+
+.social-glyph:hover {
+  background: var(--burnished-bronze);
+  color: var(--mystical-gold);
+  box-shadow: 0 0 15px var(--mystical-gold);
+  transform: scale(1.1);
+}
+
+/* Tooltip */
+.tooltip {
+  position: absolute;
+  bottom: 120%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--void-black);
+  color: var(--ancient-white);
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--burnished-bronze);
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 1001;
+}
+
+.social-glyph:hover .tooltip {
+  opacity: 1;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .control-plinth {
+    margin: 10px auto;
+    padding: 15px 20px;
+    width: 95%;
+  }
+  
+  .timeline-channel {
+    width: 200px;
+  }
+  
+  .central-glyph {
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+  }
+  
+  .social-glyphs {
+    bottom: 10px;
+    right: 10px;
+  }
+}
+
+/* Loading Animation */
+.awakening {
+  animation: awakeningSequence 2s ease-out forwards;
+}
+
+@keyframes awakeningSequence {
+  0% {
+    opacity: 0.3;
+    filter: brightness(0.5);
+  }
+  50% {
+    opacity: 0.7;
+    filter: brightness(1.2);
+  }
+  100% {
+    opacity: 1;
+    filter: brightness(1);
+  }
+}
+
+/* Dormant State */
+.dormant {
+  opacity: 0.4;
+  filter: grayscale(0.5);
+  animation: dormantBreath 8s ease-in-out infinite;
+}
+
+@keyframes dormantBreath {
+  0%, 100% { 
+    opacity: 0.3;
+    transform: scale(0.98);
+  }
+  50% { 
+    opacity: 0.5;
+    transform: scale(1);
+  }
+} 

src/types/audio.ts

@@ -0,0 +1,64 @@
+export interface FrequencyMapping {
+  deepFreq: { min: number; max: number }; // 20-250Hz - Deep Earth Pulse
+  midFreq: { min: number; max: number };  // 250-4000Hz - Heartwood Resonance  
+  highFreq: { min: number; max: number }; // 4000-20000Hz - Canopy Shiver
+}
+
+export interface AudioData {
+  frequencies: Uint8Array;
+  deepEnergy: number;      // Normalized 0-1
+  midEnergy: number;       // Normalized 0-1
+  highEnergy: number;      // Normalized 0-1
+  overallAmplitude: number; // Normalized 0-1
+  peakDetected: boolean;
+  beatDetected: boolean;
+}
+
+export interface PeakDetection {
+  energyHistory: number[];
+  historyLength: number;
+  lastPeakTime: number;
+  minTimeBetweenPeaks: number;
+  sensitivity: number;
+}
+
+export interface BeatManager {
+  currentWaveRadius: number;
+  waveStrength: number;
+  isWaveActive: boolean;
+  triggerWave: (energy: number) => void;
+  update: (deltaTime: number) => void;
+  getWaveForce: (distance: number) => number;
+}
+
+export interface Track {
+  id: string;
+  title: string;
+  artist: string;
+  url: string;
+  duration?: number;
+}
+
+export interface PlaybackState {
+  isPlaying: boolean;
+  currentTrack: Track | null;
+  currentTime: number;
+  volume: number;
+  tracks: Track[];
+}
+
+export interface AudioEngine {
+  initialize: () => Promise<void>;
+  loadTrack: (track: Track) => Promise<void>;
+  play: () => Promise<void>;
+  pause: () => void;
+  seekTo: (time: number) => void;
+  setVolume: (volume: number) => void;
+  getAudioData: () => AudioData;
+  getCurrentTime: () => number;
+  getDuration: () => number;
+  getAudioElement: () => HTMLAudioElement | null;
+  isPlaying: () => boolean;
+  cleanup: () => void;
+  setOnTrackEndedCallback: (callback: (() => void) | null) => void;
+} 

src/types/visualization.ts

@@ -0,0 +1,199 @@
+// Enhanced visualization types for advanced particle system
+
+export interface ParticleSystemParams {
+  enabled: boolean
+  sphereRadius: number
+  innerSphereRadius: number
+  rotationSpeed: number
+  rotationSpeedMin: number
+  rotationSpeedMax: number
+  rotationSmoothness: number
+  particleCount: number
+  particleSize: number
+  particleLifetime: number
+  minFrequency: number
+  maxFrequency: number
+  minFrequencyBeat: number
+  maxFrequencyBeat: number
+  noiseScale: number
+  dynamicNoiseScale: boolean
+  minNoiseScale: number
+  maxNoiseScale: number
+  noiseStep: number
+  noiseSpeed: number
+  turbulenceStrength: number
+  colorStart: string
+  colorEnd: string
+  volumeChangeThreshold: number
+  peakSensitivity: number
+  beatThreshold: number
+  baseWaveStrength: number
+  beatStrength: number
+  gainMultiplier: number
+}
+
+export interface PeakDetection {
+  energyHistory: number[]
+  historyLength: number
+  lastPeakTime: number
+  minTimeBetweenPeaks: number
+}
+
+export interface ParticleSphere {
+  index: number
+  params: ParticleSystemParams
+  positions: Float32Array
+  velocities: Float32Array
+  basePositions: Float32Array
+  lifetimes: Float32Array
+  maxLifetimes: Float32Array
+  beatEffects: Float32Array
+  colors: Float32Array
+  lastNoiseScale: number
+  lastValidVolume: number
+  lastRotationSpeed: number
+  peakDetection: PeakDetection
+}
+
+export interface AudioAnalysisData {
+  average: number
+  frequencies: Uint8Array
+  peakDetected: boolean
+  rangeEnergy: number
+  rangeEnergyBeat: number
+}
+
+export interface FogParams {
+  enabled: boolean
+  color: string
+  near: number
+  far: number
+}
+
+export interface VisualizationPreset {
+  name: string
+  spheres: ParticleSystemParams[]
+  fog?: FogParams
+}
+
+export interface VisualizationState {
+  // Enhanced particle system state
+  spheres: ParticleSphere[]
+  beatManager?: {
+    currentWaveRadius: number
+    waveStrength: number
+    isWaveActive: boolean
+  }
+  
+  // Legacy tree visualization state (for backward compatibility)
+  deepPulseIntensity: number
+  midGlowIntensity: number
+  highShimmerIntensity: number
+  worldBreathRate: number
+  
+  // Animation state
+  lastTime: number
+  isAnimating: boolean
+}
+
+// Default frequency ranges for different spheres
+export const DEFAULT_FREQUENCY_RANGES = [
+  { minFrequency: 20, maxFrequency: 80 },    // Sub-bass
+  { minFrequency: 120, maxFrequency: 250 },  // Bass  
+  { minFrequency: 250, maxFrequency: 800 },  // Mid
+  { minFrequency: 1000, maxFrequency: 4000 }, // High mid
+  { minFrequency: 5000, maxFrequency: 10000 } // High
+] as const
+
+export const DEFAULT_SPHERE_PARAMS: ParticleSystemParams = {
+  enabled: false,
+  sphereRadius: 1.0,
+  innerSphereRadius: 0.25,
+  rotationSpeed: 0.001,
+  rotationSpeedMin: 0,
+  rotationSpeedMax: 0.065,
+  rotationSmoothness: 0.3,
+  particleCount: 20000,
+  particleSize: 0.003,
+  particleLifetime: 3.0,
+  minFrequency: 20,
+  maxFrequency: 80,
+  minFrequencyBeat: 20,
+  maxFrequencyBeat: 80,
+  noiseScale: 4.0,
+  dynamicNoiseScale: true,
+  minNoiseScale: 0.5,
+  maxNoiseScale: 5.0,
+  noiseStep: 0.2,
+  noiseSpeed: 0.1,
+  turbulenceStrength: 0.005,
+  colorStart: '#ff3366',
+  colorEnd: '#3366ff',
+  volumeChangeThreshold: 0.1,
+  peakSensitivity: 1.1,
+  beatThreshold: 200,
+  baseWaveStrength: 20.0,
+  beatStrength: 0.01,
+  gainMultiplier: 1
+}
+
+// Legacy types for backward compatibility
+export interface WorldTreeNode {
+  id: string;
+  x: number;
+  y: number;
+  size: number;
+  glyphType: 'root' | 'trunk' | 'branch' | 'leaf';
+  intensity: number; // 0-1, driven by audio
+  connections: string[]; // IDs of connected nodes
+}
+
+export interface TreeBranch {
+  id: string;
+  startNode: string;
+  endNode: string;
+  strokeWidth: number;
+  pathData: string; // SVG path
+  energy: number; // Current energy flowing through
+  pulsePhase: number; // Animation phase
+}
+
+export interface GlyphSystem {
+  coreGlyphs: WorldTreeNode[];
+  arterialPathways: TreeBranch[];
+  fractalBranches: TreeBranch[];
+  emberParticles: Particle[];
+}
+
+export interface Particle {
+  id: string;
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  life: number;
+  maxLife: number;
+  size: number;
+  opacity: number;
+}
+
+export interface VisualizationParams {
+  worldBreathRate: number;     // Base breathing animation speed
+  deepPulseIntensity: number;  // Trunk/root pulse strength
+  midGlowIntensity: number;    // Core glyph glow
+  highShimmerCount: number;    // Number of fractal branches/particles
+  noiseScale: number;          // Perlin noise scale for organic movement
+  colorPalette: {
+    primary: string;   // Deep earth tones
+    secondary: string; // Burnished metal
+    accent: string;    // Mystical glow
+    ember: string;     // Particle color
+  };
+}
+
+export interface InteractionState {
+  isDormant: boolean;
+  isAwakening: boolean;
+  isAlive: boolean;
+  lastInteraction: number;
+} 

src/utils/configLoader.ts

@@ -0,0 +1,632 @@
+// Configuration loader and manager for the visualizer
+import type { ParticleSystemParams } from '../types/visualization'
+
+export interface VisualizerConfig {
+  visualization: {
+    general: {
+      maxSpheres: number
+      defaultActiveSpheres: number
+      performanceMode: boolean
+      debugLogging: boolean
+      debugLogFrequency: number
+    }
+    particles: {
+      defaultParticleCount: number
+      minParticleCount: number
+      maxParticleCount: number
+      particleSize: number
+      particleLifetime: number
+      particleSizeVariation: number
+      particleOpacity: number
+    }
+    spheres: {
+      baseRadius: number
+      radiusIncrement: number
+      innerSphereRadius: number
+      maxSphereRadius: number
+      containmentPullback: number
+      overflowDamping: number
+    }
+    physics: {
+      turbulenceStrength: number
+      noiseScale: number
+      noiseScaleVariation: number
+      noiseSpeed: number
+      defaultDamping: number
+      velocityDecay: number
+      beatForceMultiplier: number
+      maxVelocity: number
+      stabilityThreshold: number
+      emergencyDamping: number
+    }
+    rotation: {
+      rotationSpeedMin: number
+      rotationSpeedMax: number
+      rotationSpeedIncrement: number
+      rotationSmoothness: number
+      autoRotateSpeed: number
+    }
+  }
+  audio: {
+    frequencyRanges: Array<{
+      name: string
+      minFrequency: number
+      maxFrequency: number
+      beatThreshold: number
+      volumeChangeThreshold: number
+    }>
+    beatDetection: {
+      energyHistoryLength: number
+      minTimeBetweenPeaks: number
+      beatStrength: number
+      waveDecayRate: number
+      peakThresholdMultiplier: number
+    }
+    volumeSmoothing: {
+      enabled: boolean
+      smoothingFactor: number
+      changeThresholdDefault: number
+    }
+  }
+  entronaut: {
+    enabled: boolean
+    sefaAnalysis: {
+      fieldSize: number
+      fieldWidth: number
+      fieldHeight: number
+      updateFrequency: number
+      temporalSmoothing: number
+      intensitySmoothing: number
+    }
+    weights: {
+      alpha_amplitude: number
+      alpha_phase: number
+      alpha_entropy: number
+      alpha_curvature: number
+      alpha_spectral: number
+    }
+    adaptiveCoupling: {
+      enabled: boolean
+      updateFrequency: number
+      dampingBase: number
+      dampingVariation: number
+      diffusionBase: number
+      diffusionVariation: number
+      couplingBase: number
+      couplingVariation: number
+      flockingRadius: number
+      flockingInfluence: number
+      metabolicPulseStrength: number
+      neighborCheckStep: number
+      neighborRange: number
+    }
+    biomimeticBehavior: {
+      collectiveMemory: number
+      emergenceThreshold: number
+      coherenceWeight: number
+      complexityWeight: number
+      networkInfluence: number
+      syncPulseStrength: number
+    }
+  }
+  tendrils: {
+    enabled: boolean
+    maxTendrils: number
+    defaultDensity: number
+    maxTendrilLength: number
+    tendrilSegments: number
+    updateInterval: number
+    sampleParticlesPerSphere: number
+    particleSampleStep: number
+    curvature: {
+      midPointMultiplier: number
+      undulationStrength: number
+      timeFactorBase: number
+      timeFactorCurve: number
+      spatialFrequency: number
+    }
+    visual: {
+      baseOpacity: number
+      glowIntensity: number
+      colorIntensityBase: number
+      colorIntensityVariation: number
+      blendingMode: string
+    }
+  }
+  cymatics: {
+    enabled: boolean
+    intensity: number
+    patterns: {
+      radialWaves: {
+        frequencyFactor: number
+        petalCount: number
+        amplitudeZ: number
+      }
+      sphericalHarmonics: {
+        lMultiplier: number
+        mMultiplier: number
+        timeMultiplier: number
+      }
+      geometricLattice: {
+        frequencyFactor: number
+      }
+      flowerOfLife: {
+        frequencyFactor: number
+        basePetals: number
+        petalVariation: number
+        amplitudeZ: number
+      }
+    }
+    breathing: {
+      enabled: boolean
+      speed: number
+      intensityBase: number
+      intensityVariation: number
+    }
+  }
+  colors: {
+    sphereColorSchemes: Array<{
+      name: string
+      start: string
+      end: string
+    }>
+    tendrilColors: {
+      baseColor: [number, number, number]
+      frequencyColorMap: {
+        lowFreq: [number, number, number]
+        midFreq: [number, number, number]
+        highFreq: [number, number, number]
+      }
+    }
+  }
+  camera: {
+    defaultPosition: [number, number, number]
+    fov: number
+    near: number
+    far: number
+    controls: {
+      enableDamping: boolean
+      dampingFactor: number
+      maxDistance: number
+      minDistance: number
+      maxPolarAngle: number
+      autoRotateSpeed: number
+    }
+    presets: {
+      [key: string]: [number, number, number]
+    }
+  }
+  fog: {
+    enabled: boolean
+    color: string
+    near: number
+    far: number
+    density: number
+  }
+  rendering: {
+    antialias: boolean
+    background: string
+    particleBlending: string
+    targetFPS: number
+    adaptiveQuality: {
+      enabled: boolean
+      minFPS: number
+      qualityReductionStep: number
+      qualityRecoveryDelay: number
+    }
+  }
+  ui: {
+    controls: {
+      defaultCollapsed: boolean
+      position: string
+      maxWidth: string
+      opacity: number
+    }
+    about: {
+      defaultCollapsed: boolean
+      position: string
+      width: string
+    }
+    animation: {
+      transitionDuration: string
+      hoverScale: number
+      backdropBlur: string
+    }
+  }
+  performance: {
+    adaptiveSettings: {
+      enabled: boolean
+      thresholds: {
+        particleReduction: number
+        tendrilReduction: number
+        sefaDisable: number
+        couplingDisable: number
+      }
+    }
+    optimizations: {
+      particleUpdateStep: number
+      tendrilUpdateStep: number
+      sefaUpdateStep: number
+      couplingUpdateStep: number
+      neighborCheckReduction: number
+    }
+  }
+  presets: {
+    [key: string]: Partial<VisualizerConfig>
+  }
+}
+
+class ConfigLoader {
+  private config: VisualizerConfig | null = null
+  private loadPromise: Promise<VisualizerConfig> | null = null
+
+  async loadConfig(): Promise<VisualizerConfig> {
+    if (this.config) {
+      return this.config
+    }
+
+    if (this.loadPromise) {
+      return this.loadPromise
+    }
+
+    this.loadPromise = this.fetchConfig()
+    this.config = await this.loadPromise
+    return this.config
+  }
+
+  private async fetchConfig(): Promise<VisualizerConfig> {
+    try {
+      const response = await fetch('/config.json')
+      if (!response.ok) {
+        throw new Error(`Failed to load config: ${response.statusText}`)
+      }
+      const config = await response.json()
+      console.log('✅ Configuration loaded successfully')
+      return config
+    } catch (error) {
+      console.error('❌ Failed to load configuration, using defaults:', error)
+      return this.getDefaultConfig()
+    }
+  }
+
+  private getDefaultConfig(): VisualizerConfig {
+    // Fallback default configuration
+    return {
+      visualization: {
+        general: {
+          maxSpheres: 5,
+          defaultActiveSpheres: 5,
+          performanceMode: false,
+          debugLogging: true,
+          debugLogFrequency: 0.005
+        },
+        particles: {
+          defaultParticleCount: 15000,
+          minParticleCount: 1000,
+          maxParticleCount: 30000,
+          particleSize: 1.0,
+          particleLifetime: 20.0,
+          particleSizeVariation: 0.2,
+          particleOpacity: 0.8
+        },
+        spheres: {
+          baseRadius: 1.0,
+          radiusIncrement: 0.08,
+          innerSphereRadius: 0.7,
+          maxSphereRadius: 2.0,
+          containmentPullback: 0.1,
+          overflowDamping: 0.9
+        },
+        physics: {
+          turbulenceStrength: 0.008,
+          noiseScale: 3.0,
+          noiseScaleVariation: 0.4,
+          noiseSpeed: 0.5,
+          defaultDamping: 0.95,
+          velocityDecay: 0.95,
+          beatForceMultiplier: 0.001,
+          maxVelocity: 0.1,
+          stabilityThreshold: 10.0,
+          emergencyDamping: 0.1
+        },
+        rotation: {
+          rotationSpeedMin: 0.001,
+          rotationSpeedMax: 0.06,
+          rotationSpeedIncrement: 0.008,
+          rotationSmoothness: 0.1,
+          autoRotateSpeed: 0.5
+        }
+      },
+      audio: {
+        frequencyRanges: [
+          { name: "sub-bass", minFrequency: 20, maxFrequency: 80, beatThreshold: 0.6, volumeChangeThreshold: 0.05 },
+          { name: "bass", minFrequency: 120, maxFrequency: 250, beatThreshold: 0.65, volumeChangeThreshold: 0.08 },
+          { name: "mid", minFrequency: 250, maxFrequency: 800, beatThreshold: 0.7, volumeChangeThreshold: 0.1 },
+          { name: "high-mid", minFrequency: 1000, maxFrequency: 4000, beatThreshold: 0.75, volumeChangeThreshold: 0.12 },
+          { name: "high", minFrequency: 5000, maxFrequency: 10000, beatThreshold: 0.8, volumeChangeThreshold: 0.15 }
+        ],
+        beatDetection: {
+          energyHistoryLength: 30,
+          minTimeBetweenPeaks: 200,
+          beatStrength: 0.02,
+          waveDecayRate: 0.98,
+          peakThresholdMultiplier: 1.3
+        },
+        volumeSmoothing: {
+          enabled: true,
+          smoothingFactor: 0.1,
+          changeThresholdDefault: 0.1
+        }
+      },
+      entronaut: {
+        enabled: true,
+        sefaAnalysis: {
+          fieldSize: 1024,
+          fieldWidth: 32,
+          fieldHeight: 32,
+          updateFrequency: 3,
+          temporalSmoothing: 0.9,
+          intensitySmoothing: 0.1
+        },
+        weights: {
+          alpha_amplitude: 1.2,
+          alpha_phase: 0.8,
+          alpha_entropy: 1.5,
+          alpha_curvature: 1.0,
+          alpha_spectral: 1.0
+        },
+        adaptiveCoupling: {
+          enabled: true,
+          updateFrequency: 4,
+          dampingBase: 0.9,
+          dampingVariation: 0.3,
+          diffusionBase: 0.01,
+          diffusionVariation: 0.6,
+          couplingBase: 0.02,
+          couplingVariation: 0.04,
+          flockingRadius: 0.25,
+          flockingInfluence: 0.2,
+          metabolicPulseStrength: 0.5,
+          neighborCheckStep: 5,
+          neighborRange: 20
+        },
+        biomimeticBehavior: {
+          collectiveMemory: 0.9,
+          emergenceThreshold: 0.5,
+          coherenceWeight: 1.0,
+          complexityWeight: 1.0,
+          networkInfluence: 0.1,
+          syncPulseStrength: 0.2
+        }
+      },
+      tendrils: {
+        enabled: true,
+        maxTendrils: 2000,
+        defaultDensity: 0.3,
+        maxTendrilLength: 0.8,
+        tendrilSegments: 8,
+        updateInterval: 100,
+        sampleParticlesPerSphere: 10,
+        particleSampleStep: 1000,
+        curvature: {
+          midPointMultiplier: 0.2,
+          undulationStrength: 0.05,
+          timeFactorBase: 0.001,
+          timeFactorCurve: 0.0015,
+          spatialFrequency: 10
+        },
+        visual: {
+          baseOpacity: 0.3,
+          glowIntensity: 1.0,
+          colorIntensityBase: 0.3,
+          colorIntensityVariation: 0.7,
+          blendingMode: "additive"
+        }
+      },
+      cymatics: {
+        enabled: true,
+        intensity: 0.002,
+        patterns: {
+          radialWaves: { frequencyFactor: 0.1, petalCount: 6, amplitudeZ: 0.5 },
+          sphericalHarmonics: { lMultiplier: 0.5, mMultiplier: 0.3, timeMultiplier: 2 },
+          geometricLattice: { frequencyFactor: 0.2 },
+          flowerOfLife: { frequencyFactor: 0.15, basePetals: 6, petalVariation: 0.1, amplitudeZ: 0.3 }
+        },
+        breathing: { enabled: true, speed: 0.5, intensityBase: 0.3, intensityVariation: 0.7 }
+      },
+      colors: {
+        sphereColorSchemes: [
+          { name: "sub-bass", start: "#ff3366", end: "#3366ff" },
+          { name: "bass", start: "#ff6b35", end: "#c44569" },
+          { name: "mid", start: "#f7931e", end: "#f8b500" },
+          { name: "high-mid", start: "#ffe66d", end: "#feca57" },
+          { name: "high", start: "#4ecdc4", end: "#45b7d1" }
+        ],
+        tendrilColors: {
+          baseColor: [0.3, 0.3, 0.3],
+          frequencyColorMap: {
+            lowFreq: [0.8, 0.2, 0.2],
+            midFreq: [0.2, 0.8, 0.2],
+            highFreq: [0.2, 0.2, 0.8]
+          }
+        }
+      },
+      camera: {
+        defaultPosition: [0, 0, 2.5],
+        fov: 75,
+        near: 0.1,
+        far: 1000,
+        controls: {
+          enableDamping: true,
+          dampingFactor: 0.05,
+          maxDistance: 50,
+          minDistance: 0.1,
+          maxPolarAngle: 3.14159,
+          autoRotateSpeed: 0.5
+        },
+        presets: {
+          default: [0, 0, 2.5],
+          inside: [0, 0, 0.5],
+          far: [0, 0, 8],
+          top: [0, 5, 0],
+          side: [5, 0, 0]
+        }
+      },
+      fog: {
+        enabled: true,
+        color: "#000000",
+        near: 2.7,
+        far: 3.7,
+        density: 0.1
+      },
+      rendering: {
+        antialias: true,
+        background: "#000000",
+        particleBlending: "additive",
+        targetFPS: 60,
+        adaptiveQuality: {
+          enabled: true,
+          minFPS: 30,
+          qualityReductionStep: 0.1,
+          qualityRecoveryDelay: 2000
+        }
+      },
+      ui: {
+        controls: {
+          defaultCollapsed: true,
+          position: "bottom-right",
+          maxWidth: "250px",
+          opacity: 0.8
+        },
+        about: {
+          defaultCollapsed: true,
+          position: "bottom-center",
+          width: "350px"
+        },
+        animation: {
+          transitionDuration: "0.3s",
+          hoverScale: 1.1,
+          backdropBlur: "10px"
+        }
+      },
+      performance: {
+        adaptiveSettings: {
+          enabled: true,
+          thresholds: {
+            particleReduction: 25,
+            tendrilReduction: 20,
+            sefaDisable: 15,
+            couplingDisable: 10
+          }
+        },
+        optimizations: {
+          particleUpdateStep: 1,
+          tendrilUpdateStep: 4,
+          sefaUpdateStep: 10,
+          couplingUpdateStep: 4,
+          neighborCheckReduction: 5
+        }
+      },
+      presets: {}
+    }
+  }
+
+  applyPreset(presetName: string): void {
+    if (!this.config) {
+      console.warn('Config not loaded, cannot apply preset')
+      return
+    }
+
+    const preset = this.config.presets[presetName]
+    if (!preset) {
+      console.warn(`Preset '${presetName}' not found`)
+      return
+    }
+
+    // Deep merge preset into current config
+    this.config = this.deepMerge(this.config, preset)
+    console.log(`✅ Applied preset: ${presetName}`)
+  }
+
+  private deepMerge(target: any, source: any): any {
+    const result = { ...target }
+    
+    for (const key in source) {
+      if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+        result[key] = this.deepMerge(target[key] || {}, source[key])
+      } else {
+        result[key] = source[key]
+      }
+    }
+    
+    return result
+  }
+
+  getConfig(): VisualizerConfig | null {
+    return this.config
+  }
+
+  // Helper methods to get specific config sections
+  getParticleParams(sphereIndex: number): Partial<ParticleSystemParams> {
+    if (!this.config) return {}
+
+    const audioRange = this.config.audio.frequencyRanges[sphereIndex] || this.config.audio.frequencyRanges[0]
+    const colors = this.config.colors.sphereColorSchemes[sphereIndex] || this.config.colors.sphereColorSchemes[0]
+
+    return {
+      enabled: true,
+      particleCount: this.config.visualization.particles.defaultParticleCount,
+      particleSize: this.config.visualization.particles.particleSize,
+      particleLifetime: this.config.visualization.particles.particleLifetime,
+      sphereRadius: this.config.visualization.spheres.baseRadius + (sphereIndex * this.config.visualization.spheres.radiusIncrement),
+      innerSphereRadius: this.config.visualization.spheres.innerSphereRadius,
+      turbulenceStrength: this.config.visualization.physics.turbulenceStrength,
+      noiseScale: this.config.visualization.physics.noiseScale + (sphereIndex * this.config.visualization.physics.noiseScaleVariation),
+      noiseSpeed: this.config.visualization.physics.noiseSpeed,
+      rotationSpeedMin: this.config.visualization.rotation.rotationSpeedMin,
+      rotationSpeedMax: this.config.visualization.rotation.rotationSpeedMax + (sphereIndex * this.config.visualization.rotation.rotationSpeedIncrement),
+      rotationSmoothness: this.config.visualization.rotation.rotationSmoothness,
+      beatStrength: this.config.audio.beatDetection.beatStrength,
+      beatThreshold: audioRange.beatThreshold,
+      volumeChangeThreshold: audioRange.volumeChangeThreshold,
+      minFrequency: audioRange.minFrequency,
+      maxFrequency: audioRange.maxFrequency,
+      colorStart: colors.start,
+      colorEnd: colors.end,
+      dynamicNoiseScale: true
+    }
+  }
+
+  getCymateIntensity(): number {
+    return this.config?.cymatics.intensity || 0.002
+  }
+
+  getTendrilConfig(): any {
+    return this.config?.tendrils || {}
+  }
+
+  getEntronautConfig(): any {
+    return this.config?.entronaut || {}
+  }
+
+  getFogConfig(): any {
+    return this.config?.fog || {}
+  }
+
+  getCameraConfig(): any {
+    return this.config?.camera || {}
+  }
+
+  // Hot reload support for development
+  async reloadConfig(): Promise<VisualizerConfig> {
+    this.config = null
+    this.loadPromise = null
+    return this.loadConfig()
+  }
+}
+
+// Singleton instance
+export const configLoader = new ConfigLoader()
+
+// Export for use in components
+export default configLoader 

src/utils/entronaut.ts

@@ -0,0 +1,503 @@
+// Entronaut: Symbolic Emergence Field Analysis for Audio-Reactive Particle Systems
+// Implementation of the advanced algorithmic framework for emergent structure detection
+
+import { AudioEngine } from '../engine/AudioEngine'
+
+// Core SEFA Types
+export interface SEFAFeatures {
+  amplitude: Float32Array       // A(y) - envelope amplitude
+  instantaneousPhase: Float32Array  // φ(y) - unwrapped phase
+  instantaneousFreq: Float32Array   // F(y) - local frequency
+  curvature: Float32Array      // C(y) - amplitude curvature
+  entropy: Float32Array        // S(y) - local sliding window entropy
+  entropyAlignment: Float32Array   // E(y) - normalized entropy (1 - S/S_max)
+}
+
+export interface SEFAScore {
+  sefa: Float32Array          // Combined SEFA score
+  features: SEFAFeatures      // Individual feature maps
+  alphas: {                   // Information deficit weights
+    amplitude: number
+    curvature: number
+    frequency: number
+    entropy: number
+  }
+  maxValues: {                // Normalization maxima
+    amplitude: number
+    curvature: number
+    frequency: number
+    entropy: number
+  }
+}
+
+export interface FieldState {
+  phi: Float32Array           // Primary field φ(x,t)
+  velocity: Float32Array      // ∂φ/∂t
+  width: number
+  height: number
+  deltaX: number
+  deltaT: number
+}
+
+export interface FieldParams {
+  rho: number                 // Inertial coefficient
+  gamma: number               // Damping coefficient
+  D: number                   // Diffusion coefficient
+  potential: (phi: number) => number    // V'(φ) potential force
+  potentialDerivative: (phi: number) => number
+}
+
+export interface CouplingParams {
+  strengthGamma: number       // How much SEFA affects damping
+  strengthD: number          // How much SEFA affects diffusion
+  strengthV: number          // How much SEFA affects potential
+  smoothingKernel: number    // Spatial smoothing for stability
+}
+
+export class EntronautEngine {
+  private sefaWindowSize: number = 64
+  private entropyBins: number = 32
+  private epsilon: number = 1e-16
+  
+  constructor() {
+    // Initialize Entronaut engine
+  }
+
+  // SEFA Core: Analyze 1D signal for symbolic emergence
+  public analyzeSEFA(signal: Float32Array): SEFAScore {
+    if (signal.length < this.sefaWindowSize) {
+      throw new Error('Signal too short for SEFA analysis')
+    }
+
+    // Step 1: Compute analytic signal using Hilbert transform
+    const analyticSignal = this.computeAnalyticSignal(signal)
+    
+    // Step 2: Extract raw features
+    const features = this.extractSEFAFeatures(signal, analyticSignal)
+    
+    // Step 3: Normalize features (max-absolute scaling)
+    const { normalizedFeatures, maxValues } = this.normalizeFeatures(features)
+    
+    // Step 4: Compute information deficit weights (alphas)
+    const alphas = this.computeInformationDeficitWeights(normalizedFeatures)
+    
+    // Step 5: Calculate final SEFA score using weighted geometric mean
+    const sefa = this.computeSEFAScore(normalizedFeatures, alphas)
+    
+    return {
+      sefa,
+      features: normalizedFeatures,
+      alphas,
+      maxValues
+    }
+  }
+
+  // Hilbert Transform for analytic signal
+  private computeAnalyticSignal(signal: Float32Array): { real: Float32Array, imag: Float32Array } {
+    const N = signal.length
+    const real = new Float32Array(signal)
+    const imag = new Float32Array(N)
+    
+    // FFT-based Hilbert transform
+    // This is a simplified implementation - in production would use proper FFT library
+    for (let i = 0; i < N; i++) {
+      let sum = 0
+      for (let j = 0; j < N; j++) {
+        if (i !== j) {
+          // Discrete Hilbert transform kernel approximation
+          const weight = 1.0 / (Math.PI * (i - j))
+          sum += signal[j] * weight
+        }
+      }
+      imag[i] = sum
+    }
+    
+    return { real, imag }
+  }
+
+  // Extract all SEFA features from analytic signal
+  private extractSEFAFeatures(signal: Float32Array, analytic: { real: Float32Array, imag: Float32Array }): SEFAFeatures {
+    const N = signal.length
+    
+    // 1. Amplitude A(y) = |V_A(y)|
+    const amplitude = new Array(N)
+    for (let i = 0; i < N; i++) {
+      amplitude[i] = Math.sqrt(analytic.real[i] * analytic.real[i] + analytic.imag[i] * analytic.imag[i])
+    }
+
+    // 2. Instantaneous Phase φ(y) = arg(V_A(y)) - unwrapped
+    const instantaneousPhase = new Array(N)
+    for (let i = 0; i < N; i++) {
+      instantaneousPhase[i] = Math.atan2(analytic.imag[i], analytic.real[i])
+    }
+    this.unwrapPhase(instantaneousPhase)
+
+    // 3. Instantaneous Frequency F(y) = dφ/dy (with smoothing for stability)
+    const smoothedPhase = this.smoothArray(instantaneousPhase, 3)
+    const instantaneousFreq = this.computeDerivative(smoothedPhase)
+
+    // 4. Curvature C(y) = d²A/dy² (with smoothing for stability)
+    const smoothedAmplitude = this.smoothArray(amplitude, 3)
+    const amplitudeDerivative = this.computeDerivative(smoothedAmplitude)
+    const curvature = this.computeDerivative(amplitudeDerivative)
+
+    // 5. Local Sliding Window Entropy S(y)
+    const entropy = this.computeLocalEntropy(signal)
+
+    // 6. Entropy Alignment E(y) = 1 - S(y)/S_max
+    const maxEntropy = Math.max(...Array.from(entropy))
+    const entropyAlignment = new Float32Array(entropy.length)
+    for (let i = 0; i < entropy.length; i++) {
+      entropyAlignment[i] = maxEntropy > 0 ? 1 - entropy[i] / maxEntropy : 0
+    }
+
+    return {
+      amplitude: Float32Array.from(amplitude),
+      instantaneousPhase: Float32Array.from(instantaneousPhase),
+      instantaneousFreq: Float32Array.from(instantaneousFreq),
+      curvature: Float32Array.from(curvature),
+      entropy: Float32Array.from(entropy),
+      entropyAlignment: Float32Array.from(entropyAlignment)
+    }
+  }
+
+  // Phase unwrapping to ensure continuity
+  private unwrapPhase(phase: number[]): void {
+    for (let i = 1; i < phase.length; i++) {
+      let diff = phase[i] - phase[i-1]
+      if (diff > Math.PI) {
+        phase[i] -= 2 * Math.PI
+      } else if (diff < -Math.PI) {
+        phase[i] += 2 * Math.PI
+      }
+    }
+  }
+
+  // Compute local entropy using sliding window
+  private computeLocalEntropy(signal: Float32Array): Float32Array {
+    const N = signal.length
+    const entropy = new Float32Array(N)
+    const halfWindow = Math.floor(this.sefaWindowSize / 2)
+    
+    for (let i = 0; i < N; i++) {
+      const start = Math.max(0, i - halfWindow)
+      const end = Math.min(N, i + halfWindow)
+      const windowData = signal.slice(start, end)
+      
+      entropy[i] = this.computeHistogramEntropy(windowData)
+    }
+    
+    return entropy
+  }
+
+  // Shannon entropy from histogram
+  private computeHistogramEntropy(data: Float32Array): number {
+    if (data.length === 0) return 0
+    
+    // Adaptive binning using Freedman-Diaconis rule
+    const sortedData = Array.from(data).sort((a, b) => a - b)
+    const q75 = this.percentile(sortedData, 0.75)
+    const q25 = this.percentile(sortedData, 0.25)
+    const iqr = q75 - q25
+    const binWidth = 2 * iqr * Math.pow(data.length, -1/3)
+    const numBins = Math.max(1, Math.min(this.entropyBins, Math.ceil((sortedData[sortedData.length-1] - sortedData[0]) / binWidth)))
+    
+    // Create histogram
+    const min = sortedData[0]
+    const max = sortedData[sortedData.length - 1]
+    const range = max - min
+    const bins = new Array(numBins).fill(0)
+    
+    for (const value of data) {
+      let binIndex = Math.floor(((value - min) / range) * (numBins - 1))
+      binIndex = Math.max(0, Math.min(numBins - 1, binIndex))
+      bins[binIndex]++
+    }
+    
+    // Compute Shannon entropy
+    let entropy = 0
+    for (const count of bins) {
+      if (count > 0) {
+        const prob = count / data.length
+        entropy -= prob * Math.log(prob)
+      }
+    }
+    
+    return entropy
+  }
+
+  // Information deficit weighting calculation
+  private computeInformationDeficitWeights(features: SEFAFeatures): { amplitude: number, curvature: number, frequency: number, entropy: number } {
+    const featureArrays = [
+      features.amplitude,
+      features.curvature, 
+      features.instantaneousFreq,
+      features.entropyAlignment
+    ]
+    
+    const featureNames = ['amplitude', 'curvature', 'frequency', 'entropy'] as const
+    const weights = {} as any
+    let totalWeight = 0
+    
+    // Compute global entropy for each feature
+    for (let i = 0; i < featureArrays.length; i++) {
+      const globalEntropy = this.computeHistogramEntropy(featureArrays[i])
+      const maxPossibleEntropy = Math.log(this.entropyBins)
+      const informationDeficit = Math.max(0, maxPossibleEntropy - globalEntropy)
+      
+      weights[featureNames[i]] = informationDeficit
+      totalWeight += informationDeficit
+    }
+    
+    // Normalize weights so they sum to 4 (number of features)
+    if (totalWeight > 0) {
+      for (const name of featureNames) {
+        weights[name] = (4 * weights[name]) / totalWeight
+      }
+    } else {
+      // Default equal weighting if all features are random
+      for (const name of featureNames) {
+        weights[name] = 1
+      }
+    }
+    
+    return weights
+  }
+
+  // Weighted geometric mean SEFA score
+  private computeSEFAScore(features: SEFAFeatures, alphas: any): Float32Array {
+    const N = features.amplitude.length
+    const sefa = new Float32Array(N)
+    
+    for (let i = 0; i < N; i++) {
+      // Regularize features to prevent log(0)
+      const regA = Math.max(this.epsilon, Math.abs(features.amplitude[i]))
+      const regC = Math.max(this.epsilon, Math.abs(features.curvature[i]))
+      const regF = Math.max(this.epsilon, Math.abs(features.instantaneousFreq[i]))
+      const regE = Math.max(this.epsilon, Math.abs(features.entropyAlignment[i]))
+      
+      // Compute log-SEFA score
+      const logSEFA = 
+        alphas.amplitude * Math.log(regA) +
+        alphas.curvature * Math.log(regC) +
+        alphas.frequency * Math.log(regF) +
+        alphas.entropy * Math.log(regE)
+      
+      // Convert back to linear scale
+      sefa[i] = Math.exp(logSEFA)
+    }
+    
+    return sefa
+  }
+
+  // Field Evolution: Solve generalized PDE φ_tt + γφ_t - D∇²φ + V'(φ) = 0
+  public evolveField(
+    fieldState: FieldState, 
+    params: FieldParams, 
+    coupling: CouplingParams,
+    sefaScore?: SEFAScore
+  ): FieldState {
+    const { phi, velocity, width, height, deltaT } = fieldState
+    const N = phi.length
+    
+    // Create new field state
+    const newPhi = new Float32Array(N)
+    const newVelocity = new Float32Array(N)
+    
+    // Compute effective parameters from SEFA coupling (if available)
+    let gammaEff = new Float32Array(N).fill(params.gamma)
+    let DEff = new Float32Array(N).fill(params.D)
+    
+    if (sefaScore && coupling) {
+      this.applySEFACoupling(gammaEff, DEff, sefaScore, coupling)
+    }
+    
+    // Solve PDE using semi-implicit scheme for stability
+    for (let i = 0; i < height; i++) {
+      for (let j = 0; j < width; j++) {
+        const idx = i * width + j
+        
+        // Laplacian (diffusion term) using 5-point stencil
+        const laplacian = this.computeLaplacian(phi, i, j, width, height, fieldState.deltaX)
+        
+        // Potential force
+        const potentialForce = -params.potentialDerivative(phi[idx])
+        
+        // PDE: ρφ_tt + γφ_t - D∇²φ + V'(φ) = 0
+        // Rearranged: φ_tt = (D∇²φ - γφ_t - V'(φ))/ρ
+        const acceleration = (DEff[idx] * laplacian - gammaEff[idx] * velocity[idx] + potentialForce) / params.rho
+        
+        // Semi-implicit time stepping for stability
+        newVelocity[idx] = velocity[idx] + acceleration * deltaT
+        newPhi[idx] = phi[idx] + newVelocity[idx] * deltaT
+        
+        // Apply boundary conditions (periodic)
+        if (newPhi[idx] > 2.0) newPhi[idx] = 2.0
+        if (newPhi[idx] < -2.0) newPhi[idx] = -2.0
+      }
+    }
+    
+    return {
+      ...fieldState,
+      phi: newPhi,
+      velocity: newVelocity
+    }
+  }
+
+  // Apply SEFA-based coupling to modify field parameters
+  private applySEFACoupling(
+    gammaEff: Float32Array,
+    DEff: Float32Array, 
+    sefaScore: SEFAScore,
+    coupling: CouplingParams
+  ): void {
+    // Smooth SEFA scores for numerical stability
+    const smoothedSEFA = this.spatialSmooth(sefaScore.sefa, coupling.smoothingKernel)
+    const smoothedEntropy = this.spatialSmooth(sefaScore.features.entropyAlignment, coupling.smoothingKernel)
+    
+    for (let i = 0; i < gammaEff.length; i++) {
+      const sefa = smoothedSEFA[i]
+      const entropy = smoothedEntropy[i]
+      
+      // High SEFA + high entropy alignment = reduce damping (let structure persist)
+      const dampingModifier = 1.0 - coupling.strengthGamma * sefa * entropy
+      gammaEff[i] *= Math.max(0.1, Math.min(2.0, dampingModifier))
+      
+      // High SEFA = reduce diffusion (create boundaries)
+      const diffusionModifier = 1.0 - coupling.strengthD * sefa
+      DEff[i] *= Math.max(0.01, Math.min(1.0, diffusionModifier))
+    }
+  }
+
+  // Audio Integration: Convert audio frequency data to field
+  public audioToField(audioEngine: AudioEngine, sphere: any): FieldState {
+    const audioData = audioEngine.getAdvancedAudioData(sphere)
+    
+    // Create field from frequency spectrum - using 32x32 grid for performance
+    const width = 32
+    const height = 32
+    const N = width * height
+    
+    const phi = new Float32Array(N)
+    const velocity = new Float32Array(N)
+    
+    // Map audio data to 2D field with cymatic patterns
+    for (let i = 0; i < height; i++) {
+      for (let j = 0; j < width; j++) {
+        const idx = i * width + j
+        
+        // Create cymatic-inspired patterns
+        const r = Math.sqrt((i - height/2)**2 + (j - width/2)**2) / (width/2)
+        const theta = Math.atan2(i - height/2, j - width/2)
+        
+        // Combine frequency data with spatial patterns
+        const freqValue = audioData.rangeEnergy
+        const beatStrength = audioData.rangeEnergyBeat
+        const spatialPattern = Math.sin(r * 10 + beatStrength * 5) * Math.cos(theta * 6)
+        
+        phi[idx] = freqValue * spatialPattern
+        velocity[idx] = 0
+      }
+    }
+    
+    return {
+      phi,
+      velocity,
+      width,
+      height,
+      deltaX: 1.0 / width,
+      deltaT: 1.0 / 60.0  // 60 FPS
+    }
+  }
+
+  // Helper functions
+  private computeLaplacian(field: Float32Array, i: number, j: number, width: number, height: number, deltaX: number): number {
+    const idx = i * width + j
+    const up = ((i - 1 + height) % height) * width + j
+    const down = ((i + 1) % height) * width + j
+    const left = i * width + ((j - 1 + width) % width)
+    const right = i * width + ((j + 1) % width)
+    
+    return (field[up] + field[down] + field[left] + field[right] - 4 * field[idx]) / (deltaX * deltaX)
+  }
+
+  private smoothArray(arr: number[] | Float32Array, kernelSize: number): Float32Array {
+    const result = new Float32Array(arr.length)
+    const half = Math.floor(kernelSize / 2)
+    
+    for (let i = 0; i < arr.length; i++) {
+      let sum = 0
+      let count = 0
+      
+      for (let j = -half; j <= half; j++) {
+        const idx = i + j
+        if (idx >= 0 && idx < arr.length) {
+          sum += arr[idx]
+          count++
+        }
+      }
+      
+      result[i] = count > 0 ? sum / count : arr[i]
+    }
+    
+    return result
+  }
+
+  private computeDerivative(arr: number[] | Float32Array): Float32Array {
+    const result = new Float32Array(arr.length)
+    
+    for (let i = 1; i < arr.length - 1; i++) {
+      result[i] = (arr[i + 1] - arr[i - 1]) / 2
+    }
+    
+    // Handle boundaries
+    result[0] = arr[1] - arr[0]
+    result[arr.length - 1] = arr[arr.length - 1] - arr[arr.length - 2]
+    
+    return result
+  }
+
+  private normalizeFeatures(features: SEFAFeatures): { normalizedFeatures: SEFAFeatures, maxValues: any } {
+    const maxAmplitude = Math.max(...features.amplitude)
+    const maxCurvature = Math.max(...features.curvature.map(Math.abs))
+    const maxFrequency = Math.max(...features.instantaneousFreq.map(Math.abs))
+    const maxEntropy = Math.max(...features.entropyAlignment)
+    
+    return {
+      normalizedFeatures: {
+        amplitude: features.amplitude.map(x => maxAmplitude > 0 ? x / maxAmplitude : 0),
+        curvature: features.curvature.map(x => maxCurvature > 0 ? x / maxCurvature : 0),
+        instantaneousFreq: features.instantaneousFreq.map(x => maxFrequency > 0 ? x / maxFrequency : 0),
+        instantaneousPhase: features.instantaneousPhase,
+        entropy: features.entropy,
+        entropyAlignment: features.entropyAlignment.map(x => maxEntropy > 0 ? x / maxEntropy : 0)
+      },
+      maxValues: {
+        amplitude: maxAmplitude,
+        curvature: maxCurvature,
+        frequency: maxFrequency,
+        entropy: maxEntropy
+      }
+    }
+  }
+
+
+
+  private spatialSmooth(data: Float32Array, _kernel: number): Float32Array {
+    // Simplified 1D smoothing - in full implementation would use 2D convolution
+    return this.smoothArray(data, 5)
+  }
+
+  private percentile(sortedArray: number[], p: number): number {
+    const index = p * (sortedArray.length - 1)
+    const lower = Math.floor(index)
+    const upper = Math.ceil(index)
+    
+    if (lower === upper) {
+      return sortedArray[lower]
+    }
+    
+    const weight = index - lower
+    return sortedArray[lower] * (1 - weight) + sortedArray[upper] * weight
+  }
+} 

src/utils/noise.ts

@@ -0,0 +1,188 @@
+// Enhanced 3D Perlin Noise Generator
+export class NoiseGenerator {
+  private p: number[] = new Array(256).fill(0).map((_, i) => i)
+  private perm: number[] = new Array(512)
+
+  constructor() {
+    this.init()
+  }
+
+  private init() {
+    // Shuffle the permutation array
+    for (let i = this.p.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1))
+      ;[this.p[i], this.p[j]] = [this.p[j], this.p[i]]
+    }
+    
+    // Create extended permutation array
+    for (let i = 0; i < 512; i++) {
+      this.perm[i] = this.p[i & 255]
+    }
+  }
+
+  private fade(t: number): number {
+    return t * t * t * (t * (t * 6 - 15) + 10)
+  }
+
+  private lerp(t: number, a: number, b: number): number {
+    return a + t * (b - a)
+  }
+
+  private grad(hash: number, x: number, y: number, z: number): number {
+    const h = hash & 15
+    const u = h < 8 ? x : y
+    const v = h < 4 ? y : h == 12 || h == 14 ? x : z
+    return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v)
+  }
+
+  public noise3D(x: number, y: number, z: number): number {
+    const X = Math.floor(x) & 255
+    const Y = Math.floor(y) & 255
+    const Z = Math.floor(z) & 255
+    
+    x -= Math.floor(x)
+    y -= Math.floor(y)
+    z -= Math.floor(z)
+    
+    const u = this.fade(x)
+    const v = this.fade(y)
+    const w = this.fade(z)
+    
+    const A = this.perm[X] + Y
+    const AA = this.perm[A] + Z
+    const AB = this.perm[A + 1] + Z
+    const B = this.perm[X + 1] + Y
+    const BA = this.perm[B] + Z
+    const BB = this.perm[B + 1] + Z
+    
+    return this.lerp(w, 
+      this.lerp(v, 
+        this.lerp(u, this.grad(this.perm[AA], x, y, z),
+                     this.grad(this.perm[BA], x-1, y, z)),
+        this.lerp(u, this.grad(this.perm[AB], x, y-1, z),
+                     this.grad(this.perm[BB], x-1, y-1, z))),
+      this.lerp(v, 
+        this.lerp(u, this.grad(this.perm[AA+1], x, y, z-1),
+                     this.grad(this.perm[BA+1], x-1, y, z-1)),
+        this.lerp(u, this.grad(this.perm[AB+1], x, y-1, z-1),
+                     this.grad(this.perm[BB+1], x-1, y-1, z-1))))
+  }
+
+  // 2D noise for simpler use cases
+  noise2D(x: number, y: number): number {
+    return this.noise3D(x, y, 0)
+  }
+
+  // Generate fractal noise with multiple octaves
+  fractalNoise(x: number, y: number, z: number, octaves: number = 4, persistence: number = 0.5): number {
+    let value = 0
+    let amplitude = 1
+    let frequency = 1
+    let maxValue = 0
+
+    for (let i = 0; i < octaves; i++) {
+      value += this.noise3D(x * frequency, y * frequency, z * frequency) * amplitude
+      maxValue += amplitude
+      amplitude *= persistence
+      frequency *= 2
+    }
+
+    return value / maxValue
+  }
+}
+
+// Beat Detection and Wave Manager
+export class BeatManager {
+  public currentWaveRadius: number = 0
+  public waveStrength: number = 0
+  public isWaveActive: boolean = false
+
+  public triggerWave(rangeEnergy: number): void {
+    const maxEnergy = 255
+    const energyExcess = rangeEnergy - 200
+    this.waveStrength = (energyExcess / (maxEnergy - 200)) * 20.0
+    this.currentWaveRadius = 0
+    this.isWaveActive = true
+  }
+
+  public update(deltaTime: number): void {
+    if (this.isWaveActive) {
+      this.currentWaveRadius += deltaTime * 1.0
+      this.waveStrength *= 0.98
+      
+      if (this.currentWaveRadius > 1.0 || this.waveStrength < 0.1) {
+        this.isWaveActive = false
+      }
+    }
+  }
+
+  public getWaveForce(position: { x: number; y: number; z: number }): number {
+    if (!this.isWaveActive) return 0
+    
+    const distanceFromCenter = Math.sqrt(position.x * position.x + position.y * position.y + position.z * position.z)
+    const distanceFromWave = Math.abs(distanceFromCenter - this.currentWaveRadius)
+    
+    if (distanceFromWave < 0.1) {
+      return this.waveStrength * Math.exp(-distanceFromWave * 10)
+    }
+    return 0
+  }
+}
+
+// Utility functions for dynamic noise scaling
+export function generateNewNoiseScale(
+  params: {
+    dynamicNoiseScale: boolean
+    minNoiseScale: number
+    maxNoiseScale: number
+    noiseStep: number
+  },
+  lastNoiseScale: number
+): number {
+  if (!params.dynamicNoiseScale) {
+    return params.minNoiseScale
+  }
+
+  let { minNoiseScale, maxNoiseScale, noiseStep } = params
+
+  // Safety checks
+  if (minNoiseScale >= maxNoiseScale) {
+    console.warn(`Fixing minNoiseScale (${minNoiseScale}) >= maxNoiseScale (${maxNoiseScale}).`)
+    maxNoiseScale = minNoiseScale + 0.1
+  }
+
+  let range = maxNoiseScale - minNoiseScale
+  if (range < 0.1) {
+    console.warn(`Range < 0.1 => Forcing minimal range = 0.1`)
+    range = 0.1
+    maxNoiseScale = minNoiseScale + range
+  }
+
+  if (noiseStep > range) {
+    console.warn(`noiseStep (${noiseStep}) > range (${range}) => Forcing noiseStep = range / 2`)
+    noiseStep = range / 2
+  }
+
+  // Clamp lastNoiseScale to valid range
+  lastNoiseScale = Math.max(minNoiseScale, Math.min(lastNoiseScale, maxNoiseScale))
+
+  const stepsUp = Math.floor((maxNoiseScale - lastNoiseScale) / noiseStep)
+  const stepsDown = Math.floor((lastNoiseScale - minNoiseScale) / noiseStep)
+
+  if (stepsUp === 0 && stepsDown === 0) {
+    return lastNoiseScale
+  }
+
+  const direction = Math.random() < 0.5 && stepsDown > 0 ? -1 : 1
+  const steps = direction === 1 
+    ? Math.floor(Math.random() * (stepsUp + 1))
+    : Math.floor(Math.random() * (stepsDown + 1))
+
+  let newValue = lastNoiseScale + direction * steps * noiseStep
+  newValue = Math.max(minNoiseScale, Math.min(newValue, maxNoiseScale))
+
+  return newValue
+}
+
+// Global noise instance
+export const noise = new NoiseGenerator() 

src/utils/performanceOptimizer.ts

@@ -0,0 +1,347 @@
+// Performance Optimization System for Web Audio Visualizer
+// Optimized for Hugging Face Spaces free tier deployment
+
+interface PerformanceMetrics {
+  fps: number
+  frameTime: number
+  memoryUsage: number
+  cpuUsage: number
+  gpuMemory: number
+  particleCount: number
+  lastUpdate: number
+}
+
+interface OptimizationSettings {
+  targetFPS: number
+  minFPS: number
+  maxParticles: number
+  minParticles: number
+  adaptiveQualityStep: number
+  memoryThreshold: number
+  cpuThreshold: number
+}
+
+interface CacheEntry {
+  data: any
+  timestamp: number
+  accessCount: number
+  size: number
+}
+
+export class PerformanceOptimizer {
+  private metrics: PerformanceMetrics
+  private settings: OptimizationSettings
+  private frameHistory: number[] = []
+  private lastFrameTime: number = 0
+  private adaptiveLevel: number = 1.0 // 1.0 = max quality, 0.1 = min quality
+  
+  // Caching system
+  private shaderCache: Map<string, any> = new Map()
+  private geometryCache: Map<string, any> = new Map()
+  private materialCache: Map<string, any> = new Map()
+  private calculationCache: Map<string, CacheEntry> = new Map()
+  
+  // Object pools for reuse
+  private bufferPool: Map<string, Float32Array[]> = new Map()
+  
+  // Performance monitoring
+  private performanceObserver: PerformanceObserver | null = null
+  private memoryInfo: any = null
+
+  constructor(settings: Partial<OptimizationSettings> = {}) {
+    this.settings = {
+      targetFPS: 60,
+      minFPS: 30,
+      maxParticles: 15000,
+      minParticles: 3000,
+      adaptiveQualityStep: 0.05,
+      memoryThreshold: 100 * 1024 * 1024, // 100MB
+      cpuThreshold: 80, // 80% CPU usage
+      ...settings
+    }
+
+    this.metrics = {
+      fps: 60,
+      frameTime: 16.67,
+      memoryUsage: 0,
+      cpuUsage: 0,
+      gpuMemory: 0,
+      particleCount: this.settings.maxParticles,
+      lastUpdate: performance.now()
+    }
+
+    this.initializePerformanceMonitoring()
+  }
+
+  private initializePerformanceMonitoring() {
+    // Modern performance monitoring
+    if ('PerformanceObserver' in window) {
+      this.performanceObserver = new PerformanceObserver((_list) => {
+        // Performance entries are processed in updatePerformance method
+      })
+      try {
+        this.performanceObserver.observe({ entryTypes: ['measure'] })
+      } catch (e) {
+        console.warn('Performance monitoring not fully supported')
+      }
+    }
+
+    // Memory monitoring for supported browsers
+    if ('memory' in performance) {
+      this.memoryInfo = (performance as any).memory
+    }
+  }
+
+  // Adaptive quality management
+  updatePerformance(currentTime: number): void {
+    const deltaTime = currentTime - this.lastFrameTime
+    this.lastFrameTime = currentTime
+
+    if (deltaTime > 0) {
+      const currentFPS = 1000 / deltaTime
+      this.frameHistory.push(currentFPS)
+      
+      // Keep only last 60 frames for rolling average
+      if (this.frameHistory.length > 60) {
+        this.frameHistory.shift()
+      }
+
+      // Calculate average FPS
+      const avgFPS = this.frameHistory.reduce((a, b) => a + b, 0) / this.frameHistory.length
+      this.metrics.fps = Math.round(avgFPS)
+      this.metrics.frameTime = deltaTime
+
+      // Update memory usage if available
+      if (this.memoryInfo) {
+        this.metrics.memoryUsage = this.memoryInfo.usedJSHeapSize
+        this.metrics.gpuMemory = this.memoryInfo.totalJSHeapSize
+      }
+
+      // Adaptive quality adjustment
+      this.adjustQualityLevel()
+    }
+  }
+
+  private adjustQualityLevel(): void {
+    const { fps } = this.metrics
+    const { targetFPS, minFPS, adaptiveQualityStep } = this.settings
+
+    if (fps < minFPS) {
+      // Performance is bad, reduce quality aggressively
+      this.adaptiveLevel = Math.max(0.1, this.adaptiveLevel - adaptiveQualityStep * 2)
+      console.warn(`🚨 Performance low (${fps} FPS), reducing quality to ${(this.adaptiveLevel * 100).toFixed(0)}%`)
+    } else if (fps < targetFPS) {
+      // Performance is below target, reduce quality gradually
+      this.adaptiveLevel = Math.max(0.1, this.adaptiveLevel - adaptiveQualityStep)
+    } else if (fps > targetFPS + 10 && this.adaptiveLevel < 1.0) {
+      // Performance is good, increase quality gradually
+      this.adaptiveLevel = Math.min(1.0, this.adaptiveLevel + adaptiveQualityStep * 0.5)
+    }
+
+    // Update particle count based on quality level
+    const targetParticles = Math.floor(
+      this.settings.minParticles + 
+      (this.settings.maxParticles - this.settings.minParticles) * this.adaptiveLevel
+    )
+    this.metrics.particleCount = targetParticles
+  }
+
+  // Smart caching system
+  getCachedCalculation(key: string, calculator: () => any, ttl: number = 1000): any {
+    const cached = this.calculationCache.get(key)
+    const now = performance.now()
+
+    if (cached && (now - cached.timestamp) < ttl) {
+      cached.accessCount++
+      return cached.data
+    }
+
+    // Calculate new value
+    const data = calculator()
+    this.calculationCache.set(key, {
+      data,
+      timestamp: now,
+      accessCount: 1,
+      size: this.estimateSize(data)
+    })
+
+    // Clean cache if it gets too large
+    this.cleanCache()
+    return data
+  }
+
+  // Shader caching for Three.js materials
+  getCachedShader(vertexShader: string, fragmentShader: string, uniforms: any): any {
+    const key = this.hashShader(vertexShader, fragmentShader)
+    
+    if (this.shaderCache.has(key)) {
+      const cached = this.shaderCache.get(key)
+      // Update uniforms on cached shader
+      Object.assign(cached.uniforms, uniforms)
+      return cached
+    }
+
+    // Create new shader (this would be done in the component)
+    return null // Component will create and cache
+  }
+
+  cacheShader(vertexShader: string, fragmentShader: string, material: any): void {
+    const key = this.hashShader(vertexShader, fragmentShader)
+    this.shaderCache.set(key, material)
+  }
+
+  // Geometry and buffer pooling
+  getPooledBuffer(type: string, size: number): Float32Array {
+    const poolKey = `${type}_${size}`
+    
+    if (!this.bufferPool.has(poolKey)) {
+      this.bufferPool.set(poolKey, [])
+    }
+
+    const pool = this.bufferPool.get(poolKey)!
+    
+    if (pool.length > 0) {
+      const buffer = pool.pop()!
+      buffer.fill(0) // Reset buffer
+      return buffer
+    }
+
+    // Create new buffer if pool is empty
+    return new Float32Array(size)
+  }
+
+  returnPooledBuffer(type: string, size: number, buffer: Float32Array): void {
+    const poolKey = `${type}_${size}`
+    
+    if (!this.bufferPool.has(poolKey)) {
+      this.bufferPool.set(poolKey, [])
+    }
+
+    const pool = this.bufferPool.get(poolKey)!
+    
+    // Limit pool size to prevent memory bloat
+    if (pool.length < 5) {
+      pool.push(buffer)
+    }
+  }
+
+  // Level of Detail (LOD) calculations
+  getLODSettings(distance: number, importance: number = 1.0): {
+    particleSize: number
+    updateFrequency: number
+    detailLevel: number
+  } {
+    const distanceFactor = Math.max(0.1, Math.min(1.0, 5.0 / distance))
+    const qualityFactor = this.adaptiveLevel * importance
+    
+    return {
+      particleSize: distanceFactor * qualityFactor,
+      updateFrequency: Math.max(1, Math.floor(10 / (distanceFactor * qualityFactor))),
+      detailLevel: distanceFactor * qualityFactor
+    }
+  }
+
+  // Frame skipping for heavy operations
+  shouldSkipFrame(_operation: string, frequency: number): boolean {
+    const frameCount = Math.floor(performance.now() / 16.67) // Approximate frame count
+    const skipPattern = Math.max(1, Math.floor(frequency / this.adaptiveLevel))
+    
+    return frameCount % skipPattern !== 0
+  }
+
+  // Memory management
+  private cleanCache(): void {
+    const now = performance.now()
+    const maxCacheAge = 30000 // 30 seconds
+    const maxCacheSize = 50 * 1024 * 1024 // 50MB
+
+    let totalSize = 0
+    const entries = Array.from(this.calculationCache.entries())
+    
+    // Calculate total cache size
+    entries.forEach(([_, entry]) => {
+      totalSize += entry.size
+    })
+
+    // Clean old or least used entries if cache is too large
+    if (totalSize > maxCacheSize) {
+      entries
+        .sort((a, b) => {
+          const scoreA = a[1].accessCount / (now - a[1].timestamp)
+          const scoreB = b[1].accessCount / (now - b[1].timestamp)
+          return scoreA - scoreB // Lower score = less valuable
+        })
+        .slice(0, Math.floor(entries.length * 0.3)) // Remove 30% least valuable
+        .forEach(([key, _]) => {
+          this.calculationCache.delete(key)
+        })
+    }
+
+    // Remove old entries
+    entries.forEach(([key, entry]) => {
+      if (now - entry.timestamp > maxCacheAge) {
+        this.calculationCache.delete(key)
+      }
+    })
+  }
+
+  // Utility functions
+  private hashShader(vertex: string, fragment: string): string {
+    // Simple hash function for shader caching
+    let hash = 0
+    const str = vertex + fragment
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i)
+      hash = ((hash << 5) - hash) + char
+      hash = hash & hash // Convert to 32-bit integer
+    }
+    return hash.toString()
+  }
+
+  private estimateSize(obj: any): number {
+    // Rough size estimation for caching
+    const str = JSON.stringify(obj)
+    return str.length * 2 // Approximate bytes (UTF-16)
+  }
+
+  // Public getters
+  getMetrics(): PerformanceMetrics {
+    return { ...this.metrics }
+  }
+
+  getAdaptiveLevel(): number {
+    return this.adaptiveLevel
+  }
+
+  getOptimalParticleCount(baseCount: number): number {
+    return Math.floor(baseCount * this.adaptiveLevel)
+  }
+
+  getOptimalUpdateFrequency(baseFrequency: number): number {
+    return Math.max(1, Math.floor(baseFrequency / this.adaptiveLevel))
+  }
+
+  // Cleanup
+  dispose(): void {
+    if (this.performanceObserver) {
+      this.performanceObserver.disconnect()
+    }
+    
+    this.shaderCache.clear()
+    this.geometryCache.clear()
+    this.materialCache.clear()
+    this.calculationCache.clear()
+    this.bufferPool.clear()
+  }
+}
+
+// Singleton instance for global use
+export const performanceOptimizer = new PerformanceOptimizer({
+  targetFPS: 60,
+  minFPS: 25, // Lower threshold for Hugging Face Spaces
+  maxParticles: 8000, // Reduced for CPU deployment
+  minParticles: 2000,
+  adaptiveQualityStep: 0.08,
+  memoryThreshold: 80 * 1024 * 1024, // 80MB for free tier
+  cpuThreshold: 75
+}) 

tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+} 

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+} 

vite.config.ts

@@ -0,0 +1,67 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: true,
+    port: 7860, // Hugging Face Spaces default port
+  },
+  build: {
+    // Optimization for Hugging Face Spaces deployment
+    target: 'es2015',
+    minify: 'terser',
+    sourcemap: false,
+    chunkSizeWarningLimit: 1000,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // Separate Three.js into its own chunk for better caching
+          'three': ['three'],
+          'three-addons': ['three/examples/jsm/controls/OrbitControls.js'],
+          // Separate React into its own chunk
+          'react-vendor': ['react', 'react-dom'],
+          // Audio processing utilities
+          'audio-engine': ['./src/engine/AudioEngine.ts'],
+          // Performance optimization utilities
+          'performance': ['./src/utils/performanceOptimizer.ts']
+        },
+        // Optimize chunk naming for caching
+        chunkFileNames: (chunkInfo) => {
+          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/').pop()?.replace('.ts', '').replace('.tsx', '') : 'chunk'
+          return `assets/${facadeModuleId}-[hash].js`
+        }
+      }
+    },
+    terserOptions: {
+      compress: {
+        drop_console: true, // Remove console logs in production
+        drop_debugger: true,
+        pure_funcs: ['console.log', 'console.warn'], // Remove specific console functions
+      },
+      mangle: {
+        safari10: true, // Ensure Safari compatibility
+      }
+    }
+  },
+  optimizeDeps: {
+    // Pre-bundle dependencies for faster loading
+    include: [
+      'react',
+      'react-dom',
+      'three',
+      'three/examples/jsm/controls/OrbitControls.js'
+    ],
+    exclude: [
+      // Exclude large optional dependencies that might not be needed
+    ]
+  },
+  // Asset optimization
+  assetsInclude: ['**/*.mp3', '**/*.wav', '**/*.ogg'],
+  
+  // Environment variables for optimization
+  define: {
+    '__PERFORMANCE_MODE__': true // Enable performance mode by default
+  }
+})