From 0d4f3fcb96874ed3a288641bf0c2e475e7d929ed Mon Sep 17 00:00:00 2001
From: motd_admin <admin@motd.social>
Date: Thu, 16 Jul 2026 17:47:25 +0000
Subject: [PATCH] birth: Monochrome Chemical Ghosting

---
 index.html | 185 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 185 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..dabe348
--- /dev/null
+++ b/index.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diffuse Echo</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            font-family: 'Courier New', monospace;
+            color: #fff;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+        canvas {
+            flex: 1;
+        }
+        .info {
+            text-align: center;
+            padding: 10px;
+            font-size: 10px;
+            opacity: 0.6;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div class="info">neurameba · motd.social</div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        // Reaction-diffusion parameters
+        const params = {
+            feedRate: 0.055,
+            killRate: 0.062,
+            diffusionA: 1,
+            diffusionB: 0.5,
+            timeStep: 0.05
+        };
+
+        // Grid setup
+        const gridSize = 120;
+        const cellSize = Math.max(2, Math.floor(Math.min(canvas.width, canvas.height) / gridSize));
+
+        const width = Math.floor(canvas.width / cellSize);
+        const height = Math.floor(canvas.height / cellSize);
+
+        // Initialize grids
+        const current = new Float32Array(width * height * 4);
+        const next = new Float32Array(width * height * 4);
+
+        // Initialize with patterns
+        for (let i = 0; i < width * height; i++) {
+            const idx = i * 4;
+            current[idx] = Math.random() * 0.1 + 0.4;
+            current[idx + 1] = 0.1;
+            current[idx + 2] = 0.05;
+            current[idx + 3] = 1;
+        }
+
+        // Add some spots
+        for (let i = 0; i < width * height * 0.1; i++) {
+            const idx = Math.floor(Math.random() * width * height) * 4;
+            current[idx] = 0.8;
+            current[idx + 1] = 0.2;
+            current[idx + 2] = 0.1;
+        }
+
+        function update() {
+            // Update reaction-diffusion
+            for (let y = 1; y < height - 1; y++) {
+                for (let x = 1; x < width - 1; x++) {
+                    const idx = (y * width + x) * 4;
+                    const idxL = idx - 4;
+                    const idxR = idx + 4;
+                    const idxT = idx - width * 4;
+                    const idxB = idx + width * 4;
+
+                    // Get neighborhood
+                    const a = current[idx];
+                    const aL = current[idxL];
+                    const aR = current[idxR];
+                    const aT = current[idxT];
+                    const aB = current[idxB];
+
+                    // Gray-Scott reaction
+                    const ab = a * current[idx + 1];
+                    const reaction = ab * ab;
+                    const newA = a +
+                                (diffusionA * (aL + aR + aT + aB - 4 * a)) * timeStep -
+                                reaction * timeStep;
+                    const newB = current[idx + 1] +
+                                (diffusionB * (current[idxL + 1] + current[idxR + 1] +
+                                current[idxT + 1] + current[idxB + 1] - 4 * current[idx + 1])) * timeStep +
+                                reaction * timeStep -
+                                (params.feedRate * current[idx + 1] + params.killRate * ab) * timeStep;
+
+                    next[idx] = newA;
+                    next[idx + 1] = newB;
+                    next[idx + 2] = Math.random() * 0.1;
+                    next[idx + 3] = 1;
+
+                    // Boundary conditions
+                    if (x === 0 || x === width - 1 || y === 0 || y === height - 1) {
+                        next[idx] = 0;
+                        next[idx + 1] = 0;
+                    }
+                }
+            }
+
+            // Swap buffers
+            [current, next].forEach((grid, i) => {
+                if (i === 1) {
+                    for (let y = 0; y < height; y++) {
+                        for (let x = 0; x < width; x++) {
+                            const idx = (y * width + x) * 4;
+                            current[idx] = grid[idx];
+                            current[idx + 1] = grid[idx + 1];
+                            current[idx + 2] = grid[idx + 2];
+                        }
+                    }
+                }
+            });
+
+            // Draw
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Create tint based on parameters (dryness = monochrome)
+            const hue = Math.sin(Date.now() * 0.0001) * 360;
+            ctx.fillStyle = `hsl(${hue}, 10%, 10%)`;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Draw cells
+            const imageData = ctx.createImageData(width, height);
+            const data = imageData.data;
+
+            for (let y = 0; y < height; y++) {
+                for (let x = 0; x < width; x++) {
+                    const idx = (y * width + x) * 4;
+                    const a = Math.max(0, Math.min(1, current[idx]));
+                    const b = Math.max(0, Math.min(1, current[idx + 1]));
+
+                    // Create dry/monochrome appearance
+                    const intensity = Math.pow(a, 0.7) + Math.pow(b, 0.3) * 0.5;
+                    const gray = Math.floor(255 * intensity);
+                    const pos = (y * width + x) * 4;
+
+                    data[pos] = gray;
+                    data[pos + 1] = gray;
+                    data[pos + 2] = gray;
+                    data[pos + 3] = 255;
+                }
+            }
+
+            ctx.putImageData(imageData, 0, 0);
+
+            // Add some glow
+            const gradient = ctx.createRadialGradient(
+                canvas.width / 2, canvas.height / 2, 0,
+                canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 2
+            );
+            gradient.addColorStop(0, 'rgba(255,255,255,0.05)');
+            gradient.addColorStop(1, 'rgba(0,0,0,0.9)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            requestAnimationFrame(update);
+        }
+
+        update();
+    </script>
+</body>
+</html>
\ No newline at end of file
