From 9fcec6cbb80183cde17025e95a7acf69fc251590 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Mon, 16 Feb 2026 22:58:09 +0000
Subject: [PATCH] feat: Add animated satellite/signal background to GitHub
 Pages

Canvas-based animation with orbiting satellite dots, signal pulse rings,
drifting particles, and a faint grid overlay. Uses the accent cyan color
at very low opacity to stay subtle. Particles brighten near the cursor.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 docs/index.html | 227 ++++++++++++++++++++++++++++++++++++++++++++++++
 docs/style.css  |  16 ++++
 2 files changed, 243 insertions(+)
diff --git a/docs/index.html b/docs/index.html
index 113ca0f..f3b1ea0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -11,6 +11,7 @@
     <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
 <body>
+    <canvas id="bg-canvas"></canvas>
     <nav class="navbar">
         <div class="nav-container">
             <a href="#" class="nav-logo">iNTERCEPT</a>
@@ -492,5 +493,231 @@ docker compose up -d</code></pre>
             window.addEventListener('resize', () => { buildIndicators(); updateArrows(); });
         })();
     </script>
+
+    <script>
+    // Animated satellite & signal background
+    (function() {
+        const canvas = document.getElementById('bg-canvas');
+        const ctx = canvas.getContext('2d');
+        let w, h, dpr;
+        let orbits = [];
+        let pulses = [];
+        let particles = [];
+        let mouse = { x: -1000, y: -1000 };
+
+        function resize() {
+            dpr = Math.min(window.devicePixelRatio || 1, 2);
+            w = window.innerWidth;
+            h = document.documentElement.scrollHeight;
+            canvas.width = w * dpr;
+            canvas.height = h * dpr;
+            canvas.style.width = w + 'px';
+            canvas.style.height = h + 'px';
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        }
+
+        // Orbital paths with satellites
+        function createOrbits() {
+            orbits = [];
+            const count = Math.max(4, Math.floor(w / 300));
+            for (let i = 0; i < count; i++) {
+                const cx = Math.random() * w;
+                const cy = Math.random() * h;
+                const rx = 120 + Math.random() * 280;
+                const ry = 40 + Math.random() * 100;
+                const tilt = (Math.random() - 0.5) * 1.2;
+                const speed = (0.0002 + Math.random() * 0.0004) * (Math.random() > 0.5 ? 1 : -1);
+                const sats = [];
+                const satCount = 1 + Math.floor(Math.random() * 2);
+                for (let j = 0; j < satCount; j++) {
+                    sats.push({ angle: Math.random() * Math.PI * 2, pulseTimer: 0 });
+                }
+                orbits.push({ cx, cy, rx, ry, tilt, speed, sats });
+            }
+        }
+
+        // Floating signal particles (tiny dots drifting upward)
+        function createParticles() {
+            particles = [];
+            const count = Math.max(30, Math.floor((w * h) / 25000));
+            for (let i = 0; i < count; i++) {
+                particles.push({
+                    x: Math.random() * w,
+                    y: Math.random() * h,
+                    vy: -(0.08 + Math.random() * 0.15),
+                    vx: (Math.random() - 0.5) * 0.1,
+                    size: 0.5 + Math.random() * 1.2,
+                    alpha: 0.1 + Math.random() * 0.25,
+                    flicker: Math.random() * Math.PI * 2,
+                });
+            }
+        }
+
+        function spawnPulse(x, y) {
+            pulses.push({ x, y, r: 2, maxR: 50 + Math.random() * 40, alpha: 0.35 });
+        }
+
+        function drawOrbitPath(orbit) {
+            ctx.save();
+            ctx.translate(orbit.cx, orbit.cy);
+            ctx.rotate(orbit.tilt);
+            ctx.beginPath();
+            ctx.ellipse(0, 0, orbit.rx, orbit.ry, 0, 0, Math.PI * 2);
+            ctx.strokeStyle = 'rgba(0, 212, 170, 0.04)';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+            ctx.restore();
+        }
+
+        function drawSatellite(orbit, sat, dt) {
+            sat.angle += orbit.speed * dt;
+            const cos = Math.cos(orbit.tilt);
+            const sin = Math.sin(orbit.tilt);
+            const ex = orbit.rx * Math.cos(sat.angle);
+            const ey = orbit.ry * Math.sin(sat.angle);
+            const sx = orbit.cx + ex * cos - ey * sin;
+            const sy = orbit.cy + ex * sin + ey * cos;
+
+            // Satellite dot
+            ctx.beginPath();
+            ctx.arc(sx, sy, 2, 0, Math.PI * 2);
+            ctx.fillStyle = 'rgba(0, 212, 170, 0.7)';
+            ctx.fill();
+
+            // Faint glow
+            ctx.beginPath();
+            ctx.arc(sx, sy, 6, 0, Math.PI * 2);
+            const g = ctx.createRadialGradient(sx, sy, 0, sx, sy, 6);
+            g.addColorStop(0, 'rgba(0, 212, 170, 0.15)');
+            g.addColorStop(1, 'rgba(0, 212, 170, 0)');
+            ctx.fillStyle = g;
+            ctx.fill();
+
+            // Periodic signal pulse
+            sat.pulseTimer += dt;
+            if (sat.pulseTimer > 3000 + Math.random() * 500) {
+                sat.pulseTimer = 0;
+                spawnPulse(sx, sy);
+            }
+        }
+
+        function drawPulses(dt) {
+            for (let i = pulses.length - 1; i >= 0; i--) {
+                const p = pulses[i];
+                p.r += dt * 0.025;
+                p.alpha = 0.35 * (1 - p.r / p.maxR);
+                if (p.r >= p.maxR) { pulses.splice(i, 1); continue; }
+
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+                ctx.strokeStyle = `rgba(0, 212, 170, ${p.alpha})`;
+                ctx.lineWidth = 1;
+                ctx.stroke();
+
+                // Second ring
+                if (p.r > 12) {
+                    ctx.beginPath();
+                    ctx.arc(p.x, p.y, p.r * 0.6, 0, Math.PI * 2);
+                    ctx.strokeStyle = `rgba(0, 136, 255, ${p.alpha * 0.5})`;
+                    ctx.stroke();
+                }
+            }
+        }
+
+        function drawParticles(dt, time) {
+            for (const p of particles) {
+                p.y += p.vy * dt * 0.06;
+                p.x += p.vx * dt * 0.06;
+                p.flicker += dt * 0.002;
+
+                if (p.y < -10) { p.y = h + 10; p.x = Math.random() * w; }
+                if (p.x < -10) p.x = w + 10;
+                if (p.x > w + 10) p.x = -10;
+
+                const flick = p.alpha * (0.6 + 0.4 * Math.sin(p.flicker));
+
+                // Mouse interaction - subtle brighten
+                const dx = p.x - mouse.x;
+                const dy = p.y - mouse.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                const boost = dist < 150 ? 0.3 * (1 - dist / 150) : 0;
+
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(0, 212, 170, ${Math.min(flick + boost, 0.6)})`;
+                ctx.fill();
+            }
+        }
+
+        // Faint grid lines (signal grid)
+        function drawGrid(time) {
+            ctx.strokeStyle = 'rgba(0, 212, 170, 0.015)';
+            ctx.lineWidth = 1;
+            const spacing = 120;
+            const offset = (time * 0.005) % spacing;
+
+            for (let x = -spacing + offset; x < w + spacing; x += spacing) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, h);
+                ctx.stroke();
+            }
+            for (let y = -spacing + offset * 0.7; y < h + spacing; y += spacing) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(w, y);
+                ctx.stroke();
+            }
+        }
+
+        let last = 0;
+        function animate(now) {
+            const dt = last ? Math.min(now - last, 50) : 16;
+            last = now;
+
+            ctx.clearRect(0, 0, w, h);
+            drawGrid(now);
+
+            for (const orbit of orbits) {
+                drawOrbitPath(orbit);
+                for (const sat of orbit.sats) {
+                    drawSatellite(orbit, sat, dt);
+                }
+            }
+
+            drawPulses(dt);
+            drawParticles(dt, now);
+
+            requestAnimationFrame(animate);
+        }
+
+        // Track mouse for particle interaction
+        document.addEventListener('mousemove', (e) => {
+            mouse.x = e.clientX;
+            mouse.y = e.clientY + window.scrollY;
+        });
+
+        // Resize handling
+        let resizeTimer;
+        function handleResize() {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                resize();
+                createOrbits();
+                createParticles();
+            }, 200);
+        }
+
+        // Keep canvas height synced with document
+        const ro = new ResizeObserver(() => { handleResize(); });
+        ro.observe(document.documentElement);
+        window.addEventListener('resize', handleResize);
+
+        resize();
+        createOrbits();
+        createParticles();
+        requestAnimationFrame(animate);
+    })();
+    </script>
 </body>
 </html>
diff --git a/docs/style.css b/docs/style.css
index fb3c5e0..c2252ea 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -17,6 +17,22 @@
     --gradient-end: #0088ff;
 }
 
+/* Animated background canvas */
+#bg-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    pointer-events: none;
+}
+
+body > *:not(#bg-canvas) {
+    position: relative;
+    z-index: 1;
+}
+
 * {
     margin: 0;
     padding: 0;
