Zoomable pictures and fix webkit video (#16)

- zoom @ShrutheeshIR 
- videos play on ios

---------

Co-authored-by: ShrutheeshIR <shrutheesh99@gmail.com>

Author: xclucas

papers/spasm/index.html

@@ -145,7 +145,7 @@ <h1 class="title is-1 publication-title">Differentiable Particle Optimization fo
     <div class="hero-body">
       <video id="teaser" autoplay muted loop playsinline height="100%">
         <source src="./static/videos/hero.webm"
-                type="video/mp4">
+                type="video/webm">
       </video>
       <h2 class="subtitle has-text-centered">
           <span class="dnerf">SPaSM</span> solves sequential manipulation problems in <b><i>milliseconds</i></b>
@@ -172,7 +172,7 @@ <h2 class="title is-3">Abstract</h2>
           </p>
           <p>
             Unlike hierarchical approaches, SPaSM jointly optimizes object placements and robot trajectories to handle scenarios where motion feasibility constrains placement options.
-            Experimental evaluation on challenging benchmarks demonstrates solution times in the realm of <b>milliseconds</b> with a 100% success rate; a 4000x speedup compared to existing approaches.
+            Experimental evaluation on challenging benchmarks demonstrates solution times in the realm of <b>milliseconds</b> with a 100% success rate; a <b>4000x</b> speedup compared to existing approaches.
           </p>
         </div>
       </div>
@@ -211,10 +211,12 @@ <h3 class="title is-4">Trajectory Optimization</h3>
                  alt="Interpolate start reference image."/>
             <p>Initial State</p>
           </div>
-          <div class="column interpolation-video-column">
+          <div class="column interpolation-video-column zoom-container" id="zoomDiv1">
+          <div class="zoom-content">
             <div id="interpolation-image-wrapper">
               Loading...
             </div>
+            </div>
             <input class="slider is-fullwidth is-large is-info"
                    id="interpolation-slider"
                    step="1" min="0" max="100" value="0" type="range">
@@ -240,10 +242,12 @@ <h3 class="title is-4">More Trajectory Optimization</h3>
                  alt="Interpolate start reference image."/>
             <p>Initial State</p>
           </div>
-          <div class="column interpolation-video-column">
+          <div class="column interpolation-video-column zoom-container" id="zoomDiv2">
+          <div class="zoom-content">
             <div id="interpolation-image-wrapper-2">
               Loading...
             </div>
+            </div>
             <input class="slider is-fullwidth is-large is-info"
                    id="interpolation-slider-2"
                    step="1" min="0" max="100" value="0" type="range">
@@ -266,7 +270,7 @@ <h3 class="title is-4">More Trajectory Optimization</h3>
   <div class="container is-max-desktop content">
     <h2 class="title">BibTeX (preprint)</h2>
     <pre><code>@article{chen2025spasm,
-    author={Lucas Chen and Shrutheesh Raman Iyer and Zachary Kingston},
+    author={Lucas Chen and Shrutheesh R. Iyer and Zachary Kingston},
     title={Differentiable Particle Optimization for Fast Sequential Manipulation}, 
     year={2025},
     eprint={2510.07674},

papers/spasm/static/css/index.css

@@ -155,3 +155,38 @@ body {
 #interpolation-image-wrapper img {
   border-radius: 5px;
 }
+
+.zoom-container {
+  display: inline-block;
+  cursor: zoom-in;
+  position: relative;
+  transition: transform 0.3s ease;
+  transform-origin: center center;
+  z-index: 1;
+}
+#zoomOverlay {
+  display: none; /* hidden by default */
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+  z-index: 998;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+/* --- Active zoomed state --- */
+.zoom-container.zoomed {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(1.25);
+  transform-origin: center center;
+  z-index: 999;
+  cursor: zoom-out;
+}
+
+.zoom-container.zoomed ~ #zoomOverlay {
+  display: block;
+  opacity: 1;
+}

papers/spasm/static/js/index.js

@@ -101,3 +101,50 @@ function setInterpolationImage2(i) {
   image.oncontextmenu = function() { return false; };
   $('#interpolation-image-wrapper-2').empty().append(image);
 }
+
+// zoom.js
+document.addEventListener('DOMContentLoaded', () => {
+  const zoomables = document.querySelectorAll('.zoom-container');
+  const overlay = document.getElementById('zoomOverlay');
+  let currentZoom = null;
+
+  zoomables.forEach(container => {
+    container.addEventListener('click', e => {
+      if (e.target.closest('input, button, select, a, textarea, .no-zoom')) return;
+
+      // Close previously zoomed item if another is clicked
+      if (currentZoom && currentZoom !== container) closeZoom(currentZoom);
+
+      if (container.classList.contains('zoomed')) {
+        closeZoom(container);
+      } else {
+        openZoom(container);
+      }
+    });
+  });
+
+  overlay.addEventListener('click', () => {
+    if (currentZoom) closeZoom(currentZoom);
+  });
+
+  window.addEventListener('keydown', e => {
+    const key = e.key || e.code || '';
+    if ((key === 'Escape' || key === 'Esc') && currentZoom) {
+      closeZoom(currentZoom);
+    }
+  }, true);
+
+  function openZoom(el) {
+    el.classList.add('zoomed');
+    overlay.style.display = 'block';
+    requestAnimationFrame(() => (overlay.style.opacity = '1'));
+    currentZoom = el;
+  }
+
+  function closeZoom(el) {
+    el.classList.remove('zoomed');
+    overlay.style.opacity = '0';
+    setTimeout(() => (overlay.style.display = 'none'), 300);
+    currentZoom = null;
+  }
+});