feat(registry): add VFX and Captions block categories

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

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

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

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

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

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

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

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