diff --git a/public/index.html b/public/index.html
index 9ca31ce..e2523b4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -56,6 +56,13 @@
     width:68px; height:68px; border-radius:50%; border:4px solid rgba(255,255,255,.85);
     background:rgba(255,255,255,.22); cursor:pointer; backdrop-filter:blur(2px); }
   #shutter:active { transform:translateX(-50%) scale(.92); background:rgba(255,255,255,.5); }
+  /* dev-only motion toggle: bottom-left, clear of the centre shutter and the toast */
+  #motionBtn { position:fixed; left:14px; bottom:calc(34px + env(safe-area-inset-bottom)); z-index:7;
+    border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:9px 16px;
+    background:rgba(6,8,15,.72); color:var(--text); font:600 .8rem/1 system-ui, sans-serif;
+    cursor:pointer; backdrop-filter:blur(2px); }
+  #motionBtn:active { background:rgba(255,255,255,.25); }
+  #motionBtn.frozen { color:#ffd166; border-color:rgba(255,209,102,.5); }
   #flash { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:30; transition:opacity .35s; }
   #flash.on { opacity:.85; transition:opacity .05s; }
 
@@ -98,6 +105,7 @@
   background:rgba(6,8,15,.72);color:#8fffd0;font:11px/1.45 monospace;border-radius:6px;
   pointer-events:none;white-space:pre;display:none"></pre>
 <button id="shutter" class="hidden" aria-label="Take photo"></button>
+<button id="motionBtn" class="hidden" type="button">Motion: frozen</button>
 <div id="flash"></div>
 <div id="toast"></div>