feat(registry): add experimental HTML-in-canvas launch blocks

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>
+```

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>
+```

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>
+```

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": [

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",

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"],

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}`,
       );
     }
 

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();

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"],

packages/core/src/index.ts

@@ -173,6 +173,7 @@ export type {
   FileTarget,
   RegistryItemDimensions,
   RegistryItemPreview,
+  RegistryItemStability,
   RegistryItem,
   ExampleItem,
   BlockItem,

packages/core/src/registry/index.ts

@@ -4,6 +4,7 @@ export type {
   FileTarget,
   RegistryItemDimensions,
   RegistryItemPreview,
+  RegistryItemStability,
   RegistryItem,
   ExampleItem,
   BlockItem,

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");
     });
   });
 });

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. */

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");