diff --git a/docs/catalog/blocks/canvas-dom-refractor.mdx b/docs/catalog/blocks/canvas-dom-refractor.mdx
new file mode 100644
index 0000000000..5068a3ec47
--- /dev/null
+++ b/docs/catalog/blocks/canvas-dom-refractor.mdx
@@ -0,0 +1,58 @@
+---
+title: "Canvas DOM Refractor"
+description: "Native HTML-in-canvas showcase that refracts, magnifies, slices, and curves one editable DOM source as pixels"
+---
+
+# Canvas DOM Refractor
+
+Native HTML-in-canvas showcase that refracts, magnifies, slices, and curves one editable DOM source as pixels
+
+`experimental` `showcase` `canvas` `html` `refractor` `native`
+
+<Warning>
+This catalog item is experimental. Its native path uses Chrome's HTML-in-canvas API, which is unstable and can change or be removed. Stable Chrome keeps the fallback path. For native rendering, enable `chrome://flags/#canvas-draw-element`, restart the browser after changing the flag, or launch Chromium with `--enable-features=CanvasDrawElement`.
+</Warning>
+
+## Agent Setup
+
+When adapting this item for a user, edit the feature flag yourself when browser access is available, then tell the user to restart the browser before previewing again. If launching Chromium from automation or render scripts, include:
+
+```bash
+--enable-features=CanvasDrawElement
+```
+
+Do not assume native capture is available. Keep the fallback path intact and verify `drawElementImage` support in the target browser.
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canvas-dom-refractor.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canvas-dom-refractor.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add canvas-dom-refractor
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `canvas-dom-refractor.html` | `compositions/canvas-dom-refractor.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="canvas-dom-refractor" data-composition-src="compositions/canvas-dom-refractor.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/experimental-product-launch-portal.mdx b/docs/catalog/blocks/experimental-product-launch-portal.mdx
new file mode 100644
index 0000000000..7c57b3b65c
--- /dev/null
+++ b/docs/catalog/blocks/experimental-product-launch-portal.mdx
@@ -0,0 +1,58 @@
+---
+title: "Experimental Product Launch Portal"
+description: "Shader-heavy product launch block: edit one DOM product UI, then render portal warps, device panels, crop callouts, and CTA shots from the same HTML-in-canvas source"
+---
+
+# Experimental Product Launch Portal
+
+Shader-heavy product launch block: edit one DOM product UI, then render portal warps, device panels, crop callouts, and CTA shots from the same HTML-in-canvas source
+
+`experimental` `launch` `product` `shader` `canvas` `portal`
+
+<Warning>
+This catalog item is experimental. Its native path uses Chrome's HTML-in-canvas API, which is unstable and can change or be removed. Stable Chrome keeps the fallback path. For native rendering, enable `chrome://flags/#canvas-draw-element`, restart the browser after changing the flag, or launch Chromium with `--enable-features=CanvasDrawElement`.
+</Warning>
+
+## Agent Setup
+
+When adapting this item for a user, edit the feature flag yourself when browser access is available, then tell the user to restart the browser before previewing again. If launching Chromium from automation or render scripts, include:
+
+```bash
+--enable-features=CanvasDrawElement
+```
+
+Do not assume native capture is available. Keep the fallback path intact and verify `drawElementImage` support in the target browser.
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/experimental-product-launch-portal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/experimental-product-launch-portal.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add experimental-product-launch-portal
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 18s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `experimental-product-launch-portal.html` | `compositions/experimental-product-launch-portal.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="experimental-product-launch-portal" data-composition-src="compositions/experimental-product-launch-portal.html" data-start="0" data-duration="18" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/experimental-screen-callout.mdx b/docs/catalog/blocks/experimental-screen-callout.mdx
new file mode 100644
index 0000000000..531ee555a9
--- /dev/null
+++ b/docs/catalog/blocks/experimental-screen-callout.mdx
@@ -0,0 +1,58 @@
+---
+title: "Experimental Screen Callout"
+description: "Creator workflow block for product tutorials: edit one DOM screen, then add native canvas zoom lenses, spotlights, cursor trails, and annotations"
+---
+
+# Experimental Screen Callout
+
+Creator workflow block for product tutorials: edit one DOM screen, then add native canvas zoom lenses, spotlights, cursor trails, and annotations
+
+`experimental` `tutorial` `screen` `callout` `canvas`
+
+<Warning>
+This catalog item is experimental. Its native path uses Chrome's HTML-in-canvas API, which is unstable and can change or be removed. Stable Chrome keeps the fallback path. For native rendering, enable `chrome://flags/#canvas-draw-element`, restart the browser after changing the flag, or launch Chromium with `--enable-features=CanvasDrawElement`.
+</Warning>
+
+## Agent Setup
+
+When adapting this item for a user, edit the feature flag yourself when browser access is available, then tell the user to restart the browser before previewing again. If launching Chromium from automation or render scripts, include:
+
+```bash
+--enable-features=CanvasDrawElement
+```
+
+Do not assume native capture is available. Keep the fallback path intact and verify `drawElementImage` support in the target browser.
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/experimental-screen-callout.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/experimental-screen-callout.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add experimental-screen-callout
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `experimental-screen-callout.html` | `compositions/experimental-screen-callout.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="experimental-screen-callout" data-composition-src="compositions/experimental-screen-callout.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/docs.json b/docs/docs.json
index 3c7092e087..1dc323c81e 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -138,6 +138,14 @@
               "catalog/blocks/transitions-scale"
             ]
           },
+          {
+            "group": "Experimental",
+            "pages": [
+              "catalog/blocks/canvas-dom-refractor",
+              "catalog/blocks/experimental-product-launch-portal",
+              "catalog/blocks/experimental-screen-callout"
+            ]
+          },
           {
             "group": "Showcases",
             "pages": [
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index e33dadda7a..5165ce14e3 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -27,6 +27,23 @@
     "href": "/catalog/blocks/apple-money-count",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
   },
+  {
+    "name": "canvas-dom-refractor",
+    "type": "block",
+    "title": "Canvas DOM Refractor",
+    "description": "Native HTML-in-canvas showcase that refracts, magnifies, slices, and curves one editable DOM source as pixels",
+    "tags": [
+      "experimental",
+      "showcase",
+      "canvas",
+      "html",
+      "refractor",
+      "native"
+    ],
+    "stability": "experimental",
+    "href": "/catalog/blocks/canvas-dom-refractor",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/canvas-dom-refractor.png"
+  },
   {
     "name": "chromatic-radial-split",
     "type": "block",
@@ -88,6 +105,39 @@
     "href": "/catalog/blocks/domain-warp-dissolve",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
   },
+  {
+    "name": "experimental-product-launch-portal",
+    "type": "block",
+    "title": "Experimental Product Launch Portal",
+    "description": "Shader-heavy product launch block: edit one DOM product UI, then render portal warps, device panels, crop callouts, and CTA shots from the same HTML-in-canvas source",
+    "tags": [
+      "experimental",
+      "launch",
+      "product",
+      "shader",
+      "canvas",
+      "portal"
+    ],
+    "stability": "experimental",
+    "href": "/catalog/blocks/experimental-product-launch-portal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/experimental-product-launch-portal.png"
+  },
+  {
+    "name": "experimental-screen-callout",
+    "type": "block",
+    "title": "Experimental Screen Callout",
+    "description": "Creator workflow block for product tutorials: edit one DOM screen, then add native canvas zoom lenses, spotlights, cursor trails, and annotations",
+    "tags": [
+      "experimental",
+      "tutorial",
+      "screen",
+      "callout",
+      "canvas"
+    ],
+    "stability": "experimental",
+    "href": "/catalog/blocks/experimental-screen-callout",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/experimental-screen-callout.png"
+  },
   {
     "name": "flash-through-white",
     "type": "block",
diff --git a/docs/schema/registry-item.json b/docs/schema/registry-item.json
index a2051a5bf2..f599ba023c 100644
--- a/docs/schema/registry-item.json
+++ b/docs/schema/registry-item.json
@@ -58,6 +58,11 @@
       "minLength": 1,
       "description": "If set, the item is deprecated; the value is the reason or migration note."
     },
+    "stability": {
+      "type": "string",
+      "enum": ["stable", "experimental"],
+      "description": "Stability label for catalog surfaces. Omitted means stable."
+    },
     "dimensions": {
       "type": "object",
       "required": ["width", "height"],
diff --git a/packages/cli/src/commands/catalog.ts b/packages/cli/src/commands/catalog.ts
index 43d3c949c6..007c79149b 100644
--- a/packages/cli/src/commands/catalog.ts
+++ b/packages/cli/src/commands/catalog.ts
@@ -85,6 +85,7 @@ export default defineCommand({
         title: item.title,
         description: item.description,
         tags: item.tags ?? [],
+        ...(item.stability ? { stability: item.stability } : {}),
         ...("dimensions" in item && item.dimensions ? { dimensions: item.dimensions } : {}),
         ...("duration" in item && item.duration ? { duration: item.duration } : {}),
       }));
@@ -96,7 +97,10 @@ export default defineCommand({
       const options = matching.map((item) => ({
         value: item.name,
         label: item.name,
-        hint: item.description,
+        hint:
+          item.stability === "experimental"
+            ? `[experimental] ${item.description}`
+            : item.description,
       }));
 
       const selected = await clack.select({
@@ -139,8 +143,9 @@ export default defineCommand({
     for (const item of matching) {
       const type = item.type.replace("hyperframes:", "");
       const tags = item.tags?.length ? c.dim(` [${item.tags.join(", ")}]`) : "";
+      const typeLabel = item.stability === "experimental" ? `${type} exp` : type;
       console.log(
-        `${c.cyan(item.name.padEnd(NAME_COL))}${type.padEnd(TYPE_COL)}${item.description}${tags}`,
+        `${c.cyan(item.name.padEnd(NAME_COL))}${typeLabel.padEnd(TYPE_COL)}${item.description}${tags}`,
       );
     }
 
diff --git a/packages/cli/src/commands/validate.ts b/packages/cli/src/commands/validate.ts
index ed2bd7f99e..90eb99cdcd 100644
--- a/packages/cli/src/commands/validate.ts
+++ b/packages/cli/src/commands/validate.ts
@@ -162,18 +162,22 @@ async function validateInBrowser(
   const errors: ConsoleEntry[] = [];
   const warnings: ConsoleEntry[] = [];
   let contrast: ContrastEntry[] | undefined;
+  const viewport = resolveCompositionViewportFromHtml(html);
 
   try {
     const browser = await ensureBrowser();
     const puppeteer = await import("puppeteer-core");
+    const { buildChromeArgs } = await import("@hyperframes/engine");
+    const browserGpuMode =
+      process.env.PRODUCER_BROWSER_GPU_MODE === "software" ? "software" : "hardware";
     const chromeBrowser = await puppeteer.default.launch({
       headless: true,
       executablePath: browser.executablePath,
-      args: ["--no-sandbox", "--disable-gpu", "--disable-dev-shm-usage"],
+      args: buildChromeArgs({ ...viewport, captureMode: "screenshot" }, { browserGpuMode }),
     });
 
     const page = await chromeBrowser.newPage();
-    await page.setViewport(resolveCompositionViewportFromHtml(html));
+    await page.setViewport(viewport);
 
     page.on("console", (msg) => {
       const type = msg.type();
diff --git a/packages/core/schemas/registry-item.json b/packages/core/schemas/registry-item.json
index a2051a5bf2..f599ba023c 100644
--- a/packages/core/schemas/registry-item.json
+++ b/packages/core/schemas/registry-item.json
@@ -58,6 +58,11 @@
       "minLength": 1,
       "description": "If set, the item is deprecated; the value is the reason or migration note."
     },
+    "stability": {
+      "type": "string",
+      "enum": ["stable", "experimental"],
+      "description": "Stability label for catalog surfaces. Omitted means stable."
+    },
     "dimensions": {
       "type": "object",
       "required": ["width", "height"],
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 15dabecd17..b863cb681e 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -173,6 +173,7 @@ export type {
   FileTarget,
   RegistryItemDimensions,
   RegistryItemPreview,
+  RegistryItemStability,
   RegistryItem,
   ExampleItem,
   BlockItem,
diff --git a/packages/core/src/registry/index.ts b/packages/core/src/registry/index.ts
index ff8b5890dd..ecb150318b 100644
--- a/packages/core/src/registry/index.ts
+++ b/packages/core/src/registry/index.ts
@@ -4,6 +4,7 @@ export type {
   FileTarget,
   RegistryItemDimensions,
   RegistryItemPreview,
+  RegistryItemStability,
   RegistryItem,
   ExampleItem,
   BlockItem,
diff --git a/packages/core/src/registry/types.test.ts b/packages/core/src/registry/types.test.ts
index 66cc11565d..74e28aa715 100644
--- a/packages/core/src/registry/types.test.ts
+++ b/packages/core/src/registry/types.test.ts
@@ -224,6 +224,7 @@ describe("registry types", () => {
         license: "Apache-2.0",
         minCliVersion: "0.4.0",
         deprecated: "Use `shader-wipe-v2` instead.",
+        stability: "experimental",
         files: [
           {
             path: "shader-wipe.html",
@@ -235,6 +236,7 @@ describe("registry types", () => {
       expect(item.author).toBe("heygen");
       expect(item.authorUrl).toBe("https://example.com/heygen");
       expect(item.sourcePrompt).toBe("Create a shader wipe.");
+      expect(item.stability).toBe("experimental");
     });
   });
 });
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index 098b6ac063..99da0a8377 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -34,6 +34,8 @@ export interface RegistryItemPreview {
   poster?: string;
 }
 
+export type RegistryItemStability = "stable" | "experimental";
+
 /** Fields common to every registry item, regardless of type. */
 interface RegistryItemBase {
   /** JSON Schema URL — `https://hyperframes.heygen.com/schema/registry-item.json`. */
