From 3aae641c86dbd30bdd25e22d58c9c4af91cc5000 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Wed, 6 May 2026 01:05:36 -0700
Subject: [PATCH] docs: generate catalog pages for VFX and caption blocks

---
 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     |  48 ++++++
 docs/catalog/blocks/vfx-liquid-background.mdx |  44 +++++
 docs/catalog/blocks/vfx-liquid-glass.mdx      |  44 +++++
 docs/catalog/blocks/vfx-magnetic.mdx          |  44 +++++
 docs/catalog/blocks/vfx-portal.mdx            |  44 +++++
 docs/catalog/blocks/vfx-shatter.mdx           |  44 +++++
 docs/catalog/blocks/vfx-text-cursor.mdx       |  44 +++++
 docs/docs.json                                |  14 +-
 docs/public/catalog-index.json                | 154 ++++++++++++++++++
 14 files changed, 699 insertions(+), 1 deletion(-)
 create mode 100644 docs/catalog/blocks/captions-bounce.mdx
 create mode 100644 docs/catalog/blocks/captions-cinematic.mdx
 create mode 100644 docs/catalog/blocks/captions-karaoke.mdx
 create mode 100644 docs/catalog/blocks/captions-minimal.mdx
 create mode 100644 docs/catalog/blocks/captions-slam.mdx
 create mode 100644 docs/catalog/blocks/vfx-iphone-device.mdx
 create mode 100644 docs/catalog/blocks/vfx-liquid-background.mdx
 create mode 100644 docs/catalog/blocks/vfx-liquid-glass.mdx
 create mode 100644 docs/catalog/blocks/vfx-magnetic.mdx
 create mode 100644 docs/catalog/blocks/vfx-portal.mdx
 create mode 100644 docs/catalog/blocks/vfx-shatter.mdx
 create mode 100644 docs/catalog/blocks/vfx-text-cursor.mdx

