game section

static/scripts/posteranimation.js

@@ -538,7 +538,7 @@ function stopTypewriter() {
   }, 10000);
 }
 
-let matrixCanvas, matrixCtx, matrixAnimFrame;
+let matrixCanvas, matrixCtx, matrixAnimFrame, matrixStopping = false;
 
 function startMatrix() {
   matrixCanvas = document.createElement('canvas');
@@ -576,8 +576,8 @@ function startMatrix() {
   // each column: how far down it has dripped (in rows)
   // start negative so columns begin off-screen at staggered times
   const drops = Array.from({ length: COLS }, () => ({
-    y:      -(Math.random() * 10),   // staggered start above top
-    speed:  0.1 + Math.random() * 0.5,
+    y:      -(Math.random() * 50),   // staggered start above top
+    speed:  0.1 + Math.random() * 0.2,
     glyphs: []                        // trail of { char, age }
   }));
 
@@ -630,11 +630,18 @@ function startMatrix() {
       });
 
       // reset column when it scrolls fully off the bottom
-      if (drop.y * FONT_SIZE > H + TRAIL_LEN * FONT_SIZE) {
-        drop.y      = -(Math.random() * 30);
-        drop.speed  = 0.3 + Math.random() * 0.3;
-        drop.glyphs = [];
-      }
+      // reset column when it scrolls fully off the bottom
+        if (drop.y * FONT_SIZE > H + TRAIL_LEN * FONT_SIZE) {
+        if (matrixStopping) {
+            // don't recycle — park it off-screen so the trail dies
+            drop.y     = -(TRAIL_LEN * 10);
+            drop.glyphs = [];
+        } else {
+            drop.y      = -(Math.random() * 30);
+            drop.speed  = 0.3 + Math.random() * 0.7;
+            drop.glyphs = [];
+        }
+        }
     });
 
     if (matrixCanvas) matrixAnimFrame = requestAnimationFrame(drawFrame);
@@ -645,12 +652,21 @@ function startMatrix() {
 
 function stopMatrix() {
   if (!matrixCanvas) return;
-  matrixCanvas.style.opacity = '0';
-  cancelAnimationFrame(matrixAnimFrame);
+
+  // signal: no new heads, let existing trails die out
+  matrixStopping = true;
+
+  // after trails have had time to fade, pull the canvas
   setTimeout(() => {
-    matrixCanvas.remove();
-    matrixCanvas = null;
-  }, 1200);
+    cancelAnimationFrame(matrixAnimFrame);
+    matrixCanvas.style.opacity = '0';
+    matrixCanvas.style.transition = 'opacity 1.2s ease';
+    setTimeout(() => {
+      matrixCanvas.remove();
+      matrixCanvas = null;
+      matrixStopping = false;
+    }, 1200);
+  }, 1800);
 }