Add slide-visibility control and improve panel sizing for stateful request animation

2026/mcp-connect/animations/mcp-stateful-request.html

@@ -19,9 +19,9 @@
     .api-window {
       background: linear-gradient(135deg, #1e1e1e 0%, #252526 100%);
       border-radius: 16px;
-      padding: 20px;
-      width: 480px;
-      height: 460px;
+      padding: 14px;
+      width: min(96vw, 560px);
+      height: min(96vh, 560px);
       box-shadow: 0 10px 40px rgba(0,0,0,0.3);
       overflow: hidden;
       position: relative;
@@ -90,7 +90,7 @@
       bottom: 20px;
       left: 20px;
       right: 20px;
-      padding: 12px;
+      padding: 10px;
       background: #2d2d3a;
       border-radius: 8px;
       font-size: 10px;
@@ -317,9 +317,13 @@
       schedule(() => runAnimation(activeRunId), totalTime + CYCLE_PAUSE);
     }
 
-    function startAnimation() {
+    function stopAnimation() {
       runId++;
       clearTimers();
+    }
+
+    function startAnimation() {
+      stopAnimation();
       schedule(() => runAnimation(runId), 500);
     }
 
@@ -336,7 +340,15 @@
       }
     });
 
-    scaleCanvas();
+    // Parent-controlled visibility for embedded slide iframes.
+    window.addEventListener('message', (event) => {
+      const data = event.data;
+      if (!data || data.type !== 'marp-slide-visibility') return;
+      if (data.active) startAnimation();
+      else stopAnimation();
+    });
+
+    scaleCanvas({ maxScale: 1.25 });
   </script>
 </body>
 </html>