heygen-com · miguel-heygen · Aug 10, 2026 · Aug 10, 2026 · Aug 10, 2026 · Aug 10, 2026
diff --git a/docs/docs.json b/docs/docs.json
@@ -57,7 +57,14 @@
               "introduction",
               "quickstart",
               "go-further",
-              "developers/index"
+              "developers/index",
+              "probe-a",
+              "probe-b",
+              "probe-c",
+              "probe-d",
+              "probe-e",
+              "probe-f",
+              "probe-g"
             ]
           },
           {
@@ -83,7 +90,7 @@
             "pages": [
               "prompting/overview",
               {
-                "group": "Level 1 — Your first video",
+                "group": "Level 1 \u2014 Your first video",
                 "pages": [
                   "prompting/product-launch",
                   "prompting/explainers",
@@ -94,7 +101,7 @@
                 ]
               },
               {
-                "group": "Level 2 — Control",
+                "group": "Level 2 \u2014 Control",
                 "pages": [
                   "prompting/anatomy",
                   "prompting/specification-dial",
@@ -104,14 +111,14 @@
                 ]
               },
               {
-                "group": "Level 3 — Life",
+                "group": "Level 3 \u2014 Life",
                 "pages": [
                   "prompting/motion",
                   "prompting/transitions"
                 ]
               },
               {
-                "group": "Level 4 — Substance",
+                "group": "Level 4 \u2014 Substance",
                 "pages": [
                   "prompting/code-blocks",
                   "prompting/data-and-maps",
@@ -124,13 +131,13 @@
                 ]
               },
               {
-                "group": "Level 5 — Voice and sound",
+                "group": "Level 5 \u2014 Voice and sound",
                 "pages": [
                   "prompting/media-and-audio"
                 ]
               },
               {
-                "group": "Level 6 — Scale",
+                "group": "Level 6 \u2014 Scale",
                 "pages": [
                   "prompting/design-systems",
                   "prompting/variables-and-templating",
@@ -143,7 +150,7 @@
                 ]
               },
               {
-                "group": "Level 7 — Capstone",
+                "group": "Level 7 \u2014 Capstone",
                 "pages": [
                   "prompting/capstone"
                 ]
@@ -805,4 +812,4 @@
       "permanent": true
     }
   ]
-}
+}
diff --git a/docs/probe-a.mdx b/docs/probe-a.mdx
@@ -0,0 +1,9 @@
+---
+title: "Probe A"
+description: "iframe with JSX srcDoc"
+---
+
+<iframe
+  srcDoc={`<!doctype html><html><body style="margin:0;background:#0b3d20;display:grid;place-items:center;height:100vh"><div style="color:#7CFFB2;font:700 34px system-ui,sans-serif">A: srcDoc RENDERS</div></body></html>`}
+  style={{ width: "100%", height: "150px", border: "0" }}
+/>
diff --git a/docs/probe-b.mdx b/docs/probe-b.mdx
@@ -0,0 +1,9 @@
+---
+title: "Probe B"
+description: "iframe with lowercase srcdoc"
+---
+
+<iframe
+  srcdoc='<!doctype html><html><body style="margin:0;background:#3d2c0b;display:grid;place-items:center;height:100vh"><div style="color:#FFD27C;font:700 34px system-ui,sans-serif">B: lowercase srcdoc RENDERS</div></body></html>'
+  style={{ width: "100%", height: "150px", border: "0" }}
+/>
diff --git a/docs/probe-c.mdx b/docs/probe-c.mdx
@@ -0,0 +1,8 @@
+---
+title: "Probe C"
+description: "external script tag from jsDelivr"
+---
+
+<script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7.105/dist/hyperframes-player.global.js"></script>
+
+<div id="c-out" style={{ font: "700 28px system-ui, sans-serif", color: "#7CFFB2" }}>C: pending</div>
diff --git a/docs/probe-d.mdx b/docs/probe-d.mdx
@@ -0,0 +1,9 @@
+---
+title: "Probe D"
+description: "iframe pointed at the external CDN origin"
+---
+
+<iframe
+  src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/index.json"
+  style={{ width: "100%", height: "120px", border: "0" }}
+/>
diff --git a/docs/probe-e.mdx b/docs/probe-e.mdx
@@ -0,0 +1,6 @@
+---
+title: "Probe E"
+description: "fetch a composition out of a json asset"
+---
+
+<div id="e-out" style={{ font: "700 24px system-ui, sans-serif", color: "#7CFFB2" }}>E: pending</div>
diff --git a/docs/probe-f.mdx b/docs/probe-f.mdx
@@ -0,0 +1,23 @@
+---
+title: "Probe F"
+description: "real player, real composition, inline in MDX"
+---
+
+<script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7.105/dist/hyperframes-player.global.js"></script>
+
+<hyperframes-player
+  style={{ width: "100%", aspectRatio: "16 / 9", display: "block" }}
+  srcdoc={`<!doctype html><html><head><script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"><\/script></head>
+<body style="margin:0">
+<div data-composition-id="probe" data-width="1280" data-height="720" data-duration="2" data-fps="30" style="width:1280px;height:720px;background:#120b3d;position:relative;overflow:hidden">
+  <div class="clip" data-start="0" data-end="2" id="box" style="position:absolute;top:300px;left:80px;width:140px;height:140px;background:#9C7CFF;border-radius:24px"></div>
+  <div style="position:absolute;bottom:50px;left:80px;color:#fff;font:700 40px system-ui,sans-serif">F: PLAYER MOUNTED</div>
+</div>
+<script>
+window.__timelines = window.__timelines || {};
+var tl = gsap.timeline({ paused: true });
+tl.to("#box", { x: 900, rotation: 180, duration: 2, ease: "power2.inOut" });
+window.__timelines["probe"] = tl;
+<\/script>
+</body></html>`}
+/>
diff --git a/docs/probe-g.mdx b/docs/probe-g.mdx
@@ -0,0 +1,24 @@
+---
+title: "Probe G"
+description: "player mounted inside an iframe srcDoc, composition fetched from json"
+---
+
+<iframe
+  srcDoc={`<!doctype html><html><head>
+<style>html,body{margin:0;height:100%;background:#000}hyperframes-player{width:100%;height:100%;display:block}</style>
+<script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7.105/dist/hyperframes-player.global.js"><\/script>
+</head><body>
+<script>
+fetch('/public/probe2/comp2.json')
+  .then(function(r){ return r.json(); })
+  .then(function(d){
+    var p = document.createElement('hyperframes-player');
+    p.setAttribute('srcdoc', d.html);
+    p.setAttribute('controls', '');
+    document.body.appendChild(p);
+  })
+  .catch(function(e){ document.body.innerHTML = '<pre style="color:#f66;font:16px monospace">G FAILED: ' + e + '</pre>'; });
+<\/script>
+</body></html>`}
+  style={{ width: "100%", aspectRatio: "16 / 9", border: "0", borderRadius: "8px" }}
+/>
diff --git a/docs/public/probe2/comp.json b/docs/public/probe2/comp.json
@@ -0,0 +1 @@
+{"html":"<!doctype html><html><body style=\"background:#111\"><h1 style=\"color:#0f0\">from json</h1></body></html>"}
diff --git a/docs/public/probe2/comp2.json b/docs/public/probe2/comp2.json
@@ -0,0 +1 @@
+{"html": "<!doctype html><html><head>\n<script src=\"https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js\"></script>\n</head><body style=\"margin:0\">\n<div data-composition-id=\"probe\" data-width=\"1280\" data-height=\"720\" data-duration=\"2\" data-fps=\"30\" style=\"width:1280px;height:720px;background:#120b3d;position:relative;overflow:hidden\">\n  <div class=\"clip\" data-start=\"0\" data-end=\"2\" id=\"box\" style=\"position:absolute;top:300px;left:80px;width:140px;height:140px;background:#9C7CFF;border-radius:24px\"></div>\n  <div style=\"position:absolute;bottom:50px;left:80px;color:#fff;font:700 40px system-ui,sans-serif\">G: PLAYER MOUNTED IN IFRAME</div>\n</div>\n<script>\nwindow.__timelines = window.__timelines || {};\nvar tl = gsap.timeline({ paused: true });\ntl.to(\"#box\", { x: 900, rotation: 180, duration: 2, ease: \"power2.inOut\" });\nwindow.__timelines[\"probe\"] = tl;\n</script>\n</body></html>"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"html":"<!doctype html><html><body style=\"background:#111\"><h1 style=\"color:#0f0\">from json</h1></body></html>"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"html": "<!doctype html><html><head>\n<script src=\"https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js\"></script>\n</head><body style=\"margin:0\">\n<div data-composition-id=\"probe\" data-width=\"1280\" data-height=\"720\" data-duration=\"2\" data-fps=\"30\" style=\"width:1280px;height:720px;background:#120b3d;position:relative;overflow:hidden\">\n <div class=\"clip\" data-start=\"0\" data-end=\"2\" id=\"box\" style=\"position:absolute;top:300px;left:80px;width:140px;height:140px;background:#9C7CFF;border-radius:24px\"></div>\n <div style=\"position:absolute;bottom:50px;left:80px;color:#fff;font:700 40px system-ui,sans-serif\">G: PLAYER MOUNTED IN IFRAME</div>\n</div>\n<script>\nwindow.__timelines = window.__timelines \|\| {};\nvar tl = gsap.timeline({ paused: true });\ntl.to(\"#box\", { x: 900, rotation: 180, duration: 2, ease: \"power2.inOut\" });\nwindow.__timelines[\"probe\"] = tl;\n</script>\n</body></html>"}