wip

Author: acharneski

_layouts/default.html

@@ -24,12 +24,17 @@
     function createMatrixRain() {
       const matrixContainer = document.getElementById('matrixRain');
       if (!matrixContainer) return;
+      // Clear any existing content
+      matrixContainer.innerHTML = '';
+      if (!matrixContainer) return;
+      
 
       const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
 
       // Clear existing columns first
       matrixContainer.innerHTML = '';
 
+      
       for (let i = 0; i < 30; i++) {
         const column = document.createElement('div');
         column.className = 'matrix-column';
@@ -39,13 +44,30 @@
         column.style.animation = `matrix-fall ${column.style.animationDuration} linear infinite`;
         column.style.animationDelay = column.style.animationDelay;
 
+        column.style.left = (i * 3.33) + '%';
+        column.style.animationDuration = (Math.random() * 5 + 3) + 's';
+        column.style.animationDelay = Math.random() * 5 + 's';
+        
         let text = '';
-        for (let j = 0; j < 15; j++) {
-          text += chars[Math.floor(Math.random() * chars.length)] + '<br>';
+        for (let j = 0; j < 25; j++) {
+          text += chars[Math.floor(Math.random() * chars.length)] + '\n';
         }
-        column.innerHTML = text;
+        column.textContent = text;
         matrixContainer.appendChild(column);
       }
+      // Refresh columns periodically
+      setInterval(() => {
+        const columns = matrixContainer.querySelectorAll('.matrix-column');
+        columns.forEach(column => {
+          if (Math.random() > 0.95) {
+            let text = '';
+            for (let j = 0; j < 25; j++) {
+              text += chars[Math.floor(Math.random() * chars.length)] + '\n';
+            }
+            column.textContent = text;
+          }
+        });
+      }, 100);
     }
     // Floating Particles
     function createParticles() {

assets/css/style.css

@@ -528,18 +528,22 @@ pre code {
   width: 100%;
   height: 100%;
   pointer-events: none;
-  z-index: -1;
+  z-index: -2;
   overflow: hidden;
+  opacity: 0.3;
 }
 .matrix-column {
   position: absolute;
+  top: -20px;
   color: #00ff41;
   font-family: 'Share Tech Mono', monospace;
   font-size: 12px;
   line-height: 1.2;
   text-shadow: 0 0 5px #00ff41;
   opacity: 0.8;
   animation: matrix-fall linear infinite;
+  opacity: 0.7;
+  white-space: pre;
 }
 @keyframes matrix-fall {
   0% {