Update src/components/WorldTreeVisualizer.tsx

src/components/WorldTreeVisualizer.tsx

@@ -68,6 +68,7 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
   const [dysonSphereEnabled, setDysonSphereEnabled] = useState(true)
   const [vineGrowthRate, setVineGrowthRate] = useState(0.02)
   const [vineComplexity, setVineComplexity] = useState(24)
+  const [showStartupInfo, setShowStartupInfo] = useState(true)
   const [fogParams, setFogParams] = useState<FogParams>({
     enabled: true,
     color: '#000000',
@@ -805,6 +806,14 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
     const deltaTime = lastTimeRef.current ? (currentTime - lastTimeRef.current) / 1000 : 0
     lastTimeRef.current = currentTime
 
+    // Check if audio is playing and hide startup info
+    if (showStartupInfo && audioEngine) {
+      const audioData = audioEngine.getAudioData()
+      if (audioData.overallAmplitude > 0.01) {
+        setShowStartupInfo(false)
+      }
+    }
+
     // Enhanced FPS monitoring with auto-refresh triggers
     setPerformanceStats(prev => {
       const frameCount = prev.frameCount + 1
@@ -2509,28 +2518,34 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
         </div>
       </div>
 
-      {/* About Section - Clickable Widget */}
+      {/* About Section - Expanded 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)',
+          bottom: aboutCollapsed ? '20px' : '5%',
+          left: aboutCollapsed ? '50%' : '50%',
+          transform: aboutCollapsed ? 'translateX(-50%) translateY(calc(100% - 75px))' : 'translateX(-50%) translateY(0)',
           zIndex: 1000,
           background: 'linear-gradient(135deg, var(--marble-dark), var(--teal-dark))',
-          borderRadius: '10px',
+          borderRadius: aboutCollapsed ? '10px' : '15px',
           color: 'var(--copper-light)',
           fontFamily: 'Metamorphous, serif',
-          width: '380px',
-          minWidth: '380px',
-          transition: 'all 0.4s ease-in-out',
+          width: aboutCollapsed ? '420px' : '90vw',
+          minWidth: aboutCollapsed ? '420px' : '800px',
+          maxWidth: aboutCollapsed ? '420px' : '1200px',
+          height: aboutCollapsed ? 'auto' : '80vh',
+          maxHeight: aboutCollapsed ? 'none' : '80vh',
+          transition: 'all 0.5s 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'
+          boxShadow: aboutCollapsed 
+            ? '0 4px 20px var(--copper-dark), inset 0 0 15px var(--teal-dark)' 
+            : '0 10px 40px rgba(0, 0, 0, 0.7), inset 0 0 25px var(--teal-dark)',
+          cursor: 'pointer',
+          overflow: aboutCollapsed ? 'visible' : 'hidden'
         }}
         onMouseEnter={(e) => {
           // Disable camera controls when mouse enters about section
@@ -2552,26 +2567,26 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
         {/* Collapsed State - Clickable Widget */}
         {aboutCollapsed && (
           <div style={{
-            padding: '15px 20px',
+            padding: '18px 25px',
             textAlign: 'center',
-            fontSize: '11px',
-            lineHeight: '1.3',
+            fontSize: '12px',
+            lineHeight: '1.4',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: '10px',
-            minHeight: '50px'
+            gap: '12px',
+            minHeight: '55px'
           }}>
-            <div className="rune" style={{ fontSize: '18px', color: 'var(--copper-bright)' }}>⟐</div>
+            <div className="rune" style={{ fontSize: '20px', color: 'var(--copper-bright)' }}>⟐</div>
             <div style={{ 
               flex: 1,
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
-              gap: '2px'
+              gap: '3px'
             }}>
               <div className="ancient-title" style={{ 
-                fontSize: '11px', 
+                fontSize: '13px', 
                 color: 'var(--copper-bright)', 
                 fontWeight: 'bold',
                 fontFamily: 'Metamorphous, serif' 
@@ -2579,24 +2594,28 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
                 transmission source
               </div>
               <div className="runic-text" style={{ 
-                fontSize: '8px', 
+                fontSize: '9px', 
                 color: 'var(--copper-medium)', 
                 opacity: 0.9,
                 fontFamily: 'Uncial Antiqua, serif'
               }}>
-                ◦ access entity data ◦
+                ◦ click to access entity data ◦
               </div>
             </div>
-            <div className="rune" style={{ fontSize: '12px', opacity: 0.7, color: 'var(--transmission-glow)' }}>⟨</div>
+            <div className="rune" style={{ fontSize: '14px', opacity: 0.7, color: 'var(--transmission-glow)' }}>⟨</div>
           </div>
         )}
 
         {/* Expanded State - Full About Panel */}
         {!aboutCollapsed && (
           <div style={{
-            padding: '20px',
+            padding: '30px 40px',
             transition: 'all 0.3s ease-in-out',
-            position: 'relative'
+            position: 'relative',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'auto'
           }}>
             {/* Subtle Logo Background */}
             <div style={{
@@ -2606,74 +2625,249 @@ export const WorldTreeVisualizer: React.FC<WorldTreeVisualizerProps> = ({ audioE
               right: 0,
               bottom: 0,
               backgroundImage: 'url(/images/logo.webp)',
-              backgroundSize: 'contain',
+              backgroundSize: '200px 200px',
               backgroundRepeat: 'no-repeat',
-              backgroundPosition: 'center center',
-              opacity: 0.18,
-              borderRadius: '10px',
+              backgroundPosition: 'top right 40px',
+              opacity: 0.15,
+              borderRadius: '15px',
               pointerEvents: 'none'
             }} />
             
             {/* Content Overlay */}
             <div style={{
               position: 'relative',
-              zIndex: 2
+              zIndex: 2,
+              flexGrow: 1,
+              display: 'flex',
+              flexDirection: 'column'
             }}>
               <div style={{
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'space-between',
-                marginBottom: '15px'
+                marginBottom: '25px',
+                paddingBottom: '15px',
+                borderBottom: '1px solid var(--copper-dark)'
               }}>
-              <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: '10px', 
-              lineHeight: '1.7', 
-              marginBottom: '12px',
-              fontFamily: 'Uncial Antiqua, serif',
-              color: 'var(--copper-medium)'
-            }}>
-              <p style={{ marginBottom: '10px' }}>
-                Liminal Sessions emerges from the spaces between heartbeats, where ancient algorithms carved themselves into stone before mathematics had names. Their sound excavates frequencies buried beneath millennia of sediment, translating the geometric hymns that echo in empty cathedrals and forgotten temples.
-              </p>
-              
-              <p style={{ marginBottom: '10px' }}>
-                Through acoustic brutality and primordial precision, they channel the conversations between wood and metal, breath and bone, time and its shadows. The music arrives as if summoned from depths where djent mathematics merge with earth's oldest songs.
-              </p>
+                <h3 className="ancient-title" style={{ 
+                  margin: 0, 
+                  fontSize: '28px', 
+                  textAlign: 'center', 
+                  flex: 1,
+                  fontFamily: 'Metamorphous, serif',
+                  color: 'var(--copper-bright)',
+                  textShadow: '0 2px 4px rgba(0,0,0,0.5)'
+                }}>
+                  <span className="rune" style={{ fontSize: '32px' }}>⟐</span> Liminal Sessions <span className="rune" style={{ fontSize: '32px' }}>⟐</span>
+                </h3>
+                <div className="rune" style={{ 
+                  fontSize: '20px', 
+                  opacity: 0.7, 
+                  color: 'var(--transmission-glow)',
+                  cursor: 'pointer',
+                  transition: 'all 0.2s ease',
+                  padding: '5px'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.opacity = '1'
+                  e.currentTarget.style.transform = 'scale(1.1)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.opacity = '0.7'
+                  e.currentTarget.style.transform = 'scale(1)'
+                }}
+                >⟩</div>
+              </div>
               
-              <p style={{ fontSize: '9px', opacity: 0.9 }}>
-                They are archaeologists of sound, unearthing the sacred geometry that binds chaos to rhythm in the liminal space where all echoes converge.
-              </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 style={{
+                display: 'grid',
+                gridTemplateColumns: '1fr',
+                gap: '20px',
+                flexGrow: 1
+              }}>
+                <div className="transmission-text" style={{ 
+                  fontSize: '16px', 
+                  lineHeight: '1.8', 
+                  fontFamily: 'Uncial Antiqua, serif',
+                  color: 'var(--copper-light)',
+                  textShadow: '0 1px 2px rgba(0,0,0,0.3)'
+                }}>
+                  <p style={{ 
+                    marginBottom: '20px',
+                    fontSize: '18px',
+                    fontWeight: 'bold',
+                    color: 'var(--copper-bright)'
+                  }}>
+                    Liminal Sessions emerges from the spaces between heartbeats, where ancient algorithms carved themselves into stone before mathematics had names.
+                  </p>
+                  
+                  <p style={{ marginBottom: '20px' }}>
+                    Their sound excavates frequencies buried beneath millennia of sediment, translating the geometric hymns that echo in empty cathedrals and forgotten temples. Through acoustic brutality and primordial precision, they channel the conversations between wood and metal, breath and bone, time and its shadows.
+                  </p>
+                  
+                  <p style={{ marginBottom: '20px' }}>
+                    The music arrives as if summoned from depths where djent mathematics merge with earth's oldest songs. Each composition becomes an archaeological expedition into the strata of sound, where rhythm serves as both excavation tool and ancient map.
+                  </p>
+                  
+                  <p style={{ 
+                    fontSize: '14px', 
+                    opacity: 0.9,
+                    fontStyle: 'italic',
+                    color: 'var(--transmission-glow)'
+                  }}>
+                    They are archaeologists of sound, unearthing the sacred geometry that binds chaos to rhythm in the liminal space where all echoes converge.
+                  </p>
+                </div>
+
+                <div style={{
+                  background: 'rgba(0,0,0,0.3)',
+                  padding: '20px',
+                  borderRadius: '10px',
+                  border: '1px solid var(--copper-dark)'
+                }}>
+                  <h4 style={{
+                    fontSize: '18px',
+                    color: 'var(--copper-bright)',
+                    marginBottom: '15px',
+                    fontFamily: 'Metamorphous, serif'
+                  }}>
+                    <span className="rune">◈</span> Transmission Properties
+                  </h4>
+                  <div className="runic-text" style={{ 
+                    fontSize: '14px', 
+                    opacity: 0.9, 
+                    lineHeight: '1.6',
+                    fontFamily: 'Uncial Antiqua, serif',
+                    color: 'var(--copper-medium)',
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+                    gap: '10px'
+                  }}>
+                    <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><span className="rune">⟐</span> symbolic emergence field analysis</div>
+                    <div><span className="rune">⧨</span> biomimetic coupling systems</div>
+                    <div><span className="rune">◈</span> cymatic pattern generation</div>
+                  </div>
+                </div>
+
+                <div style={{
+                  textAlign: 'center',
+                  padding: '15px',
+                  fontSize: '12px',
+                  color: 'var(--copper-medium)',
+                  fontFamily: 'Uncial Antiqua, serif',
+                  opacity: 0.8,
+                  borderTop: '1px solid var(--copper-dark)',
+                  marginTop: 'auto'
+                }}>
+                  ◦ click anywhere to close and return to visualization ◦
+                </div>
+              </div>
             </div>
           </div>
         )}
       </div>
 
+      {/* Startup Info Message */}
+      {showStartupInfo && (
+        <div style={{
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          zIndex: 999,
+          background: 'linear-gradient(135deg, var(--marble-dark), var(--teal-dark))',
+          border: '2px solid var(--copper-medium)',
+          borderRadius: '15px',
+          padding: '30px 40px',
+          maxWidth: '500px',
+          width: '90%',
+          textAlign: 'center',
+          backdropFilter: 'blur(20px)',
+          boxShadow: '0 10px 30px rgba(0, 0, 0, 0.7), inset 0 0 20px var(--teal-dark)',
+          color: 'var(--copper-light)',
+          fontFamily: 'Metamorphous, serif',
+          animation: 'fadeInPulse 2s ease-out'
+        }}>
+          <div className="rune" style={{ 
+            fontSize: '48px', 
+            color: 'var(--copper-bright)',
+            marginBottom: '20px',
+            display: 'block'
+          }}>⟐</div>
+          
+          <h3 style={{
+            fontSize: '24px',
+            marginBottom: '20px',
+            color: 'var(--copper-bright)',
+            fontFamily: 'Metamorphous, serif',
+            textShadow: '0 2px 4px rgba(0,0,0,0.5)'
+          }}>
+            Visualization Awaiting Signal
+          </h3>
+          
+          <div style={{
+            fontSize: '16px',
+            lineHeight: '1.6',
+            marginBottom: '25px',
+            color: 'var(--copper-medium)',
+            fontFamily: 'Uncial Antiqua, serif'
+          }}>
+            <p style={{ marginBottom: '15px' }}>
+              The particle field remains dormant until audio transmission begins.
+            </p>
+            <p>
+              <strong style={{ color: 'var(--copper-bright)' }}>Press the play button</strong> or <strong style={{ color: 'var(--copper-bright)' }}>select a track</strong> from the audio interface to activate the visualization.
+            </p>
+          </div>
+          
+          <div style={{
+            fontSize: '12px',
+            color: 'var(--transmission-glow)',
+            fontFamily: 'Uncial Antiqua, serif',
+            opacity: 0.9
+          }}>
+            ◦ this message will disappear once audio begins ◦
+          </div>
+          
+          <button
+            onClick={() => setShowStartupInfo(false)}
+            style={{
+              position: 'absolute',
+              top: '15px',
+              right: '15px',
+              background: 'transparent',
+              border: '1px solid var(--copper-medium)',
+              borderRadius: '50%',
+              width: '30px',
+              height: '30px',
+              color: 'var(--copper-medium)',
+              cursor: 'pointer',
+              fontSize: '14px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.borderColor = 'var(--transmission-glow)'
+              e.currentTarget.style.color = 'var(--transmission-glow)'
+              e.currentTarget.style.background = 'rgba(255, 215, 0, 0.1)'
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.borderColor = 'var(--copper-medium)'
+              e.currentTarget.style.color = 'var(--copper-medium)'
+              e.currentTarget.style.background = 'transparent'
+            }}
+            title="Dismiss message"
+          >
+            ×
+          </button>
+        </div>
+      )}
+
       {/* Floating Refresh Button - Top Right */}
       <div style={{
         position: 'fixed',