From 1f7e5fd6ca3e812af00d21b9656ccd171f0c4ade Mon Sep 17 00:00:00 2001
From: Alexander Whitestone <alexpaynex@gmail.com>
Date: Tue, 24 Mar 2026 01:04:08 -0400
Subject: [PATCH] feat: add Matrix-style falling code rain background layer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements a 2D canvas (#matrix-rain) behind the Three.js renderer
with classic Matrix green katakana/numeral/hex characters falling
in columns. The Three.js renderer is made alpha-transparent so the
rain shows through, creating an atmospheric depth effect.

- Add matrixCanvas (id=matrix-rain) appended before the WebGL canvas
- Animate at ~20 fps with a semi-transparent fade trail (0.05 alpha)
- Bright (#aaffaa) head character, dimmed by trail accumulation
- Renderer switched to alpha:true + setClearColor(0,0) — transparent bg
- scene.background removed; body background (#000008) shows through
- CSS: #matrix-rain { z-index: 0; opacity: 0.18 } for subtle blend

Fixes #262

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app.js    | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 style.css |  6 ++++++
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index 540375d..571c9d4 100644
--- a/app.js
+++ b/app.js
@@ -38,9 +38,57 @@ textureLoader.load('placeholder-texture.jpg', (texture) => {
   loadedAssets.set('placeholder-texture', texture);
 });
 
+// === MATRIX RAIN ===
+// 2D canvas layer rendered behind the Three.js scene.
+const matrixCanvas = document.createElement('canvas');
+matrixCanvas.id = 'matrix-rain';
+matrixCanvas.width = window.innerWidth;
+matrixCanvas.height = window.innerHeight;
+document.body.appendChild(matrixCanvas);
+
+const matrixCtx = matrixCanvas.getContext('2d');
+
+const MATRIX_CHARS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF';
+const MATRIX_FONT_SIZE = 14;
+const MATRIX_COL_COUNT = Math.floor(window.innerWidth / MATRIX_FONT_SIZE);
+const matrixDrops = new Array(MATRIX_COL_COUNT).fill(1);
+
+function drawMatrixRain() {
+  // Fade previous frame with semi-transparent black overlay (creates the trail)
+  matrixCtx.fillStyle = 'rgba(0, 0, 8, 0.05)';
+  matrixCtx.fillRect(0, 0, matrixCanvas.width, matrixCanvas.height);
+
+  matrixCtx.font = `${MATRIX_FONT_SIZE}px monospace`;
+
+  for (let i = 0; i < matrixDrops.length; i++) {
+    const char = MATRIX_CHARS[Math.floor(Math.random() * MATRIX_CHARS.length)];
+    const x = i * MATRIX_FONT_SIZE;
+    const y = matrixDrops[i] * MATRIX_FONT_SIZE;
+
+    // Head character: bright white-green
+    matrixCtx.fillStyle = '#aaffaa';
+    matrixCtx.fillText(char, x, y);
+
+    // Reset drop to top with some randomness
+    if (y > matrixCanvas.height && Math.random() > 0.975) {
+      matrixDrops[i] = 0;
+    }
+    matrixDrops[i]++;
+  }
+}
+
+// Animate at ~20 fps (independent of Three.js loop)
+setInterval(drawMatrixRain, 50);
+
+// Resize handler for matrix canvas
+window.addEventListener('resize', () => {
+  matrixCanvas.width = window.innerWidth;
+  matrixCanvas.height = window.innerHeight;
+});
+
 // === SCENE SETUP ===
 const scene = new THREE.Scene();
-scene.background = new THREE.Color(NEXUS.colors.bg);
+// Background is null — the matrix rain canvas shows through the transparent renderer
 
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
 camera.position.set(0, 6, 11);
@@ -57,7 +105,8 @@ const overheadLight = new THREE.PointLight(0x8899bb, 0.6, 60);
 overheadLight.position.set(0, 25, 0);
 scene.add(overheadLight);
 
-const renderer = new THREE.WebGLRenderer({ antialias: true });
+const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+renderer.setClearColor(0x000000, 0);
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
diff --git a/style.css b/style.css
index 975b736..7ebdb3b 100644
--- a/style.css
+++ b/style.css
@@ -30,6 +30,12 @@ canvas {
   left: 0;
 }
 
+/* Matrix rain sits behind the Three.js renderer */
+#matrix-rain {
+  z-index: 0;
+  opacity: 0.18;
+}
+
 /* === HUD === */
 .hud-controls {
   z-index: 10;
-- 
2.43.0