From 869a3763b2bad7c572130e3b21bd2c858954ed71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Wed, 6 May 2026 19:02:15 +0200
Subject: [PATCH] feat(catalog): HyperFrames branding, HTML-in-Canvas guide,
 remove captions (#647)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: group VFX blocks under HTML-in-Canvas, captions under Captions in sidebar

* docs: add HTML-in-Canvas guide, Chrome flag disclaimer, remove captions

- Add docs/guides/html-in-canvas.mdx — comprehensive guide covering the
  API, feature detection, re-capture patterns, and catalog blocks
- Add Chrome flag Warning banner to every HTML-in-Canvas block page
- Remove captions blocks from registry (will ship separately)
- Add html-in-canvas guide to docs navigation (top of Guides section)

* feat: update liquid glass, portal, shatter with HyperFrames branding

Replace generic placeholder content with HyperFrames-themed text:
- Liquid Glass: 'Ship videos 10x faster' with stats and gradient text
- Portal: 'Write HTML / Render Video' with HyperFrames nav
- Shatter: 'HTML is Video' with render speed/file size metrics

Re-rendered and uploaded preview videos to S3.
---
 docs/catalog/blocks/captions-bounce.mdx       |  44 -----
 docs/catalog/blocks/captions-cinematic.mdx    |  44 -----
 docs/catalog/blocks/captions-karaoke.mdx      |  44 -----
 docs/catalog/blocks/captions-minimal.mdx      |  44 -----
 docs/catalog/blocks/captions-slam.mdx         |  44 -----
 docs/catalog/blocks/vfx-iphone-device.mdx     |   4 +
 docs/catalog/blocks/vfx-liquid-background.mdx |   4 +
 docs/catalog/blocks/vfx-liquid-glass.mdx      |   4 +
 docs/catalog/blocks/vfx-magnetic.mdx          |   4 +
 docs/catalog/blocks/vfx-portal.mdx            |   4 +
 docs/catalog/blocks/vfx-shatter.mdx           |   4 +
 docs/catalog/blocks/vfx-text-cursor.mdx       |   4 +
 docs/docs.json                                |  27 +--
 docs/guides/html-in-canvas.mdx                | 128 ++++++++++++
 docs/public/catalog-index.json                |  60 ------
 .../captions-bounce/captions-bounce.html      | 183 ------------------
 .../blocks/captions-bounce/registry-item.json |  21 --
 .../captions-cinematic.html                   | 183 ------------------
 .../captions-cinematic/registry-item.json     |  21 --
 .../captions-karaoke/captions-karaoke.html    | 174 -----------------
 .../captions-karaoke/registry-item.json       |  21 --
 .../captions-minimal/captions-minimal.html    | 133 -------------
 .../captions-minimal/registry-item.json       |  21 --
 .../blocks/captions-slam/captions-slam.html   | 174 -----------------
 .../blocks/captions-slam/registry-item.json   |  21 --
 .../vfx-liquid-glass/vfx-liquid-glass.html    |  67 ++++++-
 registry/blocks/vfx-portal/vfx-portal.html    |  24 +--
 registry/blocks/vfx-shatter/vfx-shatter.html  |  18 +-
 registry/registry.json                        |  22 +--
 scripts/generate-catalog-pages.ts             |  26 ++-
 30 files changed, 268 insertions(+), 1304 deletions(-)
 delete mode 100644 docs/catalog/blocks/captions-bounce.mdx
 delete mode 100644 docs/catalog/blocks/captions-cinematic.mdx
 delete mode 100644 docs/catalog/blocks/captions-karaoke.mdx
 delete mode 100644 docs/catalog/blocks/captions-minimal.mdx
 delete mode 100644 docs/catalog/blocks/captions-slam.mdx
 create mode 100644 docs/guides/html-in-canvas.mdx
 delete mode 100644 registry/blocks/captions-bounce/captions-bounce.html
 delete mode 100644 registry/blocks/captions-bounce/registry-item.json
 delete mode 100644 registry/blocks/captions-cinematic/captions-cinematic.html
 delete mode 100644 registry/blocks/captions-cinematic/registry-item.json
 delete mode 100644 registry/blocks/captions-karaoke/captions-karaoke.html
 delete mode 100644 registry/blocks/captions-karaoke/registry-item.json
 delete mode 100644 registry/blocks/captions-minimal/captions-minimal.html
 delete mode 100644 registry/blocks/captions-minimal/registry-item.json
 delete mode 100644 registry/blocks/captions-slam/captions-slam.html
 delete mode 100644 registry/blocks/captions-slam/registry-item.json

diff --git a/docs/catalog/blocks/captions-bounce.mdx b/docs/catalog/blocks/captions-bounce.mdx
deleted file mode 100644
index d03361f36..000000000
--- a/docs/catalog/blocks/captions-bounce.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: "Captions – Bounce"
-description: "Playful social-media style captions with elastic bounce-in per word on alternating colorful pill backgrounds"
----
-
-# Captions – Bounce
-
-Playful social-media style captions with elastic bounce-in per word on alternating colorful pill backgrounds
-
-`captions` `bounce`
-
-<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/captions-bounce.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-bounce.png" autoPlay muted loop playsInline />
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add captions-bounce
-```
-
-</CodeGroup>
-
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920×1080 |
-| Duration | 13s |
-
-## Files
-
-| File | Target | Type |
-| --- | --- | --- |
-| `captions-bounce.html` | `compositions/captions-bounce.html` | hyperframes:composition |
-
-## Usage
-
-After installing, add the block to your host composition:
-
-```html
-<div data-composition-id="captions-bounce" data-composition-src="compositions/captions-bounce.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
-```
diff --git a/docs/catalog/blocks/captions-cinematic.mdx b/docs/catalog/blocks/captions-cinematic.mdx
deleted file mode 100644
index 13e5e4e74..000000000
--- a/docs/catalog/blocks/captions-cinematic.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: "Captions – Cinematic"
-description: "Elegant film-title captions with slow fade, letter-spacing animation, warm tint, and extending horizontal accent line"
----
-
-# Captions – Cinematic
-
-Elegant film-title captions with slow fade, letter-spacing animation, warm tint, and extending horizontal accent line
-
-`captions` `cinematic`
-
-<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/captions-cinematic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-cinematic.png" autoPlay muted loop playsInline />
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add captions-cinematic
-```
-
-</CodeGroup>
-
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920×1080 |
-| Duration | 13s |
-
-## Files
-
-| File | Target | Type |
-| --- | --- | --- |
-| `captions-cinematic.html` | `compositions/captions-cinematic.html` | hyperframes:composition |
-
-## Usage
-
-After installing, add the block to your host composition:
-
-```html
-<div data-composition-id="captions-cinematic" data-composition-src="compositions/captions-cinematic.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
-```
diff --git a/docs/catalog/blocks/captions-karaoke.mdx b/docs/catalog/blocks/captions-karaoke.mdx
deleted file mode 100644
index 4d7cb8846..000000000
--- a/docs/catalog/blocks/captions-karaoke.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: "Captions – Karaoke"
-description: "Word-by-word color reveal with frosted glass pill background, dimmed-to-highlighted karaoke progression"
----
-
-# Captions – Karaoke
-
-Word-by-word color reveal with frosted glass pill background, dimmed-to-highlighted karaoke progression
-
-`captions` `karaoke`
-
-<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/captions-karaoke.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-karaoke.png" autoPlay muted loop playsInline />
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add captions-karaoke
-```
-
-</CodeGroup>
-
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920×1080 |
-| Duration | 13s |
-
-## Files
-
-| File | Target | Type |
-| --- | --- | --- |
-| `captions-karaoke.html` | `compositions/captions-karaoke.html` | hyperframes:composition |
-
-## Usage
-
-After installing, add the block to your host composition:
-
-```html
-<div data-composition-id="captions-karaoke" data-composition-src="compositions/captions-karaoke.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
-```
diff --git a/docs/catalog/blocks/captions-minimal.mdx b/docs/catalog/blocks/captions-minimal.mdx
deleted file mode 100644
index 92dd94aec..000000000
--- a/docs/catalog/blocks/captions-minimal.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: "Captions – Minimal"
-description: "Clean, professional Netflix-subtitle style captions with soft fade and y-offset on a dark pill background"
----
-
-# Captions – Minimal
-
-Clean, professional Netflix-subtitle style captions with soft fade and y-offset on a dark pill background
-
-`captions` `minimal`
-
-<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/captions-minimal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-minimal.png" autoPlay muted loop playsInline />
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add captions-minimal
-```
-
-</CodeGroup>
-
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920×1080 |
-| Duration | 13s |
-
-## Files
-
-| File | Target | Type |
-| --- | --- | --- |
-| `captions-minimal.html` | `compositions/captions-minimal.html` | hyperframes:composition |
-
-## Usage
-
-After installing, add the block to your host composition:
-
-```html
-<div data-composition-id="captions-minimal" data-composition-src="compositions/captions-minimal.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
-```
diff --git a/docs/catalog/blocks/captions-slam.mdx b/docs/catalog/blocks/captions-slam.mdx
deleted file mode 100644
index e4139a75c..000000000
--- a/docs/catalog/blocks/captions-slam.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: "Captions – Slam"
-description: "Bold, punchy slam captions with back-eased overshoot scale-in, uppercase Inter 900, and per-word accent styling"
----
-
-# Captions – Slam
-
-Bold, punchy slam captions with back-eased overshoot scale-in, uppercase Inter 900, and per-word accent styling
-
-`captions` `slam`
-
-<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/captions-slam.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-slam.png" autoPlay muted loop playsInline />
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add captions-slam
-```
-
-</CodeGroup>
-
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920×1080 |
-| Duration | 13s |
-
-## Files
-
-| File | Target | Type |
-| --- | --- | --- |
-| `captions-slam.html` | `compositions/captions-slam.html` | hyperframes:composition |
-
-## Usage
-
-After installing, add the block to your host composition:
-
-```html
-<div data-composition-id="captions-slam" data-composition-src="compositions/captions-slam.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
-```
diff --git a/docs/catalog/blocks/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index b906df9fb..d08a8445d 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -9,6 +9,10 @@ Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas scre
 
 `html-in-canvas` `3d` `device` `iphone` `macbook` `gltf`
 
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
 <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/vfx-iphone-device.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png" autoPlay muted loop playsInline />
 
 ## Install
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index 265c5bb3d..67bc9c01e 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -9,6 +9,10 @@ Organic liquid simulation with vertex displacement on a subdivided plane. HTML c
 
 `html-in-canvas` `liquid` `webgl` `displacement` `background`
 
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
 <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/vfx-liquid-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
 
 ## Install
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index 6e21e7055..76b667086 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -9,6 +9,10 @@ VFX composition block
 
 `html-in-canvas` `webgl`
 
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
 <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/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
 
 ## Install
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index aa3d1d364..2eb6046ff 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -9,6 +9,10 @@ VFX composition block
 
 `html-in-canvas` `webgl`
 
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
 <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/vfx-magnetic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline />
 
 ## Install
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index 8a03b8e9b..a060a613e 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -9,6 +9,10 @@ VFX composition block
 
 `html-in-canvas` `webgl`
 
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
 <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/vfx-portal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png" autoPlay muted loop playsInline />
 
 ## Install
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index d508c4fa3..bb659c8aa 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -9,6 +9,10 @@ VFX composition block
 
 `html-in-canvas` `webgl`
 
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
 <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/vfx-shatter.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png" autoPlay muted loop playsInline />
 
 ## Install
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index 731cc2a23..2f8b4d2d8 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -9,6 +9,10 @@ Dramatic text reveal with cursor glow, chromatic shadow rays, and directional li
 
 `html-in-canvas` `text` `shader` `cursor` `chromatic`
 
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
 <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/vfx-text-cursor.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png" autoPlay muted loop playsInline />
 
 ## Install
diff --git a/docs/docs.json b/docs/docs.json
index 6f390aeb5..29072f1df 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -69,6 +69,7 @@
           {
             "group": "Guides",
             "pages": [
+              "guides/html-in-canvas",
               "guides/website-to-video",
               "guides/claude-design",
               "guides/open-design",
@@ -90,6 +91,18 @@
       {
         "tab": "Catalog",
         "groups": [
+          {
+            "group": "HTML-in-Canvas",
+            "pages": [
+              "catalog/blocks/vfx-iphone-device",
+              "catalog/blocks/vfx-liquid-background",
+              "catalog/blocks/vfx-liquid-glass",
+              "catalog/blocks/vfx-magnetic",
+              "catalog/blocks/vfx-portal",
+              "catalog/blocks/vfx-shatter",
+              "catalog/blocks/vfx-text-cursor"
+            ]
+          },
           {
             "group": "Social Overlays",
             "pages": [
@@ -148,7 +161,6 @@
               "catalog/blocks/north-korea-locked-down",
               "catalog/blocks/nyc-paris-flight",
               "catalog/blocks/ui-3d-reveal",
-              "catalog/blocks/vfx-iphone-device",
               "catalog/blocks/vpn-youtube-spot"
             ]
           },
@@ -169,19 +181,8 @@
           {
             "group": "Blocks",
             "pages": [
-              "catalog/blocks/captions-bounce",
-              "catalog/blocks/captions-cinematic",
-              "catalog/blocks/captions-karaoke",
-              "catalog/blocks/captions-minimal",
-              "catalog/blocks/captions-slam",
               "catalog/blocks/flowchart",
-              "catalog/blocks/logo-outro",
-              "catalog/blocks/vfx-liquid-background",
-              "catalog/blocks/vfx-liquid-glass",
-              "catalog/blocks/vfx-magnetic",
-              "catalog/blocks/vfx-portal",
-              "catalog/blocks/vfx-shatter",
-              "catalog/blocks/vfx-text-cursor"
+              "catalog/blocks/logo-outro"
             ]
           }
         ]
diff --git a/docs/guides/html-in-canvas.mdx b/docs/guides/html-in-canvas.mdx
new file mode 100644
index 000000000..3928f99bf
--- /dev/null
+++ b/docs/guides/html-in-canvas.mdx
@@ -0,0 +1,128 @@
+---
+title: "HTML-in-Canvas"
+description: "Render live HTML as WebGL textures — GPU shaders, 3D geometry, and cinematic effects on any DOM content."
+---
+
+# HTML-in-Canvas
+
+The HTML-in-Canvas API (`drawElementImage`) lets you capture live, rendered DOM elements directly into a canvas at GPU speed. This means you can take any HTML — dashboards, forms, landing pages, app UIs — and render them as textures in WebGL scenes with shaders, 3D transformations, and post-processing effects.
+
+<Warning>
+**Chrome flag required.** The `drawElementImage` API is experimental and must be enabled manually:
+
+1. Open `chrome://flags/#canvas-draw-element` in Chrome or Brave
+2. Set **CanvasDrawElement** to **Enabled**
+3. Restart the browser
+
+HyperFrames enables this flag automatically during rendering (`--enable-features=CanvasDrawElement`), so rendered videos work without manual setup. The flag is only needed for live preview in the Studio.
+</Warning>
+
+## How it works
+
+1. Place HTML content inside a `<canvas layoutsubtree>` element
+2. The browser renders the HTML children as normal DOM
+3. Call `ctx.drawElementImage(element, x, y, w, h)` to capture the rendered pixels into the canvas
+4. Use the canvas as a Three.js texture, apply shaders, map to 3D geometry
+
+```html
+<!-- 1. HTML content lives inside the canvas -->
+<canvas id="capture" layoutsubtree width="1920" height="1080">
+  <div class="my-dashboard">
+    <h1>Revenue: $4.2M</h1>
+    <div class="chart">...</div>
+  </div>
+</canvas>
+
+<!-- 2. WebGL canvas for 3D rendering -->
+<canvas id="theater" width="1920" height="1080"></canvas>
+```
+
+```javascript
+// 3. Capture HTML to canvas
+var capCanvas = document.getElementById("capture");
+var ctx = capCanvas.getContext("2d");
+ctx.drawElementImage(capCanvas.querySelector(".my-dashboard"), 0, 0, 1920, 1080);
+
+// 4. Use as Three.js texture
+var texture = new THREE.CanvasTexture(capCanvas);
+var material = new THREE.MeshBasicMaterial({ map: texture });
+```
+
+## What makes this different
+
+Traditional approaches like `html2canvas` re-parse and re-render the DOM in JavaScript — they're slow, lossy, and miss CSS features like `backdrop-filter`, complex shadows, and web fonts. The `drawElementImage` API uses the browser's own compositor, so:
+
+- **Pixel-perfect** — every CSS feature is supported because the browser renders it natively
+- **GPU-accelerated** — captures at 60fps, fast enough for real-time animation
+- **Live content** — the HTML can animate, scroll, and change between captures
+- **Multiple captures simultaneously** — no nesting restrictions, multiple `<canvas layoutsubtree>` elements can capture different content in the same composition
+
+## Feature detection
+
+Always feature-detect before using the API. Compositions should fall back gracefully for browsers without the flag enabled.
+
+```javascript
+function isSupported() {
+  var tc = document.createElement("canvas");
+  if (!("layoutSubtree" in tc)) return false;
+  tc.setAttribute("layoutsubtree", "");
+  var ctx = tc.getContext("2d");
+  return ctx && typeof ctx.drawElementImage === "function";
+}
+
+if (isSupported()) {
+  ctx.drawElementImage(element, 0, 0, w, h);
+} else {
+  // Fallback: draw text directly on canvas, use static image, etc.
+}
+```
+
+## Re-capturing every frame
+
+For animated content (scrolling, transitions, counters), call `drawElementImage` inside your render loop to update the texture every frame:
+
+```javascript
+function render() {
+  // Update HTML state
+  scrollContainer.style.transform = "translateY(-" + scrollOffset + "px)";
+  counterEl.textContent = Math.round(currentValue);
+
+  // Re-capture
+  ctx.clearRect(0, 0, W, H);
+  ctx.drawElementImage(htmlElement, 0, 0, W, H);
+  texture.needsUpdate = true;
+
+  // Render 3D scene with updated texture
+  renderer.render(scene, camera);
+}
+```
+
+## Catalog blocks
+
+Install all HTML-in-Canvas blocks at once:
+
+```bash
+npx hyperframes add html-in-canvas
+```
+
+Or install individually:
+
+| Block | Description | Install |
+|-------|-------------|---------|
+| [Liquid Glass](/catalog/blocks/vfx-liquid-glass) | Voronoi glass fracture with parallax reveal | `npx hyperframes add vfx-liquid-glass` |
+| [iPhone & MacBook](/catalog/blocks/vfx-iphone-device) | Real 3D GLTF devices with live HTML screens | `npx hyperframes add vfx-iphone-device` |
+| [Text Cursor](/catalog/blocks/vfx-text-cursor) | Dramatic text reveal with chromatic shadows | `npx hyperframes add vfx-text-cursor` |
+| [Portal](/catalog/blocks/vfx-portal) | Dimension breach with volumetric light | `npx hyperframes add vfx-portal` |
+| [Shatter](/catalog/blocks/vfx-shatter) | HTML shatters into glass fragments | `npx hyperframes add vfx-shatter` |
+| [Magnetic](/catalog/blocks/vfx-magnetic) | Magnetic field particle visualization | `npx hyperframes add vfx-magnetic` |
+| [Liquid Background](/catalog/blocks/vfx-liquid-background) | Organic liquid simulation | `npx hyperframes add vfx-liquid-background` |
+
+## Rendering
+
+HyperFrames enables the Chrome flag automatically during rendering. No special configuration needed:
+
+```bash
+npx hyperframes render --output my-video.mp4
+```
+
+For Docker renders, the flag is also enabled automatically inside the container.
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 20f0f95ab..8fbb1ec6c 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -41,66 +41,6 @@
     "href": "/catalog/blocks/blue-sweater-intro-video",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
   },
