✨ Add interactive particle effects and final polish

- Mouse-attracted particles create mesmerizing patterns
- Click to create custom particle bursts
- Glowing cursor with radial gradient effect
- Sparkle effect follows mouse movement
- Particles respond to mouse proximity (200px range)
- Enhanced visual feedback for user interaction
- Smooth particle physics with attraction forces
- Professional polish for hackathon submission

app.py

@@ -95,11 +95,23 @@ class Particle {
     }
     
     update() {
+        // Mouse attraction
+        const dx = mouseX - this.x;
+        const dy = mouseY - this.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        
+        if (dist < 200 && dist > 0) {
+            const force = 0.5 * (1 - dist / 200);
+            this.vx += (dx / dist) * force;
+            this.vy += (dy / dist) * force;
+        }
+        
         this.x += this.vx;
         this.y += this.vy;
         this.vy += 0.2;
         this.life--;
         this.vx *= 0.98;
+        this.vy *= 0.98;
     }
     
     draw() {
@@ -148,12 +160,30 @@ function animate() {
     ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     
+    // Mouse glow effect
+    const gradient = ctx.createRadialGradient(mouseX, mouseY, 0, mouseX, mouseY, 100);
+    gradient.addColorStop(0, 'rgba(123, 63, 242, 0.3)');
+    gradient.addColorStop(0.5, 'rgba(0, 170, 255, 0.1)');
+    gradient.addColorStop(1, 'rgba(0, 255, 136, 0)');
+    ctx.fillStyle = gradient;
+    ctx.fillRect(mouseX - 100, mouseY - 100, 200, 200);
+    
     particles = particles.filter(p => {
         p.update();
         p.draw();
         return p.life > 0;
     });
     
+    // Draw cursor sparkle
+    ctx.save();
+    ctx.fillStyle = '#FFFFFF';
+    ctx.shadowBlur = 20;
+    ctx.shadowColor = '#00FF88';
+    ctx.beginPath();
+    ctx.arc(mouseX, mouseY, 3, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+    
     requestAnimationFrame(animate);
 }
 animate();
@@ -174,6 +204,33 @@ setTimeout(() => {
 setTimeout(() => createBurst(3), 1500);
 setTimeout(() => createBurst(4), 2500);
 
+// Mouse interaction
+let mouseX = canvas.width / 2;
+let mouseY = canvas.height / 2;
+
+canvas.addEventListener('mousemove', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    mouseX = (e.clientX - rect.left) * (canvas.width / rect.width);
+    mouseY = (e.clientY - rect.top) * (canvas.height / rect.height);
+});
+
+canvas.addEventListener('click', (e) => {
+    const rect = canvas.getBoundingClientRect();
+    const x = (e.clientX - rect.left) * (canvas.width / rect.width);
+    const y = (e.clientY - rect.top) * (canvas.height / rect.height);
+    
+    // Create burst at click location
+    for (let i = 0; i < 50; i++) {
+        const angle = (Math.PI * 2 * i) / 50;
+        const speed = Math.random() * 10 + 5;
+        particles.push(new Particle(
+            x + Math.cos(angle) * 10,
+            y + Math.sin(angle) * 10,
+            ['#00FF88', '#7B3FF2', '#00AAFF', '#FFD700'][Math.floor(Math.random() * 4)]
+        ));
+    }
+});
+
 // Auto-start evolution after intro
 setTimeout(() => {
     const startBtn = document.querySelector('.gr-button-primary');