✨ Add epic intro sequence with enhanced aurora effects

- Pulsating title with massive glow effects
- Animated welcome messages with fade-in
- Enhanced particle system with 7 colors
- Lightning particles for intense bursts
- Auto-start evolution after 4 seconds
- Multiple burst patterns for visual variety
- Gradient background for depth

app.py

@@ -20,16 +20,44 @@ state = {
     "running": False
 }
 
-# HTML for aurora effect
+# HTML for aurora effect with epic intro
 AURORA_HTML = """
-<div id="aurora-container" style="position: relative; width: 100%; height: 400px; background: #000; overflow: hidden;">
+<div id="aurora-container" style="position: relative; width: 100%; height: 400px; background: linear-gradient(to bottom, #000428, #004e92); overflow: hidden; border-radius: 10px;">
     <canvas id="aurora-canvas" style="width: 100%; height: 100%;"></canvas>
-    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10;">
-        <h1 style="color: #00FF88; font-size: 48px; margin: 0; text-shadow: 0 0 20px #00FF88;">Evolution Aurora</h1>
-        <p style="color: #7B3FF2; font-size: 24px; text-shadow: 0 0 10px #7B3FF2;">AI Learning to Code</p>
+    <div id="title-container" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 10;">
+        <h1 id="main-title" style="color: #00FF88; font-size: 64px; margin: 0; text-shadow: 0 0 30px #00FF88, 0 0 60px #00FF88; animation: pulse 2s ease-in-out infinite;">
+            Evolution Aurora
+        </h1>
+        <p style="color: #FFD700; font-size: 28px; text-shadow: 0 0 20px #FFD700; margin-top: 10px; opacity: 0; animation: fadeIn 2s ease-in 1s forwards;">
+            Watch AI Learn to Code in Real-Time
+        </p>
+        <p id="welcome-msg" style="color: #00AAFF; font-size: 20px; margin-top: 20px; opacity: 0; animation: fadeIn 2s ease-in 2s forwards;">
+            🚀 Welcome to the Future of AI Development
+        </p>
     </div>
 </div>
 
+<style>
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 0.8; }
+    50% { transform: scale(1.05); opacity: 1; }
+    100% { transform: scale(1); opacity: 0.8; }
+}
+
+@keyframes fadeIn {
+    to { opacity: 1; }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+#aurora-container {
+    box-shadow: 0 10px 40px rgba(123, 63, 242, 0.5);
+}
+</style>
+
 <script>
 const canvas = document.getElementById('aurora-canvas');
 const ctx = canvas.getContext('2d');
@@ -77,15 +105,30 @@ class Particle {
 function createBurst(intensity) {
     const centerX = canvas.width / 2;
     const centerY = canvas.height / 2;
-    const colors = ['#00FF88', '#7B3FF2', '#00AAFF', '#FFD700'];
+    const colors = ['#00FF88', '#7B3FF2', '#00AAFF', '#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1'];
     
+    // Create multiple burst patterns
     for (let i = 0; i < 100 * intensity; i++) {
+        const angle = (Math.PI * 2 * i) / (100 * intensity);
+        const speed = Math.random() * 15 + 5;
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        
         particles.push(new Particle(
-            centerX + (Math.random() - 0.5) * 100,
-            centerY + (Math.random() - 0.5) * 100,
-            colors[Math.floor(Math.random() * colors.length)]
+            centerX + Math.cos(angle) * 20,
+            centerY + Math.sin(angle) * 20,
+            color
         ));
     }
+    
+    // Add some special lightning particles
+    if (intensity > 3) {
+        for (let j = 0; j < 20; j++) {
+            const lightningParticle = new Particle(centerX, centerY, '#FFFFFF');
+            lightningParticle.size = Math.random() * 8 + 4;
+            lightningParticle.life = 150;
+            particles.push(lightningParticle);
+        }
+    }
 }
 
 function animate() {
@@ -109,8 +152,22 @@ setInterval(() => {
     }
 }, 2000);
 
-// Initial burst
-setTimeout(() => createBurst(3), 500);
+// Epic initial burst sequence
+setTimeout(() => {
+    createBurst(5); // Massive initial burst
+    document.getElementById('welcome-msg').style.fontSize = '24px';
+}, 500);
+
+setTimeout(() => createBurst(3), 1500);
+setTimeout(() => createBurst(4), 2500);
+
+// Auto-start evolution after intro
+setTimeout(() => {
+    const startBtn = document.querySelector('.gr-button-primary');
+    if (startBtn && startBtn.textContent.includes('Start')) {
+        startBtn.click();
+    }
+}, 4000);
 </script>
 """