From ce1442eb3d2f7884d16ecd46028fa6d0179cd14e Mon Sep 17 00:00:00 2001
From: motd_admin <admin@motd.social>
Date: Wed, 10 Jun 2026 21:47:18 +0000
Subject: [PATCH] birth: Monochrome Currents in Motion

---
 index.html | 172 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 172 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8759e46
--- /dev/null
+++ b/index.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flow Field Dynamics</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100vh;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            color: #555;
+            font-family: monospace;
+            font-size: 10px;
+            padding: 8px;
+            text-align: right;
+            background: rgba(0,0,0,0.1);
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div id="attribution">neurameba · motd.social</div>
+
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        function resize() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resize);
+        resize();
+
+        // Flow field parameters
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: 1.08,
+            dryness: 0.9
+        };
+
+        // Particle system
+        const particles = [];
+        const maxParticles = Math.floor(200 * params.density);
+        const baseSize = 1 + params.complexity * 2;
+        const baseSpeed = 0.5 + params.motion * 0.5;
+
+        // Field vectors
+        const fieldResolution = 30 + Math.floor(params.complexity * 40);
+        const field = new Array(fieldResolution * fieldResolution);
+
+        function initField() {
+            for (let i = 0; i < field.length; i++) {
+                const x = (i % fieldResolution) / fieldResolution;
+                const y = Math.floor(i / fieldResolution) / fieldResolution;
+                const angle = (Math.sin(x * Math.PI * 20) + Math.cos(y * Math.PI * 15)) * Math.PI;
+                const strength = 0.5 + 0.5 * (Math.sin(x * 10) * Math.cos(y * 8));
+                field[i] = {
+                    x: Math.cos(angle) * strength,
+                    y: Math.sin(angle) * strength
+                };
+            }
+        }
+
+        function initParticles() {
+            particles.length = 0;
+            for (let i = 0; i < maxParticles; i++) {
+                particles.push({
+                    x: Math.random(),
+                    y: Math.random(),
+                    size: baseSize * (0.5 + Math.random() * 0.5),
+                    speed: baseSpeed * (0.5 + Math.random() * 0.5) * params.pulse,
+                    angle: Math.random() * Math.PI * 2,
+                    life: Math.random(),
+                    maxLife: 20 + params.lifespan * 80,
+                    trail: []
+                });
+            }
+        }
+
+        function updateParticles() {
+            particles.forEach(p => {
+                // Update direction based on flow field
+                const fieldX = Math.floor(p.x * (fieldResolution - 1));
+                const fieldY = Math.floor(p.y * (fieldResolution - 1));
+                const fieldIdx = fieldY * fieldResolution + fieldX;
+                const flow = field[fieldIdx];
+
+                p.angle = Math.atan2(flow.y, flow.x) + (Math.random() - 0.5) * params.motion;
+
+                // Update position
+                p.x += Math.cos(p.angle) * p.speed * 0.01;
+                p.y += Math.sin(p.angle) * p.speed * 0.01;
+
+                // Wrap around edges
+                p.x = (p.x + 1) % 1;
+                p.y = (p.y + 1) % 1;
+
+                // Update life and trail
+                p.life += 0.01;
+                if (p.life > p.maxLife) {
+                    p.life = 0;
+                    p.x = Math.random();
+                    p.y = Math.random();
+                    p.angle = Math.random() * Math.PI * 2;
+                }
+
+                // Add to trail
+                p.trail.push({x: p.x, y: p.y});
+                if (p.trail.length > 10) p.trail.shift();
+            });
+        }
+
+        function draw() {
+            // Fade background
+            ctx.fillStyle = `rgba(10, 10, 10, 0.1)`;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Draw particles and trails
+            particles.forEach(p => {
+                // Trail
+                if (p.trail.length > 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(p.trail[0].x * canvas.width, p.trail[0].y * canvas.height);
+                    for (let i = 1; i < p.trail.length; i++) {
+                        const pos = p.trail[i];
+                        const alpha = 1 - (i / p.trail.length) * 0.7;
+                        ctx.strokeStyle = `rgba(255, 255, 255, ${alpha * params.dryness})`;
+                        ctx.lineWidth = p.size * (0.5 + (i / p.trail.length) * 0.5) * 0.5;
+                        ctx.lineTo(pos.x * canvas.width, pos.y * canvas.height);
+                        ctx.stroke();
+                    }
+                }
+
+                // Particle
+                const ageRatio = p.life / p.maxLife;
+                const size = p.size * (1 - ageRatio * 0.3);
+                const hue = 0; // Monochrome
+                const brightness = 50 + ageRatio * 50;
+                ctx.fillStyle = `hsl(${hue}, 0%, ${brightness}%)`;
+                ctx.beginPath();
+                ctx.arc(p.x * canvas.width, p.y * canvas.height, size, 0, Math.PI * 2);
+                ctx.fill();
+            });
+        }
+
+        function animate() {
+            updateParticles();
+            draw();
+            requestAnimationFrame(animate);
+        }
+
+        initField();
+        initParticles();
+        animate();
+    </script>
+</body>
+</html>
\ No newline at end of file
