Matrix Yağmuru Arka Planı

<div class="matrix-container">
  <canvas id="matrixCanvas"></canvas>
  <div class="matrix-overlay-text">Enter the Matrix</div>
</div>

.matrix-container {
  position: relative; width: 320px; height: 200px;
  overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(0,255,70,0.3);
  box-shadow: 0 0 30px rgba(0,255,70,0.15);
}
#matrixCanvas {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
.matrix-overlay-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #00ff46; font-family: monospace;
  font-size: 22px; font-weight: bold;
  text-shadow: 0 0 10px #00ff46, 0 0 20px #00ff46;
  z-index: 2; letter-spacing: 3px; white-space: nowrap;
}

const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

const cols = Math.floor(canvas.width / 16);
const drops = Array(cols).fill(1);
const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノ0123456789ABCDEF';

function drawMatrix() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#00ff46';
  ctx.font = '15px monospace';
  drops.forEach((y, x) => {
    const char = chars[Math.floor(Math.random() * chars.length)];
    ctx.fillText(char, x * 16, y * 16);
    if (y * 16 > canvas.height && Math.random() > 0.975)
      drops[x] = 0;
    drops[x]++;
  });
}

setInterval(drawMatrix, 40);