Update genesis/static/animation.js

genesis/static/animation.js

@@ -1,70 +1,53 @@
-// ===== MOLECULAR PARTICLE ANIMATION =====
-
-// Create a canvas background
-const canvas = document.createElement('canvas');
-canvas.id = 'moleculeCanvas';
-document.body.appendChild(canvas);
-const ctx = canvas.getContext('2d');
-
-// Resize canvas to full window
-function resizeCanvas() {
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-}
-window.addEventListener('resize', resizeCanvas);
-resizeCanvas();
-
-// Create particles
-let particles = [];
-const numParticles = 80;
-
-for (let i = 0; i < numParticles; i++) {
-    particles.push({
-        x: Math.random() * canvas.width,
-        y: Math.random() * canvas.height,
-        radius: Math.random() * 4 + 1,
-        color: Math.random() > 0.5 ? '#00ff88' : '#ffaa00',
-        speedX: (Math.random() - 0.5) * 1.5,
-        speedY: (Math.random() - 0.5) * 1.5
+// Smooth fade-in for panels
+document.addEventListener("DOMContentLoaded", () => {
+    const blocks = document.querySelectorAll(".gr-block");
+    blocks.forEach((block, index) => {
+        block.style.opacity = 0;
+        block.style.transform = "translateY(20px)";
+        setTimeout(() => {
+            block.style.transition = "all 0.6s ease";
+            block.style.opacity = 1;
+            block.style.transform = "translateY(0)";
+        }, index * 100); // Staggered load
+    });
+});
+
+// Button glow pulse
+function pulseButtons() {
+    const buttons = document.querySelectorAll("button, .gr-button");
+    buttons.forEach(btn => {
+        btn.addEventListener("mouseenter", () => {
+            btn.style.boxShadow = "0 0 20px rgba(255, 145, 0, 0.8)";
+        });
+        btn.addEventListener("mouseleave", () => {
+            btn.style.boxShadow = "0 0 10px rgba(0, 255, 157, 0.4)";
+        });
     });
 }
-
-// Animation loop
-function animate() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Draw and move particles
-    particles.forEach((p, index) => {
-        p.x += p.speedX;
-        p.y += p.speedY;
-
-        // Bounce off edges
-        if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
-        if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
-
-        // Draw particle
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
-        ctx.fillStyle = p.color;
-        ctx.fill();
-
-        // Connect lines if particles are close
-        for (let j = index + 1; j < particles.length; j++) {
-            let dx = particles[j].x - p.x;
-            let dy = particles[j].y - p.y;
-            let distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance < 120) {
-                ctx.beginPath();
-                ctx.moveTo(p.x, p.y);
-                ctx.lineTo(particles[j].x, particles[j].y);
-                ctx.strokeStyle = p.color === '#00ff88' ? '#00ff88aa' : '#ffaa00aa';
-                ctx.lineWidth = 0.5;
-                ctx.stroke();
-            }
-        }
+pulseButtons();
+
+// Graph animation on load
+function animateGraphs() {
+    const graphs = document.querySelectorAll(".graph-container");
+    graphs.forEach(graph => {
+        graph.style.opacity = 0;
+        graph.style.transform = "scale(0.95)";
+        setTimeout(() => {
+            graph.style.transition = "all 0.5s ease";
+            graph.style.opacity = 1;
+            graph.style.transform = "scale(1)";
+        }, 300);
     });
-
-    requestAnimationFrame(animate);
 }
-
-animate();
+animateGraphs();
+
+// Auto-refresh glow for updated sections
+function glowOnUpdate(selector) {
+    const element = document.querySelector(selector);
+    if (element) {
+        element.style.boxShadow = "0 0 25px rgba(0, 255, 157, 0.8)";
+        setTimeout(() => {
+            element.style.boxShadow = "";
+        }, 1000);
+    }
+}