diff --git a/demo/qr-code.html b/demo/qr-code.html
index 58465b4..d21a574 100644
--- a/demo/qr-code.html
+++ b/demo/qr-code.html
@@ -18,7 +18,6 @@
       textarea {
         resize: none;
         field-sizing: content;
-        min-width: 10ch;
       }
 
       event-propagator {
@@ -27,19 +26,34 @@
         inset: 0 0 0 0;
         pointer-events: none;
       }
+
+      body:not([rope-mode]) event-propagator {
+        display: none;
+      }
+
+      body > label {
+        display: block;
+        padding: 0.5rem;
+      }
     </style>
   </head>
-  <body>
-    <fc-geometry x="25" y="100">
+  <body rope-mode>
+    <label>Rope Mode: <input type="checkbox" checked /></label>
+
+    <fc-geometry x="275" y="25">
       <textarea>https://folk-canvas.github.io/folk-canvas/</textarea>
     </fc-geometry>
 
-    <fc-geometry x="600" y="50">
+    <fc-geometry x="300" y="75">
       <label>Radius: <input type="range" min="0" max="0.5" step="0.05" value="0" /></label>
     </fc-geometry>
 
-    <fc-geometry x="400" y="100">
-      <sl-qr-code></sl-qr-code>
+    <fc-geometry x="325" y="175">
+      <label>Color: <input type="color" /></label>
+    </fc-geometry>
+
+    <fc-geometry x="50" y="50">
+      <sl-qr-code size="200"></sl-qr-code>
     </fc-geometry>
 
     <event-propagator
@@ -50,12 +64,19 @@
     ></event-propagator>
 
     <event-propagator
-      source="input"
+      source="input[type='range']"
       target="sl-qr-code"
       triggers="input"
       expression="radius: from.value"
     ></event-propagator>
 
+    <event-propagator
+      source="input[type='color']"
+      target="sl-qr-code"
+      triggers="input"
+      expression="fill: from.value"
+    ></event-propagator>
+
     <script type="module">
       import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/components/qr-code/qr-code.js';
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
@@ -63,6 +84,12 @@
 
       FolkGeometry.define();
       EventPropagator.define();
+
+      const ropeMode = document.querySelector('input[type="checkbox"]');
+
+      ropeMode.addEventListener('input', () => {
+        document.body.toggleAttribute('rope-mode');
+      });
     </script>
   </body>
 </html>
diff --git a/demo/shapes.html b/demo/shapes.html
index 54eb405..a654770 100644
--- a/demo/shapes.html
+++ b/demo/shapes.html
@@ -23,7 +23,7 @@
   <body>
     <fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
     <fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
-    <fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
+    <fc-geometry x="100" y="300" width="50" height="50" rotate="45"></fc-geometry>
 
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
index df41d64..baac931 100644
--- a/demo/vite.config.ts
+++ b/demo/vite.config.ts
@@ -16,7 +16,7 @@ const linkGenerator = (): Plugin => {
       if (!ctx.filename.endsWith('index.html')) return;
 
       const links = files
-        .filter((file) => !file.includes('index') || file.startsWith('_'))
+        .filter((file) => !file.includes('index') && !file.startsWith('_'))
         .sort()
         .map((file) => {
           const title = file.replace('.html', '').replaceAll('-', ' ');
diff --git a/src/distance-field.ts b/src/distance-field.ts
index 637ec05..425acda 100644
--- a/src/distance-field.ts
+++ b/src/distance-field.ts
@@ -66,7 +66,6 @@ export class DistanceField extends HTMLElement {
 
   // Handle updates from geometries
   private handleGeometryUpdate = () => {
-    console.log('handleGeometryUpdate');
     // Re-render seed points and rerun JFA
     this.initSeedPointRendering();
     this.runJFA();
