You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.4 KiB
HTML
120 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1920, height=1080">
|
|
<title>TomorrowLAN Animated Matrix Background</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: #0a1628;
|
|
}
|
|
#matrix {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="matrix" width="1920" height="1080"></canvas>
|
|
<script>
|
|
const canvas = document.getElementById('matrix');
|
|
const ctx = canvas.getContext('2d');
|
|
const W = 1920;
|
|
const H = 1080;
|
|
const drops = [];
|
|
const speeds = [];
|
|
const chars = [];
|
|
const trailLens = [];
|
|
const colSizes = [];
|
|
const colX = [];
|
|
const colGlow = [];
|
|
|
|
// Place columns spaced by their character width so they don't overlap
|
|
let x = 0;
|
|
while (x < W) {
|
|
const i = colSizes.length;
|
|
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
|
colX[i] = x;
|
|
colGlow[i] = 0.05 + Math.random() * 0.45;
|
|
drops[i] = Math.random() * (H / colSizes[i]);
|
|
speeds[i] = 0.04 + Math.random() * 0.06;
|
|
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
|
const rows = Math.ceil(H / colSizes[i]) + 30;
|
|
chars[i] = [];
|
|
for (let j = 0; j < rows; j++) {
|
|
chars[i][j] = Math.random() > 0.5 ? '1' : '0';
|
|
}
|
|
x += colSizes[i] * 0.75;
|
|
}
|
|
const columns = colSizes.length;
|
|
|
|
function draw() {
|
|
ctx.fillStyle = 'rgba(10, 22, 40, 0.06)';
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
for (let i = 0; i < columns; i++) {
|
|
const sz = colSizes[i];
|
|
const x = colX[i];
|
|
const y = drops[i] * sz;
|
|
const row = Math.floor(drops[i]);
|
|
const numRows = chars[i].length;
|
|
|
|
ctx.font = sz + 'px monospace';
|
|
|
|
const glowR = sz * 1.5;
|
|
const cx = x + sz * 0.35;
|
|
const g = colGlow[i];
|
|
const grad = ctx.createRadialGradient(cx, y, 0, cx, y, glowR);
|
|
grad.addColorStop(0, 'rgba(0, 212, 255, ' + g + ')');
|
|
grad.addColorStop(0.5, 'rgba(0, 212, 255, ' + (g * 0.3) + ')');
|
|
grad.addColorStop(1, 'rgba(0, 212, 255, 0)');
|
|
ctx.fillStyle = grad;
|
|
ctx.fillRect(cx - glowR, y - glowR, glowR * 2, glowR * 2);
|
|
|
|
const fadeRows = 6;
|
|
const fade = Math.min(1, Math.max(0, (drops[i] + fadeRows) / fadeRows));
|
|
|
|
const ci = ((row % numRows) + numRows) % numRows;
|
|
ctx.fillStyle = 'rgba(255, 255, 255, ' + fade + ')';
|
|
ctx.fillText(chars[i][ci], x, y);
|
|
|
|
const tl = trailLens[i];
|
|
for (let t = 1; t <= tl; t++) {
|
|
const ti = (((row - t) % numRows) + numRows) % numRows;
|
|
const baseAlpha = (1 - t / tl) * 0.6;
|
|
const trailFade = Math.min(1, fade + t / fadeRows);
|
|
ctx.fillStyle = 'rgba(0, 212, 255, ' + (baseAlpha * trailFade) + ')';
|
|
ctx.fillText(chars[i][ti], x, y - sz * t);
|
|
}
|
|
|
|
if (Math.random() < 0.002) {
|
|
const ri = Math.floor(Math.random() * numRows);
|
|
chars[i][ri] = Math.random() > 0.5 ? '1' : '0';
|
|
}
|
|
|
|
drops[i] += speeds[i];
|
|
|
|
if (y > H + sz * 2) {
|
|
drops[i] = Math.random() * -20;
|
|
speeds[i] = 0.04 + Math.random() * 0.06;
|
|
trailLens[i] = 16 + Math.floor(Math.random() * 12);
|
|
colSizes[i] = 10 + Math.floor(Math.random() * 31);
|
|
colGlow[i] = 0.05 + Math.random() * 0.45;
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
ctx.fillStyle = '#0a1628';
|
|
ctx.fillRect(0, 0, W, H);
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|