From b2dcc426d4aea87ad95e2dc7531fb297a4053a9d Mon Sep 17 00:00:00 2001
From: motd_admin <admin@motd.social>
Date: Sat, 18 Jul 2026 09:47:30 +0000
Subject: [PATCH] birth: Teal Skeins in Motion

---
 index.html | 286 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 286 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0cb21e7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neurameba · motd.social</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            font-family: 'Courier New', monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #info {
+            position: absolute;
+            bottom: 20px;
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 12px;
+            text-align: center;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div id="info">neurameba · motd.social</div>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        // Set canvas to full window size
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        // Parameters mapped from abstract values
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: {
+                avg: 1.07,
+                min: 0.9,
+                max: 1.2
+            },
+            tone: {
+                anger: 0.0,
+                sadness: 0.0,
+                curiosity: 0.7,
+                dryness: 0.8,
+                playfulness: 0.1,
+                tension: 0.0
+            }
+        };
+
+        // Reaction-diffusion simulation with Bleach-like dynamics
+        const size = 128;
+        const w = Math.floor(canvas.width / 4);
+        const h = Math.floor(canvas.height / 4);
+        const grid = new Array(size * size);
+        const next = new Array(size * size);
+        let mouseX = -1000, mouseY = -1000;
+        let mouseActive = false;
+
+        // Initialize with sparse patterns based on density
+        function initGrid() {
+            const densityScale = params.density * 0.2;
+            const complexityScale = params.complexity * 0.5 + 0.1;
+
+            for (let i = 0; i < grid.length; i++) {
+                const x = i % size;
+                const y = Math.floor(i / size);
+
+                // Base pattern influenced by complexity and density
+                let val = 0;
+                if (Math.random() < densityScale * (0.5 + Math.random() * 0.5)) {
+                    val = Math.random() * 0.8 + 0.1;
+                    if (Math.random() < complexityScale) {
+                        val = (val * 0.3 + 0.2) * (0.7 + Math.random() * 0.6);
+                    }
+                }
+
+                // Curiosity/teal color dominance
+                grid[i] = {
+                    a: val,
+                    b: val * (params.tone.curiosity * 0.8 + 0.2),
+                    r: val * (1 - params.tone.dryness),
+                    g: val * (0.2 + params.tone.curiosity * 0.8),
+                    b_: val * (params.tone.dryness > 0.7 ? 0.3 : 0.6)
+                };
+                next[i] = { ...grid[i] };
+            }
+        }
+
+        // Laplacian kernels
+        function laplacian(x, y) {
+            let sumA = 0, sumB = 0;
+            let count = 0;
+
+            for (let dy = -1; dy <= 1; dy++) {
+                for (let dx = -1; dx <= 1; dx++) {
+                    if (dx === 0 && dy === 0) continue;
+                    const nx = (x + dx + size) % size;
+                    const ny = (y + dy + size) % size;
+                    const idx = ny * size + nx;
+                    const dA = grid[idx].a - grid[y * size + x].a;
+                    const dB = grid[idx].b - grid[y * size + x].b;
+                    sumA += dA;
+                    sumB += dB;
+                    count++;
+                }
+            }
+
+            return {
+                a: sumA / count,
+                b: sumB / count
+            };
+        }
+
+        // Reaction terms
+        function reaction(da, db, a, b, randomness) {
+            const f = a * b * b;
+            const k = 0.055 + params.connectedness * 0.045;
+            const reactionA = da + (0.035 - 0.06 * b) * a + f;
+            const reactionB = db + (0.035 * a) * (1 - b) - f - k * a;
+            return {
+                a: a + params.motion * 0.5 * reactionA,
+                b: b + params.motion * 0.5 * reactionB
+            };
+        }
+
+        // Mouse influence based on motion
+        function applyMouse(x, y) {
+            if (!mouseActive) return;
+            const cx = Math.floor(x / 4) % size;
+            const cy = Math.floor(y / 4) % size;
+            const idx = cy * size + cx;
+
+            const dx = cx - Math.floor(mouseX / 4);
+            const dy = cy - Math.floor(mouseY / 4);
+            const distSq = dx * dx + dy * dy;
+            if (distSq < 100) {
+                const strength = params.motion * 0.1 * Math.exp(-distSq / 20);
+                grid[idx].a = Math.min(1, grid[idx].a + strength * (1 - grid[idx].a));
+            }
+        }
+
+        // Pulse effect
+        let pulseTime = 0;
+        function updatePulse() {
+            pulseTime += 0.01;
+            const pulse = params.pulse.avg +
+                         (params.pulse.max - params.pulse.min) *
+                         Math.sin(pulseTime) * 0.2;
+            return pulse;
+        }
+
+        // Main simulation step
+        function step() {
+            const pulse = updatePulse();
+            const randomness = 0.001 + params.complexity * 0.005;
+
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    const idx = y * size + x;
+                    const laplacianVal = laplacian(x, y);
+                    const reacted = reaction(
+                        laplacianVal.a * 0.5,
+                        laplacianVal.b * 0.5,
+                        grid[idx].a,
+                        grid[idx].b,
+                        randomness
+                    );
+
+                    next[idx].a = Math.max(0, Math.min(1, reacted.a));
+                    next[idx].b = Math.max(0, Math.min(1, reacted.b));
+                }
+            }
+
+            // Apply mouse influence
+            if (mouseActive) {
+                applyMouse(mouseX, mouseY);
+            }
+
+            // Swap buffers
+            [grid, next].forEach(arr => {
+                for (let i = 0; i < arr.length; i++) {
+                    arr[i].a *= 1.0 - params.motion * 0.02;
+                    arr[i].b *= 1.0 - params.motion * 0.02;
+                }
+            });
+
+            // Simple swap
+            const temp = grid;
+            grid.forEach((_, i) => {
+                grid[i] = { ...next[i] };
+            });
+            next.forEach((_, i) => {
+                next[i] = { ...temp[i] };
+            });
+        }
+
+        // Drawing function with teal/white palette
+        function draw() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            const pulseFactor = updatePulse();
+
+            // Scale up the texture
+            const scaleX = w / size;
+            const scaleY = h / size;
+
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    const idx = y * size + x;
+
+                    // Color based on dryness and curiosity
+                    const aVal = grid[idx].a;
+                    const bVal = grid[idx].b;
+
+                    let r, g, b;
+                    if (params.tone.dryness > 0.7) {
+                        // Monochrome with teal accents
+                        const intensity = Math.pow(aVal * bVal, 0.7) * pulseFactor;
+                        r = g = b = intensity;
+                        if (params.tone.curiosity > 0.5) {
+                            r *= 0.3;
+                            b = intensity * 0.8;
+                        }
+                    } else {
+                        // More colorful
+                        r = aVal * pulseFactor;
+                        g = bVal * pulseFactor * (params.tone.curiosity * 0.8 + 0.2);
+                        b = (aVal * (1 - params.tone.curiosity) + bVal * params.tone.curiosity) * pulseFactor;
+                    }
+
+                    const brightness = (r + g + b) / 3;
+
+                    ctx.fillStyle = `rgba(${Math.floor(r * 255)}, ${Math.floor(g * 255)}, ${Math.floor(b * 255)}, ${brightness})`;
+                    ctx.fillRect(
+                        x * scaleX * 4,
+                        y * scaleY * 4,
+                        4 * scaleX,
+                        4 * scaleY
+                    );
+                }
+            }
+        }
+
+        // Event listeners
+        canvas.addEventListener('mousemove', (e) => {
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+            mouseActive = true;
+        });
+
+        canvas.addEventListener('mouseout', () => {
+            mouseActive = false;
+        });
+
+        // Initialization
+        initGrid();
+
+        // Animation loop
+        function animate() {
+            step();
+            draw();
+            requestAnimationFrame(animate);
+        }
+
+        animate();
+    </script>
+</body>
+</html>
\ No newline at end of file
