Refactor

Author: DarkXero-dev

src/components/layout/Layout.astro

@@ -46,6 +46,53 @@ const {
     <div class="bg-gradient" aria-hidden="true"></div>
     <div class="bg-overlay" aria-hidden="true"></div>
 
+    <!-- Matrix rain -->
+    <canvas id="matrix-rain" class="fixed inset-0 pointer-events-none" style="z-index:1;opacity:0.12" aria-hidden="true"></canvas>
+
     <slot />
+
+    <script>
+      const canvas = document.getElementById('matrix-rain') as HTMLCanvasElement;
+      if (canvas) {
+        const ctx = canvas.getContext('2d')!;
+        let w = 0, h = 0;
+        let columns = 0;
+        const drops: number[] = [];
+        const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF{}[]<>/\\|=+-*&^%$#@!';
+        const fontSize = 14;
+        const colors = ['#7c6aef', '#a594ff', '#6050d0', '#4ade80', '#22d3ee'];
+
+        function resize() {
+          w = canvas.width = window.innerWidth;
+          h = canvas.height = window.innerHeight;
+          const newCols = Math.floor(w / fontSize);
+          while (drops.length < newCols) drops.push(Math.random() * -100);
+          drops.length = newCols;
+          columns = newCols;
+        }
+
+        function draw() {
+          ctx.fillStyle = 'rgba(18, 20, 31, 0.15)';
+          ctx.fillRect(0, 0, w, h);
+          ctx.font = `${fontSize}px monospace`;
+
+          for (let i = 0; i < columns; i++) {
+            const char = chars[Math.floor(Math.random() * chars.length)];
+            ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
+            ctx.fillText(char, i * fontSize, drops[i] * fontSize);
+
+            if (drops[i] * fontSize > h && Math.random() > 0.975) {
+              drops[i] = 0;
+            }
+            drops[i] += 0.2 + Math.random() * 0.2;
+          }
+          requestAnimationFrame(draw);
+        }
+
+        resize();
+        window.addEventListener('resize', resize);
+        draw();
+      }
+    </script>
   </body>
 </html>