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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add captions-bounce
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add captions-cinematic
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add captions-karaoke
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add captions-minimal
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add captions-slam
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add vfx-iphone-device
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add vfx-liquid-background
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add vfx-liquid-glass
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add vfx-magnetic
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add vfx-portal
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add vfx-shatter
+```
+
+
+
+## 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
+
+```
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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add vfx-text-cursor
+```
+
+
+
+## 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
+
+```
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",