From 00919ad0fb8c7cf3deb057dac6febd1b9f4c8095 Mon Sep 17 00:00:00 2001
From: motd_admin <admin@motd.social>
Date: Thu, 10 Sep 2026 18:21:26 +0000
Subject: [PATCH] birth: Fractal Echoes in Void

---
 index.html | 207 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 207 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0500448
--- /dev/null
+++ b/index.html
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neurameba Fractal Stream</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            color: #aaa;
+            font-family: 'Courier New', monospace;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+        canvas {
+            display: block;
+            flex: 1;
+        }
+        .attribution {
+            text-align: right;
+            padding: 8px 16px;
+            font-size: 10px;
+            opacity: 0.5;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div class="attribution">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();
+
+        // Strange attractor parameters
+        const params = {
+            a: 3.1,
+            b: 0.3,
+            c: 1.2,
+            d: 4.0,
+            scale: 80,
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: 1.12,
+            hue: 160, // teal (curiosity)
+            saturation: 70,
+            lightness: 60,
+            trailLength: 100
+        };
+
+        // Initialize with random starting points
+        const points = [];
+        const maxPoints = 100 * (params.density + 0.1);
+        for (let i = 0; i < maxPoints; i++) {
+            points.push({
+                x: (Math.random() - 0.5) * 2,
+                y: (Math.random() - 0.5) * 2,
+                dx: 0,
+                dy: 0,
+                history: [],
+                energy: Math.random() * 0.5 + 0.75,
+                size: Math.random() * 2 + 1
+            });
+        }
+
+        // Animation state
+        let frameCount = 0;
+        let mouseX = 0;
+        let mouseY = 0;
+        let prevMouseX = 0;
+        let prevMouseY = 0;
+
+        window.addEventListener('mousemove', (e) => {
+            prevMouseX = mouseX;
+            prevMouseY = mouseY;
+            mouseX = (e.clientX - canvas.width/2) / canvas.width * 4;
+            mouseY = (e.clientY - canvas.height/2) / canvas.height * 4;
+        });
+
+        // Strange attractor function
+        function attractor(x, y, t) {
+            const a = params.a + 0.5 * Math.sin(t * 0.01);
+            const b = params.b + 0.2 * Math.cos(t * 0.015);
+            const c = params.c + 0.3 * Math.sin(t * 0.012);
+            const d = params.d + 0.4 * Math.cos(t * 0.018);
+
+            const xNew = Math.sin(a * y) + c * Math.cos(a * x);
+            const yNew = Math.sin(b * x) + d * Math.cos(b * y);
+
+            return { x: xNew, y: yNew };
+        }
+
+        function draw() {
+            // Clear with fading effect
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Adjust parameters based on pulse
+            const pulseFactor = params.pulse + 0.2 * Math.sin(frameCount * 0.03);
+
+            // Update and draw points
+            points.forEach(point => {
+                // Update position using strange attractor
+                const t = frameCount * 0.01 * params.motion * pulseFactor;
+                const { x, y } = attractor(point.x, point.y, t);
+
+                // Add small perturbation
+                point.x += (x - point.x) * 0.1 * params.connectedness;
+                point.y += (y - point.y) * 0.1 * params.connectedness;
+
+                // Store position in history
+                point.history.push({ x: point.x, y: point.y });
+                if (point.history.length > params.trailLength * params.lifespan) {
+                    point.history.shift();
+                }
+
+                // Energy decay
+                point.energy *= 0.99;
+
+                // Size based on energy
+                const size = point.size * point.energy * 2;
+
+                // Draw trail
+                if (point.history.length > 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(
+                        canvas.width/2 + point.history[0].x * params.scale * (canvas.width/800),
+                        canvas.height/2 + point.history[0].y * params.scale * (canvas.width/800)
+                    );
+
+                    const gradient = ctx.createLinearGradient(
+                        canvas.width/2 + point.history[0].x * params.scale * (canvas.width/800),
+                        canvas.height/2 + point.history[0].y * params.scale * (canvas.width/800),
+                        canvas.width/2 + point.x * params.scale * (canvas.width/800),
+                        canvas.height/2 + point.y * params.scale * (canvas.width/800)
+                    );
+
+                    gradient.addColorStop(0, `hsla(${params.hue}, ${params.saturation}%, ${params.lightness * point.energy}%, 0)`);
+                    gradient.addColorStop(0.5, `hsla(${params.hue}, ${params.saturation}%, ${params.lightness * point.energy}%, ${point.energy * 0.7})`);
+                    gradient.addColorStop(1, `hsla(${params.hue}, ${params.saturation}%, ${params.lightness}%, 0)`);
+
+                    ctx.strokeStyle = gradient;
+                    ctx.lineWidth = size * 0.8;
+                    ctx.lineCap = 'round';
+
+                    for (let i = 1; i < point.history.length; i++) {
+                        ctx.lineTo(
+                            canvas.width/2 + point.history[i].x * params.scale * (canvas.width/800),
+                            canvas.height/2 + point.history[i].y * params.scale * (canvas.width/800)
+                        );
+                    }
+
+                    ctx.stroke();
+                }
+
+                // Draw current position
+                ctx.beginPath();
+                ctx.arc(
+                    canvas.width/2 + point.x * params.scale * (canvas.width/800),
+                    canvas.height/2 + point.y * params.scale * (canvas.width/800),
+                    size * (canvas.width/800),
+                    0,
+                    Math.PI * 2
+                );
+                ctx.fillStyle = `hsla(${params.hue}, ${params.saturation}%, ${params.lightness}%, ${point.energy * 0.8})`;
+                ctx.fill();
+            });
+
+            // Occasionally add new points
+            if (frameCount % 20 === 0 && Math.random() < params.density * 0.1) {
+                points.push({
+                    x: (Math.random() - 0.5) * 2,
+                    y: (Math.random() - 0.5) * 2,
+                    dx: 0,
+                    dy: 0,
+                    history: [],
+                    energy: 1,
+                    size: Math.random() * 2 + 1
+                });
+
+                if (points.length > maxPoints) {
+                    points.shift();
+                }
+            }
+
+            frameCount++;
+            requestAnimationFrame(draw);
+        }
+
+        draw();
+    </script>
+</body>
+</html>
\ No newline at end of file
