diff --git a/html/css/styles.css b/html/css/styles.css
index 9dc7081..b7778dc 100644
--- a/html/css/styles.css
+++ b/html/css/styles.css
@@ -5,7 +5,7 @@
 }
 
 body {
-    background-image: linear-gradient(to bottom, aqua, blue);
+    /*background-image: linear-gradient(to bottom, aqua, blue);*/
     font-family: "Times New Roman", Times, serif;
 
     /*background-image: url("../img/background.png");
@@ -30,5 +30,5 @@ h4 {
     justify-content: center;
     height: 100%;
     width: 100%;
-    background-color: beige;
+    /*background-color: beige;*/
 }
diff --git a/html/index.html b/html/index.html
index c1356c6..25b89a8 100644
--- a/html/index.html
+++ b/html/index.html
@@ -5,6 +5,10 @@
             defer
             src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
         ></script>
+        <script type="module">
+          import {renderToCanvas} from './js/mobile-automata.mjs'
+          renderToCanvas(document.getElementById('automataCanvas'), window.innerWidth, window.innerHeight);
+        </script>
 
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -13,6 +17,21 @@
         <link rel="stylesheet" href="css/styles.css" />
     </head>
     <body>
+        <canvas
+          id="automataCanvas"
+          style="
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            margin: 0;
+            padding: 0;
+            display: block;
+            z-index: -1;
+          "
+        ></canvas>
+
         <div class="container">
             <h1> Welcome </h1>
 
@@ -32,7 +51,8 @@
             <h2>Shrines</h1>
             <a href="shrines/evangelion.html">Evangelion</a>
             <a href="shrines/skipskipbenben.html">Skip skip ben ben</a>
-            <a href="shrines/gto.html">GTO</a>
+            <a href="shrines/demoman.html">demoman</a>
+            <!--<a href="shrines/gto.html">GTO</a>-->
 
         </div>
     </body>
diff --git a/html/js/mobile-automata.mjs b/html/js/mobile-automata.mjs
index 2e7d4bc..3ca9f83 100644
--- a/html/js/mobile-automata.mjs
+++ b/html/js/mobile-automata.mjs
@@ -270,3 +270,42 @@ export function cyclicMa(rules, initialState, t) {
 
   return states;
 }
+
+export function renderToCanvas(canvas, width, height) {
+  const r = 1;
+  const rules = toMaRule(100, 100, 2 * r + 1, 2);
+  let states = Array.from({ length: height }, () => Array(width).fill(0));
+  let head = Math.floor(width / 2) % width;
+  let row_num = 0;
+
+  const ctx = canvas.getContext("2d");
+  const img = ctx.createImageData(width, height);
+  const data = img.data;
+
+  function step() {
+    // calculate new state
+    let [newState, newHead] = cyclicMaStep(rules, [states[row_num], head], r);
+    states[row_num] = newState;
+
+    // write row to ImageData
+    for (let x = 0; x < width; x++) {
+      const idx = (row_num * width + x) * 4;
+      const val = newState[x] ? 255 : 0;
+      data[idx] = val;
+      data[idx + 1] = val;
+      data[idx + 2] = val;
+      data[idx + 3] = 255;
+    }
+
+    // update canvas (only this row)
+    ctx.putImageData(img, 0, row_num, 0, 0, width, 1);
+
+    // advance row and head
+    row_num = (row_num + 1) % height;
+    head = newHead;
+
+    requestAnimationFrame(step);
+  }
+
+  requestAnimationFrame(step);
+}