diff --git a/docs/catalog/blocks/captions-bounce.mdx b/docs/catalog/blocks/captions-bounce.mdx
new file mode 100644
index 000000000..d03361f36
--- /dev/null
+++ b/docs/catalog/blocks/captions-bounce.mdx
@@ -0,0 +1,44 @@
+---
+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
new file mode 100644
index 000000000..13e5e4e74
--- /dev/null
+++ b/docs/catalog/blocks/captions-cinematic.mdx
@@ -0,0 +1,44 @@
+---
+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
new file mode 100644
index 000000000..4d7cb8846
--- /dev/null
+++ b/docs/catalog/blocks/captions-karaoke.mdx
@@ -0,0 +1,44 @@
+---
+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
new file mode 100644
index 000000000..92dd94aec
--- /dev/null
+++ b/docs/catalog/blocks/captions-minimal.mdx
@@ -0,0 +1,44 @@
+---
+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
new file mode 100644
index 000000000..e4139a75c
--- /dev/null
+++ b/docs/catalog/blocks/captions-slam.mdx
@@ -0,0 +1,44 @@
+---
+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
new file mode 100644
index 000000000..b906df9fb
--- /dev/null
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -0,0 +1,48 @@
+---
+title: "iPhone & MacBook 3D Showcase"
+description: "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable."
+---
+
+# iPhone & MacBook 3D Showcase
+
+Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.
+
+`html-in-canvas` `3d` `device` `iphone` `macbook` `gltf`
+
+<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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vfx-iphone-device
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 15s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vfx-iphone-device.html` | `compositions/vfx-iphone-device.html` | hyperframes:composition |
+| `models/iphone.glb` | `models/iphone.glb` | asset |
+| `models/macbook.glb` | `models/macbook.glb` | asset |
+| `models/hyperframes-mobile.png` | `models/hyperframes-mobile.png` | asset |
+| `models/hyperframes-desktop.png` | `models/hyperframes-desktop.png` | asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-iphone-device" data-composition-src="compositions/vfx-iphone-device.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
new file mode 100644
index 000000000..265c5bb3d
--- /dev/null
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -0,0 +1,44 @@
+---
+title: "Liquid Background"
+description: "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics."
+---
+
+# Liquid Background
+
+Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.
+
+`html-in-canvas` `liquid` `webgl` `displacement` `background`
+
+<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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vfx-liquid-background
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vfx-liquid-background.html` | `compositions/vfx-liquid-background.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-liquid-background" data-composition-src="compositions/vfx-liquid-background.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
new file mode 100644
index 000000000..6e21e7055
--- /dev/null
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -0,0 +1,44 @@
+---
+title: "Liquid Glass"
+description: "VFX composition block"
+---
+
+# Liquid Glass
+
+VFX composition block
+
+`html-in-canvas` `webgl`
+
+<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/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
new file mode 100644
index 000000000..aa3d1d364
--- /dev/null
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -0,0 +1,44 @@
+---
+title: "Magnetic"
+description: "VFX composition block"
+---
+
+# Magnetic
+
+VFX composition block
+
+`html-in-canvas` `webgl`
+
+<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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vfx-magnetic
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 15s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vfx-magnetic.html` | `compositions/vfx-magnetic.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-magnetic" data-composition-src="compositions/vfx-magnetic.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
new file mode 100644
index 000000000..8a03b8e9b
--- /dev/null
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -0,0 +1,44 @@
+---
+title: "Portal"
+description: "VFX composition block"
+---
+
+# Portal
+
+VFX composition block
+
+`html-in-canvas` `webgl`
+
+<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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vfx-portal
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 10s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vfx-portal.html` | `compositions/vfx-portal.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-portal" data-composition-src="compositions/vfx-portal.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
new file mode 100644
index 000000000..d508c4fa3
--- /dev/null
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -0,0 +1,44 @@
+---
+title: "Shatter"
+description: "VFX composition block"
+---
+
+# Shatter
+
+VFX composition block
+
+`html-in-canvas` `webgl`
+
+<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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vfx-shatter
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vfx-shatter.html` | `compositions/vfx-shatter.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-shatter" data-composition-src="compositions/vfx-shatter.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
new file mode 100644
index 000000000..731cc2a23
--- /dev/null
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -0,0 +1,44 @@
+---
+title: "VFX Text Cursor"
+description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges."
+---
+
+# VFX Text Cursor
+
+Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.
+
+`html-in-canvas` `text` `shader` `cursor` `chromatic`
+
+<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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vfx-text-cursor
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vfx-text-cursor.html` | `compositions/vfx-text-cursor.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-text-cursor" data-composition-src="compositions/vfx-text-cursor.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/docs.json b/docs/docs.json
index 7867ffc88..6f390aeb5 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -148,6 +148,7 @@
               "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"
             ]
           },
@@ -168,8 +169,19 @@
           {
             "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/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"
             ]
           }
         ]
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 2226c308f..20f0f95ab 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -41,6 +41,66 @@
     "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",
@@ -542,6 +602,100 @@
     "href": "/catalog/blocks/ui-3d-reveal",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
   },
+  {
+    "name": "vfx-iphone-device",
+    "type": "block",
+    "title": "iPhone & MacBook 3D Showcase",
+    "description": "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.",
+    "tags": [
+      "html-in-canvas",
+      "3d",
+      "device",
+      "iphone",
+      "macbook",
+      "gltf"
+    ],
+    "href": "/catalog/blocks/vfx-iphone-device",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png"
+  },
+  {
+    "name": "vfx-liquid-background",
+    "type": "block",
+    "title": "Liquid Background",
+    "description": "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.",
+    "tags": [
+      "html-in-canvas",
+      "liquid",
+      "webgl",
+      "displacement",
+      "background"
+    ],
+    "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",
+    "title": "Magnetic",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-magnetic",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png"
+  },
+  {
+    "name": "vfx-portal",
+    "type": "block",
+    "title": "Portal",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-portal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png"
+  },
+  {
+    "name": "vfx-shatter",
+    "type": "block",
+    "title": "Shatter",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-shatter",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png"
+  },
+  {
+    "name": "vfx-text-cursor",
+    "type": "block",
+    "title": "VFX Text Cursor",
+    "description": "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.",
+    "tags": [
+      "html-in-canvas",
+      "text",
+      "shader",
+      "cursor",
+      "chromatic"
+    ],
+    "href": "/catalog/blocks/vfx-text-cursor",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
+  },
   {
     "name": "vpn-youtube-spot",
     "type": "block",