From 0b04f79fa3d1b4d48848f7859b8710b2b04c3399 Mon Sep 17 00:00:00 2001
From: Dashsoap <42135402+Dashsoap@users.noreply.github.com>
Date: Wed, 17 Jun 2026 11:32:32 +0800
Subject: [PATCH] docs(catalog): add missing flowchart-vertical and
 vfx-liquid-glass pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two installable blocks are registered in registry/registry.json with
complete registry-item.json manifests (and preview assets), but their
generated catalog docs were never produced:

  - flowchart-vertical
  - vfx-liquid-glass

The catalog docs are generated from the registry by
scripts/generate-catalog-pages.ts, which emits docs/catalog/<kind>/<name>.mdx,
docs/public/catalog-index.json, and the Catalog nav in docs/docs.json.
These two blocks were added to the registry without re-running it, so the
docs site listed 95 of the 97 blocks — the two are installable via
`hyperframes add` but invisible in the catalog and search index.

This adds exactly the output the generator produces for these two items
(the two .mdx pages are byte-identical to its output) plus their entries
in catalog-index.json and the Catalog nav, leaving all other generated
pages untouched.
---
 docs/catalog/blocks/flowchart-vertical.mdx | 44 ++++++++++++++++++++
 docs/catalog/blocks/vfx-liquid-glass.mdx   | 48 ++++++++++++++++++++++
 docs/docs.json                             |  2 +
 docs/public/catalog-index.json             | 26 ++++++++++++
 4 files changed, 120 insertions(+)
 create mode 100644 docs/catalog/blocks/flowchart-vertical.mdx
 create mode 100644 docs/catalog/blocks/vfx-liquid-glass.mdx

diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
new file mode 100644
index 0000000000..b6102cca9f
--- /dev/null
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -0,0 +1,44 @@
+---
+title: "Flowchart Vertical"
+description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
+---
+
+# Flowchart Vertical
+
+Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
+
+`diagram` `flowchart` `interactive` `portrait`
+
+<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/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add flowchart-vertical
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1440×2560 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="flowchart-vertical" data-composition-src="compositions/flowchart-vertical.html" data-start="0" data-duration="12" data-track-index="1" data-width="1440" data-height="2560"></div>
+```
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
new file mode 100644
index 0000000000..76b6670863
--- /dev/null
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -0,0 +1,48 @@
+---
+title: "Liquid Glass"
+description: "VFX composition block"
+---
+
+# Liquid Glass
+
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vfx-liquid-glass
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 20s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vfx-liquid-glass.html` | `compositions/vfx-liquid-glass.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-liquid-glass" data-composition-src="compositions/vfx-liquid-glass.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/docs.json b/docs/docs.json
index e0fb7919dc..a9c4e1b7f8 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -159,6 +159,7 @@
               "catalog/blocks/macos-tahoe-liquid-glass",
               "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",
@@ -261,6 +262,7 @@
             "group": "Blocks",
             "pages": [
               "catalog/blocks/flowchart",
+              "catalog/blocks/flowchart-vertical",
               "catalog/blocks/logo-outro"
             ]
           },
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 9262a03b44..13ce772fee 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -362,6 +362,20 @@
         "href": "/catalog/blocks/flowchart",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
     },
+    {
+        "name": "flowchart-vertical",
+        "type": "block",
+        "title": "Flowchart Vertical",
+        "description": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+        "tags": [
+            "diagram",
+            "flowchart",
+            "interactive",
+            "portrait"
+        ],
+        "href": "/catalog/blocks/flowchart-vertical",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png"
+    },
     {
         "name": "glitch",
         "type": "block",
@@ -1033,6 +1047,18 @@
         "href": "/catalog/blocks/vfx-liquid-background",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
     },
+    {
+        "name": "vfx-liquid-glass",
+        "type": "block",
+        "title": "Liquid Glass",
+        "description": "VFX composition block",
+        "tags": [
+            "html-in-canvas",
+            "webgl"
+        ],
+        "href": "/catalog/blocks/vfx-liquid-glass",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png"
+    },
     {
         "name": "vfx-magnetic",
         "type": "block",