@@ -58,6 +60,8 @@ interface RegistryItemBase {
   minCliVersion?: string;
   /** If set, the item is deprecated; the value is the reason or migration note. */
   deprecated?: string;
+  /** Stability label shown in catalog surfaces. Omitted means stable. */
+  stability?: RegistryItemStability;
   /** Names of other registry items this item depends on. */
   registryDependencies?: string[];
   /** Files to install. Must be non-empty. */
diff --git a/packages/engine/src/services/browserManager.test.ts b/packages/engine/src/services/browserManager.test.ts
index 16800bdb4b..f30cd3a3e9 100644
--- a/packages/engine/src/services/browserManager.test.ts
+++ b/packages/engine/src/services/browserManager.test.ts
@@ -7,6 +7,7 @@ describe("buildChromeArgs browser GPU mode", () => {
 
   it("uses SwiftShader software GL by default for reproducible local renders", () => {
     const args = buildChromeArgs(base);
+    expect(args).toContain("--enable-features=CanvasDrawElement");
     expect(args).toContain("--use-gl=angle");
     expect(args).toContain("--use-angle=swiftshader");
     expect(args).not.toContain("--enable-gpu-rasterization");
diff --git a/packages/engine/src/services/browserManager.ts b/packages/engine/src/services/browserManager.ts
index bc37520fe6..8c63de5eb1 100644
--- a/packages/engine/src/services/browserManager.ts
+++ b/packages/engine/src/services/browserManager.ts
@@ -265,6 +265,8 @@ export interface BuildChromeArgsOptions {
   platform?: NodeJS.Platform;
 }
 
+const CANVAS_DRAW_ELEMENT_FEATURE_FLAG = "--enable-features=CanvasDrawElement";
+
 export function buildChromeArgs(
   options: BuildChromeArgsOptions,
   config?: Partial<Pick<EngineConfig, "browserGpuMode" | "disableGpu" | "chromePath">>,
@@ -282,6 +284,7 @@ export function buildChromeArgs(
     "--no-sandbox",
     "--disable-setuid-sandbox",
     "--disable-dev-shm-usage",
+    CANVAS_DRAW_ELEMENT_FEATURE_FLAG,
     "--enable-webgl",
     "--ignore-gpu-blocklist",
     ...getBrowserGpuArgs(browserGpuMode, platform),
diff --git a/packages/shader-transitions/README.md b/packages/shader-transitions/README.md
index 050ca63f06..14073d727b 100644
--- a/packages/shader-transitions/README.md
+++ b/packages/shader-transitions/README.md
@@ -32,6 +32,11 @@ const tl = init({
 
 The `init()` function captures each scene to a WebGL texture at transition time, crossfades between them using the selected shader, and returns a GSAP timeline. If WebGL is unavailable, it falls back to hard cuts.
 
+When the browser exposes Chrome's experimental CanvasDrawElement API, scene
+capture uses native HTML-in-canvas via `drawElementImage()`. Other browsers keep
+using the existing `html2canvas` fallback. You can feature-detect the native path
+with `isHtmlInCanvasCaptureSupported()`.
+
 ### With an existing timeline
 
 Pass your own GSAP timeline to layer transitions onto it:
diff --git a/packages/shader-transitions/src/capture.test.ts b/packages/shader-transitions/src/capture.test.ts
new file mode 100644
index 0000000000..9f5b8d9095
--- /dev/null
+++ b/packages/shader-transitions/src/capture.test.ts
@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { isHtmlInCanvasCaptureSupported } from "./capture.js";
+
+describe("isHtmlInCanvasCaptureSupported", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("returns false outside the browser", () => {
+    vi.stubGlobal("document", undefined);
+
+    expect(isHtmlInCanvasCaptureSupported()).toBe(false);
+  });
+
+  it("requires layoutsubtree, requestPaint, and drawElementImage", () => {
+    vi.stubGlobal("document", {
+      createElement: () => ({
+        layoutSubtree: false,
+        requestPaint: () => undefined,
+        getContext: () => ({
+          drawElementImage: () => undefined,
+        }),
+      }),
+    });
+
+    expect(isHtmlInCanvasCaptureSupported()).toBe(true);
+  });
+
+  it("returns false when drawElementImage is missing", () => {
+    vi.stubGlobal("document", {
+      createElement: () => ({
+        layoutSubtree: false,
+        requestPaint: () => undefined,
+        getContext: () => ({}),
+      }),
+    });
+
+    expect(isHtmlInCanvasCaptureSupported()).toBe(false);
+  });
+});
diff --git a/packages/shader-transitions/src/capture.ts b/packages/shader-transitions/src/capture.ts
index fc3a26874e..e45862e79f 100644
--- a/packages/shader-transitions/src/capture.ts
+++ b/packages/shader-transitions/src/capture.ts
@@ -1,6 +1,21 @@
 import html2canvas from "html2canvas";
 import { DEFAULT_WIDTH, DEFAULT_HEIGHT } from "./webgl.js";
 
+type CanvasWithLayoutSubtree = HTMLCanvasElement & {
+  layoutSubtree: boolean;
+  requestPaint: () => void;
+};
+
+type DrawElementImageContext = CanvasRenderingContext2D & {
+  drawElementImage: (
+    element: Element,
+    dx: number,
+    dy: number,
+    dwidth: number,
+    dheight: number,
+  ) => DOMMatrix;
+};
+
 let patched = false;
 
 function patchCreatePattern(): void {
@@ -27,7 +42,120 @@ export function initCapture(): void {
   patchCreatePattern();
 }
 
-export function captureScene(
+function hasLayoutSubtreeCanvas(canvas: HTMLCanvasElement): canvas is CanvasWithLayoutSubtree {
+  const candidate = canvas as HTMLCanvasElement & {
+    layoutSubtree?: unknown;
+    requestPaint?: unknown;
+  };
+  return "layoutSubtree" in candidate && typeof candidate.requestPaint === "function";
+}
+
+function getDrawElementImageContext(canvas: HTMLCanvasElement): DrawElementImageContext | null {
+  const ctx = canvas.getContext("2d");
+  const candidate = ctx as (CanvasRenderingContext2D & { drawElementImage?: unknown }) | null;
+  if (!candidate || typeof candidate.drawElementImage !== "function") {
+    return null;
+  }
+  return candidate as DrawElementImageContext;
+}
+
+export function isHtmlInCanvasCaptureSupported(): boolean {
+  if (typeof document === "undefined") {
+    return false;
+  }
+
+  const canvas = document.createElement("canvas");
+  return hasLayoutSubtreeCanvas(canvas) && getDrawElementImageContext(canvas) !== null;
+}
+
+function waitForNextFrame(): Promise<void> {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+function waitForPaint(canvas: CanvasWithLayoutSubtree): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      canvas.removeEventListener("paint", onPaint);
+      reject(new Error("Timed out waiting for canvas paint event"));
+    }, 1000);
+
+    const onPaint = () => {
+      clearTimeout(timeout);
+      resolve();
+    };
+
+    canvas.addEventListener("paint", onPaint, { once: true });
+    canvas.requestPaint();
+  });
+}
+
+async function captureSceneWithHtmlInCanvas(
+  sceneEl: HTMLElement,
+  bgColor: string,
+  width: number,
+  height: number,
+): Promise<HTMLCanvasElement> {
+  const canvas = document.createElement("canvas");
+  if (!hasLayoutSubtreeCanvas(canvas)) {
+    throw new Error("HTML-in-canvas layoutsubtree support is unavailable");
+  }
+
+  const ctx = getDrawElementImageContext(canvas);
+  if (!ctx) {
+    throw new Error("HTML-in-canvas drawElementImage support is unavailable");
+  }
+
+  const clone = sceneEl.cloneNode(true);
+  if (!(clone instanceof HTMLElement)) {
+    throw new Error("Scene clone is not an HTMLElement");
+  }
+
+  canvas.width = width;
+  canvas.height = height;
+  canvas.layoutSubtree = true;
+  canvas.setAttribute("layoutsubtree", "");
+  canvas.style.cssText = [
+    "position:fixed",
+    "left:0",
+    "top:0",
+    `width:${width}px`,
+    `height:${height}px`,
+    "pointer-events:none",
+    "opacity:0.001",
+    "z-index:-2147483648",
+  ].join(";");
+
+  clone.style.position = "absolute";
+  clone.style.left = "0";
+  clone.style.top = "0";
+  clone.style.width = `${width}px`;
+  clone.style.height = `${height}px`;
+
+  canvas.appendChild(clone);
+  document.body.appendChild(canvas);
+
+  try {
+    await waitForNextFrame();
+    await waitForPaint(canvas);
+
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    ctx.fillStyle = bgColor;
+    ctx.fillRect(0, 0, width, height);
+    ctx.drawElementImage(clone, 0, 0, width, height);
+    canvas.remove();
+    return canvas;
+  } catch (err) {
+    canvas.remove();
+    throw err;
+  }
+}
+
+function captureSceneWithHtml2Canvas(
   sceneEl: HTMLElement,
   bgColor: string,
   width: number = DEFAULT_WIDTH,
@@ -70,6 +198,21 @@ export function captureScene(
   });
 }
 
+export function captureScene(
+  sceneEl: HTMLElement,
+  bgColor: string,
+  width: number = DEFAULT_WIDTH,
+  height: number = DEFAULT_HEIGHT,
+): Promise<HTMLCanvasElement> {
+  if (!isHtmlInCanvasCaptureSupported()) {
+    return captureSceneWithHtml2Canvas(sceneEl, bgColor, width, height);
+  }
+
+  return captureSceneWithHtmlInCanvas(sceneEl, bgColor, width, height).catch(() =>
+    captureSceneWithHtml2Canvas(sceneEl, bgColor, width, height),
+  );
+}
+
 /**
  * Capture the incoming scene with .scene-content hidden (background + decoratives only).
  * Shows the scene behind the outgoing scene via z-index, waits 2 rAFs for font rendering,
diff --git a/packages/shader-transitions/src/index.ts b/packages/shader-transitions/src/index.ts
index 184c26c7e7..f7d57f6c44 100644
--- a/packages/shader-transitions/src/index.ts
+++ b/packages/shader-transitions/src/index.ts
@@ -1,2 +1,3 @@
 export { init, type HyperShaderConfig, type TransitionConfig } from "./hyper-shader.js";
+export { isHtmlInCanvasCaptureSupported } from "./capture.js";
 export { SHADER_NAMES, type ShaderName } from "./shaders/registry.js";
diff --git a/registry/blocks/canvas-dom-refractor/canvas-dom-refractor.html b/registry/blocks/canvas-dom-refractor/canvas-dom-refractor.html
new file mode 100644
index 0000000000..042d9f6543
--- /dev/null
+++ b/registry/blocks/canvas-dom-refractor/canvas-dom-refractor.html
@@ -0,0 +1,1150 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>canvas-dom-refractor</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #050609;
+        font-family:
+          Inter,
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+
+      #canvas-dom-refractor {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        color: #f4fff9;
+        background:
+          radial-gradient(circle at 20% 20%, rgba(0, 255, 191, 0.24), transparent 34%),
+          radial-gradient(circle at 82% 72%, rgba(255, 205, 69, 0.18), transparent 31%),
+          linear-gradient(135deg, #06110f 0%, #090b10 48%, #050609 100%);
+      }
+
+      .grid-floor {
+        position: absolute;
+        inset: -120px;
+        opacity: 0.24;
+        background-image:
+          linear-gradient(rgba(138, 255, 221, 0.1) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(138, 255, 221, 0.1) 1px, transparent 1px);
+        background-size: 76px 76px;
+        transform: perspective(900px) rotateX(62deg) translateY(190px) scale(1.18);
+        transform-origin: center bottom;
+      }
+
+      .grain {
+        position: absolute;
+        inset: 0;
+        opacity: 0.14;
+        pointer-events: none;
+        background-image: repeating-linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0.08) 0,
+          rgba(255, 255, 255, 0.08) 1px,
+          transparent 1px,
+          transparent 5px
+        );
+        mix-blend-mode: overlay;
+      }
+
+      .copy {
+        position: absolute;
+        left: 74px;
+        top: 72px;
+        width: 520px;
+        z-index: 20;
+      }
+
+      .kicker {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 14px;
+        border: 1px solid rgba(98, 255, 208, 0.62);
+        border-radius: 999px;
+        background: rgba(4, 25, 21, 0.76);
+        color: #64ffd7;
+        font-size: 18px;
+        font-weight: 900;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .dot {
+        width: 9px;
+        height: 9px;
+        border-radius: 999px;
+        background: #64ffd7;
+        box-shadow: 0 0 18px rgba(100, 255, 215, 0.95);
+      }
+
+      .headline {
+        margin-top: 26px;
+        font-size: 84px;
+        line-height: 0.91;
+        font-weight: 950;
+        letter-spacing: 0;
+      }
+
+      .subhead {
+        margin-top: 24px;
+        max-width: 480px;
+        color: rgba(244, 255, 249, 0.74);
+        font-size: 25px;
+        line-height: 1.22;
+        font-weight: 750;
+      }
+
+      .proof-strip {
+        position: absolute;
+        left: 74px;
+        bottom: 72px;
+        display: flex;
+        gap: 12px;
+        z-index: 20;
+      }
+
+      .proof-card {
+        min-width: 142px;
+        padding: 16px 18px 14px;
+        border: 1px solid rgba(255, 255, 255, 0.22);
+        background: rgba(255, 255, 255, 0.08);
+        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
+        backdrop-filter: blur(14px);
+      }
+
+      .proof-value {
+        font-size: 31px;
+        line-height: 1;
+        font-weight: 950;
+      }
+
+      .proof-label {
+        margin-top: 9px;
+        color: rgba(244, 255, 249, 0.55);
+        font-size: 13px;
+        font-weight: 900;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        perspective: 1300px;
+      }
+
+      .source-card {
+        position: absolute;
+        left: 640px;
+        top: 120px;
+        width: 390px;
+        height: 260px;
+        padding: 16px;
+        border: 1px solid rgba(100, 255, 215, 0.28);
+        border-radius: 24px;
+        background: rgba(6, 17, 15, 0.78);
+        box-shadow: 0 35px 80px rgba(0, 0, 0, 0.4);
+        transform: rotateY(-22deg) rotateX(7deg);
+        transform-origin: center;
+        z-index: 8;
+      }
+
+      .source-card-title {
+        color: #64ffd7;
+        font-size: 15px;
+        font-weight: 950;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .source-card-copy {
+        margin-top: 10px;
+        color: rgba(244, 255, 249, 0.7);
+        font-size: 18px;
+        line-height: 1.18;
+        font-weight: 760;
+      }
+
+      .source-mini {
+        position: absolute;
+        left: 18px;
+        right: 18px;
+        bottom: 18px;
+        height: 104px;
+        overflow: hidden;
+        border-radius: 14px;
+        background: #eaf3e8;
+      }
+
+      .fallback-source-slot {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      .fallback-source-slot .dom-source {
+        width: 1280px;
+        height: 720px;
+        transform: scale(0.276);
+        transform-origin: top left;
+      }
+
+      .native-stage,
+      .fallback-stage {
+        position: absolute;
+        inset: 0;
+      }
+
+      .native-stage {
+        opacity: 0;
+      }
+
+      [data-native-canvas="true"] .native-stage {
+        opacity: 1;
+      }
+
+      [data-native-canvas="true"] .fallback-stage {
+        opacity: 0;
+      }
+
+      .hero-shell {
+        position: absolute;
+        left: 660px;
+        top: 182px;
+        width: 1110px;
+        height: 626px;
+        padding: 18px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 32px;
+        background:
+          linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04)), #11161a;
+        box-shadow:
+          0 58px 120px rgba(0, 0, 0, 0.48),
+          inset 0 1px 0 rgba(255, 255, 255, 0.3);
+        transform: rotateY(-18deg) rotateX(6deg) rotateZ(-2deg);
+        transform-origin: center;
+        z-index: 11;
+      }
+
+      .hero-topbar {
+        display: flex;
+        align-items: center;
+        height: 42px;
+        padding: 0 14px;
+        gap: 8px;
+      }
+
+      .chrome-dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+
+      .chrome-dot.red {
+        background: #ff5f57;
+      }
+
+      .chrome-dot.yellow {
+        background: #ffbd2f;
+      }
+
+      .chrome-dot.green {
+        background: #28c840;
+      }
+
+      .url {
+        margin-left: 12px;
+        flex: 1;
+        height: 26px;
+        padding: 0 14px;
+        border-radius: 999px;
+        background: rgba(255, 255, 255, 0.11);
+        color: rgba(244, 255, 249, 0.58);
+        font-size: 13px;
+        font-weight: 900;
+        line-height: 26px;
+      }
+
+      .screen {
+        position: relative;
+        height: 530px;
+        overflow: hidden;
+        border-radius: 20px;
+        background: #eef5eb;
+      }
+
+      #heroCanvas,
+      #ribbonCanvas,
+      #shardCanvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .lens-orb {
+        position: absolute;
+        left: 1242px;
+        top: 132px;
+        width: 352px;
+        height: 352px;
+        overflow: hidden;
+        border: 1px solid rgba(100, 255, 215, 0.5);
+        border-radius: 50%;
+        background: rgba(0, 0, 0, 0.28);
+        box-shadow:
+          0 34px 90px rgba(0, 0, 0, 0.45),
+          0 0 80px rgba(100, 255, 215, 0.18),
+          inset 0 0 36px rgba(255, 255, 255, 0.14);
+        transform: rotateY(12deg) rotateX(5deg);
+        z-index: 16;
+      }
+
+      #lensCanvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .orb-label {
+        position: absolute;
+        left: 1510px;
+        top: 402px;
+        z-index: 18;
+        padding: 10px 13px;
+        border: 1px solid rgba(100, 255, 215, 0.54);
+        border-radius: 999px;
+        background: rgba(5, 18, 16, 0.84);
+        color: #64ffd7;
+        font-size: 15px;
+        font-weight: 950;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+
+      .ribbon-shell {
+        position: absolute;
+        left: 1080px;
+        top: 634px;
+        width: 715px;
+        height: 250px;
+        overflow: hidden;
+        border: 1px solid rgba(100, 255, 215, 0.28);
+        border-radius: 24px;
+        background: rgba(6, 18, 17, 0.62);
+        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.38);
+        transform: rotateY(28deg) rotateX(-7deg) rotateZ(2deg);
+        z-index: 12;
+      }
+
+      .shard-shell {
+        position: absolute;
+        left: 700px;
+        top: 662px;
+        width: 560px;
+        height: 282px;
+        border-radius: 24px;
+        transform: rotateY(-23deg) rotateX(-4deg) rotateZ(-4deg);
+        z-index: 15;
+      }
+
+      .fallback-stage .hero-shell {
+        opacity: 1;
+      }
+
+      .fallback-dom-slot {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      .fallback-dom-slot .dom-source {
+        width: 1280px;
+        height: 720px;
+        transform: scale(0.82);
+        transform-origin: top left;
+      }
+
+      .fallback-glass {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background:
+          linear-gradient(118deg, rgba(255, 255, 255, 0.24), transparent 28%),
+          repeating-linear-gradient(
+            0deg,
+            rgba(2, 21, 17, 0.18) 0,
+            rgba(2, 21, 17, 0.18) 1px,
+            transparent 1px,
+            transparent 5px
+          );
+        mix-blend-mode: multiply;
+      }
+
+      .fallback-note {
+        position: absolute;
+        right: 48px;
+        bottom: 36px;
+        max-width: 310px;
+        padding: 12px 14px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 16px;
+        background: rgba(0, 0, 0, 0.38);
+        color: rgba(244, 255, 249, 0.68);
+        font-size: 15px;
+        line-height: 1.2;
+        font-weight: 750;
+      }
+
+      .source-templates {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        opacity: 0;
+        pointer-events: none;
+        z-index: -2147483648;
+      }
+
+      .template-source {
+        display: none;
+      }
+
+      .dom-source {
+        position: relative;
+        overflow: hidden;
+        color: #07110f;
+        background: #eef5eb;
+        font-family:
+          Inter,
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+
+      .dom-source::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-image:
+          linear-gradient(rgba(1, 20, 17, 0.055) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(1, 20, 17, 0.055) 1px, transparent 1px);
+        background-size: 42px 42px;
+        pointer-events: none;
+      }
+
+      .source-nav {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 214px;
+        padding: 34px 24px;
+        color: #eef7f0;
+        background: #07110f;
+      }
+
+      .source-brand {
+        font-size: 26px;
+        font-weight: 950;
+      }
+
+      .source-brand span {
+        color: #25efc9;
+      }
+
+      .nav-pill {
+        margin-top: 18px;
+        padding: 13px 16px;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.08);
+        color: rgba(238, 247, 240, 0.72);
+        font-size: 14px;
+        font-weight: 850;
+      }
+
+      .nav-pill.active {
+        margin-top: 34px;
+        background: #4bffda;
+        color: #06110f;
+      }
+
+      .source-main {
+        position: absolute;
+        left: 214px;
+        top: 0;
+        right: 260px;
+        bottom: 0;
+        padding: 44px 44px 38px;
+      }
+
+      .source-kicker {
+        color: #078a73;
+        font-size: 14px;
+        font-weight: 950;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+
+      .source-title {
+        margin-top: 12px;
+        max-width: 540px;
+        font-size: 49px;
+        line-height: 0.98;
+        font-weight: 950;
+        letter-spacing: 0;
+      }
+
+      .metric-row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 14px;
+        margin-top: 28px;
+      }
+
+      .metric {
+        min-height: 96px;
+        padding: 18px;
+        border: 1px solid rgba(7, 17, 15, 0.1);
+        background: rgba(255, 255, 255, 0.62);
+        box-shadow: 0 12px 24px rgba(6, 17, 15, 0.04);
+      }
+
+      .metric-value {
+        font-size: 34px;
+        line-height: 1;
+        font-weight: 950;
+      }
+
+      .metric-label {
+        margin-top: 12px;
+        color: rgba(7, 17, 15, 0.55);
+        font-size: 12px;
+        font-weight: 950;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .chart {
+        position: relative;
+        height: 228px;
+        margin-top: 18px;
+        border: 1px solid rgba(7, 17, 15, 0.09);
+        background: rgba(255, 255, 255, 0.45);
+      }
+
+      .chart svg {
+        position: absolute;
+        inset: 24px 22px;
+        width: calc(100% - 44px);
+        height: calc(100% - 48px);
+      }
+
+      .chart-dot {
+        position: absolute;
+        right: 62px;
+        bottom: 70px;
+        width: 24px;
+        height: 24px;
+        border: 7px solid #64ffd7;
+        border-radius: 50%;
+        background: #06110f;
+        box-shadow: 0 0 0 13px rgba(100, 255, 215, 0.2);
+      }
+
+      .source-side {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 260px;
+        padding: 44px 28px;
+        background: rgba(255, 255, 255, 0.34);
+      }
+
+      .side-card {
+        margin-bottom: 16px;
+        padding: 18px 16px;
+        border: 1px solid rgba(7, 17, 15, 0.1);
+        background: rgba(255, 255, 255, 0.65);
+      }
+
+      .side-card.dark {
+        color: #eef7f0;
+        background: #07110f;
+      }
+
+      .side-title {
+        font-size: 16px;
+        font-weight: 950;
+      }
+
+      .side-copy {
+        margin-top: 8px;
+        color: rgba(7, 17, 15, 0.58);
+        font-size: 13px;
+        line-height: 1.18;
+        font-weight: 780;
+      }
+
+      .side-card.dark .side-copy {
+        color: rgba(238, 247, 240, 0.68);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="canvas-dom-refractor"
+      data-composition-id="canvas-dom-refractor"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-native-canvas="false"
+    >
+      <div class="grid-floor"></div>
+
+      <section class="copy">
+        <div class="kicker"><span class="dot"></span>HTML-in-canvas</div>
+        <div class="headline">Bend real HTML like pixels.</div>
+        <div class="subhead">
+          Capture editable DOM once, then refract, magnify, slice, and curve it as a canvas surface.
+        </div>
+      </section>
+
+      <div class="proof-strip">
+        <div class="proof-card">
+          <div class="proof-value" id="nativeLabel">Fallback</div>
+          <div class="proof-label">capture path</div>
+        </div>
+        <div class="proof-card">
+          <div class="proof-value">1 DOM</div>
+          <div class="proof-label">source</div>
+        </div>
+        <div class="proof-card">
+          <div class="proof-value">4 FX</div>
+          <div class="proof-label">pixel passes</div>
+        </div>
+      </div>
+
+      <div class="stage">
+        <div class="source-card">
+          <div class="source-card-title">source of truth</div>
+          <div class="source-card-copy">
+            This tiny card and every refracted surface below come from the same HTML tree.
+          </div>
+          <div class="source-mini">
+            <div class="fallback-source-slot" id="sourceMiniSlot"></div>
+          </div>
+        </div>
+
+        <div class="fallback-stage">
+          <div class="hero-shell" id="fallbackHero">
+            <div class="hero-topbar">
+              <span class="chrome-dot red"></span>
+              <span class="chrome-dot yellow"></span>
+              <span class="chrome-dot green"></span>
+              <div class="url">hyperframes.local/dom-refractor</div>
+            </div>
+            <div class="screen">
+              <div class="fallback-dom-slot" id="fallbackDomSlot"></div>
+              <div class="fallback-glass"></div>
+              <div class="fallback-note">
+                Stable browsers get the editable DOM view. Canary turns it into a pixel surface.
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="native-stage">
+          <div class="hero-shell" id="nativeHero">
+            <div class="hero-topbar">
+              <span class="chrome-dot red"></span>
+              <span class="chrome-dot yellow"></span>
+              <span class="chrome-dot green"></span>
+              <div class="url">native://drawElementImage/dom-surface</div>
+            </div>
+            <div class="screen"><canvas id="heroCanvas" width="1280" height="720"></canvas></div>
+          </div>
+          <div class="lens-orb"><canvas id="lensCanvas" width="352" height="352"></canvas></div>
+          <div class="orb-label">refracted DOM</div>
+          <div class="ribbon-shell">
+            <canvas id="ribbonCanvas" width="820" height="360"></canvas>
+          </div>
+          <div class="shard-shell"><canvas id="shardCanvas" width="620" height="330"></canvas></div>
+        </div>
+      </div>
+
+      <div class="grain"></div>
+    </div>
+
+    <div class="source-templates" aria-hidden="true">
+      <div id="domSourceTemplate" class="template-source">
+        <div class="dom-source">
+          <aside class="source-nav">
+            <div class="source-brand">Frame<span>OS</span></div>
+            <div class="nav-pill active">Launch board</div>
+            <div class="nav-pill">Scenes</div>
+            <div class="nav-pill">Exports</div>
+            <div class="nav-pill">Revenue</div>
+          </aside>
+          <main class="source-main">
+            <div class="source-kicker">Realtime campaign</div>
+            <div class="source-title">Launch control for every screen.</div>
+            <div class="metric-row">
+              <div class="metric">
+                <div class="metric-value">12.4M</div>
+                <div class="metric-label">rendered pixels</div>
+              </div>
+              <div class="metric">
+                <div class="metric-value">98%</div>
+                <div class="metric-label">frame match</div>
+              </div>
+              <div class="metric">
+                <div class="metric-value">4</div>
+                <div class="metric-label">canvas passes</div>
+              </div>
+            </div>
+            <div class="chart">
+              <svg viewBox="0 0 620 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M12 142 C92 106 148 132 214 86 C282 38 345 110 420 58 C488 10 548 38 608 22"
+                  stroke="#07110f"
+                  stroke-width="10"
+                  stroke-linecap="round"
+                />
+                <path
+                  d="M12 142 C92 106 148 132 214 86 C282 38 345 110 420 58 C488 10 548 38 608 22"
+                  stroke="#25efc9"
+                  stroke-width="5"
+                  stroke-linecap="round"
+                />
+              </svg>
+              <div class="chart-dot"></div>
+            </div>
+          </main>
+          <aside class="source-side">
+            <div class="side-card dark">
+              <div class="side-title">Pixel pass</div>
+              <div class="side-copy">
+                DOM becomes a canvas texture for lens, slice, and prism operations.
+              </div>
+            </div>
+            <div class="side-card">
+              <div class="side-title">Editable source</div>
+              <div class="side-copy">The UI remains normal HTML before capture.</div>
+            </div>
+            <div class="side-card">
+              <div class="side-title">Fallback safe</div>
+              <div class="side-copy">Stable browsers keep a clean DOM screen view.</div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        const duration = 12;
+        const root = document.getElementById("canvas-dom-refractor");
+        const template = document.getElementById("domSourceTemplate");
+        const nativeLabel = document.getElementById("nativeLabel");
+        const sourceMiniSlot = document.getElementById("sourceMiniSlot");
+        const fallbackDomSlot = document.getElementById("fallbackDomSlot");
+        const heroCanvas = document.getElementById("heroCanvas");
+        const lensCanvas = document.getElementById("lensCanvas");
+        const ribbonCanvas = document.getElementById("ribbonCanvas");
+        const shardCanvas = document.getElementById("shardCanvas");
+
+        const cloneSource = () => template.firstElementChild.cloneNode(true);
+        sourceMiniSlot.appendChild(cloneSource());
+        fallbackDomSlot.appendChild(cloneSource());
+
+        const supportsNativeCanvas = () => {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          return (
+            "layoutSubtree" in canvas &&
+            typeof canvas.requestPaint === "function" &&
+            ctx &&
+            typeof ctx.drawElementImage === "function"
+          );
+        };
+
+        const createSource = () => {
+          const canvas = document.createElement("canvas");
+          const node = cloneSource();
+          canvas.width = 1280;
+          canvas.height = 720;
+          canvas.layoutSubtree = true;
+          canvas.setAttribute("layoutsubtree", "");
+          canvas.style.cssText = [
+            "position:fixed",
+            "left:0",
+            "top:0",
+            "width:1280px",
+            "height:720px",
+            "opacity:0.001",
+            "pointer-events:none",
+            "z-index:-2147483648",
+          ].join(";");
+          node.style.position = "absolute";
+          node.style.left = "0";
+          node.style.top = "0";
+          node.style.width = "1280px";
+          node.style.height = "720px";
+          canvas.appendChild(node);
+          document.body.appendChild(canvas);
+          return {
+            canvas,
+            node,
+            ctx: canvas.getContext("2d"),
+            width: 1280,
+            height: 720,
+          };
+        };
+
+        const waitPaint = (source) =>
+          new Promise((resolve) => {
+            let done = false;
+            const finish = () => {
+              if (done) return;
+              done = true;
+              source.canvas.removeEventListener("paint", finish);
+              resolve();
+            };
+            source.canvas.addEventListener("paint", finish, { once: true });
+            source.canvas.requestPaint();
+            setTimeout(finish, 120);
+          });
+
+        const drawSource = (source) => {
+          source.ctx.setTransform(1, 0, 0, 1, 0, 0);
+          source.ctx.clearRect(0, 0, source.width, source.height);
+          source.ctx.drawElementImage(source.node, 0, 0, source.width, source.height);
+        };
+
+        const drawScanlines = (ctx, width, height, alpha) => {
+          ctx.save();
+          ctx.globalAlpha = alpha;
+          ctx.fillStyle = "#06110f";
+          for (let y = 0; y < height; y += 5) ctx.fillRect(0, y, width, 1);
+          ctx.restore();
+        };
+
+        const drawHero = (source, progress) => {
+          const ctx = heroCanvas.getContext("2d");
+          const width = heroCanvas.width;
+          const height = heroCanvas.height;
+          ctx.clearRect(0, 0, width, height);
+          ctx.fillStyle = "#eef5eb";
+          ctx.fillRect(0, 0, width, height);
+
+          const intensity = 8 + Math.sin(progress * Math.PI * 2.5) * 5;
+          for (let y = 0; y < height; y += 10) {
+            const offset = Math.sin(progress * 9 + y * 0.026) * intensity;
+            const heightSlice = 10 + ((y / 10) % 3);
+            ctx.drawImage(source.canvas, 0, y, width, heightSlice, offset, y, width, heightSlice);
+          }
+
+          const lensX = 300 + Math.sin(progress * Math.PI * 1.6) * 260 + progress * 220;
+          const lensY = 365 + Math.cos(progress * Math.PI * 2.1) * 86;
+          const radius = 118 + Math.sin(progress * Math.PI * 3) * 12;
+          ctx.save();
+          ctx.beginPath();
+          ctx.arc(lensX, lensY, radius, 0, Math.PI * 2);
+          ctx.clip();
+          ctx.globalAlpha = 0.88;
+          ctx.drawImage(
+            source.canvas,
+            lensX - radius * 0.48,
+            lensY - radius * 0.48,
+            radius * 0.96,
+            radius * 0.96,
+            lensX - radius,
+            lensY - radius,
+            radius * 2,
+            radius * 2,
+          );
+          ctx.globalCompositeOperation = "screen";
+          ctx.globalAlpha = 0.32;
+          ctx.drawImage(
+            source.canvas,
+            lensX - 90,
+            lensY - 90,
+            180,
+            180,
+            lensX - radius - 10,
+            lensY - radius,
+            radius * 2,
+            radius * 2,
+          );
+          ctx.globalCompositeOperation = "source-over";
+          ctx.restore();
+          ctx.strokeStyle = "rgba(37,239,201,0.78)";
+          ctx.lineWidth = 5;
+          ctx.beginPath();
+          ctx.arc(lensX, lensY, radius, 0, Math.PI * 2);
+          ctx.stroke();
+
+          const prism = Math.max(0, Math.sin(progress * Math.PI * 4) - 0.55);
+          if (prism > 0) {
+            ctx.save();
+            ctx.globalCompositeOperation = "screen";
+            ctx.globalAlpha = prism * 0.42;
+            ctx.drawImage(source.canvas, -14, 0, width, height);
+            ctx.globalAlpha = prism * 0.34;
+            ctx.drawImage(source.canvas, 16, 0, width, height);
+            ctx.restore();
+          }
+          drawScanlines(ctx, width, height, 0.12);
+        };
+
+        const drawLens = (source, progress) => {
+          const ctx = lensCanvas.getContext("2d");
+          const width = lensCanvas.width;
+          const height = lensCanvas.height;
+          ctx.clearRect(0, 0, width, height);
+          ctx.save();
+          ctx.beginPath();
+          ctx.arc(width / 2, height / 2, width * 0.48, 0, Math.PI * 2);
+          ctx.clip();
+          const sx = 360 + Math.sin(progress * Math.PI * 2.2) * 280;
+          const sy = 270 + Math.cos(progress * Math.PI * 1.7) * 120;
+          ctx.drawImage(source.canvas, sx, sy, 300, 300, -20, -8, width + 42, height + 42);
+          ctx.globalCompositeOperation = "screen";
+          ctx.globalAlpha = 0.42;
+          ctx.drawImage(source.canvas, sx - 22, sy, 300, 300, -32, -8, width + 42, height + 42);
+          ctx.globalAlpha = 0.26;
+          ctx.drawImage(source.canvas, sx + 22, sy, 300, 300, -8, -8, width + 42, height + 42);
+          ctx.globalCompositeOperation = "source-over";
+          drawScanlines(ctx, width, height, 0.18);
+          ctx.restore();
+        };
+
+        const drawRibbon = (source, progress) => {
+          const ctx = ribbonCanvas.getContext("2d");
+          const width = ribbonCanvas.width;
+          const height = ribbonCanvas.height;
+          ctx.clearRect(0, 0, width, height);
+          ctx.globalAlpha = 0.92;
+          for (let x = 0; x < width; x += 10) {
+            const sx = (x / width) * source.width;
+            const wave = Math.sin(x * 0.018 + progress * 7.2) * 28;
+            const scale = 0.78 + Math.sin((x / width) * Math.PI) * 0.28;
+            const drawH = height * scale;
+            ctx.drawImage(
+              source.canvas,
+              sx,
+              0,
+              12,
+              source.height,
+              x,
+              (height - drawH) / 2 + wave,
+              12,
+              drawH,
+            );
+          }
+          ctx.globalAlpha = 1;
+          const gradient = ctx.createLinearGradient(0, 0, width, height);
+          gradient.addColorStop(0, "rgba(100,255,215,0.35)");
+          gradient.addColorStop(0.5, "rgba(255,255,255,0)");
+          gradient.addColorStop(1, "rgba(255,205,69,0.24)");
+          ctx.fillStyle = gradient;
+          ctx.fillRect(0, 0, width, height);
+          drawScanlines(ctx, width, height, 0.12);
+        };
+
+        const drawShards = (source, progress) => {
+          const ctx = shardCanvas.getContext("2d");
+          const width = shardCanvas.width;
+          const height = shardCanvas.height;
+          ctx.clearRect(0, 0, width, height);
+          const scatter = Math.min(1, Math.max(0, (progress - 0.24) / 0.52));
+          const settle = Math.min(1, Math.max(0, (progress - 0.72) / 0.18));
+          for (let i = 0; i < 36; i += 1) {
+            const col = i % 6;
+            const row = Math.floor(i / 6);
+            const sw = source.width / 6;
+            const sh = source.height / 6;
+            const baseX = col * (width / 6);
+            const baseY = row * (height / 6);
+            const dirX = col - 2.5;
+            const dirY = row - 2.5;
+            const burst = Math.sin((i + 1) * 1.7) * 18;
+            const dx = baseX + dirX * 42 * scatter * (1 - settle) + burst * scatter;
+            const dy =
+              baseY + dirY * 26 * scatter * (1 - settle) - Math.cos(i * 1.2) * 18 * scatter;
+            const angle = (dirX * 0.11 + dirY * 0.06) * scatter * (1 - settle);
+            ctx.save();
+            ctx.globalAlpha = 0.74 + scatter * 0.2;
+            ctx.translate(dx + width / 12, dy + height / 12);
+            ctx.rotate(angle);
+            ctx.drawImage(
+              source.canvas,
+              col * sw,
+              row * sh,
+              sw,
+              sh,
+              -width / 12,
+              -height / 12,
+              width / 6,
+              height / 6,
+            );
+            ctx.restore();
+          }
+          drawScanlines(ctx, width, height, 0.1);
+        };
+
+        let nativeSource = null;
+        const renderNative = (progress) => {
+          if (!nativeSource) return;
+          drawSource(nativeSource);
+          drawHero(nativeSource, progress);
+          drawLens(nativeSource, progress);
+          drawRibbon(nativeSource, progress);
+          drawShards(nativeSource, progress);
+          window.__HF_CANVAS_DOM_REFRACTOR.drawElementCalls += 1;
+        };
+
+        window.__HF_CANVAS_DOM_REFRACTOR = {
+          native: false,
+          drawElementCalls: 0,
+          ready: false,
+        };
+
+        const tl = gsap.timeline({
+          paused: true,
+          onUpdate: () => renderNative(tl.time() / duration),
+        });
+
+        tl.fromTo(
+          ".copy",
+          { opacity: 0, y: 32 },
+          { opacity: 1, y: 0, duration: 0.9, ease: "power3.out" },
+          0,
+        )
+          .fromTo(
+            ".proof-card",
+            { opacity: 0, y: 22 },
+            { opacity: 1, y: 0, stagger: 0.08, duration: 0.7, ease: "power3.out" },
+            0.45,
+          )
+          .fromTo(
+            ".source-card",
+            { opacity: 0, x: 80, y: -30, rotationY: -42, scale: 0.82 },
+            { opacity: 1, x: 0, y: 0, rotationY: -22, scale: 1, duration: 1, ease: "power3.out" },
+            0.2,
+          )
+          .fromTo(
+            ".hero-shell",
+            { opacity: 0, x: 180, y: 50, rotationY: -34, rotationX: 12, scale: 0.82 },
+            {
+              opacity: 1,
+              x: 0,
+              y: 0,
+              rotationY: -18,
+              rotationX: 6,
+              scale: 1,
+              duration: 1.35,
+              ease: "power3.out",
+            },
+            0.72,
+          )
+          .fromTo(
+            ".lens-orb",
+            { opacity: 0, x: 120, y: -20, scale: 0.56 },
+            { opacity: 1, x: 0, y: 0, scale: 1, duration: 0.9, ease: "back.out(1.25)" },
+            2.1,
+          )
+          .fromTo(
+            ".orb-label",
+            { opacity: 0, y: 16 },
+            { opacity: 1, y: 0, duration: 0.55, ease: "power2.out" },
+            2.45,
+          )
+          .fromTo(
+            ".shard-shell",
+            { opacity: 0, x: 90, y: 60, scale: 0.78 },
+            { opacity: 1, x: 0, y: 0, scale: 1, duration: 1, ease: "power3.out" },
+            3.25,
+          )
+          .fromTo(
+            ".ribbon-shell",
+            { opacity: 0, x: 160, y: 80, scale: 0.82 },
+            { opacity: 1, x: 0, y: 0, scale: 1, duration: 1, ease: "power3.out" },
+            4.7,
+          )
+          .to(
+            "#nativeHero",
+            { x: -80, y: 24, rotationY: -28, scale: 0.94, duration: 1.4, ease: "power2.inOut" },
+            6.1,
+          )
+          .to(
+            ".lens-orb",
+            { x: -110, y: 48, scale: 0.92, duration: 1.4, ease: "power2.inOut" },
+            6.1,
+          )
+          .to(
+            ".shard-shell",
+            { x: 120, y: -24, rotationZ: 5, duration: 1.4, ease: "power2.inOut" },
+            6.1,
+          )
+          .to(
+            ".ribbon-shell",
+            { x: -42, y: -28, rotationY: 42, duration: 1.4, ease: "power2.inOut" },
+            6.1,
+          )
+          .to(".headline", { color: "#64ffd7", duration: 0.65, ease: "power2.out" }, 9.5)
+          .to(".grain", { opacity: 0.24, duration: 0.8, ease: "power2.inOut" }, 10.2);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["canvas-dom-refractor"] = tl;
+
+        const initNative = async () => {
+          if (!supportsNativeCanvas()) {
+            window.__HF_CANVAS_DOM_REFRACTOR.ready = true;
+            return;
+          }
+          nativeSource = createSource();
+          nativeSource.canvas.getBoundingClientRect();
+          nativeSource.node.getBoundingClientRect();
+          await waitPaint(nativeSource);
+          root.setAttribute("data-native-canvas", "true");
+          nativeLabel.textContent = "Native";
+          window.__HF_CANVAS_DOM_REFRACTOR.native = true;
+          window.__HF_CANVAS_DOM_REFRACTOR.ready = true;
+          renderNative(tl.time() / duration);
+        };
+
+        initNative().catch(() => {
+          window.__HF_CANVAS_DOM_REFRACTOR.ready = true;
+        });
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/canvas-dom-refractor/registry-item.json b/registry/blocks/canvas-dom-refractor/registry-item.json
new file mode 100644
index 0000000000..7b6ba8dd08
--- /dev/null
+++ b/registry/blocks/canvas-dom-refractor/registry-item.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "canvas-dom-refractor",
+  "type": "hyperframes:block",
+  "title": "Canvas DOM Refractor",
+  "description": "Native HTML-in-canvas showcase that refracts, magnifies, slices, and curves one editable DOM source as pixels",
+  "tags": ["experimental", "showcase", "canvas", "html", "refractor", "native"],
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "canvas-dom-refractor.html",
+      "target": "compositions/canvas-dom-refractor.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/experimental-orbit-theater/experimental-orbit-theater.html b/registry/blocks/experimental-orbit-theater/experimental-orbit-theater.html
new file mode 100644
index 0000000000..d64c5d38f3
--- /dev/null
+++ b/registry/blocks/experimental-orbit-theater/experimental-orbit-theater.html
@@ -0,0 +1,1121 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Orbit Theater</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/CopyShader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/EffectComposer.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/RenderPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/ShaderPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #000;
+        overflow: hidden;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+
+      #root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      #theater {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      .panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        background: #0a0a0f;
+        color: #fff;
+      }
+
+      .hero-dashboard {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background: linear-gradient(135deg, #0a0a1a 0%, #111128 100%);
+      }
+      .hero-topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px 40px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+      }
+      .hero-logo {
+        font-size: 22px;
+        font-weight: 700;
+        letter-spacing: -0.5px;
+        background: linear-gradient(135deg, #6366f1, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .hero-nav {
+        display: flex;
+        gap: 32px;
+      }
+      .hero-nav span {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+        font-weight: 500;
+      }
+      .hero-nav span.active {
+        color: #fff;
+      }
+      .hero-body {
+        display: flex;
+        flex: 1;
+      }
+      .hero-sidebar {
+        width: 240px;
+        padding: 32px 20px;
+        border-right: 1px solid rgba(255, 255, 255, 0.06);
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .sidebar-item {
+        padding: 10px 16px;
+        border-radius: 8px;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+        font-weight: 500;
+      }
+      .sidebar-item.active {
+        background: rgba(99, 102, 241, 0.15);
+        color: #818cf8;
+      }
+      .hero-main {
+        flex: 1;
+        padding: 32px 40px;
+      }
+      .hero-title {
+        font-size: 28px;
+        font-weight: 700;
+        letter-spacing: -0.5px;
+        margin-bottom: 8px;
+      }
+      .hero-subtitle {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.4);
+        margin-bottom: 32px;
+      }
+      .metrics-row {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 32px;
+      }
+      .metric-card {
+        flex: 1;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 12px;
+        padding: 20px 24px;
+      }
+      .metric-label {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.4);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        margin-bottom: 8px;
+      }
+      .metric-value {
+        font-size: 32px;
+        font-weight: 700;
+        letter-spacing: -1px;
+      }
+      .metric-value.accent {
+        color: #6366f1;
+      }
+      .metric-change {
+        font-size: 12px;
+        color: #34d399;
+        margin-top: 4px;
+      }
+      .chart-area {
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid rgba(255, 255, 255, 0.06);
+        border-radius: 12px;
+        height: 320px;
+        display: flex;
+        align-items: flex-end;
+        padding: 24px;
+        gap: 6px;
+      }
+      .chart-bar {
+        flex: 1;
+        background: linear-gradient(to top, #6366f1, #a855f7);
+        border-radius: 4px 4px 0 0;
+        min-height: 20px;
+        opacity: 0.8;
+      }
+
+      .features-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 24px;
+        padding: 60px;
+        height: 100%;
+        align-content: center;
+        background: linear-gradient(135deg, #0a0a1a 0%, #0f172a 100%);
+      }
+      .feature-card {
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 16px;
+        padding: 32px;
+      }
+      .feature-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
+        background: linear-gradient(135deg, #6366f1, #a855f7);
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+      }
+      .feature-name {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+      .feature-desc {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+        line-height: 1.6;
+      }
+
+      .pricing-section {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 24px;
+        height: 100%;
+        padding: 60px;
+        background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 100%);
+      }
+      .pricing-card {
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 20px;
+        padding: 40px 36px;
+        width: 300px;
+        text-align: center;
+      }
+      .pricing-card.featured {
+        background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
+        border-color: rgba(99, 102, 241, 0.3);
+        transform: scale(1.05);
+      }
+      .pricing-tier {
+        font-size: 14px;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        color: rgba(255, 255, 255, 0.5);
+        margin-bottom: 12px;
+      }
+      .pricing-amount {
+        font-size: 48px;
+        font-weight: 800;
+        letter-spacing: -2px;
+        margin-bottom: 8px;
+      }
+      .pricing-period {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.4);
+        margin-bottom: 24px;
+      }
+      .pricing-features {
+        list-style: none;
+        text-align: left;
+        margin-bottom: 32px;
+      }
+      .pricing-features li {
+        padding: 8px 0;
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.6);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+      }
+      .pricing-cta {
+        display: inline-block;
+        padding: 12px 32px;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        background: rgba(255, 255, 255, 0.1);
+        color: #fff;
+        border: none;
+      }
+      .pricing-card.featured .pricing-cta {
+        background: linear-gradient(135deg, #6366f1, #a855f7);
+      }
+
+      #error-overlay {
+        position: absolute;
+        inset: 0;
+        background: #000;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 100;
+        flex-direction: column;
+        gap: 16px;
+      }
+      #error-overlay.visible {
+        display: flex;
+      }
+      #error-overlay h2 {
+        font-size: 24px;
+        color: #fff;
+        font-weight: 600;
+      }
+      #error-overlay p {
+        font-size: 14px;
+        color: rgba(255, 255, 255, 0.5);
+        max-width: 480px;
+        text-align: center;
+        line-height: 1.6;
+      }
+      #error-overlay code {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="orbit-theater"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="20"
+      data-root="true"
+    >
+      <canvas
+        id="cap-0"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section
+          class="panel"
+          id="panel-hero"
+          data-panel-start="2"
+          data-panel-duration="4"
+          style="width: 1920px; height: 1080px"
+        >
+          <div class="hero-dashboard">
+            <div class="hero-topbar">
+              <div class="hero-logo">Acme Analytics</div>
+              <div class="hero-nav">
+                <span class="active">Dashboard</span>
+                <span>Reports</span>
+                <span>Settings</span>
+                <span>Team</span>
+              </div>
+            </div>
+            <div class="hero-body">
+              <div class="hero-sidebar">
+                <div class="sidebar-item active">Overview</div>
+                <div class="sidebar-item">Revenue</div>
+                <div class="sidebar-item">Users</div>
+                <div class="sidebar-item">Funnels</div>
+                <div class="sidebar-item">Retention</div>
+                <div class="sidebar-item">Events</div>
+              </div>
+              <div class="hero-main">
+                <div class="hero-title">Dashboard</div>
+                <div class="hero-subtitle">Last 30 days performance overview</div>
+                <div class="metrics-row">
+                  <div class="metric-card">
+                    <div class="metric-label">Revenue</div>
+                    <div class="metric-value accent">$84.2K</div>
+                    <div class="metric-change">+12.5% vs last month</div>
+                  </div>
+                  <div class="metric-card">
+                    <div class="metric-label">Active Users</div>
+                    <div class="metric-value">24,521</div>
+                    <div class="metric-change">+8.3% vs last month</div>
+                  </div>
+                  <div class="metric-card">
+                    <div class="metric-label">Conversion</div>
+                    <div class="metric-value">3.42%</div>
+                    <div class="metric-change">+0.8% vs last month</div>
+                  </div>
+                  <div class="metric-card">
+                    <div class="metric-label">Avg. Session</div>
+                    <div class="metric-value">4m 12s</div>
+                    <div class="metric-change">+15s vs last month</div>
+                  </div>
+                </div>
+                <div class="chart-area" id="hero-chart"></div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </canvas>
+      <canvas
+        id="cap-1"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section
+          class="panel"
+          id="panel-features"
+          data-panel-start="7"
+          data-panel-duration="4"
+          style="width: 1920px; height: 1080px"
+        >
+          <div class="features-grid">
+            <div class="feature-card">
+              <div class="feature-icon">&#9889;</div>
+              <div class="feature-name">Real-time Analytics</div>
+              <div class="feature-desc">
+                Sub-second query latency across billions of events. No sampling, no approximations —
+                exact counts, always.
+              </div>
+            </div>
+            <div class="feature-card">
+              <div class="feature-icon">&#128274;</div>
+              <div class="feature-name">Privacy-first</div>
+              <div class="feature-desc">
+                SOC2 Type II certified. All data encrypted at rest and in transit. GDPR and CCPA
+                compliant by default.
+              </div>
+            </div>
+            <div class="feature-card">
+              <div class="feature-icon">&#128268;</div>
+              <div class="feature-name">Integrations</div>
+              <div class="feature-desc">
+                Connect to 200+ tools out of the box. Segment, Amplitude, Mixpanel — import your
+                existing data in minutes.
+              </div>
+            </div>
+            <div class="feature-card">
+              <div class="feature-icon">&#129302;</div>
+              <div class="feature-name">AI Insights</div>
+              <div class="feature-desc">
+                Anomaly detection, trend forecasting, and natural language queries. Ask your data
+                anything in plain English.
+              </div>
+            </div>
+          </div>
+        </section>
+      </canvas>
+      <canvas
+        id="cap-2"
+        layoutsubtree
+        width="1920"
+        height="1080"
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+          z-index: -1;
+          pointer-events: none;
+        "
+      >
+        <section
+          class="panel"
+          id="panel-pricing"
+          data-panel-start="12"
+          data-panel-duration="4"
+          style="width: 1920px; height: 1080px"
+        >
+          <div class="pricing-section">
+            <div class="pricing-card">
+              <div class="pricing-tier">Starter</div>
+              <div class="pricing-amount">$29</div>
+              <div class="pricing-period">per month</div>
+              <ul class="pricing-features">
+                <li>10K events / month</li>
+                <li>3 team members</li>
+                <li>7-day retention</li>
+                <li>Email support</li>
+              </ul>
+              <button class="pricing-cta">Get Started</button>
+            </div>
+            <div class="pricing-card featured">
+              <div class="pricing-tier">Pro</div>
+              <div class="pricing-amount">$99</div>
+              <div class="pricing-period">per month</div>
+              <ul class="pricing-features">
+                <li>1M events / month</li>
+                <li>Unlimited members</li>
+                <li>12-month retention</li>
+                <li>Priority support</li>
+              </ul>
+              <button class="pricing-cta">Start Free Trial</button>
+            </div>
+            <div class="pricing-card">
+              <div class="pricing-tier">Enterprise</div>
+              <div class="pricing-amount">Custom</div>
+              <div class="pricing-period">contact sales</div>
+              <ul class="pricing-features">
+                <li>Unlimited events</li>
+                <li>SSO &amp; SAML</li>
+                <li>Unlimited retention</li>
+                <li>Dedicated CSM</li>
+              </ul>
+              <button class="pricing-cta">Contact Sales</button>
+            </div>
+          </div>
+        </section>
+      </canvas>
+
+      <canvas
+        id="theater"
+        width="1920"
+        height="1080"
+        style="position: absolute; top: 0; left: 0; width: 1920px; height: 1080px"
+      ></canvas>
+
+      <div id="error-overlay">
+        <h2>HTML-in-Canvas Required</h2>
+        <p>
+          This composition requires the experimental CanvasDrawElement API. Enable it in Chrome or
+          Brave:
+        </p>
+        <p><code>chrome://flags/#canvas-draw-element</code></p>
+      </div>
+
+      <div
+        id="driver"
+        class="clip"
+        data-start="0"
+        data-duration="20"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+
+    <script>
+      var theaterCanvas = document.getElementById("theater");
+      var W = 1920,
+        H = 1080;
+
+      // ── Feature Detection ──────────────────────────────────────────────
+      function isSupported() {
+        if (!("layoutSubtree" in document.createElement("canvas"))) return false;
+        var tc = document.createElement("canvas");
+        tc.setAttribute("layoutsubtree", "");
+        var ctx = tc.getContext("2d");
+        return ctx && typeof ctx.drawElementImage === "function";
+      }
+
+      if (!isSupported()) {
+        document.getElementById("error-overlay").classList.add("visible");
+      }
+
+      // ── Generate chart bars ────────────────────────────────────────────
+      var chartArea = document.getElementById("hero-chart");
+      if (chartArea) {
+        var heights = [
+          40, 55, 35, 65, 80, 60, 45, 70, 90, 75, 55, 85, 65, 50, 72, 88, 62, 78, 95, 68, 82, 58,
+          74, 92, 70, 60, 85, 78, 90, 72,
+        ];
+        for (var h = 0; h < heights.length; h++) {
+          var bar = document.createElement("div");
+          bar.className = "chart-bar";
+          bar.style.height = heights[h] + "%";
+          chartArea.appendChild(bar);
+        }
+      }
+
+      // ── Parse Panels ───────────────────────────────────────────────────
+      var capCanvases = [
+        document.getElementById("cap-0"),
+        document.getElementById("cap-1"),
+        document.getElementById("cap-2"),
+      ];
+      var capContexts = capCanvases.map(function (c) {
+        return c.getContext("2d");
+      });
+      var panels = Array.from(document.querySelectorAll("section.panel"));
+      var panelData = [];
+      for (var p = 0; p < panels.length; p++) {
+        panelData.push({
+          el: panels[p],
+          id: panels[p].id,
+          start: parseFloat(panels[p].getAttribute("data-panel-start")),
+          duration: parseFloat(panels[p].getAttribute("data-panel-duration")),
+          isHero: p === 0,
+        });
+      }
+
+      // ── Custom Shader Definitions ──────────────────────────────────────
+      var BokehShader = {
+        uniforms: {
+          tDiffuse: { value: null },
+          tDepth: { value: null },
+          focus: { value: 3.5 },
+          aperture: { value: 0.015 },
+          maxblur: { value: 0.01 },
+          nearClip: { value: 0.1 },
+          farClip: { value: 100.0 },
+          aspect: { value: W / H },
+        },
+        vertexShader: [
+          "varying vec2 vUv;",
+          "void main() {",
+          "  vUv = uv;",
+          "  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
+          "}",
+        ].join("\n"),
+        fragmentShader: [
+          "uniform sampler2D tDiffuse;",
+          "uniform sampler2D tDepth;",
+          "uniform float focus;",
+          "uniform float aperture;",
+          "uniform float maxblur;",
+          "uniform float nearClip;",
+          "uniform float farClip;",
+          "uniform float aspect;",
+          "varying vec2 vUv;",
+          "float getDepth(vec2 coord) {",
+          "  float d = texture2D(tDepth, coord).x;",
+          "  float z = nearClip * farClip / (farClip - d * (farClip - nearClip));",
+          "  return z;",
+          "}",
+          "void main() {",
+          "  float depth = getDepth(vUv);",
+          "  float coc = clamp(abs(depth - focus) * aperture, 0.0, maxblur);",
+          "  vec4 color = vec4(0.0);",
+          "  float total = 0.0;",
+          "  for (float x = -4.0; x <= 4.0; x += 1.0) {",
+          "    for (float y = -4.0; y <= 4.0; y += 1.0) {",
+          "      vec2 offset = vec2(x, y * aspect) * coc * 0.002;",
+          "      float w = 1.0 - length(vec2(x, y)) / 5.66;",
+          "      if (w > 0.0) {",
+          "        color += texture2D(tDiffuse, vUv + offset) * w;",
+          "        total += w;",
+          "      }",
+          "    }",
+          "  }",
+          "  gl_FragColor = color / total;",
+          "}",
+        ].join("\n"),
+      };
+
+      var ChromaticAberrationShader = {
+        uniforms: {
+          tDiffuse: { value: null },
+          intensity: { value: 0.003 },
+        },
+        vertexShader: [
+          "varying vec2 vUv;",
+          "void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }",
+        ].join("\n"),
+        fragmentShader: [
+          "uniform sampler2D tDiffuse;",
+          "uniform float intensity;",
+          "varying vec2 vUv;",
+          "void main() {",
+          "  vec2 dir = vUv - 0.5;",
+          "  float d = length(dir);",
+          "  vec2 offset = dir * d * intensity;",
+          "  float r = texture2D(tDiffuse, vUv + offset).r;",
+          "  float g = texture2D(tDiffuse, vUv).g;",
+          "  float b = texture2D(tDiffuse, vUv - offset).b;",
+          "  gl_FragColor = vec4(r, g, b, 1.0);",
+          "}",
+        ].join("\n"),
+      };
+
+      var FilmGrainVignetteShader = {
+        uniforms: {
+          tDiffuse: { value: null },
+          time: { value: 0.0 },
+          grainIntensity: { value: 0.03 },
+          vignetteStrength: { value: 0.2 },
+          vignetteSoftness: { value: 0.8 },
+        },
+        vertexShader: [
+          "varying vec2 vUv;",
+          "void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }",
+        ].join("\n"),
+        fragmentShader: [
+          "uniform sampler2D tDiffuse;",
+          "uniform float time;",
+          "uniform float grainIntensity;",
+          "uniform float vignetteStrength;",
+          "uniform float vignetteSoftness;",
+          "varying vec2 vUv;",
+          "float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453); }",
+          "void main() {",
+          "  vec4 color = texture2D(tDiffuse, vUv);",
+          "  float grain = rand(vUv * 1000.0 + time) * 2.0 - 1.0;",
+          "  color.rgb += grain * grainIntensity;",
+          "  float dist = length(vUv - 0.5) * 1.4;",
+          "  float vignette = smoothstep(1.0, 1.0 - vignetteSoftness, dist * (1.0 + vignetteStrength));",
+          "  color.rgb *= vignette;",
+          "  gl_FragColor = color;",
+          "}",
+        ].join("\n"),
+      };
+
+      var VolumetricLightShader = {
+        uniforms: {
+          tDiffuse: { value: null },
+          lightPos: { value: new THREE.Vector2(0.5, 0.3) },
+          exposure: { value: 0.08 },
+          decay: { value: 0.96 },
+          density: { value: 0.8 },
+          weight: { value: 0.4 },
+        },
+        vertexShader: [
+          "varying vec2 vUv;",
+          "void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }",
+        ].join("\n"),
+        fragmentShader: [
+          "uniform sampler2D tDiffuse;",
+          "uniform vec2 lightPos;",
+          "uniform float exposure;",
+          "uniform float decay;",
+          "uniform float density;",
+          "uniform float weight;",
+          "varying vec2 vUv;",
+          "void main() {",
+          "  vec2 deltaUV = (vUv - lightPos) * density / 60.0;",
+          "  vec2 coord = vUv;",
+          "  vec4 color = texture2D(tDiffuse, vUv);",
+          "  float illumination = 1.0;",
+          "  vec4 godray = vec4(0.0);",
+          "  for (int i = 0; i < 60; i++) {",
+          "    coord -= deltaUV;",
+          "    vec4 s = texture2D(tDiffuse, coord);",
+          "    s *= illumination * weight;",
+          "    godray += s;",
+          "    illumination *= decay;",
+          "  }",
+          "  gl_FragColor = color + godray * exposure;",
+          "}",
+        ].join("\n"),
+      };
+
+      // ── Three.js Scene Setup ───────────────────────────────────────────
+      var renderer = new THREE.WebGLRenderer({
+        canvas: theaterCanvas,
+        antialias: true,
+        alpha: false,
+        powerPreference: "high-performance",
+        preserveDrawingBuffer: true,
+      });
+      renderer.setSize(W, H, false);
+      renderer.setPixelRatio(1);
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.0;
+      renderer.setClearColor(0x000000, 1);
+      renderer.outputEncoding = THREE.sRGBEncoding;
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 100);
+      camera.position.set(0, 0, 5);
+      camera.lookAt(0, 0, 0);
+
+      // ── Texture Pipeline (texElementImage2D → manual GL textures) ──────
+      var panelsReady = false;
+
+      // ── Panel Meshes + Textures ────────────────────────────────────────
+      var PANEL_ASPECT = W / H;
+      var PANEL_WIDTH = 3.0;
+      var PANEL_HEIGHT = PANEL_WIDTH / PANEL_ASPECT;
+      var RAIL_RADIUS = 6;
+      var RAIL_ARC = Math.PI * 0.55;
+
+      var panelMeshes = [];
+      var panelTextures = [];
+
+      for (var i = 0; i < panelData.length; i++) {
+        (function (pd, idx) {
+          var geometry = new THREE.PlaneGeometry(PANEL_WIDTH, PANEL_HEIGHT);
+
+          var texture = new THREE.CanvasTexture(capCanvases[idx]);
+          texture.minFilter = THREE.LinearFilter;
+          texture.magFilter = THREE.LinearFilter;
+          texture.generateMipmaps = false;
+
+          var material = new THREE.MeshBasicMaterial({
+            map: texture,
+            side: THREE.FrontSide,
+          });
+          var mesh = new THREE.Mesh(geometry, material);
+
+          if (pd.isHero) {
+            mesh.position.set(0, 0, 0);
+          } else {
+            var surroundCount = panelData.length - 1;
+            var si = idx - 1;
+            var t = surroundCount === 1 ? 0.5 : si / (surroundCount - 1);
+            var angle = (t - 0.5) * RAIL_ARC;
+            mesh.position.set(
+              Math.sin(angle) * RAIL_RADIUS,
+              0,
+              -(RAIL_RADIUS - Math.cos(angle) * RAIL_RADIUS) - 1.5,
+            );
+            mesh.lookAt(0, 0, 2);
+          }
+
+          scene.add(mesh);
+
+          var edgeThickness = 0.02;
+          var edgeDepth = 0.05;
+          var edgeShape = new THREE.Shape();
+          var pw = PANEL_WIDTH / 2 + edgeThickness;
+          var ph = PANEL_HEIGHT / 2 + edgeThickness;
+          var iw = PANEL_WIDTH / 2;
+          var ih = PANEL_HEIGHT / 2;
+          edgeShape.moveTo(-pw, -ph);
+          edgeShape.lineTo(pw, -ph);
+          edgeShape.lineTo(pw, ph);
+          edgeShape.lineTo(-pw, ph);
+          edgeShape.lineTo(-pw, -ph);
+          var hole = new THREE.Path();
+          hole.moveTo(-iw, -ih);
+          hole.lineTo(iw, -ih);
+          hole.lineTo(iw, ih);
+          hole.lineTo(-iw, ih);
+          hole.lineTo(-iw, -ih);
+          edgeShape.holes.push(hole);
+          var edgeGeo = new THREE.ExtrudeGeometry(edgeShape, {
+            depth: edgeDepth,
+            bevelEnabled: false,
+          });
+          var glassMat = new THREE.MeshPhysicalMaterial({
+            color: 0xffffff,
+            transmission: 0.9,
+            roughness: 0.1,
+            thickness: 0.5,
+            ior: 1.5,
+            clearcoat: 1.0,
+            clearcoatRoughness: 0.1,
+          });
+          var edgeMesh = new THREE.Mesh(edgeGeo, glassMat);
+          edgeMesh.position.copy(mesh.position);
+          edgeMesh.rotation.copy(mesh.rotation);
+          edgeMesh.translateZ(-edgeDepth / 2);
+          scene.add(edgeMesh);
+
+          panelMeshes.push(mesh);
+          panelTextures.push(texture);
+        })(panelData[i], i);
+      }
+
+      function capturePanels() {
+        for (var ci = 0; ci < panels.length; ci++) {
+          capContexts[ci].clearRect(0, 0, W, H);
+          capContexts[ci].drawElementImage(panels[ci], 0, 0, W, H);
+          panelTextures[ci].needsUpdate = true;
+        }
+      }
+
+      // ── Scene Lighting ─────────────────────────────────────────────────
+      scene.add(new THREE.AmbientLight(0xffffff, 0.6));
+      var keyLight = new THREE.PointLight(0x6366f1, 2, 20);
+      keyLight.position.set(0, 3, 5);
+      scene.add(keyLight);
+      var fillLight = new THREE.PointLight(0xa855f7, 1, 15);
+      fillLight.position.set(-3, -1, 3);
+      scene.add(fillLight);
+
+      // ── Reflection Plane ───────────────────────────────────────────────
+      var reflectionY = -(PANEL_HEIGHT / 2) - 0.3;
+      var reflectorGeo = new THREE.PlaneGeometry(30, 30);
+      var reflectorMat = new THREE.MeshStandardMaterial({
+        color: 0x000000,
+        roughness: 0.15,
+        metalness: 0.9,
+        transparent: true,
+        opacity: 0.4,
+      });
+      var reflector = new THREE.Mesh(reflectorGeo, reflectorMat);
+      reflector.rotation.x = -Math.PI / 2;
+      reflector.position.y = reflectionY;
+      scene.add(reflector);
+
+      var mirrorGroup = new THREE.Group();
+      mirrorGroup.scale.y = -1;
+      mirrorGroup.position.y = reflectionY * 2;
+      scene.add(mirrorGroup);
+
+      for (var m = 0; m < panelData.length; m++) {
+        var mirrorMesh = new THREE.Mesh(
+          panelMeshes[m].geometry,
+          new THREE.MeshBasicMaterial({
+            map: panelTextures[m],
+            transparent: true,
+            opacity: 0.25,
+            side: THREE.FrontSide,
+          }),
+        );
+        mirrorMesh.position.copy(panelMeshes[m].position);
+        mirrorMesh.rotation.copy(panelMeshes[m].rotation);
+        mirrorGroup.add(mirrorMesh);
+      }
+
+      // ── Depth Render Target ────────────────────────────────────────────
+      var depthRT = new THREE.WebGLRenderTarget(W, H, {
+        minFilter: THREE.NearestFilter,
+        magFilter: THREE.NearestFilter,
+        type: THREE.FloatType,
+      });
+      depthRT.depthTexture = new THREE.DepthTexture(W, H);
+      depthRT.depthTexture.type = THREE.FloatType;
+
+      // ── EffectComposer ─────────────────────────────────────────────────
+      var composer = new THREE.EffectComposer(renderer);
+      composer.addPass(new THREE.RenderPass(scene, camera));
+
+      var bokehPass = new THREE.ShaderPass(BokehShader);
+      bokehPass.uniforms.tDepth.value = depthRT.depthTexture;
+      composer.addPass(bokehPass);
+
+      var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(W, H), 0.3, 0.4, 0.2);
+      composer.addPass(bloomPass);
+
+      var chromaPass = new THREE.ShaderPass(ChromaticAberrationShader);
+      composer.addPass(chromaPass);
+
+      var volumetricPass = new THREE.ShaderPass(VolumetricLightShader);
+      composer.addPass(volumetricPass);
+
+      var filmPass = new THREE.ShaderPass(FilmGrainVignetteShader);
+      composer.addPass(filmPass);
+
+      // Capture deferred to after first layout via setTimeout
+
+      // ── Camera Choreography ────────────────────────────────────────────
+      var ROOT_DURATION = parseFloat(document.getElementById("root").getAttribute("data-duration"));
+
+      var cameraTargets = [];
+      for (var ct = 0; ct < panelData.length; ct++) {
+        var mesh = panelMeshes[ct];
+        var pos = mesh.position.clone();
+        var focalDist = panelData[ct].isHero ? 3.5 : 4.5;
+        var dir = new THREE.Vector3(0, 0, 1).applyQuaternion(mesh.quaternion);
+        var camPos = pos.clone().add(dir.multiplyScalar(focalDist));
+        camPos.y += 0.2;
+        cameraTargets.push({ position: camPos, lookAt: pos.clone(), panel: panelData[ct] });
+      }
+
+      var heroTarget = cameraTargets[0];
+      var tightOnHero = {
+        position: heroTarget.position.clone().multiplyScalar(0.65),
+        lookAt: heroTarget.lookAt.clone(),
+      };
+      tightOnHero.position.y = 0.1;
+
+      var wideShot = {
+        position: new THREE.Vector3(0, 1.2, 8),
+        lookAt: new THREE.Vector3(0, -0.2, 0),
+      };
+
+      var camState = {
+        px: tightOnHero.position.x,
+        py: tightOnHero.position.y,
+        pz: tightOnHero.position.z,
+        lx: tightOnHero.lookAt.x,
+        ly: tightOnHero.lookAt.y,
+        lz: tightOnHero.lookAt.z,
+        focalDepth: 3.5,
+      };
+      var prevPx = camState.px,
+        prevPz = camState.pz;
+
+      // ── GSAP Timeline ──────────────────────────────────────────────────
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      tl.to({ v: 0 }, { v: 1, duration: ROOT_DURATION, ease: "none" }, 0);
+
+      tl.set(
+        camState,
+        {
+          px: tightOnHero.position.x,
+          py: tightOnHero.position.y,
+          pz: tightOnHero.position.z,
+          lx: tightOnHero.lookAt.x,
+          ly: tightOnHero.lookAt.y,
+          lz: tightOnHero.lookAt.z,
+        },
+        0,
+      );
+
+      tl.to(
+        camState,
+        {
+          px: wideShot.position.x,
+          py: wideShot.position.y,
+          pz: wideShot.position.z,
+          lx: wideShot.lookAt.x,
+          ly: wideShot.lookAt.y,
+          lz: wideShot.lookAt.z,
+          duration: 1.5,
+          ease: "power2.inOut",
+        },
+        0.5,
+      );
+
+      for (var ci = 0; ci < panelData.length; ci++) {
+        var target = cameraTargets[ci];
+        var td = 1.5;
+        var arriveAt = Math.max(panelData[ci].start - td * 0.5, 2);
+        tl.to(
+          camState,
+          {
+            px: target.position.x,
+            py: target.position.y,
+            pz: target.position.z,
+            lx: target.lookAt.x,
+            ly: target.lookAt.y,
+            lz: target.lookAt.z,
+            focalDepth: panelData[ci].isHero ? 3.5 : target.position.distanceTo(target.lookAt),
+            duration: td,
+            ease: "power2.inOut",
+          },
+          arriveAt,
+        );
+      }
+
+      var lastPanel = panelData[panelData.length - 1];
+      var closingStart = lastPanel.start + lastPanel.duration + 0.5;
+      tl.to(
+        camState,
+        {
+          px: heroTarget.position.x,
+          py: heroTarget.position.y,
+          pz: heroTarget.position.z,
+          lx: heroTarget.lookAt.x,
+          ly: heroTarget.lookAt.y,
+          lz: heroTarget.lookAt.z,
+          focalDepth: 3.5,
+          duration: 2,
+          ease: "power2.inOut",
+        },
+        closingStart,
+      );
+
+      // ── Interactive Orbit Mode ─────────────────────────────────────────
+      var orbitControls = new THREE.OrbitControls(camera, theaterCanvas);
+      orbitControls.enableDamping = true;
+      orbitControls.dampingFactor = 0.05;
+      orbitControls.enableZoom = true;
+      orbitControls.minDistance = 2;
+      orbitControls.maxDistance = 15;
+      orbitControls.enabled = false;
+      var orbitMode = false;
+
+      document.addEventListener("keydown", function (e) {
+        if (e.code !== "Space") return;
+        e.preventDefault();
+        orbitMode = !orbitMode;
+        orbitControls.enabled = orbitMode;
+        if (orbitMode) {
+          orbitControls.target.set(camState.lx, camState.ly, camState.lz);
+          orbitControls.update();
+          tl.pause();
+        } else {
+          tl.resume();
+        }
+      });
+
+      // ── Render on timeline update ──────────────────────────────────────
+      tl.eventCallback("onUpdate", function () {
+        if (panelsReady) capturePanels();
+
+        camState._velX = camState.px - prevPx;
+        camState._velZ = camState.pz - prevPz;
+        prevPx = camState.px;
+        prevPz = camState.pz;
+
+        if (orbitMode) {
+          orbitControls.update();
+        } else {
+          camera.position.set(camState.px, camState.py, camState.pz);
+          camera.lookAt(camState.lx, camState.ly, camState.lz);
+        }
+
+        reflector.visible = false;
+        mirrorGroup.visible = false;
+        renderer.setRenderTarget(depthRT);
+        renderer.render(scene, camera);
+        renderer.setRenderTarget(null);
+        reflector.visible = true;
+        mirrorGroup.visible = true;
+
+        bokehPass.uniforms.focus.value = camState.focalDepth;
+        filmPass.uniforms.time.value = tl.time();
+
+        if (!orbitMode) {
+          var vel = Math.abs(camState._velX || 0) + Math.abs(camState._velZ || 0);
+          chromaPass.uniforms.intensity.value = 0.001 + Math.min(vel * 0.01, 0.004);
+        } else {
+          chromaPass.uniforms.intensity.value = 0.001;
+        }
+
+        composer.render();
+      });
+
+      window.__timelines["orbit-theater"] = tl;
+
+      // Defer first render to after browser layout pass
+      setTimeout(function () {
+        panelsReady = true;
+        tl.seek(0);
+      }, 0);
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/experimental-orbit-theater/registry-item.json b/registry/blocks/experimental-orbit-theater/registry-item.json
new file mode 100644
index 0000000000..7c007986ae
--- /dev/null
+++ b/registry/blocks/experimental-orbit-theater/registry-item.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "experimental-orbit-theater",
+  "type": "hyperframes:block",
+  "title": "Orbit Theater",
+  "description": "Cinematic 3D spatial UI showcase. Live HTML panels float in WebGL space with depth of field, bloom, glass reflections, and volumetric lighting. Requires Chrome/Brave with CanvasDrawElement flag.",
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 20,
+  "tags": ["html-in-canvas", "webgl", "3d", "spatial", "cinematic", "product-showcase"],
+  "files": [
+    {
+      "path": "experimental-orbit-theater.html",
+      "target": "compositions/experimental-orbit-theater.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/experimental-product-launch-portal/experimental-product-launch-portal.html b/registry/blocks/experimental-product-launch-portal/experimental-product-launch-portal.html
new file mode 100644
index 0000000000..bdcd966c4d
--- /dev/null
+++ b/registry/blocks/experimental-product-launch-portal/experimental-product-launch-portal.html
@@ -0,0 +1,1130 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>experimental-product-launch-portal</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #040407;
+        font-family:
+          Inter,
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+
+      #experimental-product-launch-portal {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        color: #f6fff8;
+        background:
+          linear-gradient(115deg, rgba(3, 255, 186, 0.14), transparent 28%),
+          linear-gradient(245deg, rgba(255, 41, 117, 0.17), transparent 34%),
+          linear-gradient(180deg, #07070a 0%, #030306 62%, #080604 100%);
+      }
+
+      #experimental-product-launch-portal::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        opacity: 0.24;
+        background-image:
+          linear-gradient(rgba(135, 255, 218, 0.14) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 231, 93, 0.1) 1px, transparent 1px);
+        background-size: 54px 54px;
+        mask-image: linear-gradient(to bottom, transparent, black 16%, black 82%, transparent);
+        pointer-events: none;
+      }
+
+      #portalCanvas {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+        display: none;
+        width: 1920px;
+        height: 1080px;
+      }
+
+      [data-native-canvas="true"] #portalCanvas {
+        display: block;
+      }
+
+      .fallback-stage {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+      }
+
+      [data-native-canvas="true"] .fallback-stage {
+        opacity: 0;
+      }
+
+      .copy-stack {
+        position: absolute;
+        left: 74px;
+        top: 68px;
+        z-index: 8;
+        width: 560px;
+      }
+
+      .kicker {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 13px;
+        border: 1px solid rgba(75, 255, 203, 0.58);
+        border-radius: 999px;
+        color: #4bffcb;
+        background: rgba(5, 19, 16, 0.72);
+        font-size: 17px;
+        font-weight: 900;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .kicker::before {
+        content: "";
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        background: #ffe65c;
+        box-shadow:
+          0 0 15px rgba(255, 230, 92, 0.95),
+          0 0 34px rgba(255, 41, 117, 0.58);
+      }
+
+      .copy-stack h1 {
+        margin: 24px 0 18px;
+        max-width: 560px;
+        font-size: 82px;
+        line-height: 0.94;
+        font-weight: 950;
+        letter-spacing: 0;
+      }
+
+      .copy-stack p {
+        margin: 0;
+        max-width: 500px;
+        color: rgba(246, 255, 248, 0.76);
+        font-size: 27px;
+        line-height: 1.18;
+        font-weight: 760;
+      }
+
+      .proof-row {
+        position: absolute;
+        left: 74px;
+        bottom: 70px;
+        z-index: 8;
+        display: flex;
+        gap: 12px;
+      }
+
+      .proof-card {
+        width: 158px;
+        padding: 15px 16px 14px;
+        border: 1px solid rgba(246, 255, 248, 0.2);
+        background: rgba(246, 255, 248, 0.08);
+        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
+      }
+
+      .proof-value {
+        color: #ffe65c;
+        font-size: 30px;
+        line-height: 1;
+        font-weight: 950;
+      }
+
+      .proof-label {
+        margin-top: 8px;
+        color: rgba(246, 255, 248, 0.58);
+        font-size: 12px;
+        font-weight: 900;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .fallback-product-wrap {
+        position: absolute;
+        left: 610px;
+        top: 130px;
+        width: 1040px;
+        height: 640px;
+        z-index: 4;
+        transform: perspective(1500px) rotateY(-19deg) rotateX(8deg) rotateZ(-3deg);
+        transform-origin: center;
+        box-shadow:
+          0 60px 110px rgba(0, 0, 0, 0.42),
+          0 0 0 1px rgba(72, 255, 205, 0.26);
+      }
+
+      .fallback-product-wrap::after {
+        content: "";
+        position: absolute;
+        inset: -16px;
+        border: 1px solid rgba(72, 255, 205, 0.45);
+        pointer-events: none;
+        transform: translate(18px, 18px);
+      }
+
+      .fallback-panel {
+        position: absolute;
+        z-index: 5;
+        overflow: hidden;
+        border: 1px solid rgba(255, 230, 92, 0.42);
+        background: rgba(4, 7, 9, 0.7);
+        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.36);
+      }
+
+      .fallback-panel .mini-source {
+        width: 1040px;
+        height: 640px;
+        transform-origin: left top;
+      }
+
+      .fallback-panel-a {
+        right: 96px;
+        top: 106px;
+        width: 348px;
+        height: 210px;
+        transform: perspective(900px) rotateY(-26deg) rotateX(8deg);
+      }
+
+      .fallback-panel-a .mini-source {
+        transform: translate(-380px, -70px) scale(0.58);
+      }
+
+      .fallback-panel-b {
+        left: 690px;
+        bottom: 86px;
+        width: 438px;
+        height: 160px;
+        transform: perspective(900px) rotateY(18deg) rotateX(-4deg);
+      }
+
+      .fallback-panel-b .mini-source {
+        transform: translate(-210px, -358px) scale(0.58);
+      }
+
+      .portal-ring {
+        position: absolute;
+        left: 815px;
+        top: 118px;
+        z-index: 3;
+        width: 820px;
+        height: 820px;
+        border: 2px solid rgba(255, 41, 117, 0.42);
+        border-radius: 50%;
+        opacity: 0.72;
+        box-shadow:
+          inset 0 0 54px rgba(75, 255, 203, 0.25),
+          0 0 70px rgba(255, 41, 117, 0.2);
+      }
+
+      .feature-label {
+        position: absolute;
+        z-index: 9;
+        min-width: 230px;
+        padding: 13px 15px;
+        border: 1px solid rgba(75, 255, 203, 0.56);
+        background: rgba(2, 12, 11, 0.84);
+        box-shadow: 0 24px 52px rgba(0, 0, 0, 0.32);
+      }
+
+      .feature-label strong {
+        display: block;
+        color: #4bffcb;
+        font-size: 18px;
+        line-height: 1.05;
+        font-weight: 950;
+      }
+
+      .feature-label span {
+        display: block;
+        margin-top: 7px;
+        color: rgba(246, 255, 248, 0.66);
+        font-size: 13px;
+        line-height: 1.22;
+        font-weight: 760;
+      }
+
+      .feature-label::before {
+        content: "";
+        position: absolute;
+        left: -12px;
+        top: 20px;
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        background: #ffe65c;
+        box-shadow: 0 0 18px rgba(255, 230, 92, 0.95);
+      }
+
+      .label-one {
+        right: 204px;
+        top: 354px;
+      }
+
+      .label-two {
+        right: 318px;
+        bottom: 250px;
+      }
+
+      .label-three {
+        right: 76px;
+        bottom: 396px;
+      }
+
+      #launchCopy {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        z-index: 12;
+        width: 740px;
+        transform: translate(-50%, -50%) scale(0.88);
+        opacity: 0;
+        text-align: center;
+        pointer-events: none;
+      }
+
+      #launchCopy .launch-product {
+        color: #4bffcb;
+        font-size: 24px;
+        font-weight: 950;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+
+      #launchCopy h2 {
+        margin: 20px 0 16px;
+        color: #f6fff8;
+        font-size: 86px;
+        line-height: 0.9;
+        font-weight: 950;
+        letter-spacing: 0;
+      }
+
+      #launchCopy p {
+        margin: 0 auto;
+        max-width: 620px;
+        color: rgba(246, 255, 248, 0.74);
+        font-size: 26px;
+        line-height: 1.22;
+        font-weight: 760;
+      }
+
+      #launchCopy .launch-cta {
+        display: inline-flex;
+        margin-top: 28px;
+        padding: 15px 22px;
+        border: 1px solid rgba(255, 230, 92, 0.64);
+        color: #050506;
+        background: #ffe65c;
+        font-size: 20px;
+        font-weight: 950;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        box-shadow: 0 0 46px rgba(255, 230, 92, 0.28);
+      }
+
+      #productSource,
+      #productSourceNative,
+      .mini-source {
+        position: relative;
+        width: 1040px;
+        height: 640px;
+        overflow: hidden;
+        color: #07110f;
+        background:
+          linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(230, 255, 247, 0.92)), #f5fff8;
+      }
+
+      #productSource::before,
+      #productSourceNative::before,
+      .mini-source::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        opacity: 0.5;
+        background-image:
+          linear-gradient(rgba(6, 20, 17, 0.06) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(6, 20, 17, 0.06) 1px, transparent 1px);
+        background-size: 34px 34px;
+      }
+
+      .app-chrome {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-columns: 178px 1fr 258px;
+      }
+
+      .app-sidebar {
+        position: relative;
+        padding: 25px 18px;
+        color: #f6fff8;
+        background: #09100f;
+      }
+
+      .app-logo {
+        font-size: 24px;
+        font-weight: 950;
+        letter-spacing: 0;
+      }
+
+      .app-logo span {
+        color: #4bffcb;
+      }
+
+      .app-nav {
+        display: grid;
+        gap: 8px;
+        margin-top: 34px;
+      }
+
+      .app-nav div {
+        padding: 12px 12px;
+        border: 1px solid rgba(246, 255, 248, 0.12);
+        color: rgba(246, 255, 248, 0.7);
+        font-size: 13px;
+        font-weight: 850;
+      }
+
+      .app-nav .active {
+        color: #06110f;
+        border-color: #4bffcb;
+        background: #4bffcb;
+      }
+
+      .app-main {
+        position: relative;
+        padding: 36px 32px 34px;
+      }
+
+      .source-kicker {
+        color: #0e9d7c;
+        font-size: 13px;
+        font-weight: 950;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .app-main h3 {
+        margin: 9px 0 20px;
+        max-width: 520px;
+        color: #07110f;
+        font-size: 45px;
+        line-height: 0.96;
+        font-weight: 950;
+        letter-spacing: 0;
+      }
+
+      .metric-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 11px;
+      }
+
+      .metric-card {
+        min-height: 88px;
+        padding: 17px 16px;
+        border: 1px solid rgba(7, 17, 15, 0.1);
+        background: rgba(255, 255, 255, 0.72);
+      }
+
+      .metric-card strong {
+        display: block;
+        color: #07110f;
+        font-size: 28px;
+        line-height: 1;
+        font-weight: 950;
+      }
+
+      .metric-card span {
+        display: block;
+        margin-top: 8px;
+        color: rgba(7, 17, 15, 0.54);
+        font-size: 10px;
+        font-weight: 950;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+
+      .chart-block {
+        position: relative;
+        margin-top: 18px;
+        height: 210px;
+        border: 1px solid rgba(7, 17, 15, 0.1);
+        background: rgba(255, 255, 255, 0.6);
+      }
+
+      .chart-block svg {
+        position: absolute;
+        inset: 18px 22px;
+        width: calc(100% - 44px);
+        height: calc(100% - 36px);
+      }
+
+      .chart-beacon {
+        position: absolute;
+        right: 86px;
+        top: 73px;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #4bffcb;
+        box-shadow:
+          0 0 0 9px rgba(75, 255, 203, 0.16),
+          0 0 26px rgba(75, 255, 203, 0.8);
+      }
+
+      .activity-row {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 12px;
+        margin-top: 14px;
+      }
+
+      .activity-card {
+        padding: 14px;
+        border: 1px solid rgba(7, 17, 15, 0.1);
+        background: rgba(255, 255, 255, 0.66);
+      }
+
+      .activity-card b {
+        display: block;
+        font-size: 14px;
+        font-weight: 950;
+      }
+
+      .activity-card small {
+        display: block;
+        margin-top: 6px;
+        color: rgba(7, 17, 15, 0.54);
+        font-size: 11px;
+        font-weight: 800;
+      }
+
+      .app-rail {
+        padding: 36px 22px;
+        background: rgba(232, 255, 248, 0.6);
+        border-left: 1px solid rgba(7, 17, 15, 0.08);
+      }
+
+      .rail-card {
+        padding: 17px 15px;
+        margin-bottom: 12px;
+        border: 1px solid rgba(7, 17, 15, 0.1);
+        background: rgba(255, 255, 255, 0.64);
+      }
+
+      .rail-card.dark {
+        color: #f6fff8;
+        border-color: #07110f;
+        background: #07110f;
+      }
+
+      .rail-card strong {
+        display: block;
+        font-size: 14px;
+        line-height: 1.1;
+        font-weight: 950;
+      }
+
+      .rail-card p {
+        margin: 9px 0 0;
+        color: inherit;
+        opacity: 0.68;
+        font-size: 11px;
+        line-height: 1.32;
+        font-weight: 760;
+      }
+
+      .rail-cta {
+        padding: 14px 15px;
+        color: #06110f;
+        background: #ffe65c;
+        font-size: 13px;
+        font-weight: 950;
+        letter-spacing: 0.05em;
+        text-align: center;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="experimental-product-launch-portal"
+      data-composition-id="experimental-product-launch-portal"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="18"
+    >
+      <!--
+        Experimental Product Launch Portal
+
+        Edit only the product UI below:
+        - #productSource: the single product screen source of truth
+        - data-hotspot: the three feature labels used by the synchronized callouts
+        - #launchCopy: the final launch card copy
+
+        Native mode requires Chrome/Brave with chrome://flags/#canvas-draw-element enabled,
+        then a browser restart. Automation/rendering should launch Chromium with:
+        --enable-features=CanvasDrawElement
+      -->
+
+      <canvas id="portalCanvas" width="1920" height="1080"></canvas>
+
+      <section class="copy-stack" aria-hidden="true">
+        <div class="kicker">HTML-in-canvas launch portal</div>
+        <h1>One product UI becomes every launch shot.</h1>
+        <p>
+          Edit the app screen once. HyperFrames turns that same DOM into warped panels, live crops,
+          shader tunnels, and a clean launch CTA.
+        </p>
+      </section>
+
+      <section class="proof-row" aria-hidden="true">
+        <div class="proof-card">
+          <div class="proof-value">1</div>
+          <div class="proof-label">DOM source</div>
+        </div>
+        <div class="proof-card">
+          <div class="proof-value">7</div>
+          <div class="proof-label">derived shots</div>
+        </div>
+        <div class="proof-card">
+          <div class="proof-value">18s</div>
+          <div class="proof-label">launch cut</div>
+        </div>
+      </section>
+
+      <section class="fallback-stage" aria-hidden="true">
+        <div class="portal-ring"></div>
+        <div class="fallback-product-wrap">
+          <div id="productSource">
+            <div class="app-chrome">
+              <aside class="app-sidebar">
+                <div class="app-logo">Pulse<span>Deck</span></div>
+                <nav class="app-nav">
+                  <div class="active">Launch</div>
+                  <div>Audience</div>
+                  <div>Revenue</div>
+                  <div>Exports</div>
+                  <div>Signals</div>
+                </nav>
+              </aside>
+              <main class="app-main">
+                <div class="source-kicker">Realtime product launch</div>
+                <h3>Turn every feature beat into a launch moment.</h3>
+                <div class="metric-grid">
+                  <div class="metric-card" data-hotspot="Launch velocity">
+                    <strong>48K</strong>
+                    <span>waitlist users</span>
+                  </div>
+                  <div class="metric-card" data-hotspot="Revenue guard">
+                    <strong>92%</strong>
+                    <span>upgrade match</span>
+                  </div>
+                  <div class="metric-card">
+                    <strong>14</strong>
+                    <span>live segments</span>
+                  </div>
+                </div>
+                <div class="chart-block" data-hotspot="Signal spike">
+                  <svg viewBox="0 0 620 210" preserveAspectRatio="none">
+                    <path
+                      d="M18 168 C84 148 128 134 178 111 C236 84 284 114 338 86 C402 52 456 82 506 58 C552 36 582 39 604 31"
+                      fill="none"
+                      stroke="#07110f"
+                      stroke-width="8"
+                      stroke-linecap="round"
+                    />
+                    <path
+                      d="M18 168 C84 148 128 134 178 111 C236 84 284 114 338 86 C402 52 456 82 506 58 C552 36 582 39 604 31"
+                      fill="none"
+                      stroke="#16d7ac"
+                      stroke-width="5"
+                      stroke-linecap="round"
+                    />
+                    <path d="M18 174 L604 38 L604 210 L18 210 Z" fill="rgba(22, 215, 172, 0.12)" />
+                  </svg>
+                  <div class="chart-beacon"></div>
+                </div>
+                <div class="activity-row">
+                  <div class="activity-card" data-hotspot="Instant export">
+                    <b>Creator cut ready</b>
+                    <small>Vertical, square, and widescreen renders are queued.</small>
+                  </div>
+                  <div class="activity-card">
+                    <b>Launch pulse</b>
+                    <small>Agents keep copy, charts, and CTA locked to source HTML.</small>
+                  </div>
+                </div>
+              </main>
+              <aside class="app-rail">
+                <div class="rail-card dark">
+                  <strong>Native canvas pass</strong>
+                  <p>The browser paints this full UI into a canvas texture for shader treatment.</p>
+                </div>
+                <div class="rail-card">
+                  <strong>One edit surface</strong>
+                  <p>Change cards, labels, charts, colors, or CTA in #productSource.</p>
+                </div>
+                <div class="rail-card">
+                  <strong>Synced shots</strong>
+                  <p>Portals, crops, device panels, and final card derive from the same DOM.</p>
+                </div>
+                <div class="rail-cta">Launch waitlist</div>
+              </aside>
+            </div>
+          </div>
+        </div>
+        <div class="fallback-panel fallback-panel-a">
+          <div class="mini-source"></div>
+        </div>
+        <div class="fallback-panel fallback-panel-b">
+          <div class="mini-source"></div>
+        </div>
+      </section>
+
+      <section class="feature-label label-one" aria-hidden="true">
+        <strong>Launch velocity</strong>
+        <span>Waitlist, CTA, and segment data stay source-true.</span>
+      </section>
+      <section class="feature-label label-two" aria-hidden="true">
+        <strong>Signal spike</strong>
+        <span>Canvas crops pull the exact chart pixels from the UI.</span>
+      </section>
+      <section class="feature-label label-three" aria-hidden="true">
+        <strong>Instant export</strong>
+        <span>One product screen becomes every launch format.</span>
+      </section>
+
+      <section id="launchCopy" aria-hidden="true">
+        <div class="launch-product">PulseDeck launches today</div>
+        <h2>Ship the launch video before the product copy drifts.</h2>
+        <p>HTML remains the source of truth. Canvas turns it into impossible launch shots.</p>
+        <div class="launch-cta">Start from this block</div>
+      </section>
+    </div>
+
+    <script>
+      (() => {
+        const COMPOSITION_ID = "experimental-product-launch-portal";
+        const DURATION = 18;
+        const SOURCE_W = 1040;
+        const SOURCE_H = 640;
+        const root = document.getElementById(COMPOSITION_ID);
+        const portalCanvas = document.getElementById("portalCanvas");
+        const productSource = document.getElementById("productSource");
+        const launchCopy = document.getElementById("launchCopy");
+        const fallbackWrap = document.querySelector(".fallback-product-wrap");
+        const portalRing = document.querySelector(".portal-ring");
+        const copyStack = document.querySelector(".copy-stack");
+        const proofRow = document.querySelector(".proof-row");
+        const labels = Array.from(document.querySelectorAll(".feature-label"));
+        const miniSources = Array.from(document.querySelectorAll(".mini-source"));
+        const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+        const mix = (a, b, t) => a + (b - a) * t;
+        const smooth = (edge0, edge1, value) => {
+          const t = clamp((value - edge0) / (edge1 - edge0), 0, 1);
+          return t * t * (3 - 2 * t);
+        };
+
+        miniSources.forEach((slot) => {
+          slot.innerHTML = productSource.innerHTML;
+        });
+
+        const supportsNativeCanvas = () => {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          const gl = portalCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+          return Boolean(
+            canvas &&
+            "layoutSubtree" in canvas &&
+            typeof canvas.requestPaint === "function" &&
+            ctx &&
+            typeof ctx.drawElementImage === "function" &&
+            gl,
+          );
+        };
+
+        const createLayoutSource = () => {
+          const canvas = document.createElement("canvas");
+          canvas.width = SOURCE_W;
+          canvas.height = SOURCE_H;
+          canvas.layoutSubtree = true;
+          canvas.setAttribute("layoutsubtree", "");
+          canvas.style.position = "absolute";
+          canvas.style.left = "24px";
+          canvas.style.top = "24px";
+          canvas.style.width = SOURCE_W + "px";
+          canvas.style.height = SOURCE_H + "px";
+          canvas.style.opacity = "0.001";
+          canvas.style.pointerEvents = "none";
+          canvas.style.zIndex = "-1";
+          const node = productSource.cloneNode(true);
+          node.id = "productSourceNative";
+          canvas.appendChild(node);
+          document.body.appendChild(canvas);
+          return {
+            canvas,
+            node,
+            ctx: canvas.getContext("2d"),
+            width: SOURCE_W,
+            height: SOURCE_H,
+          };
+        };
+
+        const waitPaint = (source) =>
+          new Promise((resolve) => {
+            let done = false;
+            const finish = () => {
+              if (done) return;
+              done = true;
+              source.canvas.removeEventListener("paint", finish);
+              resolve();
+            };
+            source.canvas.addEventListener("paint", finish, { once: true });
+            source.canvas.requestPaint();
+            window.setTimeout(finish, 120);
+          });
+
+        const drawSource = (source) => {
+          source.ctx.setTransform(1, 0, 0, 1, 0, 0);
+          source.ctx.clearRect(0, 0, source.width, source.height);
+          source.ctx.drawElementImage(source.node, 0, 0, source.width, source.height);
+          window.__HF_EXPERIMENTAL_PRODUCT_LAUNCH_PORTAL.drawElementCalls += 1;
+        };
+
+        const createShaderRenderer = () => {
+          const gl = portalCanvas.getContext("webgl", {
+            preserveDrawingBuffer: true,
+            premultipliedAlpha: false,
+          });
+          if (!gl) return null;
+
+          const vertexSource = `
+            attribute vec2 a_position;
+            varying vec2 v_uv;
+            void main() {
+              v_uv = a_position * 0.5 + 0.5;
+              gl_Position = vec4(a_position, 0.0, 1.0);
+            }
+          `;
+
+          const fragmentSource = `
+            precision highp float;
+            uniform sampler2D u_source;
+            uniform vec2 u_resolution;
+            uniform float u_time;
+            varying vec2 v_uv;
+
+            float sat(float v) { return clamp(v, 0.0, 1.0); }
+            float ease(float a, float b, float v) {
+              float t = sat((v - a) / (b - a));
+              return t * t * (3.0 - 2.0 * t);
+            }
+            mat2 rot(float a) {
+              float s = sin(a);
+              float c = cos(a);
+              return mat2(c, -s, s, c);
+            }
+            vec4 src(vec2 uv) {
+              vec2 safeUv = clamp(uv, vec2(0.001), vec2(0.999));
+              return texture2D(u_source, safeUv);
+            }
+            float rectMask(vec2 local) {
+              vec2 e = step(vec2(0.0), local) * step(local, vec2(1.0));
+              return e.x * e.y;
+            }
+            vec4 rgbSplit(vec2 uv, float amt) {
+              float r = src(uv + vec2(amt, 0.0)).r;
+              float g = src(uv).g;
+              float b = src(uv - vec2(amt, 0.0)).b;
+              return vec4(r, g, b, 1.0);
+            }
+            vec4 panel(vec2 st, vec2 center, vec2 size, float angle, vec2 crop, vec2 scale, float intensity) {
+              vec2 local = rot(angle) * ((st - center) / size) + 0.5;
+              float mask = rectMask(local);
+              float glitch = ease(7.0, 8.2, u_time) * (1.0 - ease(12.0, 13.2, u_time));
+              vec2 wave = vec2(
+                sin(local.y * 32.0 + u_time * 2.7),
+                cos(local.x * 26.0 - u_time * 2.2)
+              ) * 0.007 * intensity * glitch;
+              float pixel = floor(glitch * 34.0);
+              vec2 pLocal = local;
+              if (pixel > 1.0) {
+                pLocal = floor(local * pixel) / pixel;
+              }
+              vec2 uv = crop + (pLocal - 0.5) * scale + wave;
+              vec4 color = rgbSplit(uv, 0.0015 + 0.014 * intensity * glitch);
+              float edge = max(
+                max(smoothstep(0.0, 0.035, local.x), smoothstep(0.0, 0.035, local.y)),
+                max(smoothstep(1.0, 0.965, local.x), smoothstep(1.0, 0.965, local.y))
+              );
+              color.rgb += vec3(0.05, 0.34, 0.26) * (1.0 - edge);
+              color.rgb += vec3(0.95, 0.1, 0.35) * 0.12 * intensity * glitch * sin((local.x + local.y) * 50.0 + u_time * 3.0);
+              return vec4(color.rgb, mask);
+            }
+            vec3 blendPanel(vec3 base, vec4 layer) {
+              return mix(base, layer.rgb, layer.a);
+            }
+
+            void main() {
+              vec2 st = gl_FragCoord.xy / u_resolution.xy;
+              st.y = 1.0 - st.y;
+              float t = u_time;
+              float boot = ease(0.0, 3.0, t);
+              float multi = ease(2.6, 6.6, t);
+              float overload = ease(7.0, 8.2, t) * (1.0 - ease(12.0, 13.2, t));
+              float callouts = ease(11.6, 13.4, t) * (1.0 - ease(16.0, 17.2, t));
+              float outro = ease(15.8, 18.0, t);
+
+              vec2 c = vec2(0.58, 0.5);
+              vec2 d = st - c;
+              float radius = length(d);
+              float angle = atan(d.y, d.x);
+              vec3 color = mix(vec3(0.014, 0.015, 0.025), vec3(0.03, 0.018, 0.035), st.y);
+              color += vec3(0.0, 0.22, 0.17) * pow(1.0 - min(radius, 1.0), 2.2);
+              color += vec3(0.22, 0.02, 0.08) * (0.5 + 0.5 * sin(angle * 5.0 + t));
+
+              float tunnel = sin(radius * 62.0 - t * 5.2 + angle * 2.0) * 0.5 + 0.5;
+              float tunnelMask = smoothstep(0.58, 0.06, radius) * boot * (1.0 - outro);
+              vec2 tunnelUv = 0.5 + vec2(cos(angle + t * 0.24), sin(angle - t * 0.18)) * (radius * 0.85);
+              tunnelUv += vec2(sin(radius * 18.0 + t), cos(radius * 16.0 - t)) * 0.03;
+              vec3 tunnelColor = rgbSplit(tunnelUv, 0.006 + overload * 0.018).rgb;
+              tunnelColor *= 0.58 + tunnel * 0.38;
+              color = mix(color, tunnelColor, tunnelMask * 0.62);
+
+              vec4 hero = panel(
+                st,
+                mix(vec2(0.61, 0.52), vec2(0.48, 0.52), outro),
+                mix(vec2(0.46, 0.52), vec2(0.31, 0.32), outro),
+                mix(-0.12, 0.0, outro),
+                vec2(0.5, 0.5),
+                vec2(1.0, 1.0),
+                boot + overload
+              );
+              hero.a *= boot * (1.0 - outro * 0.32);
+              color = blendPanel(color, hero);
+
+              vec4 device = panel(
+                st,
+                vec2(0.82, 0.47),
+                vec2(0.23, 0.58),
+                0.15,
+                vec2(0.62, 0.5),
+                vec2(0.54, 0.96),
+                0.62 + overload
+              );
+              device.a *= multi * (1.0 - outro);
+              color = blendPanel(color, device);
+
+              vec4 cropA = panel(st, vec2(0.73, 0.2), vec2(0.28, 0.19), -0.2, vec2(0.56, 0.2), vec2(0.52, 0.28), 1.0);
+              cropA.a *= callouts;
+              color = blendPanel(color, cropA);
+              vec4 cropB = panel(st, vec2(0.72, 0.76), vec2(0.31, 0.18), 0.18, vec2(0.53, 0.58), vec2(0.62, 0.25), 1.0);
+              cropB.a *= callouts;
+              color = blendPanel(color, cropB);
+              vec4 cropC = panel(st, vec2(0.37, 0.77), vec2(0.28, 0.2), -0.08, vec2(0.33, 0.78), vec2(0.48, 0.28), 1.0);
+              cropC.a *= callouts;
+              color = blendPanel(color, cropC);
+
+              float ring = abs(radius - (0.46 - boot * 0.12 + overload * 0.03));
+              color += vec3(0.22, 1.0, 0.75) * smoothstep(0.026, 0.0, ring) * (0.55 + overload);
+              color += vec3(1.0, 0.12, 0.38) * smoothstep(0.018, 0.0, abs(radius - 0.31)) * overload;
+
+              float scan = sin(st.y * u_resolution.y * 1.15 + t * 11.0) * 0.5 + 0.5;
+              color -= scan * vec3(0.018, 0.03, 0.02);
+              color += overload * vec3(
+                sin(st.y * 78.0 + t * 8.0),
+                sin(st.x * 92.0 - t * 6.0),
+                sin((st.x + st.y) * 84.0 + t * 5.0)
+              ) * 0.06;
+
+              vec2 card = abs(st - vec2(0.5, 0.5));
+              float cardMask = smoothstep(0.45, 0.25, card.x) * smoothstep(0.3, 0.17, card.y) * outro;
+              vec3 cleanCard = mix(vec3(0.025, 0.028, 0.032), vec3(0.02, 0.07, 0.058), st.y);
+              color = mix(color, cleanCard, cardMask * 0.86);
+
+              float vignette = smoothstep(0.92, 0.25, length(st - 0.5));
+              color *= 0.48 + 0.52 * vignette;
+              gl_FragColor = vec4(color, 1.0);
+            }
+          `;
+
+          const compile = (type, source) => {
+            const shader = gl.createShader(type);
+            gl.shaderSource(shader, source);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+              throw new Error(gl.getShaderInfoLog(shader) || "Failed to compile shader");
+            }
+            return shader;
+          };
+
+          const program = gl.createProgram();
+          gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));
+          gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));
+          gl.linkProgram(program);
+          if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(gl.getProgramInfoLog(program) || "Failed to link shader program");
+          }
+
+          const buffer = gl.createBuffer();
+          gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+          gl.bufferData(
+            gl.ARRAY_BUFFER,
+            new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+            gl.STATIC_DRAW,
+          );
+
+          const texture = gl.createTexture();
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, texture);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+
+          const position = gl.getAttribLocation(program, "a_position");
+          const uSource = gl.getUniformLocation(program, "u_source");
+          const uResolution = gl.getUniformLocation(program, "u_resolution");
+          const uTime = gl.getUniformLocation(program, "u_time");
+
+          return {
+            render(sourceCanvas, time) {
+              gl.viewport(0, 0, 1920, 1080);
+              gl.useProgram(program);
+              gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+              gl.enableVertexAttribArray(position);
+              gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+              gl.activeTexture(gl.TEXTURE0);
+              gl.bindTexture(gl.TEXTURE_2D, texture);
+              gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
+              gl.uniform1i(uSource, 0);
+              gl.uniform2f(uResolution, 1920, 1080);
+              gl.uniform1f(uTime, time);
+              gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+            },
+          };
+        };
+
+        let shaderRenderer = null;
+        let nativeSource = null;
+        const state = { time: 0 };
+
+        const updateDomFrame = (time) => {
+          const boot = smooth(0, 3, time);
+          const multi = smooth(2.5, 6.5, time);
+          const overload = smooth(7, 8.2, time) * (1 - smooth(12, 13.2, time));
+          const callouts = smooth(11.6, 13.4, time) * (1 - smooth(16, 17.1, time));
+          const outro = smooth(15.8, 18, time);
+
+          fallbackWrap.style.opacity = String(1 - outro * 0.72);
+          fallbackWrap.style.transform =
+            "perspective(1500px) rotateY(" +
+            mix(-19, -5, outro) +
+            "deg) rotateX(" +
+            mix(8, 0, outro) +
+            "deg) rotateZ(" +
+            mix(-3, 0, outro) +
+            "deg) scale(" +
+            mix(0.9, 0.68, outro) +
+            ")";
+          portalRing.style.opacity = String((0.35 + overload * 0.42) * (1 - outro));
+          portalRing.style.transform =
+            "scale(" + mix(0.82, 1.08, boot) + ") rotate(" + mix(-20, 54, time / DURATION) + "deg)";
+          copyStack.style.opacity = String(1 - smooth(5.5, 8.2, time));
+          proofRow.style.opacity = String(1 - smooth(6.2, 8.4, time));
+          labels.forEach((label, index) => {
+            const reveal = callouts * smooth(12 + index * 0.48, 13.2 + index * 0.48, time);
+            label.style.opacity = String(reveal);
+            label.style.transform =
+              "translateY(" + mix(28, 0, reveal) + "px) scale(" + mix(0.94, 1, reveal) + ")";
+          });
+          launchCopy.style.opacity = String(outro);
+          launchCopy.style.transform =
+            "translate(-50%, -50%) scale(" +
+            mix(0.88, 1, outro) +
+            ") rotate(" +
+            mix(2, 0, outro) +
+            "deg)";
+        };
+
+        const renderNative = (time) => {
+          if (!nativeSource || !shaderRenderer) return;
+          drawSource(nativeSource);
+          shaderRenderer.render(nativeSource.canvas, time);
+        };
+
+        const renderFrame = (time) => {
+          state.time = clamp(time, 0, DURATION);
+          updateDomFrame(state.time);
+          if (window.__HF_EXPERIMENTAL_PRODUCT_LAUNCH_PORTAL.native) {
+            renderNative(state.time);
+          }
+        };
+
+        window.__HF_EXPERIMENTAL_PRODUCT_LAUNCH_PORTAL = {
+          native: false,
+          ready: false,
+          drawElementCalls: 0,
+        };
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines[COMPOSITION_ID] = {
+          seek(time) {
+            renderFrame(time);
+          },
+          pause() {},
+          duration() {
+            return DURATION;
+          },
+        };
+
+        renderFrame(0);
+
+        const bootNative = async () => {
+          if (!supportsNativeCanvas()) {
+            window.__HF_EXPERIMENTAL_PRODUCT_LAUNCH_PORTAL.ready = true;
+            return;
+          }
+
+          try {
+            shaderRenderer = createShaderRenderer();
+            nativeSource = createLayoutSource();
+            await waitPaint(nativeSource);
+            root.setAttribute("data-native-canvas", "true");
+            window.__HF_EXPERIMENTAL_PRODUCT_LAUNCH_PORTAL.native = true;
+            window.__HF_EXPERIMENTAL_PRODUCT_LAUNCH_PORTAL.ready = true;
+            renderFrame(state.time);
+          } catch (error) {
+            window.__HF_EXPERIMENTAL_PRODUCT_LAUNCH_PORTAL.native = false;
+            window.__HF_EXPERIMENTAL_PRODUCT_LAUNCH_PORTAL.ready = true;
+          }
+        };
+
+        bootNative();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/experimental-product-launch-portal/registry-item.json b/registry/blocks/experimental-product-launch-portal/registry-item.json
new file mode 100644
index 0000000000..502117b4cd
--- /dev/null
+++ b/registry/blocks/experimental-product-launch-portal/registry-item.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "experimental-product-launch-portal",
+  "type": "hyperframes:block",
+  "title": "Experimental Product Launch Portal",
+  "description": "Shader-heavy product launch block: edit one DOM product UI, then render portal warps, device panels, crop callouts, and CTA shots from the same HTML-in-canvas source",
+  "tags": ["experimental", "launch", "product", "shader", "canvas", "portal"],
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 18,
+  "files": [
+    {
+      "path": "experimental-product-launch-portal.html",
+      "target": "compositions/experimental-product-launch-portal.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/experimental-screen-callout/experimental-screen-callout.html b/registry/blocks/experimental-screen-callout/experimental-screen-callout.html
new file mode 100644
index 0000000000..ee5d81e7f1
--- /dev/null
+++ b/registry/blocks/experimental-screen-callout/experimental-screen-callout.html
@@ -0,0 +1,1129 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>experimental-screen-callout</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #050706;
+        font-family:
+          Inter,
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+
+      #experimental-screen-callout {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        color: #ecfff8;
+        background:
+          radial-gradient(circle at 20% 10%, rgba(73, 255, 203, 0.2), transparent 28%),
+          radial-gradient(circle at 90% 80%, rgba(255, 198, 64, 0.16), transparent 24%),
+          linear-gradient(135deg, #07110f 0%, #050706 54%, #0d0b06 100%);
+      }
+
+      #experimental-screen-callout::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
+        background-size: 54px 54px;
+        mask-image: linear-gradient(to bottom, transparent, black 18%, black 84%, transparent);
+        opacity: 0.35;
+      }
+
+      .label-pill {
+        display: inline-flex;
+        width: max-content;
+        align-items: center;
+        gap: 10px;
+        border: 1px solid rgba(104, 255, 218, 0.5);
+        border-radius: 999px;
+        padding: 11px 18px;
+        color: #67ffd6;
+        font-size: 21px;
+        font-weight: 900;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        background: rgba(4, 14, 12, 0.62);
+      }
+
+      .label-pill::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: #67ffd6;
+        box-shadow: 0 0 18px #67ffd6;
+      }
+
+      .hero-copy {
+        position: absolute;
+        left: 78px;
+        top: 76px;
+        z-index: 4;
+        width: 530px;
+      }
+
+      .hero-copy h1 {
+        margin: 28px 0 20px;
+        font-size: 89px;
+        line-height: 0.95;
+        letter-spacing: 0;
+      }
+
+      .hero-copy p {
+        margin: 0;
+        width: 430px;
+        color: rgba(236, 255, 248, 0.76);
+        font-size: 29px;
+        font-weight: 800;
+        line-height: 1.18;
+      }
+
+      .stats-row {
+        position: absolute;
+        left: 78px;
+        bottom: 76px;
+        z-index: 4;
+        display: flex;
+        gap: 12px;
+      }
+
+      .stat-card {
+        width: 155px;
+        border: 1px solid rgba(236, 255, 248, 0.2);
+        background: rgba(236, 255, 248, 0.06);
+        padding: 18px 17px;
+      }
+
+      .stat-value {
+        font-size: 31px;
+        font-weight: 950;
+        line-height: 1;
+      }
+
+      .stat-label {
+        margin-top: 10px;
+        color: rgba(236, 255, 248, 0.55);
+        font-size: 13px;
+        font-weight: 950;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .source-note {
+        position: absolute;
+        left: 638px;
+        top: 98px;
+        z-index: 2;
+        width: 364px;
+        transform: rotate(-5deg);
+        border: 1px solid rgba(104, 255, 218, 0.25);
+        border-radius: 18px;
+        padding: 21px 24px 24px;
+        background: rgba(5, 12, 10, 0.6);
+        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+      }
+
+      .source-note strong {
+        display: block;
+        margin-bottom: 8px;
+        color: #67ffd6;
+        font-size: 15px;
+        font-weight: 950;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .source-note span {
+        color: rgba(236, 255, 248, 0.74);
+        font-size: 19px;
+        font-weight: 850;
+        line-height: 1.25;
+      }
+
+      .stage {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+
+      .native-stage {
+        display: none;
+      }
+
+      [data-native-canvas="true"] .native-stage {
+        display: block;
+      }
+
+      [data-native-canvas="true"] .fallback-stage {
+        display: none;
+      }
+
+      .browser-shell {
+        position: absolute;
+        left: 690px;
+        top: 214px;
+        width: 1072px;
+        height: 674px;
+        border: 1px solid rgba(236, 255, 248, 0.25);
+        border-radius: 26px;
+        background: #1d2524;
+        box-shadow:
+          0 48px 120px rgba(0, 0, 0, 0.5),
+          0 0 70px rgba(61, 255, 212, 0.08);
+        transform: rotate(-2.8deg);
+      }
+
+      .browser-bar {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        height: 64px;
+        border-radius: 26px 26px 0 0;
+        background: #2c3635;
+      }
+
+      .browser-dots {
+        position: absolute;
+        left: 26px;
+        top: 24px;
+        display: flex;
+        gap: 10px;
+      }
+
+      .browser-dots span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+      }
+
+      .browser-dots span:nth-child(1) {
+        background: #ff5f57;
+      }
+
+      .browser-dots span:nth-child(2) {
+        background: #ffbd2e;
+      }
+
+      .browser-dots span:nth-child(3) {
+        background: #28c840;
+      }
+
+      .url-bar {
+        position: absolute;
+        left: 110px;
+        right: 30px;
+        top: 17px;
+        height: 30px;
+        border-radius: 16px;
+        padding-left: 22px;
+        color: rgba(236, 255, 248, 0.5);
+        font-size: 14px;
+        font-weight: 900;
+        line-height: 30px;
+        background: rgba(236, 255, 248, 0.1);
+      }
+
+      .screen-viewport {
+        position: absolute;
+        left: 20px;
+        top: 78px;
+        width: 1032px;
+        height: 574px;
+        overflow: hidden;
+        border-radius: 15px;
+        background: #effaf2;
+      }
+
+      .screen-canvas,
+      .lens-canvas,
+      .strip-canvas {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      .lens-shell {
+        position: absolute;
+        left: 1182px;
+        top: 122px;
+        width: 348px;
+        height: 348px;
+        z-index: 6;
+        overflow: hidden;
+        border: 5px solid rgba(104, 255, 218, 0.82);
+        border-radius: 50%;
+        background: #effaf2;
+        box-shadow:
+          0 28px 80px rgba(0, 0, 0, 0.42),
+          0 0 48px rgba(104, 255, 218, 0.26);
+      }
+
+      .lens-shell::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        box-shadow: inset 0 0 0 1px rgba(2, 18, 14, 0.4);
+        background: linear-gradient(rgba(2, 18, 14, 0.08) 1px, transparent 1px);
+        background-size: 100% 5px;
+        pointer-events: none;
+      }
+
+      .strip-shell {
+        position: absolute;
+        left: 880px;
+        top: 736px;
+        z-index: 7;
+        width: 760px;
+        height: 200px;
+        overflow: hidden;
+        border: 1px solid rgba(104, 255, 218, 0.34);
+        border-radius: 28px;
+        background: rgba(239, 250, 242, 0.94);
+        box-shadow: 0 32px 90px rgba(0, 0, 0, 0.4);
+      }
+
+      .callout-label {
+        position: absolute;
+        z-index: 8;
+        display: flex;
+        align-items: center;
+        height: 48px;
+        border: 1px solid rgba(104, 255, 218, 0.55);
+        border-radius: 999px;
+        padding: 0 18px;
+        color: #67ffd6;
+        font-size: 18px;
+        font-weight: 950;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        background: rgba(5, 12, 10, 0.82);
+        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.26);
+      }
+
+      .callout-label.primary {
+        left: 1448px;
+        top: 488px;
+      }
+
+      .callout-label.secondary {
+        left: 710px;
+        top: 654px;
+      }
+
+      .cursor-dot {
+        position: absolute;
+        z-index: 9;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: #67ffd6;
+        box-shadow:
+          0 0 0 8px rgba(104, 255, 218, 0.16),
+          0 0 24px rgba(104, 255, 218, 0.9);
+      }
+
+      .agent-card {
+        position: absolute;
+        right: 76px;
+        bottom: 72px;
+        z-index: 6;
+        width: 310px;
+        border: 1px solid rgba(236, 255, 248, 0.16);
+        border-radius: 18px;
+        padding: 18px 18px 16px;
+        background: rgba(5, 12, 10, 0.76);
+      }
+
+      .agent-card h2 {
+        margin: 0 0 12px;
+        color: #67ffd6;
+        font-size: 17px;
+        font-weight: 950;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .agent-card p {
+        margin: 0;
+        color: rgba(236, 255, 248, 0.7);
+        font-size: 15px;
+        font-weight: 750;
+        line-height: 1.35;
+      }
+
+      .fallback-stage .browser-shell {
+        opacity: 0.96;
+      }
+
+      .fallback-stage .screen-viewport {
+        display: flex;
+      }
+
+      .fallback-slot {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #effaf2;
+      }
+
+      .fallback-slot .source-screen {
+        transform: scale(0.80625);
+        transform-origin: top left;
+      }
+
+      .fallback-overlay {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(circle at 65% 47%, transparent 0 15%, rgba(4, 9, 8, 0.54) 15.3% 100%),
+          linear-gradient(rgba(2, 18, 14, 0.08) 1px, transparent 1px);
+        background-size:
+          auto,
+          100% 5px;
+        pointer-events: none;
+      }
+
+      .fallback-badge {
+        position: absolute;
+        left: 50px;
+        bottom: 34px;
+        border: 1px solid rgba(4, 9, 8, 0.16);
+        border-radius: 999px;
+        padding: 10px 14px;
+        color: #0a211b;
+        font-size: 15px;
+        font-weight: 950;
+        background: rgba(104, 255, 218, 0.78);
+      }
+
+      .source-screen {
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+        color: #0c1814;
+        background: #effaf2;
+        font-family:
+          Inter,
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
+      }
+
+      .source-grid {
+        display: grid;
+        grid-template-columns: 230px 1fr 320px;
+        width: 1280px;
+        height: 720px;
+      }
+
+      .source-sidebar {
+        padding: 34px 26px;
+        color: #effaf2;
+        background: #07110f;
+      }
+
+      .source-logo {
+        margin-bottom: 38px;
+        font-size: 25px;
+        font-weight: 950;
+      }
+
+      .source-logo span {
+        color: #20ddbc;
+      }
+
+      .source-nav {
+        display: grid;
+        gap: 13px;
+      }
+
+      .source-nav div {
+        border-radius: 12px;
+        padding: 14px 16px;
+        color: rgba(239, 250, 242, 0.62);
+        font-size: 15px;
+        font-weight: 900;
+        background: rgba(239, 250, 242, 0.08);
+      }
+
+      .source-nav div:first-child {
+        color: #07110f;
+        background: #67ffd6;
+      }
+
+      .source-main {
+        padding: 38px 34px;
+      }
+
+      .eyebrow {
+        margin-bottom: 12px;
+        color: #079b84;
+        font-size: 14px;
+        font-weight: 950;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+
+      .source-main h2 {
+        margin: 0 0 28px;
+        max-width: 560px;
+        font-size: 46px;
+        line-height: 0.98;
+        letter-spacing: 0;
+      }
+
+      .metric-row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+        margin-bottom: 28px;
+      }
+
+      .metric {
+        min-height: 96px;
+        border: 1px solid rgba(7, 17, 15, 0.12);
+        padding: 18px;
+        background: rgba(255, 255, 255, 0.66);
+      }
+
+      .metric strong {
+        display: block;
+        font-size: 32px;
+        font-weight: 950;
+      }
+
+      .metric span {
+        display: block;
+        margin-top: 8px;
+        color: rgba(12, 24, 20, 0.54);
+        font-size: 11px;
+        font-weight: 950;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      .chart {
+        position: relative;
+        height: 260px;
+        border: 1px solid rgba(7, 17, 15, 0.1);
+        background:
+          linear-gradient(rgba(7, 17, 15, 0.06) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(7, 17, 15, 0.06) 1px, transparent 1px),
+          rgba(255, 255, 255, 0.42);
+        background-size: 44px 44px;
+      }
+
+      .chart svg {
+        position: absolute;
+        inset: 24px 34px;
+        width: calc(100% - 68px);
+        height: calc(100% - 48px);
+      }
+
+      .chart-focus {
+        position: absolute;
+        right: 70px;
+        top: 122px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: #67ffd6;
+        box-shadow:
+          0 0 0 12px rgba(104, 255, 218, 0.18),
+          0 0 28px #67ffd6;
+      }
+
+      .source-panel {
+        display: grid;
+        gap: 18px;
+        padding: 38px 30px;
+        background: rgba(255, 255, 255, 0.44);
+      }
+
+      .panel-card {
+        border: 1px solid rgba(7, 17, 15, 0.11);
+        padding: 19px;
+        background: rgba(255, 255, 255, 0.62);
+      }
+
+      .panel-card.dark {
+        color: #effaf2;
+        background: #07110f;
+      }
+
+      .panel-card strong {
+        display: block;
+        margin-bottom: 8px;
+        font-size: 15px;
+        font-weight: 950;
+      }
+
+      .panel-card p {
+        margin: 0;
+        color: rgba(12, 24, 20, 0.66);
+        font-size: 13px;
+        font-weight: 750;
+        line-height: 1.3;
+      }
+
+      .panel-card.dark p {
+        color: rgba(239, 250, 242, 0.72);
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      EXPERIMENTAL HTML-IN-CANVAS BLOCK
+
+      Creator workflow:
+      1. Replace the markup inside #screenSource with the UI, social proof, chart,
+         or product screen the creator wants to teach or sell.
+      2. Update CALLOUTS in the script to move the lens, spotlight, cursor, and
+         annotation labels to the important UI targets.
+      3. Keep the fallback DOM path intact. Native capture only runs when the
+         browser exposes layoutSubtree, requestPaint(), and drawElementImage().
+
+      Agent/browser setup:
+      - If you can control the user's browser, enable the feature flag yourself:
+        chrome://flags/#canvas-draw-element
+      - Tell the user to restart the browser after changing the feature flag.
+      - For automation/render launches, pass:
+        --enable-features=CanvasDrawElement
+      - This API is unstable. Do not promise production support without verifying
+        the target browser version.
+    -->
+    <div
+      id="experimental-screen-callout"
+      data-composition-id="experimental-screen-callout"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="12"
+      data-native-canvas="false"
+    >
+      <div class="hero-copy">
+        <div class="label-pill">Experimental</div>
+        <h1>Teach any screen like a pro.</h1>
+        <p>
+          One editable DOM source becomes pixel-accurate zooms, spotlights, callouts, and crop
+          strips.
+        </p>
+      </div>
+
+      <div class="source-note">
+        <strong>Creator value</strong>
+        <span
+          >Edit HTML once. The lens, spotlight, and zoom strip all stay in sync with the same
+          screen.</span
+        >
+      </div>
+
+      <div class="stage native-stage">
+        <div class="browser-shell" id="nativeBrowserShell">
+          <div class="browser-bar">
+            <div class="browser-dots"><span></span><span></span><span></span></div>
+            <div class="url-bar">native://drawElementImage/screen-callout-source</div>
+          </div>
+          <div class="screen-viewport">
+            <canvas id="screenCanvas" class="screen-canvas" width="1032" height="574"></canvas>
+          </div>
+        </div>
+        <div class="lens-shell" id="lensShell">
+          <canvas id="lensCanvas" class="lens-canvas" width="348" height="348"></canvas>
+        </div>
+        <div class="strip-shell" id="stripShell">
+          <canvas id="stripCanvas" class="strip-canvas" width="760" height="200"></canvas>
+        </div>
+      </div>
+
+      <div class="stage fallback-stage">
+        <div class="browser-shell">
+          <div class="browser-bar">
+            <div class="browser-dots"><span></span><span></span><span></span></div>
+            <div class="url-bar">fallback://stable-browser/dom-screen</div>
+          </div>
+          <div class="screen-viewport">
+            <div id="fallbackSlot" class="fallback-slot"></div>
+            <div class="fallback-overlay"></div>
+            <div class="fallback-badge">Native disabled: DOM fallback</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="callout-label primary" id="primaryLabel">Zoom the metric</div>
+      <div class="callout-label secondary" id="secondaryLabel">Track the action</div>
+      <div class="cursor-dot" id="cursorDot"></div>
+
+      <div class="stats-row">
+        <div class="stat-card">
+          <div class="stat-value">Native</div>
+          <div class="stat-label">when flagged</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">1 DOM</div>
+          <div class="stat-label">source</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">4 FX</div>
+          <div class="stat-label">callouts</div>
+        </div>
+      </div>
+
+      <div class="agent-card">
+        <h2>Agent edit points</h2>
+        <p>
+          Swap #screenSource, update CALLOUTS, preserve the fallback, then ask the user to restart
+          after enabling the CanvasDrawElement flag.
+        </p>
+      </div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        const root = document.getElementById("experimental-screen-callout");
+        const fallbackSlot = document.getElementById("fallbackSlot");
+        const screenCanvas = document.getElementById("screenCanvas");
+        const lensCanvas = document.getElementById("lensCanvas");
+        const stripCanvas = document.getElementById("stripCanvas");
+        const cursorDot = document.getElementById("cursorDot");
+        const primaryLabel = document.getElementById("primaryLabel");
+        const secondaryLabel = document.getElementById("secondaryLabel");
+        const screenCtx = screenCanvas.getContext("2d");
+        const lensCtx = lensCanvas.getContext("2d");
+        const stripCtx = stripCanvas.getContext("2d");
+
+        const SOURCE_W = 1280;
+        const SOURCE_H = 720;
+        const VIEW_W = 1032;
+        const VIEW_H = 574;
+        const SCALE = VIEW_W / SOURCE_W;
+
+        const CALLOUTS = [
+          {
+            time: 0,
+            sourceX: 936,
+            sourceY: 280,
+            radius: 132,
+            label: "Zoom the metric",
+            sublabel: "Revenue spike",
+          },
+          {
+            time: 4,
+            sourceX: 920,
+            sourceY: 505,
+            radius: 150,
+            label: "Track the action",
+            sublabel: "Timeline beat",
+          },
+          {
+            time: 8,
+            sourceX: 1118,
+            sourceY: 182,
+            radius: 128,
+            label: "Export-ready",
+            sublabel: "Use in product demos",
+          },
+        ];
+
+        const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+        const mix = (a, b, t) => a + (b - a) * t;
+        const ease = (t) => t * t * (3 - 2 * t);
+
+        const sourceTemplate = () => {
+          const node = document.createElement("div");
+          node.className = "source-screen";
+          node.id = "screenSource";
+          node.innerHTML = `
+            <div class="source-grid">
+              <aside class="source-sidebar">
+                <div class="source-logo">Frame<span>OS</span></div>
+                <nav class="source-nav">
+                  <div>Launch board</div>
+                  <div>Clips</div>
+                  <div>Analytics</div>
+                  <div>Exports</div>
+                  <div>Revenue</div>
+                </nav>
+              </aside>
+              <main class="source-main">
+                <div class="eyebrow">Realtime campaign</div>
+                <h2>Show the exact UI beat that makes users convert.</h2>
+                <div class="metric-row">
+                  <div class="metric"><strong>12.4M</strong><span>rendered pixels</span></div>
+                  <div class="metric"><strong>98%</strong><span>frame match</span></div>
+                  <div class="metric"><strong>24</strong><span>live layers</span></div>
+                </div>
+                <div class="chart">
+                  <svg viewBox="0 0 620 210" preserveAspectRatio="none">
+                    <path d="M20 165 C110 135 150 132 218 94 C290 53 346 138 420 90 C484 47 540 69 600 44" fill="none" stroke="#07110f" stroke-width="8" stroke-linecap="round" />
+                    <path d="M20 165 C110 135 150 132 218 94 C290 53 346 138 420 90 C484 47 540 69 600 44" fill="none" stroke="#20ddbc" stroke-width="5" stroke-linecap="round" />
+                  </svg>
+                  <div class="chart-focus"></div>
+                </div>
+              </main>
+              <section class="source-panel">
+                <div class="panel-card dark">
+                  <strong>Callout target</strong>
+                  <p>Use this panel for the exact feature, metric, or click path your video explains.</p>
+                </div>
+                <div class="panel-card">
+                  <strong>Editable HTML</strong>
+                  <p>Swap text, charts, images, and UI directly inside #screenSource.</p>
+                </div>
+                <div class="panel-card">
+                  <strong>Fallback safe</strong>
+                  <p>Stable browsers keep a clear DOM presentation instead of failing.</p>
+                </div>
+              </section>
+            </div>
+          `;
+          return node;
+        };
+
+        fallbackSlot.appendChild(sourceTemplate());
+
+        const supportsHtmlInCanvas = () => {
+          const canvas = document.createElement("canvas");
+          const ctx = canvas.getContext("2d");
+          return Boolean(
+            canvas &&
+            "layoutSubtree" in canvas &&
+            typeof canvas.requestPaint === "function" &&
+            ctx &&
+            typeof ctx.drawElementImage === "function",
+          );
+        };
+
+        const createLayoutSource = () => {
+          const canvas = document.createElement("canvas");
+          canvas.width = SOURCE_W;
+          canvas.height = SOURCE_H;
+          canvas.layoutSubtree = true;
+          canvas.style.position = "absolute";
+          canvas.style.left = "24px";
+          canvas.style.top = "24px";
+          canvas.style.width = SOURCE_W + "px";
+          canvas.style.height = SOURCE_H + "px";
+          canvas.style.opacity = "0.001";
+          canvas.style.pointerEvents = "none";
+          canvas.style.zIndex = "-1";
+          const node = sourceTemplate();
+          canvas.appendChild(node);
+          document.body.appendChild(canvas);
+          return {
+            canvas,
+            node,
+            ctx: canvas.getContext("2d"),
+            width: SOURCE_W,
+            height: SOURCE_H,
+          };
+        };
+
+        const waitPaint = (source) =>
+          new Promise((resolve) => {
+            let done = false;
+            const finish = () => {
+              if (done) return;
+              done = true;
+              source.canvas.removeEventListener("paint", finish);
+              resolve();
+            };
+            source.canvas.addEventListener("paint", finish, { once: true });
+            source.canvas.requestPaint();
+            setTimeout(finish, 120);
+          });
+
+        const drawSource = (source) => {
+          source.ctx.setTransform(1, 0, 0, 1, 0, 0);
+          source.ctx.clearRect(0, 0, source.width, source.height);
+          source.ctx.drawElementImage(source.node, 0, 0, source.width, source.height);
+          window.__HF_EXPERIMENTAL_SCREEN_CALLOUT.drawElementCalls += 1;
+        };
+
+        const currentCallout = (time) => {
+          let index = 0;
+          if (time >= 8) index = 2;
+          else if (time >= 4) index = 1;
+          const next = CALLOUTS[index];
+          const prev = CALLOUTS[Math.max(0, index - 1)];
+          const local = index === 0 ? clamp(time / 3, 0, 1) : clamp((time - next.time) / 2.4, 0, 1);
+          const t = ease(local);
+          return {
+            sourceX: mix(prev.sourceX, next.sourceX, t),
+            sourceY: mix(prev.sourceY, next.sourceY, t),
+            radius: mix(prev.radius, next.radius, t),
+            label: next.label,
+            sublabel: next.sublabel,
+          };
+        };
+
+        const drawScanlines = (ctx, width, height, alpha) => {
+          ctx.save();
+          ctx.globalAlpha = alpha;
+          ctx.fillStyle = "#06110f";
+          for (let y = 0; y < height; y += 5) ctx.fillRect(0, y, width, 1);
+          ctx.restore();
+        };
+
+        const drawRing = (ctx, x, y, radius, pulse) => {
+          ctx.save();
+          ctx.strokeStyle = "#67ffd6";
+          ctx.lineWidth = 5;
+          ctx.shadowColor = "#67ffd6";
+          ctx.shadowBlur = 22;
+          ctx.beginPath();
+          ctx.arc(x, y, radius + pulse * 18, 0, Math.PI * 2);
+          ctx.stroke();
+          ctx.globalAlpha = 0.26;
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.arc(x, y, radius + 34 + pulse * 18, 0, Math.PI * 2);
+          ctx.stroke();
+          ctx.restore();
+        };
+
+        const drawMain = (source, time) => {
+          const callout = currentCallout(time);
+          const x = callout.sourceX * SCALE;
+          const y = callout.sourceY * SCALE;
+          const r = callout.radius * SCALE;
+          const pulse = Math.sin(time * Math.PI * 1.6) * 0.5 + 0.5;
+
+          screenCtx.clearRect(0, 0, VIEW_W, VIEW_H);
+          screenCtx.drawImage(source.canvas, 0, 0, SOURCE_W, SOURCE_H, 0, 0, VIEW_W, VIEW_H);
+
+          screenCtx.save();
+          screenCtx.fillStyle = "rgba(3, 8, 7, 0.52)";
+          screenCtx.fillRect(0, 0, VIEW_W, VIEW_H);
+          screenCtx.globalCompositeOperation = "destination-out";
+          const gradient = screenCtx.createRadialGradient(x, y, r * 0.26, x, y, r);
+          gradient.addColorStop(0, "rgba(0,0,0,1)");
+          gradient.addColorStop(0.68, "rgba(0,0,0,0.82)");
+          gradient.addColorStop(1, "rgba(0,0,0,0)");
+          screenCtx.fillStyle = gradient;
+          screenCtx.beginPath();
+          screenCtx.arc(x, y, r, 0, Math.PI * 2);
+          screenCtx.fill();
+          screenCtx.restore();
+
+          screenCtx.save();
+          screenCtx.beginPath();
+          screenCtx.arc(x, y, r * 0.78, 0, Math.PI * 2);
+          screenCtx.clip();
+          const zoom = 1.28;
+          screenCtx.drawImage(
+            source.canvas,
+            callout.sourceX - r / SCALE / zoom,
+            callout.sourceY - r / SCALE / zoom,
+            (r * 2) / SCALE / zoom,
+            (r * 2) / SCALE / zoom,
+            x - r,
+            y - r,
+            r * 2,
+            r * 2,
+          );
+          screenCtx.restore();
+
+          drawRing(screenCtx, x, y, r * 0.82, pulse);
+          drawScanlines(screenCtx, VIEW_W, VIEW_H, 0.12);
+        };
+
+        const drawLens = (source, time) => {
+          const callout = currentCallout(time);
+          const lensW = lensCanvas.width;
+          const lensH = lensCanvas.height;
+          const cropW = 260;
+          const cropH = 260;
+          lensCtx.clearRect(0, 0, lensW, lensH);
+          lensCtx.fillStyle = "#effaf2";
+          lensCtx.fillRect(0, 0, lensW, lensH);
+          lensCtx.save();
+          lensCtx.beginPath();
+          lensCtx.arc(lensW / 2, lensH / 2, lensW / 2 - 2, 0, Math.PI * 2);
+          lensCtx.clip();
+          lensCtx.drawImage(
+            source.canvas,
+            callout.sourceX - cropW / 2,
+            callout.sourceY - cropH / 2,
+            cropW,
+            cropH,
+            -36,
+            -30,
+            lensW + 72,
+            lensH + 72,
+          );
+          lensCtx.restore();
+          drawScanlines(lensCtx, lensW, lensH, 0.15);
+        };
+
+        const drawStrip = (source, time) => {
+          const callout = currentCallout(time);
+          stripCtx.clearRect(0, 0, stripCanvas.width, stripCanvas.height);
+          stripCtx.fillStyle = "#effaf2";
+          stripCtx.fillRect(0, 0, stripCanvas.width, stripCanvas.height);
+          const slices = 38;
+          const cropW = 660;
+          const cropH = 170;
+          const sx = clamp(callout.sourceX - cropW / 2, 0, SOURCE_W - cropW);
+          const sy = clamp(callout.sourceY - cropH / 2, 0, SOURCE_H - cropH);
+          for (let i = 0; i < slices; i++) {
+            const sw = cropW / slices;
+            const dx = (stripCanvas.width / slices) * i;
+            const wave = Math.sin(i * 0.55 + time * 2.5) * 18;
+            const scaleY = 1 + Math.sin(i * 0.33 + time) * 0.08;
+            stripCtx.drawImage(
+              source.canvas,
+              sx + i * sw,
+              sy,
+              sw + 1,
+              cropH,
+              dx,
+              14 + wave,
+              stripCanvas.width / slices + 1,
+              cropH * scaleY,
+            );
+          }
+          stripCtx.fillStyle = "rgba(7, 17, 15, 0.84)";
+          stripCtx.fillRect(18, 18, 188, 44);
+          stripCtx.fillStyle = "#67ffd6";
+          stripCtx.font = "900 20px Inter, sans-serif";
+          stripCtx.fillText(callout.sublabel, 34, 47);
+          drawScanlines(stripCtx, stripCanvas.width, stripCanvas.height, 0.11);
+        };
+
+        let nativeSource = null;
+
+        const renderNative = (time) => {
+          if (!nativeSource) return;
+          drawSource(nativeSource);
+          drawMain(nativeSource, time);
+          drawLens(nativeSource, time);
+          drawStrip(nativeSource, time);
+        };
+
+        const updateOverlayPositions = (time) => {
+          const callout = currentCallout(time);
+          const x = 690 + 20 + callout.sourceX * SCALE;
+          const y = 214 + 78 + callout.sourceY * SCALE;
+          cursorDot.style.left = x - 11 + "px";
+          cursorDot.style.top = y - 11 + "px";
+          primaryLabel.textContent = callout.label;
+          secondaryLabel.textContent = callout.sublabel;
+        };
+
+        const state = { t: 0 };
+        const tl = gsap.timeline({
+          paused: true,
+          onUpdate: () => {
+            updateOverlayPositions(state.t);
+            if (window.__HF_EXPERIMENTAL_SCREEN_CALLOUT.native) renderNative(state.t);
+          },
+        });
+
+        gsap.set([".browser-shell", ".lens-shell", ".strip-shell"], {
+          transformOrigin: "50% 50%",
+        });
+        gsap.set(".browser-shell", { scale: 0.9, opacity: 0, y: 70 });
+        gsap.set(".lens-shell", { scale: 0.72, opacity: 0, y: 34 });
+        gsap.set(".strip-shell", { scale: 0.86, opacity: 0, y: 70 });
+        gsap.set(".callout-label", { opacity: 0, y: 22 });
+        gsap.set(".cursor-dot", { opacity: 0, scale: 0.6 });
+        gsap.set(".stat-card", { opacity: 0, y: 30 });
+        gsap.set(".agent-card", { opacity: 0, y: 24 });
+
+        tl.to(
+          ".browser-shell",
+          { scale: 1, opacity: 1, y: 0, duration: 0.8, ease: "power3.out" },
+          0.2,
+        );
+        tl.to(
+          ".stat-card",
+          { opacity: 1, y: 0, stagger: 0.1, duration: 0.45, ease: "power3.out" },
+          0.45,
+        );
+        tl.to(".cursor-dot", { opacity: 1, scale: 1, duration: 0.3, ease: "power2.out" }, 1.0);
+        tl.to(
+          ".callout-label",
+          { opacity: 1, y: 0, stagger: 0.08, duration: 0.38, ease: "power2.out" },
+          1.12,
+        );
+        tl.to(
+          ".lens-shell",
+          { scale: 1, opacity: 1, y: 0, duration: 0.58, ease: "back.out(1.4)" },
+          1.45,
+        );
+        tl.to(
+          ".strip-shell",
+          { scale: 1, opacity: 1, y: 0, duration: 0.62, ease: "power3.out" },
+          2.1,
+        );
+        tl.to(".agent-card", { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 2.55);
+        tl.to(state, { t: 12, duration: 12, ease: "none" }, 0);
+        tl.to(".lens-shell", { x: -80, y: 60, duration: 2.4, ease: "power1.inOut" }, 4.1);
+        tl.to(".strip-shell", { x: 80, y: -24, duration: 2.2, ease: "power1.inOut" }, 7.8);
+        tl.to(".browser-shell", { rotate: 1.3, duration: 2.8, ease: "sine.inOut" }, 8.8);
+
+        window.__HF_EXPERIMENTAL_SCREEN_CALLOUT = {
+          native: false,
+          drawElementCalls: 0,
+          ready: false,
+        };
+
+        window.__timelines["experimental-screen-callout"] = tl;
+
+        updateOverlayPositions(0);
+
+        const bootNative = async () => {
+          if (!supportsHtmlInCanvas()) {
+            window.__HF_EXPERIMENTAL_SCREEN_CALLOUT.ready = true;
+            return;
+          }
+
+          try {
+            nativeSource = createLayoutSource();
+            await waitPaint(nativeSource);
+            root.setAttribute("data-native-canvas", "true");
+            window.__HF_EXPERIMENTAL_SCREEN_CALLOUT.native = true;
+            window.__HF_EXPERIMENTAL_SCREEN_CALLOUT.ready = true;
+            renderNative(0);
+          } catch (error) {
+            window.__HF_EXPERIMENTAL_SCREEN_CALLOUT.native = false;
+            window.__HF_EXPERIMENTAL_SCREEN_CALLOUT.ready = true;
+          }
+        };
+
+        bootNative();
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/experimental-screen-callout/registry-item.json b/registry/blocks/experimental-screen-callout/registry-item.json
new file mode 100644
index 0000000000..d1e4f08502
--- /dev/null
+++ b/registry/blocks/experimental-screen-callout/registry-item.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "experimental-screen-callout",
+  "type": "hyperframes:block",
+  "title": "Experimental Screen Callout",
+  "description": "Creator workflow block for product tutorials: edit one DOM screen, then add native canvas zoom lenses, spotlights, cursor trails, and annotations",
+  "tags": ["experimental", "tutorial", "screen", "callout", "canvas"],
+  "stability": "experimental",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "experimental-screen-callout.html",
+      "target": "compositions/experimental-screen-callout.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index f7709c68ab..1fb174f28f 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -91,6 +91,18 @@
       "name": "app-showcase",
       "type": "hyperframes:block"
     },
+    {
+      "name": "canvas-dom-refractor",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "experimental-screen-callout",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "experimental-product-launch-portal",
+      "type": "hyperframes:block"
+    },
     {
       "name": "north-korea-locked-down",
       "type": "hyperframes:block"
@@ -218,6 +230,10 @@
     {
       "name": "transitions-scale",
       "type": "hyperframes:block"
+    },
+    {
+      "name": "experimental-orbit-theater",
+      "type": "hyperframes:block"
     }
   ]
 }
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 489f6ad7a9..f4d0a96362 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -44,6 +44,7 @@ interface CatalogEntry {
   title: string;
   description: string;
   tags: string[];
+  stability?: "stable" | "experimental";
   /** Relative href within the docs site. */
   href: string;
   /** Preview poster image path (relative to docs root). */
@@ -124,6 +125,25 @@ function generateItemMdx(kind: ItemKind, manifest: RegistryItem): string {
     lines.push(`Created by ${author}.`, "");
   }
 
+  if (manifest.stability === "experimental") {
+    lines.push(
+      "<Warning>",
+      "This catalog item is experimental. Its native path uses Chrome's HTML-in-canvas API, which is unstable and can change or be removed. Stable Chrome keeps the fallback path. For native rendering, enable `chrome://flags/#canvas-draw-element`, restart the browser after changing the flag, or launch Chromium with `--enable-features=CanvasDrawElement`.",
+      "</Warning>",
+      "",
+      "## Agent Setup",
+      "",
+      "When adapting this item for a user, edit the feature flag yourself when browser access is available, then tell the user to restart the browser before previewing again. If launching Chromium from automation or render scripts, include:",
+      "",
+      "```bash",
+      "--enable-features=CanvasDrawElement",
+      "```",
+      "",
+      "Do not assume native capture is available. Keep the fallback path intact and verify `drawElementImage` support in the target browser.",
+      "",
+    );
+  }
+
   if (source.sourcePrompt) {
     lines.push("## Source Prompt", "", "```text", source.sourcePrompt, "```", "");
   }
@@ -248,6 +268,7 @@ function main(): void {
       title: manifest.title,
       description: manifest.description,
       tags: manifest.tags ?? [],
+      stability: manifest.stability,
       href: `/catalog/${dir}/${manifest.name}`,
       preview: `${catalogImageBase}/${dir}/${manifest.name}.png`,
     });
@@ -277,10 +298,11 @@ function main(): void {
     "Social Overlays": 0,
     "Shader Transitions": 1,
     "CSS Transitions": 2,
-    Showcases: 3,
-    Data: 4,
-    Effects: 5,
-    Blocks: 6,
+    Experimental: 3,
+    Showcases: 4,
+    Data: 5,
+    Effects: 6,
+    Blocks: 7,
   };
 
   function groupForItem(entry: CatalogEntry): string {
@@ -289,6 +311,7 @@ function main(): void {
     if (tags.includes("transition") && tags.includes("shader")) return "Shader Transitions";
     if (tags.includes("transition") && tags.includes("showcase")) return "CSS Transitions";
     // Single-tag mapping
+    if (entry.stability === "experimental" || tags.includes("experimental")) return "Experimental";
     if (tags.includes("social")) return "Social Overlays";
     if (tags.includes("transition"))
       return entry.type === "component" ? "Effects" : "CSS Transitions";