-  {
-    "name": "captions-bounce",
-    "type": "block",
-    "title": "Captions – Bounce",
-    "description": "Playful social-media style captions with elastic bounce-in per word on alternating colorful pill backgrounds",
-    "tags": [
-      "captions",
-      "bounce"
-    ],
-    "href": "/catalog/blocks/captions-bounce",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-bounce.png"
-  },
-  {
-    "name": "captions-cinematic",
-    "type": "block",
-    "title": "Captions – Cinematic",
-    "description": "Elegant film-title captions with slow fade, letter-spacing animation, warm tint, and extending horizontal accent line",
-    "tags": [
-      "captions",
-      "cinematic"
-    ],
-    "href": "/catalog/blocks/captions-cinematic",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-cinematic.png"
-  },
-  {
-    "name": "captions-karaoke",
-    "type": "block",
-    "title": "Captions – Karaoke",
-    "description": "Word-by-word color reveal with frosted glass pill background, dimmed-to-highlighted karaoke progression",
-    "tags": [
-      "captions",
-      "karaoke"
-    ],
-    "href": "/catalog/blocks/captions-karaoke",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-karaoke.png"
-  },
-  {
-    "name": "captions-minimal",
-    "type": "block",
-    "title": "Captions – Minimal",
-    "description": "Clean, professional Netflix-subtitle style captions with soft fade and y-offset on a dark pill background",
-    "tags": [
-      "captions",
-      "minimal"
-    ],
-    "href": "/catalog/blocks/captions-minimal",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-minimal.png"
-  },
-  {
-    "name": "captions-slam",
-    "type": "block",
-    "title": "Captions – Slam",
-    "description": "Bold, punchy slam captions with back-eased overshoot scale-in, uppercase Inter 900, and per-word accent styling",
-    "tags": [
-      "captions",
-      "slam"
-    ],
-    "href": "/catalog/blocks/captions-slam",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/captions-slam.png"
-  },
   {
     "name": "chromatic-radial-split",
     "type": "block",
diff --git a/registry/blocks/captions-bounce/captions-bounce.html b/registry/blocks/captions-bounce/captions-bounce.html
deleted file mode 100644
index 75ae098a4..000000000
--- a/registry/blocks/captions-bounce/captions-bounce.html
+++ /dev/null
@@ -1,183 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>Captions – Bounce</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=block"
-      rel="stylesheet"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #000;
-      }
-
-      #captions-bounce {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: linear-gradient(180deg, #0e0c18 0%, #130f22 50%, #0e0c18 100%);
-      }
-
-      #captions-bounce::before {
-        content: "";
-        position: absolute;
-        bottom: -80px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 1000px;
-        height: 400px;
-        background: radial-gradient(ellipse, rgba(168, 85, 247, 0.04) 0%, transparent 70%);
-        pointer-events: none;
-      }
-
-      .caption-group {
-        position: absolute;
-        bottom: 130px;
-        left: 0;
-        right: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 16px;
-        opacity: 0;
-        visibility: hidden;
-        will-change: opacity;
-        font-variant-numeric: tabular-nums;
-      }
-
-      .caption-group .word-pill {
-        display: inline-block;
-        font-family: "Inter", system-ui, sans-serif;
-        font-weight: 800;
-        font-size: 64px;
-        line-height: 1;
-        color: #ffffff;
-        padding: 16px 32px;
-        border-radius: 16px;
-        opacity: 0;
-        transform: translateY(40px) scale(0.5);
-        will-change: transform, opacity;
-      }
-
-      /* Alternating pill colors */
-      .word-pill-0 {
-        background: rgba(0, 212, 255, 0.85);
-      }
-      .word-pill-1 {
-        background: rgba(139, 92, 246, 0.85);
-      }
-      .word-pill-2 {
-        background: rgba(16, 185, 129, 0.85);
-      }
-
-      .driver {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="captions-bounce"
-      data-composition-id="captions-bounce"
-      data-width="1920"
-      data-height="1080"
-      data-start="0"
-      data-duration="13"
-      data-root="true"
-    >
-      <div class="driver" data-track-index="0"></div>
-    </div>
-
-    <script>
-      (function () {
-        var GROUPS = [
-          { text: "Write HTML", start: 0.3, end: 1.8 },
-          { text: "render video", start: 2.0, end: 3.5 },
-          { text: "No timeline editors", start: 3.8, end: 5.5 },
-          { text: "no After Effects", start: 5.7, end: 7.2 },
-          { text: "Ship 10x faster", start: 7.5, end: 9.5 },
-          { text: "with HyperFrames", start: 9.8, end: 12.0 },
-        ];
-
-        var PILL_COLORS = ["word-pill-0", "word-pill-1", "word-pill-2"];
-
-        var root = document.getElementById("captions-bounce");
-
-        // Build caption group elements with per-word pill spans
-        GROUPS.forEach(function (group, gi) {
-          var div = document.createElement("div");
-          div.className = "caption-group";
-          div.id = "cg-" + gi;
-
-          var words = group.text.split(" ");
-          words.forEach(function (word, wi) {
-            var span = document.createElement("span");
-            span.className = "word-pill " + PILL_COLORS[wi % PILL_COLORS.length];
-            span.id = "cg-" + gi + "-w" + wi;
-            span.textContent = word;
-            div.appendChild(span);
-          });
-
-          root.appendChild(div);
-        });
-
-        // Build timeline
-        var tl = gsap.timeline({ paused: true });
-
-        GROUPS.forEach(function (group, gi) {
-          var el = "#cg-" + gi;
-          var words = group.text.split(" ");
-          var staggerDelay = 0.08;
-
-          // Show group container
-          tl.set(el, { opacity: 1, visibility: "visible" }, group.start);
-
-          // Bounce each word in with elastic ease, staggered
-          words.forEach(function (word, wi) {
-            var wordEl = "#cg-" + gi + "-w" + wi;
-            var wordStart = group.start + wi * staggerDelay;
-            tl.to(
-              wordEl,
-              { opacity: 1, y: 0, scale: 1, duration: 0.6, ease: "elastic.out(1, 0.4)" },
-              wordStart,
-            );
-          });
-
-          // Fade out the whole group
-          tl.to(el, { opacity: 0, duration: 0.15, ease: "power2.in" }, group.end - 0.15);
-
-          // Hard kill: reset all word pills and hide group
-          words.forEach(function (word, wi) {
-            var wordEl = "#cg-" + gi + "-w" + wi;
-            tl.set(wordEl, { opacity: 0, y: 40, scale: 0.5 }, group.end);
-          });
-          tl.set(el, { opacity: 0, visibility: "hidden" }, group.end);
-        });
-
-        window.__timelines = window.__timelines || [];
-        window.__timelines.push(tl);
-      })();
-    </script>
-  </body>
-</html>
diff --git a/registry/blocks/captions-bounce/registry-item.json b/registry/blocks/captions-bounce/registry-item.json
deleted file mode 100644
index 9b5f406b0..000000000
--- a/registry/blocks/captions-bounce/registry-item.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
-  "name": "captions-bounce",
-  "type": "hyperframes:block",
-  "title": "Captions \u2013 Bounce",
-  "description": "Playful social-media style captions with elastic bounce-in per word on alternating colorful pill backgrounds",
-  "stability": "stable",
-  "dimensions": {
-    "width": 1920,
-    "height": 1080
-  },
-  "duration": 13,
-  "tags": ["captions", "bounce"],
-  "files": [
-    {
-      "path": "captions-bounce.html",
-      "target": "compositions/captions-bounce.html",
-      "type": "hyperframes:composition"
-    }
-  ]
-}
diff --git a/registry/blocks/captions-cinematic/captions-cinematic.html b/registry/blocks/captions-cinematic/captions-cinematic.html
deleted file mode 100644
index 36aa53cbe..000000000
--- a/registry/blocks/captions-cinematic/captions-cinematic.html
+++ /dev/null
@@ -1,183 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>Captions – Cinematic</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;1,300&display=block"
-      rel="stylesheet"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #000;
-      }
-
-      #captions-cinematic {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: linear-gradient(180deg, #0a0908 0%, #0f0d0a 50%, #0a0908 100%);
-      }
-
-      /* Warm vignette */
-      #captions-cinematic::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
-        pointer-events: none;
-      }
-
-      .caption-wrapper {
-        position: absolute;
-        bottom: 140px;
-        left: 0;
-        right: 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 16px;
-        opacity: 0;
-        visibility: hidden;
-        will-change: opacity;
-      }
-
-      .caption-line {
-        position: relative;
-        width: 120px;
-        height: 1px;
-        background: rgba(245, 240, 232, 0.4);
-        transform: scaleX(0);
-        will-change: transform;
-      }
-
-      .caption-text {
-        font-family: "Inter", system-ui, sans-serif;
-        font-weight: 300;
-        font-style: italic;
-        font-size: 48px;
-        line-height: 1.4;
-        color: #f5f0e8;
-        letter-spacing: 4px;
-        text-align: center;
-        opacity: 0;
-        will-change: opacity, letter-spacing;
-        font-variant-numeric: tabular-nums;
-      }
-
-      .driver {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="captions-cinematic"
-      data-composition-id="captions-cinematic"
-      data-width="1920"
-      data-height="1080"
-      data-start="0"
-      data-duration="13"
-      data-root="true"
-    >
-      <div class="driver" data-track-index="0"></div>
-    </div>
-
-    <script>
-      (function () {
-        var GROUPS = [
-          { text: "Write HTML", start: 0.3, end: 1.8 },
-          { text: "render video", start: 2.0, end: 3.5 },
-          { text: "No timeline editors", start: 3.8, end: 5.5 },
-          { text: "no After Effects", start: 5.7, end: 7.2 },
-          { text: "Ship 10x faster", start: 7.5, end: 9.5 },
-          { text: "with HyperFrames", start: 9.8, end: 12.0 },
-        ];
-
-        var root = document.getElementById("captions-cinematic");
-
-        // Build caption group elements: line + text
-        GROUPS.forEach(function (group, gi) {
-          var wrapper = document.createElement("div");
-          wrapper.className = "caption-wrapper";
-          wrapper.id = "cg-wrap-" + gi;
-
-          var line = document.createElement("div");
-          line.className = "caption-line";
-          line.id = "cg-line-" + gi;
-
-          var text = document.createElement("div");
-          text.className = "caption-text";
-          text.id = "cg-" + gi;
-          text.textContent = group.text;
-
-          wrapper.appendChild(line);
-          wrapper.appendChild(text);
-          root.appendChild(wrapper);
-        });
-
-        // Build timeline
-        var tl = gsap.timeline({ paused: true });
-
-        GROUPS.forEach(function (group, gi) {
-          var wrapEl = "#cg-wrap-" + gi;
-          var lineEl = "#cg-line-" + gi;
-          var textEl = "#cg-" + gi;
-
-          // Show wrapper
-          tl.set(wrapEl, { opacity: 1, visibility: "visible" }, group.start);
-
-          // Line extends from center
-          tl.fromTo(
-            lineEl,
-            { scaleX: 0 },
-            { scaleX: 1, duration: 0.4, ease: "power2.out", transformOrigin: "center" },
-            group.start,
-          );
-
-          // Text fades in with letter-spacing settling
-          tl.fromTo(
-            textEl,
-            { opacity: 0, letterSpacing: "8px" },
-            { opacity: 1, letterSpacing: "4px", duration: 0.6, ease: "power1.out" },
-            group.start + 0.1,
-          );
-
-          // Text fades out slowly
-          tl.to(textEl, { opacity: 0, duration: 0.4, ease: "power1.in" }, group.end - 0.4);
-
-          // Line contracts
-          tl.to(lineEl, { scaleX: 0, duration: 0.3, ease: "power2.in" }, group.end - 0.3);
-
-          // Hard kill
-          tl.set(wrapEl, { opacity: 0, visibility: "hidden" }, group.end);
-          tl.set(textEl, { opacity: 0 }, group.end);
-          tl.set(lineEl, { scaleX: 0 }, group.end);
-        });
-
-        window.__timelines = window.__timelines || [];
-        window.__timelines.push(tl);
-      })();
-    </script>
-  </body>
-</html>
diff --git a/registry/blocks/captions-cinematic/registry-item.json b/registry/blocks/captions-cinematic/registry-item.json
deleted file mode 100644
index 9c8314015..000000000
--- a/registry/blocks/captions-cinematic/registry-item.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
-  "name": "captions-cinematic",
-  "type": "hyperframes:block",
-  "title": "Captions \u2013 Cinematic",
-  "description": "Elegant film-title captions with slow fade, letter-spacing animation, warm tint, and extending horizontal accent line",
-  "stability": "stable",
-  "dimensions": {
-    "width": 1920,
-    "height": 1080
-  },
-  "duration": 13,
-  "tags": ["captions", "cinematic"],
-  "files": [
-    {
-      "path": "captions-cinematic.html",
-      "target": "compositions/captions-cinematic.html",
-      "type": "hyperframes:composition"
-    }
-  ]
-}
diff --git a/registry/blocks/captions-karaoke/captions-karaoke.html b/registry/blocks/captions-karaoke/captions-karaoke.html
deleted file mode 100644
index 32e8546c4..000000000
--- a/registry/blocks/captions-karaoke/captions-karaoke.html
+++ /dev/null
@@ -1,174 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>Captions – Karaoke</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=block"
-      rel="stylesheet"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #000;
-      }
-
-      #captions-karaoke {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: linear-gradient(180deg, #0b0d15 0%, #101320 50%, #0b0d15 100%);
-      }
-
-      #captions-karaoke::before {
-        content: "";
-        position: absolute;
-        bottom: -60px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 800px;
-        height: 400px;
-        background: radial-gradient(ellipse, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
-        pointer-events: none;
-      }
-
-      .caption-group {
-        position: absolute;
-        bottom: 120px;
-        left: 50%;
-        transform: translateX(-50%);
-        text-align: center;
-        font-family: "Inter", system-ui, sans-serif;
-        font-weight: 700;
-        font-size: 72px;
-        line-height: 1.2;
-        white-space: nowrap;
-        opacity: 0;
-        visibility: hidden;
-        will-change: opacity;
-        font-variant-numeric: tabular-nums;
-        /* Frosted glass pill */
-        background: rgba(255, 255, 255, 0.06);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 24px;
-        padding: 24px 56px;
-      }
-
-      .caption-group .word {
-        display: inline-block;
-        color: rgba(255, 255, 255, 0.3);
-        margin: 0 8px;
-        will-change: color, transform;
-        transform-origin: center bottom;
-      }
-
-      .driver {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="captions-karaoke"
-      data-composition-id="captions-karaoke"
-      data-width="1920"
-      data-height="1080"
-      data-start="0"
-      data-duration="13"
-      data-root="true"
-    >
-      <div class="driver" data-track-index="0"></div>
-    </div>
-
-    <script>
-      (function () {
-        var GROUPS = [
-          { text: "Write HTML", start: 0.3, end: 1.8 },
-          { text: "render video", start: 2.0, end: 3.5 },
-          { text: "No timeline editors", start: 3.8, end: 5.5 },
-          { text: "no After Effects", start: 5.7, end: 7.2 },
-          { text: "Ship 10x faster", start: 7.5, end: 9.5 },
-          { text: "with HyperFrames", start: 9.8, end: 12.0 },
-        ];
-
-        var root = document.getElementById("captions-karaoke");
-
-        // Build caption group elements with per-word spans
-        GROUPS.forEach(function (group, gi) {
-          var div = document.createElement("div");
-          div.className = "caption-group";
-          div.id = "cg-" + gi;
-
-          var words = group.text.split(" ");
-          words.forEach(function (word, wi) {
-            var span = document.createElement("span");
-            span.className = "word";
-            span.id = "cg-" + gi + "-w" + wi;
-            span.textContent = word;
-            div.appendChild(span);
-          });
-
-          root.appendChild(div);
-        });
-
-        // Build timeline
-        var tl = gsap.timeline({ paused: true });
-
-        GROUPS.forEach(function (group, gi) {
-          var el = "#cg-" + gi;
-          var words = group.text.split(" ");
-          var totalWords = words.length;
-          var groupDuration = group.end - group.start;
-
-          // Show group (dimmed words visible)
-          tl.set(el, { opacity: 1, visibility: "visible" }, group.start);
-
-          // Highlight each word as its time arrives
-          words.forEach(function (word, wi) {
-            var wordStart = group.start + (wi / totalWords) * groupDuration;
-            var wordEl = "#cg-" + gi + "-w" + wi;
-            tl.to(
-              wordEl,
-              { color: "#ffffff", scale: 1.05, duration: 0.15, ease: "power2.out" },
-              wordStart,
-            );
-          });
-
-          // Fade out group
-          tl.to(el, { opacity: 0, duration: 0.15, ease: "power2.in" }, group.end - 0.15);
-
-          // Hard kill: reset all words and hide group
-          words.forEach(function (word, wi) {
-            var wordEl = "#cg-" + gi + "-w" + wi;
-            tl.set(wordEl, { color: "rgba(255,255,255,0.3)", scale: 1 }, group.end);
-          });
-          tl.set(el, { opacity: 0, visibility: "hidden" }, group.end);
-        });
-
-        window.__timelines = window.__timelines || [];
-        window.__timelines.push(tl);
-      })();
-    </script>
-  </body>
-</html>
diff --git a/registry/blocks/captions-karaoke/registry-item.json b/registry/blocks/captions-karaoke/registry-item.json
deleted file mode 100644
index f3a80f5fb..000000000
--- a/registry/blocks/captions-karaoke/registry-item.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
-  "name": "captions-karaoke",
-  "type": "hyperframes:block",
-  "title": "Captions \u2013 Karaoke",
-  "description": "Word-by-word color reveal with frosted glass pill background, dimmed-to-highlighted karaoke progression",
-  "stability": "stable",
-  "dimensions": {
-    "width": 1920,
-    "height": 1080
-  },
-  "duration": 13,
-  "tags": ["captions", "karaoke"],
-  "files": [
-    {
-      "path": "captions-karaoke.html",
-      "target": "compositions/captions-karaoke.html",
-      "type": "hyperframes:composition"
-    }
-  ]
-}
diff --git a/registry/blocks/captions-minimal/captions-minimal.html b/registry/blocks/captions-minimal/captions-minimal.html
deleted file mode 100644
index ae15c218e..000000000
--- a/registry/blocks/captions-minimal/captions-minimal.html
+++ /dev/null
@@ -1,133 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>Captions – Minimal</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=block"
-      rel="stylesheet"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #000;
-      }
-
-      #captions-minimal {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: linear-gradient(180deg, #0c0e16 0%, #10121a 50%, #0c0e16 100%);
-      }
-
-      #captions-minimal::before {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 300px;
-        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
-        pointer-events: none;
-      }
-
-      .caption-group {
-        position: absolute;
-        bottom: 100px;
-        left: 50%;
-        transform: translateX(-50%);
-        text-align: center;
-        font-family: "Inter", system-ui, sans-serif;
-        font-weight: 500;
-        font-size: 56px;
-        line-height: 1.3;
-        color: #ffffff;
-        white-space: nowrap;
-        opacity: 0;
-        visibility: hidden;
-        will-change: transform, opacity;
-        font-variant-numeric: tabular-nums;
-        /* Dark pill */
-        background: rgba(0, 0, 0, 0.55);
-        border-radius: 12px;
-        padding: 16px 48px;
-      }
-
-      .driver {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="captions-minimal"
-      data-composition-id="captions-minimal"
-      data-width="1920"
-      data-height="1080"
-      data-start="0"
-      data-duration="13"
-      data-root="true"
-    >
-      <div class="driver" data-track-index="0"></div>
-    </div>
-
-    <script>
-      (function () {
-        var GROUPS = [
-          { text: "Write HTML", start: 0.3, end: 1.8 },
-          { text: "render video", start: 2.0, end: 3.5 },
-          { text: "No timeline editors", start: 3.8, end: 5.5 },
-          { text: "no After Effects", start: 5.7, end: 7.2 },
-          { text: "Ship 10x faster", start: 7.5, end: 9.5 },
-          { text: "with HyperFrames", start: 9.8, end: 12.0 },
-        ];
-
-        var root = document.getElementById("captions-minimal");
-
-        // Build caption group elements
-        GROUPS.forEach(function (group, gi) {
-          var div = document.createElement("div");
-          div.className = "caption-group";
-          div.id = "cg-" + gi;
-          div.textContent = group.text;
-          root.appendChild(div);
-        });
-
-        // Build timeline
-        var tl = gsap.timeline({ paused: true });
-
-        GROUPS.forEach(function (group, gi) {
-          var el = "#cg-" + gi;
-          // Fade in with slight upward motion
-          tl.set(el, { visibility: "visible" }, group.start);
-          tl.from(el, { y: 15, opacity: 0, duration: 0.3, ease: "power2.out" }, group.start);
-          // Fade out with slight upward drift
-          tl.to(el, { y: -5, opacity: 0, duration: 0.2, ease: "power2.in" }, group.end - 0.2);
-          tl.set(el, { opacity: 0, visibility: "hidden" }, group.end);
-        });
-
-        window.__timelines = window.__timelines || [];
-        window.__timelines.push(tl);
-      })();
-    </script>
-  </body>
-</html>
diff --git a/registry/blocks/captions-minimal/registry-item.json b/registry/blocks/captions-minimal/registry-item.json
deleted file mode 100644
index 35e4678ec..000000000
--- a/registry/blocks/captions-minimal/registry-item.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
-  "name": "captions-minimal",
-  "type": "hyperframes:block",
-  "title": "Captions \u2013 Minimal",
-  "description": "Clean, professional Netflix-subtitle style captions with soft fade and y-offset on a dark pill background",
-  "stability": "stable",
-  "dimensions": {
-    "width": 1920,
-    "height": 1080
-  },
-  "duration": 13,
-  "tags": ["captions", "minimal"],
-  "files": [
-    {
-      "path": "captions-minimal.html",
-      "target": "compositions/captions-minimal.html",
-      "type": "hyperframes:composition"
-    }
-  ]
-}
diff --git a/registry/blocks/captions-slam/captions-slam.html b/registry/blocks/captions-slam/captions-slam.html
deleted file mode 100644
index da0893f1b..000000000
--- a/registry/blocks/captions-slam/captions-slam.html
+++ /dev/null
@@ -1,174 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>Captions – Slam</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=block"
-      rel="stylesheet"
-    />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #000;
-      }
-
-      #captions-slam {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: linear-gradient(180deg, #0a0c14 0%, #0d1020 50%, #0a0c14 100%);
-      }
-
-      /* Subtle radial glow in center-bottom */
-      #captions-slam::before {
-        content: "";
-        position: absolute;
-        bottom: -100px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 900px;
-        height: 500px;
-        background: radial-gradient(ellipse, rgba(0, 212, 255, 0.04) 0%, transparent 70%);
-        pointer-events: none;
-      }
-
-      .caption-group {
-        position: absolute;
-        bottom: 140px;
-        left: 0;
-        right: 0;
-        text-align: center;
-        font-family: "Inter", system-ui, sans-serif;
-        font-weight: 900;
-        font-size: 96px;
-        line-height: 1.1;
-        text-transform: uppercase;
-        color: #ffffff;
-        text-shadow:
-          0 0 40px rgba(255, 255, 255, 0.15),
-          0 0 80px rgba(255, 255, 255, 0.05);
-        letter-spacing: 2px;
-        opacity: 0;
-        visibility: hidden;
-        will-change: transform, opacity;
-        font-variant-numeric: tabular-nums;
-      }
-
-      .caption-group .word-accent {
-        color: #00d4ff;
-        display: inline-block;
-        transform: scale(1.3);
-        text-shadow:
-          0 0 30px rgba(0, 212, 255, 0.4),
-          0 0 60px rgba(0, 212, 255, 0.15);
-      }
-
-      .caption-group .word-gradient {
-        display: inline;
-        background: linear-gradient(90deg, #00d4ff 0%, #a855f7 50%, #ec4899 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-      }
-
-      /* Driver clip */
-      .driver {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        height: 1px;
-        opacity: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="captions-slam"
-      data-composition-id="captions-slam"
-      data-width="1920"
-      data-height="1080"
-      data-start="0"
-      data-duration="13"
-      data-root="true"
-    >
-      <div class="driver" data-track-index="0"></div>
-    </div>
-
-    <script>
-      (function () {
-        var GROUPS = [
-          { text: "Write HTML", start: 0.3, end: 1.8 },
-          { text: "render video", start: 2.0, end: 3.5 },
-          { text: "No timeline editors", start: 3.8, end: 5.5 },
-          { text: "no After Effects", start: 5.7, end: 7.2 },
-          { text: "Ship 10x faster", start: 7.5, end: 9.5 },
-          { text: "with HyperFrames", start: 9.8, end: 12.0 },
-        ];
-
-        var root = document.getElementById("captions-slam");
-
-        // Build caption group elements
-        GROUPS.forEach(function (group, gi) {
-          var div = document.createElement("div");
-          div.className = "caption-group";
-          div.id = "cg-" + gi;
-
-          // Apply per-word styling
-          var words = group.text.split(" ");
-          var html = words
-            .map(function (word) {
-              if (word === "10x") {
-                return '<span class="word-accent">' + word + "</span>";
-              }
-              if (word === "HyperFrames") {
-                return '<span class="word-gradient">' + word + "</span>";
-              }
-              return word;
-            })
-            .join(" ");
-
-          div.innerHTML = html;
-          root.appendChild(div);
-        });
-
-        // Build timeline
-        var tl = gsap.timeline({ paused: true });
-
-        GROUPS.forEach(function (group, gi) {
-          var el = "#cg-" + gi;
-          tl.fromTo(
-            el,
-            { scale: 0, opacity: 0, visibility: "visible" },
-            { scale: 1, opacity: 1, duration: 0.15, ease: "back.out(1.7)" },
-            group.start,
-          );
-          tl.to(
-            el,
-            { scale: 1.05, opacity: 0, duration: 0.12, ease: "power2.in" },
-            group.end - 0.12,
-          );
-          tl.set(el, { opacity: 0, visibility: "hidden" }, group.end);
-        });
-
-        window.__timelines = window.__timelines || [];
-        window.__timelines.push(tl);
-      })();
-    </script>
-  </body>
-</html>
diff --git a/registry/blocks/captions-slam/registry-item.json b/registry/blocks/captions-slam/registry-item.json
deleted file mode 100644
index a35d8581e..000000000
--- a/registry/blocks/captions-slam/registry-item.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
-  "name": "captions-slam",
-  "type": "hyperframes:block",
-  "title": "Captions \u2013 Slam",
-  "description": "Bold, punchy slam captions with back-eased overshoot scale-in, uppercase Inter 900, and per-word accent styling",
-  "stability": "stable",
-  "dimensions": {
-    "width": 1920,
-    "height": 1080
-  },
-  "duration": 13,
-  "tags": ["captions", "slam"],
-  "files": [
-    {
-      "path": "captions-slam.html",
-      "target": "compositions/captions-slam.html",
-      "type": "hyperframes:composition"
-    }
-  ]
-}
diff --git a/registry/blocks/vfx-liquid-glass/vfx-liquid-glass.html b/registry/blocks/vfx-liquid-glass/vfx-liquid-glass.html
index 8132924be..657dc7deb 100644
--- a/registry/blocks/vfx-liquid-glass/vfx-liquid-glass.html
+++ b/registry/blocks/vfx-liquid-glass/vfx-liquid-glass.html
@@ -40,21 +40,61 @@
       .text-source {
         width: 1920px;
         height: 1080px;
-        display: grid;
-        place-items: center;
-        background: linear-gradient(180deg, #030407 0%, #070910 52%, #030407 100%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(160deg, #030407 0%, #0a1020 40%, #070910 70%, #030407 100%);
         text-align: center;
-        padding: 0 60px;
+        padding: 0 120px;
+        gap: 32px;
+        position: relative;
+        overflow: hidden;
       }
+      .text-source::before {
+        content: '';
+        position: absolute;
+        width: 700px; height: 700px; border-radius: 50%;
+        background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 70%);
+        top: -150px; right: -100px; pointer-events: none;
+      }
+      .text-source::after {
+        content: '';
+        position: absolute;
+        width: 500px; height: 500px; border-radius: 50%;
+        background: radial-gradient(circle, rgba(124,58,237,0.05) 0%, transparent 70%);
+        bottom: -100px; left: -50px; pointer-events: none;
+      }
+      .badge { font-size: 14px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(0,212,255,0.8); }
       .text-source h1 {
-        font-size: 172px;
+        font-size: 148px;
         font-weight: 900;
-        line-height: 0.88;
+        line-height: 0.9;
         color: rgba(248, 249, 253, 0.96);
-        text-shadow: 0 0 40px rgba(255, 255, 255, 0.22);
-        letter-spacing: -4px;
-        max-width: 1600px;
+        text-shadow: 0 0 60px rgba(255, 255, 255, 0.15);
+        letter-spacing: -5px;
+        max-width: 1400px;
       }
+      .text-source h1 span {
+        background: linear-gradient(135deg, #00d4ff, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      .subtitle {
+        font-size: 28px;
+        font-weight: 400;
+        color: rgba(255,255,255,0.35);
+        max-width: 800px;
+        line-height: 1.5;
+      }
+      .stats {
+        display: flex;
+        gap: 48px;
+        margin-top: 16px;
+      }
+      .stat { text-align: center; }
+      .stat-val { font-size: 42px; font-weight: 800; color: #00d4ff; letter-spacing: -1px; }
+      .stat-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 2px; margin-top: 4px; }
     </style>
   </head>
   <body>
@@ -83,7 +123,14 @@
         "
       >
         <div class="text-source">
-          <h1>Liquid Glass Design</h1>
+          <div class="badge">Write HTML → Render Video</div>
+          <h1>Ship videos <span>10x faster</span></h1>
+          <div class="subtitle">HTML is the source of truth for video. No timeline editors, no After Effects — just code.</div>
+          <div class="stats">
+            <div class="stat"><div class="stat-val">47x</div><div class="stat-label">Faster than AE</div></div>
+            <div class="stat"><div class="stat-val">12.4K</div><div class="stat-label">Creators</div></div>
+            <div class="stat"><div class="stat-val">2.4M</div><div class="stat-label">Videos Rendered</div></div>
+          </div>
         </div>
       </canvas>
 
diff --git a/registry/blocks/vfx-portal/vfx-portal.html b/registry/blocks/vfx-portal/vfx-portal.html
index 9b1e97b51..aec7eb4b2 100644
--- a/registry/blocks/vfx-portal/vfx-portal.html
+++ b/registry/blocks/vfx-portal/vfx-portal.html
@@ -293,21 +293,21 @@
         >
           <div class="site-wrap">
             <div class="topbar">
-              <div class="logo">Acme</div>
+              <div class="logo">HyperFrames</div>
               <div class="nav">
-                <span>Features</span>
-                <span>Pricing</span>
-                <span>Blog</span>
+                <span>Docs</span>
+                <span>Catalog</span>
+                <span>GitHub</span>
                 <button class="nav-cta">Sign In</button>
               </div>
             </div>
             <div class="hero">
-              <h1 class="hero-title">Build products<br />users love</h1>
+              <h1 class="hero-title">Write HTML<br />Render Video</h1>
               <p class="hero-sub">
                 Ship faster with a platform that handles the hard parts. Analytics, infrastructure,
                 and developer tools — all in one place.
               </p>
-              <button class="hero-btn">Get Started Free</button>
+              <button class="hero-btn">Start Creating</button>
             </div>
             <div class="cards-row">
               <div class="feature-card">
@@ -368,21 +368,21 @@
         >
           <div class="site-wrap">
             <div class="topbar">
-              <div class="logo">Acme</div>
+              <div class="logo">HyperFrames</div>
               <div class="nav">
-                <span>Features</span>
-                <span>Pricing</span>
-                <span>Blog</span>
+                <span>Docs</span>
+                <span>Catalog</span>
+                <span>GitHub</span>
                 <button class="nav-cta">Sign In</button>
               </div>
             </div>
             <div class="hero">
-              <h1 class="hero-title">Build products<br />users love</h1>
+              <h1 class="hero-title">Write HTML<br />Render Video</h1>
               <p class="hero-sub">
                 Ship faster with a platform that handles the hard parts. Analytics, infrastructure,
                 and developer tools — all in one place.
               </p>
-              <button class="hero-btn">Get Started Free</button>
+              <button class="hero-btn">Start Creating</button>
             </div>
             <div class="cards-row">
               <div class="feature-card">
diff --git a/registry/blocks/vfx-shatter/vfx-shatter.html b/registry/blocks/vfx-shatter/vfx-shatter.html
index de8966ab4..ab5a7dd21 100644
--- a/registry/blocks/vfx-shatter/vfx-shatter.html
+++ b/registry/blocks/vfx-shatter/vfx-shatter.html
@@ -48,7 +48,7 @@
         color: #fff;
       }
 
-      /* ── Panel A: Introducing v2.0 ─────────────────────────── */
+      /* ── Panel A: Write HTML, Render Video ─────────────────────────── */
       .panel-a-inner {
         width: 100%;
         height: 100%;
@@ -377,7 +377,7 @@
           <div class="panel-a-inner">
             <div class="pa-badge">
               <span class="pa-badge-dot"></span>
-              Introducing v2.0
+              Write HTML, Render Video
             </div>
 
             <h1 class="pa-headline">Everything you loved.<br /><em>Now 10x faster.</em></h1>
@@ -442,7 +442,7 @@
               </div>
             </div>
 
-            <button class="pa-cta">Upgrade Now &rarr;</button>
+            <button class="pa-cta">Start Creating &rarr;</button>
           </div>
         </section>
       </canvas>
@@ -467,26 +467,26 @@
           <div class="panel-b-inner">
             <div class="pb-confetti" id="confetti-container"></div>
 
-            <div class="pb-badge">&#10003; Upgrade Complete</div>
+            <div class="pb-badge">&#10003; Powered by HyperFrames</div>
 
-            <h1 class="pb-headline">You're on v2.0</h1>
+            <h1 class="pb-headline">HTML is Video</h1>
 
             <div class="pb-metrics">
               <div class="pb-metric">
                 <div class="pb-metric-value green">10x</div>
-                <div class="pb-metric-label">Faster</div>
+                <div class="pb-metric-label">Render Speed</div>
               </div>
               <div class="pb-metric">
                 <div class="pb-metric-value blue">50%</div>
-                <div class="pb-metric-label">Smaller</div>
+                <div class="pb-metric-label">File Size</div>
               </div>
               <div class="pb-metric">
                 <div class="pb-metric-value purple">99.99%</div>
-                <div class="pb-metric-label">Uptime</div>
+                <div class="pb-metric-label">Reliability</div>
               </div>
             </div>
 
-            <button class="pb-cta">Explore what's new &rarr;</button>
+            <button class="pb-cta">View Catalog &rarr;</button>
           </div>
         </section>
       </canvas>
diff --git a/registry/registry.json b/registry/registry.json
index 0c41f7409..52660dc00 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -223,26 +223,6 @@
       "name": "transitions-scale",
       "type": "hyperframes:block"
     },
-    {
-      "name": "captions-slam",
-      "type": "hyperframes:block"
-    },
-    {
-      "name": "captions-karaoke",
-      "type": "hyperframes:block"
-    },
-    {
-      "name": "captions-minimal",
-      "type": "hyperframes:block"
-    },
-    {
-      "name": "captions-bounce",
-      "type": "hyperframes:block"
-    },
-    {
-      "name": "captions-cinematic",
-      "type": "hyperframes:block"
-    },
     {
       "name": "vfx-text-cursor",
       "type": "hyperframes:block"
@@ -272,4 +252,4 @@
       "type": "hyperframes:block"
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 489f6ad7a..d95acc25b 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -119,6 +119,15 @@ function generateItemMdx(kind: ItemKind, manifest: RegistryItem): string {
     lines.push(tagBadges, "");
   }
 
+  if (tags.includes("html-in-canvas")) {
+    lines.push(
+      `<Warning>`,
+      `**Requires Chrome flag.** Enable \`chrome://flags/#canvas-draw-element\` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).`,
+      `</Warning>`,
+      "",
+    );
+  }
+
   if (manifest.author) {
     const author = source.authorUrl ? `[${manifest.author}](${source.authorUrl})` : manifest.author;
     lines.push(`Created by ${author}.`, "");
@@ -274,13 +283,14 @@ function main(): void {
   // Items with the same first tag are grouped together. Items without tags
   // go into an "Other" group. Groups are sorted with a priority order.
   const GROUP_ORDER: Record<string, number> = {
-    "Social Overlays": 0,
-    "Shader Transitions": 1,
-    "CSS Transitions": 2,
-    Showcases: 3,
-    Data: 4,
-    Effects: 5,
-    Blocks: 6,
+    "HTML-in-Canvas": 0,
+    "Social Overlays": 2,
+    "Shader Transitions": 3,
+    "CSS Transitions": 4,
+    Showcases: 5,
+    Data: 6,
+    Effects: 7,
+    Blocks: 8,
   };
 
   function groupForItem(entry: CatalogEntry): string {
@@ -288,6 +298,8 @@ function main(): void {
     // Two-tag combos for specific grouping
     if (tags.includes("transition") && tags.includes("shader")) return "Shader Transitions";
     if (tags.includes("transition") && tags.includes("showcase")) return "CSS Transitions";
+    // HTML-in-Canvas and Captions categories
+    if (tags.includes("html-in-canvas")) return "HTML-in-Canvas";
     // Single-tag mapping
     if (tags.includes("social")) return "Social Overlays";
     if (tags.includes("transition"))