Reduce iframe load jumpiness with fade-in and ready-state smoothing

2026/mcp-connect/presentation.html

@@ -1328,4 +1328,55 @@ video.full-slide {
   }
 })();
 </script>
+
+<style id="iframe-smooth-load">
+iframe.demo {
+  opacity: 0;
+  transition: opacity 220ms ease;
+  will-change: opacity;
+}
+
+iframe.demo.is-ready {
+  opacity: 1;
+}
+</style>
+<script>
+(function () {
+  function markReady(iframe) {
+    iframe.classList.add('is-ready');
+  }
+
+  function initIframe(iframe) {
+    if (!iframe || iframe.__smoothInit) return;
+    iframe.__smoothInit = true;
+
+    iframe.addEventListener('load', () => {
+      requestAnimationFrame(() => markReady(iframe));
+    });
+
+    // Fallback: avoid staying hidden if load event timing is missed.
+    setTimeout(() => markReady(iframe), 1200);
+
+    try {
+      const doc = iframe.contentDocument;
+      if (doc && doc.readyState === 'complete') {
+        markReady(iframe);
+      }
+    } catch (_) {}
+  }
+
+  function initAll() {
+    document.querySelectorAll('iframe.demo').forEach(initIframe);
+  }
+
+  if (document.readyState === 'complete') {
+    initAll();
+  } else {
+    window.addEventListener('load', initAll, { once: true });
+  }
+
+  const observer = new MutationObserver(initAll);
+  observer.observe(document.body, { childList: true, subtree: true });
+})();
+</script>
 </body></html>