1 files changed, 140 insertions, 39 deletions
diff --git a/assets/js/matrix-rain.js b/assets/js/matrix-rain.js
index 8211b40..53c55d8 100644
--- a/assets/js/matrix-rain.js
+++ b/assets/js/matrix-rain.js
@@ -1,56 +1,157 @@
-// matrix-rain.js
-(function () {
-  const canvas = document.getElementById('matrix-canvas');
+// Matrix rain background effect
+(function() {
+  // Bail out if user prefers reduced motion
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    return;
+  }
+
+  // Canvas and context
+  let canvas = document.getElementById('matrix-rain');
   if (!canvas) return;
-  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  const ctx = canvas.getContext('2d');
+
+  // State
+  let columns = [];
+  let frameCount = 0;
+  let colors = { accent: '#a855f7', accent2: '#00ff88', bg: '#060b10', head: '#ffffff' };
+
+  // Character set: 30% ASCII, 70% katakana
+  const ASCII = Array.from({ length: 94 }, (_, i) => String.fromCharCode(33 + i));
+  const KATA = Array.from({ length: 96 }, (_, i) => String.fromCodePoint(0x30a0 + i));
+  const CHARS = shuffle([...ASCII, ...KATA, ...KATA, ...KATA]);
+
+  // Utility: shuffle array
+  function shuffle(arr) {
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    return arr;
+  }
+
+  // Utility: convert hex or rgb color to rgba string
+  function hexToRgba(color, alpha) {
+    const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    if (rgbMatch) {
+      return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${alpha})`;
+    }
+    const hex = color.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  // Sample CSS variables based on current theme
+  function sampleColors() {
+    const style = getComputedStyle(document.documentElement);
+    const isDark = document.documentElement.classList.contains('theme-dark');
+    colors.accent = style.getPropertyValue('--accent').trim();
+    colors.accent2 = style.getPropertyValue('--accent2').trim();
+    colors.bg = style.getPropertyValue('--bg').trim();
+    // Head char: bright white in dark mode, deep purple-black in light mode
+    colors.head = isDark ? '#ffffff' : '#1a0533';
+  }
 
-  const ctx   = canvas.getContext('2d');
-  const CHARS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF<>/\\|{}[]$#@!';
-  const FS    = 14;  // font size / column width in px
-  const mode  = canvas.getAttribute('data-mode') || 'background';
-  let cols, drops, raf;
+  // Resize canvas to window dimensions
+  function resizeCanvas() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    ctx.font = '14px "JetBrains Mono", monospace';
+    ctx.textBaseline = 'top';
+    initColumns();
+  }
+
+  // Initialize columns for the current canvas width
+  function initColumns() {
+    columns = [];
+    const columnWidth = 14;
+    const columnCount = Math.floor(canvas.width / columnWidth);
 
-  function init() {
-    // Use offsetWidth/offsetHeight which works for both fixed and positioned elements
-    canvas.width  = canvas.offsetWidth || window.innerWidth;
-    canvas.height = canvas.offsetHeight || window.innerHeight;
-    cols  = Math.floor(canvas.width / FS) + 1;
-    drops = Array.from({ length: cols }, () => Math.random() * -(canvas.height / FS));
+    for (let i = 0; i < columnCount; i++) {
+      columns.push({
+        x: i * columnWidth,
+        y: -Math.floor(Math.random() * 40), // stagger start above viewport
+        speed: 2 + Math.floor(Math.random() * 3), // 2-4 frames between drops
+        color: Math.random() < 0.6 ? 'accent2' : 'accent', // 60% green, 40% purple
+        charIndex: Math.floor(Math.random() * CHARS.length),
+        length: 8 + Math.floor(Math.random() * 13), // trail length 8-20
+      });
+    }
   }
 
-  function getThemeColors() {
-    const isDark = !document.documentElement.classList.contains('theme-light');
-    return {
-      bgFill: isDark ? 'rgba(6, 11, 16, 0.07)' : 'rgba(240, 244, 248, 0.07)',
-    };
+  // Set up MutationObserver for theme switching
+  function setupThemeObserver() {
+    const observer = new MutationObserver(function(mutations) {
+      for (const m of mutations) {
+        if (m.attributeName === 'class') {
+          sampleColors();
+          break;
+        }
+      }
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
   }
 
-  function tick() {
-    const colors = getThemeColors();
-    ctx.fillStyle = colors.bgFill;
+  // Main animation loop
+  function drawFrame() {
+    frameCount++;
+
+    // Fade layer: semi-transparent background fill
+    ctx.fillStyle = hexToRgba(colors.bg, 0.085);
     ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.font = `${FS}px "JetBrains Mono", monospace`;
 
-    for (let i = 0; i < cols; i++) {
-      const char = CHARS[Math.floor(Math.random() * CHARS.length)];
-      // Occasional bright green "head", otherwise purple
-      ctx.fillStyle = Math.random() > 0.96 ? '#00ff88' : '#a855f7';
-      ctx.fillText(char, i * FS, drops[i] * FS);
+    // Draw each column
+    for (const col of columns) {
+      // Skip if not time to drop yet (per-column throttle)
+      if (frameCount % col.speed !== 0) continue;
+
+      // Draw explicit trail in column color
+      ctx.fillStyle = colors[col.color];
+      for (let i = 1; i <= col.length; i++) {
+        const trailY = (col.y - i) * 14;
+        if (trailY < 0) continue;
+        const trailCharIndex = (col.charIndex - i + CHARS.length) % CHARS.length;
+        ctx.fillText(CHARS[trailCharIndex], col.x, trailY);
+      }
+
+      // Draw head character (bright)
+      ctx.fillStyle = colors.head;
+      const headCharIndex = col.charIndex % CHARS.length;
+      ctx.fillText(CHARS[headCharIndex], col.x, col.y * 14);
+
+      // Advance column
+      col.y++;
+      col.charIndex = (col.charIndex + 1) % CHARS.length;
 
-      if (drops[i] * FS > canvas.height && Math.random() > 0.975) {
-        drops[i] = Math.random() * -20;
+      // Reset when scrolled off screen
+      if (col.y * 14 > canvas.height + col.length * 14) {
+        col.y = -Math.floor(Math.random() * 20);
+        col.charIndex = Math.floor(Math.random() * CHARS.length);
+        col.color = Math.random() < 0.6 ? 'accent2' : 'accent';
       }
-      drops[i] += 0.5;
     }
-    raf = requestAnimationFrame(tick);
+
+    requestAnimationFrame(drawFrame);
   }
 
-  init();
-  window.addEventListener('resize', () => { cancelAnimationFrame(raf); init(); tick(); }, { passive: true });
-  document.addEventListener('visibilitychange', () => {
-    if (document.hidden) cancelAnimationFrame(raf); else tick();
+  // Initialize
+  sampleColors();
+  resizeCanvas();
+  setupThemeObserver();
+
+  // Debounced resize handler
+  let resizeTimer;
+  window.addEventListener('resize', function() {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(resizeCanvas, 150);
   });
-  tick();
 
-  window.MatrixRain = { init, tick };
+  // Start animation when fonts are ready
+  document.fonts.ready.then(function() {
+    requestAnimationFrame(drawFrame);
+  });
 })();