JIT
Grid - Untitled
Log in
@andronov04
Matrix digital rain reimagined as viscous liquid chrome and glowing green mercury. The data streams are melting and dripping like heavy syrup, splashing upon contact with the bottom frame. Ripples of neon code distorting the reality behind it. Fluid simulation, metallic texture, reflective surfaces, ray tracing, hypnotic flow, cinematic lighting.
DeepSeek V3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Matrix Digital Rain</title> <style> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; display: flex; justify-content: center; align-items: center; } canvas { display: block; width: 100%; height: 100%; background: #000; } </style> </head> <body> <canvas id="matrixCanvas"></canvas> <script> const canvas = document.getElementById('matrixCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; 
const fontSize = 18;
const columns = canvas.width / fontSize;
const drops = [];
for (let i = 0; i < columns; i++) {
  drops[i] = Math.floor(Math.random() * canvas.height);
}

const characters = '01';
const colors = ['#00FF00', '#00CC00', '#009900', '#006600'];
const splashRadius = 20;

function draw() {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < drops.length; i++) {
    const text = characters.charAt(Math.floor(Math.random() * characters.length));
    const x = i * fontSize;
    const y = drops[i] * fontSize;

    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
    ctx.font = `${fontSize}px monospace`;
    ctx.fillText(text, x, y);

    if (y > canvas.height && Math.random() > 0.975) {
      ctx.beginPath();
      ctx.arc(x, canvas.height, splashRadius, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(0, 255, 0, 0.3)';
      ctx.fill();
      ctx.closePath();
      drops[i] = 0;
    }

    drops[i]++;
  }
}

setInterval(draw, 50);
window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  drops.length = canvas.width / fontSize;
  drops.fill(0);
});
</script> </body> </html>
Updated files
v1