Change the particle background into an Interactive Particle Network background with animations.

script.js

@@ -76,29 +76,39 @@ function createParticleNetwork() {
         constructor() {
             this.x = Math.random() * canvas.width;
             this.y = Math.random() * canvas.height;
-            this.size = Math.random() * 3 + 1;
+            this.size = Math.random() * 2 + 1;
             this.baseX = this.x;
             this.baseY = this.y;
-            this.density = (Math.random() * 30) + 1;
+            this.density = (Math.random() * 50) + 10;
             this.color = this.getRandomColor();
+            this.velocity = {
+                x: (Math.random() - 0.5) * 0.5,
+                y: (Math.random() - 0.5) * 0.5
+            };
+            this.angle = Math.random() * Math.PI * 2;
+            this.orbitRadius = Math.random() * 50 + 20;
+            this.orbitSpeed = Math.random() * 0.02 + 0.005;
         }
         
         getRandomColor() {
-            const colors = [
-                'rgba(15, 240, 252, 0.8)', // neon blue
-                'rgba(255, 0, 255, 0.8)',  // neon magenta
-                'rgba(255, 255, 0, 0.8)',  // neon yellow
-                'rgba(0, 255, 255, 0.8)',  // cyan
-                'rgba(255, 255, 255, 0.8)' // white
-            ];
-            return colors[Math.floor(Math.random() * colors.length)];
+            const hue = Math.random() * 360;
+            const saturation = 80 + Math.random() * 20;
+            const lightness = 50 + Math.random() * 20;
+            return `hsla(${hue}, ${saturation}%, ${lightness}%, 0.8)`;
         }
         
         draw() {
+            // Create gradient for each particle
+            const gradient = ctx.createRadialGradient(
+                this.x, this.y, 0,
+                this.x, this.y, this.size
+            );
+            gradient.addColorStop(0, this.color);
+            gradient.addColorStop(1, 'transparent');
+            
             ctx.beginPath();
             ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-            ctx.closePath();
-            ctx.fillStyle = this.color;
+            ctx.fillStyle = gradient;
             ctx.fill();
             
             // Add glow effect
@@ -107,44 +117,55 @@ function createParticleNetwork() {
         }
         
         update() {
-            // Mouse interaction
-            const dx = mouse.x - this.x;
-            const dy = mouse.y - this.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            const forceDirectionX = dx / distance;
-            const forceDirectionY = dy / distance;
-            const maxDistance = mouse.radius;
-            let force = (maxDistance - distance) / maxDistance;
-            
-            if (force < 0) force = 0;
-            
-            const directionX = forceDirectionX * force * this.density * 0.6;
-            const directionY = forceDirectionY * force * this.density * 0.6;
+            // Orbital movement
+            this.angle += this.orbitSpeed;
+            this.baseX = canvas.width/2 + Math.cos(this.angle) * this.orbitRadius;
+            this.baseY = canvas.height/2 + Math.sin(this.angle) * this.orbitRadius;
             
-            if (distance < mouse.radius + this.size) {
-                this.x -= directionX;
-                this.y -= directionY;
-            } else {
-                // Return to original position with easing
-                if (this.x !== this.baseX) {
-                    const dx = this.x - this.baseX;
-                    this.x -= dx / 10;
-                }
-                if (this.y !== this.baseY) {
-                    const dy = this.y - this.baseY;
-                    this.y -= dy / 10;
+            // Mouse interaction
+            if (mouse.x && mouse.y) {
+                const dx = mouse.x - this.x;
+                const dy = mouse.y - this.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                const maxDistance = mouse.radius;
+                
+                if (distance < maxDistance) {
+                    const forceDirectionX = dx / distance;
+                    const forceDirectionY = dy / distance;
+                    const force = (maxDistance - distance) / maxDistance;
+                    const directionX = forceDirectionX * force * this.density * 0.6;
+                    const directionY = forceDirectionY * force * this.density * 0.6;
+                    
+                    this.x -= directionX;
+                    this.y -= directionY;
+                } else {
+                    // Return to original position with easing
+                    if (this.x !== this.baseX) {
+                        this.x += (this.baseX - this.x) / 20;
+                    }
+                    if (this.y !== this.baseY) {
+                        this.y += (this.baseY - this.y) / 20;
+                    }
                 }
+            } else {
+                // Continue orbiting if mouse not present
+                this.x += (this.baseX - this.x) / 20;
+                this.y += (this.baseY - this.y) / 20;
             }
             
             // Add some random movement
-            this.x += (Math.random() - 0.5) * 0.5;
-            this.y += (Math.random() - 0.5) * 0.5;
+            this.x += this.velocity.x;
+            this.y += this.velocity.y;
+            
+            // Bounce off edges
+            if (this.x < 0 || this.x > canvas.width) this.velocity.x *= -1;
+            if (this.y < 0 || this.y > canvas.height) this.velocity.y *= -1;
         }
     }
     
     // Create particles
     const particles = [];
-    const particleCount = Math.floor((canvas.width * canvas.height) / 9000);
+    const particleCount = Math.floor((canvas.width * canvas.height) / 5000);
     
     for (let i = 0; i < particleCount; i++) {
         particles.push(new Particle());
@@ -158,46 +179,64 @@ function createParticleNetwork() {
                 const dy = particles[a].y - particles[b].y;
                 const distance = Math.sqrt(dx * dx + dy * dy);
                 
-                if (distance < 100) {
-                    const opacity = 1 - distance / 100;
-                    ctx.strokeStyle = `rgba(15, 240, 252, ${opacity * 0.5})`;
-                    ctx.lineWidth = 1;
+                if (distance < 150) {
+                    const opacity = 1 - distance / 150;
+                    
+                    // Create gradient for connection line
+                    const gradient = ctx.createLinearGradient(
+                        particles[a].x, particles[a].y,
+                        particles[b].x, particles[b].y
+                    );
+                    gradient.addColorStop(0, particles[a].color);
+                    gradient.addColorStop(1, particles[b].color);
+                    
+                    ctx.strokeStyle = gradient;
+                    ctx.globalAlpha = opacity * 0.3;
+                    ctx.lineWidth = 0.5 + opacity * 1.5;
                     ctx.beginPath();
                     ctx.moveTo(particles[a].x, particles[a].y);
                     ctx.lineTo(particles[b].x, particles[b].y);
                     ctx.stroke();
-                    
-                    // Alternate line color
-                    if (distance < 50) {
-                        ctx.strokeStyle = `rgba(255, 0, 255, ${opacity * 0.3})`;
-                        ctx.beginPath();
-                        ctx.moveTo(particles[a].x, particles[a].y);
-                        ctx.lineTo(particles[b].x, particles[b].y);
-                        ctx.stroke();
-                    }
+                    ctx.globalAlpha = 1;
                 }
             }
         }
     }
     
+    // Draw background
+    function drawBackground() {
+        const gradient = ctx.createRadialGradient(
+            canvas.width/2, canvas.height/2, 0,
+            canvas.width/2, canvas.height/2, Math.max(canvas.width, canvas.height)/2
+        );
+        gradient.addColorStop(0, 'rgba(5, 5, 15, 0)');
+        gradient.addColorStop(1, 'rgba(10, 10, 26, 1)');
+        
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    
     // Animation loop
     function animate() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         
+        // Draw background
+        drawBackground();
+        
+        // Connect particles first (behind)
+        connect();
+        
         // Draw particles
         for (let i = 0; i < particles.length; i++) {
             particles[i].draw();
             particles[i].update();
         }
         
-        // Connect particles
-        connect();
-        
         requestAnimationFrame(animate);
     }
     
     // Handle resize
-    window.addEventListener('resize', () => {
+    function handleResize() {
         canvas.width = container.offsetWidth;
         canvas.height = container.offsetHeight;
         
@@ -206,8 +245,18 @@ function createParticleNetwork() {
         for (let i = 0; i < particleCount; i++) {
             particles.push(new Particle());
         }
-    });
+    }
+    
+    window.addEventListener('resize', handleResize);
     
     // Start animation
     animate();
+    
+    // Add periodic pulse effect
+    setInterval(() => {
+        particles.forEach(p => {
+            p.orbitSpeed = (Math.random() * 0.03 + 0.01) * (Math.random() > 0.5 ? 1 : -1);
+            p.orbitRadius = Math.random() * 100 + 50;
+        });
+    }, 3000);
 }

style.css

@@ -257,7 +257,6 @@ box-shadow: 0 0 30px rgba(15, 240, 252, 0.5),
     background: radial-gradient(circle at center, #050515 0%, #0a0a1a 100%);
     overflow: hidden;
 }
-
 .cosmic-canvas {
     position: absolute;
     top: 0;
@@ -265,8 +264,9 @@ box-shadow: 0 0 30px rgba(15, 240, 252, 0.5),
     width: 100%;
     height: 100%;
     z-index: 1;
-    opacity: 0.9;
+    opacity: 0.8;
     mix-blend-mode: screen;
+    pointer-events: none;
 }
 /* Brand Logo Positioning */
 .brand-logo {