diff --git a/index.html b/index.html
new file mode 100644
index 0000000..34c9d06
--- /dev/null
+++ b/index.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generative Tessellation</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #000;
+            font-family: 'Courier New', monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            color: #333;
+            font-size: 10px;
+            mix-blend-mode: difference;
+        }
+    </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 resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        // Parameters derived from input
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse_avg: 1.16,
+            pulse_min: 0.3,
+            pulse_max: 2.0,
+            dryness: 0.9
+        };
+
+        // Generate palette based on tone parameters
+        const palette = {
+            bg: '#000000',
+            fg: params.dryness > 0.8 ? '#333333' : '#cccccc',
+            accent: '#888888'
+        };
+
+        // Tessellation system
+        const cells = [];
+        const cellSize = 20 + (15 * params.density);
+        const cols = Math.ceil(canvas.width / cellSize);
+        const rows = Math.ceil(canvas.height / cellSize);
+
+        // Initialize hexagonal grid
+        for (let y = 0; y < rows; y++) {
+            for (let x = 0; x < cols; x++) {
+                cells.push({
+                    x: x * cellSize * 1.5,
+                    y: y * cellSize * Math.sqrt(3),
+                    state: Math.random() < 0.5 ? 0 : 1,
+                    targetState: 0,
+                    neighbors: [],
+                    size: cellSize * (0.5 + Math.random() * 0.5)
+                });
+            }
+        }
+
+        // Connect neighbors
+        cells.forEach(cell => {
+            const neighborOffsets = [
+                [-1, 0], [1, 0], [0, -1], [0, 1],
+                [-1, -1], [1, -1], [-1, 1], [1, 1]
+            ];
+
+            neighborOffsets.forEach(([ox, oy]) => {
+                const nx = cell.x / (cellSize * 1.5) + ox;
+                const ny = cell.y / (cellSize * Math.sqrt(3)) + oy;
+
+                if (nx >= 0 && nx < cols && ny >= 0 && ny < rows) {
+                    const neighbor = cells[Math.floor(ny) * cols + Math.floor(nx)];
+                    if (neighbor) cell.neighbors.push(neighbor);
+                }
+            });
+        });
+
+        // Animation state
+        let time = 0;
+        let pulse = params.pulse_avg;
+
+        function animate() {
+            // Background
+            ctx.fillStyle = palette.bg;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Update pulse
+            pulse = params.pulse_avg + Math.sin(time * 0.001) * (params.pulse_max - params.pulse_avg);
+            if (params.motion < 0.3) pulse = params.pulse_avg;
+
+            // Update cell states
+            cells.forEach(cell => {
+                if (Math.random() < 0.02 * params.motion * pulse) {
+                    cell.targetState = cell.state === 0 ? 1 : 0;
+                }
+
+                if (cell.state !== cell.targetState) {
+                    const changeSpeed = 0.05 * params.motion * pulse;
+                    cell.state += cell.targetState > cell.state ? changeSpeed : -changeSpeed;
+                    if (Math.abs(cell.state - cell.targetState) < changeSpeed * 2) {
+                        cell.state = cell.targetState;
+                    }
+                }
+
+                // Update size based on state
+                cell.size = cellSize * (0.5 + cell.state * (0.5 + Math.sin(time * 0.002) * 0.2));
+            });
+
+            // Draw connections
+            if (params.connectedness > 0.3) {
+                ctx.strokeStyle = palette.fg;
+                ctx.lineWidth = 0.5;
+
+                cells.forEach(cell => {
+                    cell.neighbors.forEach(neighbor => {
+                        if (cell.state > 0.1 && neighbor.state > 0.1) {
+                            const dist = Math.sqrt(
+                                Math.pow(cell.x - neighbor.x, 2) +
+                                Math.pow(cell.y - neighbor.y, 2)
+                            );
+                            if (dist < cellSize * 2 * params.connectedness) {
+                                const alpha = (cell.state + neighbor.state) * 0.5 * Math.min(1, dist / (cellSize * 1.5));
+                                ctx.globalAlpha = alpha * 0.3;
+                                ctx.beginPath();
+                                ctx.moveTo(cell.x, cell.y);
+                                ctx.lineTo(neighbor.x, neighbor.y);
+                                ctx.stroke();
+                            }
+                        }
+                    });
+                });
+                ctx.globalAlpha = 1;
+            }
+
+            // Draw cells
+            cells.forEach(cell => {
+                const alpha = cell.state * (0.7 + Math.sin(time * 0.003 + cell.x * 0.01) * 0.3);
+                ctx.fillStyle = `rgba(${Math.floor(180 + cell.state * 75)}, ${Math.floor(180 + cell.state * 75)}, ${Math.floor(180 + cell.state * 75)}, ${alpha})`;
+
+                // Hexagon shape
+                ctx.beginPath();
+                for (let i = 0; i < 6; i++) {
+                    const angle = (Math.PI / 3) * i + Math.sin(time * 0.001 + cell.x * 0.01) * 0.2;
+                    const px = cell.x + Math.cos(angle) * cell.size;
+                    const py = cell.y + Math.sin(angle) * cell.size;
+                    if (i === 0) ctx.moveTo(px, py);
+                    else ctx.lineTo(px, py);
+                }
+                ctx.closePath();
+                ctx.fill();
+
+                // Inner glow
+                if (cell.state > 0.8) {
+                    ctx.fillStyle = `rgba(255, 255, 255, ${(cell.state - 0.8) * 5})`;
+                    ctx.beginPath();
+                    for (let i = 0; i < 6; i++) {
+                        const angle = (Math.PI / 3) * i + Math.sin(time * 0.001 + cell.x * 0.01) * 0.2;
+                        const px = cell.x + Math.cos(angle) * (cell.size * 0.7);
+                        const py = cell.y + Math.sin(angle) * (cell.size * 0.7);
+                        if (i === 0) ctx.moveTo(px, py);
+                        else ctx.lineTo(px, py);
+                    }
+                    ctx.closePath();
+                    ctx.fill();
+                }
+            });
+
+            time += 16;
+            requestAnimationFrame(animate);
+        }
+
+        animate();
+    </script>
+</body>
+</html>
\ No newline at end of file
