feat(registry): add 15 caption style catalog components

docs/catalog/components/caption-clip-wipe.mdx

@@ -0,0 +1,38 @@
+---
+title: "Clip Wipe"
+description: "Left-to-right clip-path wipe reveal per word"
+---
+
+# Clip Wipe
+
+Left-to-right clip-path wipe reveal per word
+
+`captions` `caption-style` `wipe` `clip-path` `reveal`
+
+<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/components/caption-clip-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-clip-wipe
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-clip-wipe.html` | `compositions/components/caption-clip-wipe.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-clip-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-editorial-emphasis.mdx

@@ -0,0 +1,38 @@
+---
+title: "Editorial Emphasis"
+description: "Dual-font system with dramatic size contrast for emphasis words"
+---
+
+# Editorial Emphasis
+
+Dual-font system with dramatic size contrast for emphasis words
+
+`captions` `caption-style` `editorial` `typography` `emphasis`
+
+<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/components/caption-editorial-emphasis.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-editorial-emphasis
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-editorial-emphasis.html` | `compositions/components/caption-editorial-emphasis.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-editorial-emphasis.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-emoji-pop.mdx

@@ -0,0 +1,38 @@
+---
+title: "Emoji Pop"
+description: "Emoji integration with stroked text and horizontal squeeze entrance"
+---
+
+# Emoji Pop
+
+Emoji integration with stroked text and horizontal squeeze entrance
+
+`captions` `caption-style` `emoji` `social`
+
+<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/components/caption-emoji-pop.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-emoji-pop
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-emoji-pop.html` | `compositions/components/caption-emoji-pop.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-emoji-pop.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-glitch-rgb.mdx

@@ -0,0 +1,38 @@
+---
+title: "Glitch RGB"
+description: "RGB chromatic aberration with CRT scanline overlay"
+---
+
+# Glitch RGB
+
+RGB chromatic aberration with CRT scanline overlay
+
+`captions` `caption-style` `glitch` `cyber` `tech`
+
+<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/components/caption-glitch-rgb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-glitch-rgb
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-glitch-rgb.html` | `compositions/components/caption-glitch-rgb.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-glitch-rgb.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-gradient-fill.mdx

@@ -0,0 +1,38 @@
+---
+title: "Gradient Fill"
+description: "Gradient-clipped text with elastic bounce entrance"
+---
+
+# Gradient Fill
+
+Gradient-clipped text with elastic bounce entrance
+
+`captions` `caption-style` `gradient` `colorful`
+
+<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/components/caption-gradient-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-gradient-fill
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-gradient-fill.html` | `compositions/components/caption-gradient-fill.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-gradient-fill.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-kinetic-slam.mdx

@@ -0,0 +1,38 @@
+---
+title: "Kinetic Slam"
+description: "Full-screen single-word display with alternating entrance directions"
+---
+
+# Kinetic Slam
+
+Full-screen single-word display with alternating entrance directions
+
+`captions` `caption-style` `kinetic` `typography` `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/components/caption-kinetic-slam.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-kinetic-slam
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-kinetic-slam.html` | `compositions/components/caption-kinetic-slam.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-kinetic-slam.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-matrix-decode.mdx

@@ -0,0 +1,38 @@
+---
+title: "Matrix Decode"
+description: "Character scramble animation before text reveal"
+---
+
+# Matrix Decode
+
+Character scramble animation before text reveal
+
+`captions` `caption-style` `matrix` `scramble` `decode`
+
+<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/components/caption-matrix-decode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-matrix-decode
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-matrix-decode.html` | `compositions/components/caption-matrix-decode.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-matrix-decode.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-neon-accent.mdx

@@ -0,0 +1,38 @@
+---
+title: "Neon Accent"
+description: "Multi-color neon glow accents with wiggle drift animation"
+---
+
+# Neon Accent
+
+Multi-color neon glow accents with wiggle drift animation
+
+`captions` `caption-style` `neon` `glow` `accent`
+
+<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/components/caption-neon-accent.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-neon-accent
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-neon-accent.html` | `compositions/components/caption-neon-accent.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-neon-accent.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-neon-glow.mdx

@@ -0,0 +1,38 @@
+---
+title: "Neon Glow"
+description: "Cyan and magenta neon glow with keyword accent colors"
+---
+
+# Neon Glow
+
+Cyan and magenta neon glow with keyword accent colors
+
+`captions` `caption-style` `neon` `glow` `gaming`
+
+<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/components/caption-neon-glow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-neon-glow
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-neon-glow.html` | `compositions/components/caption-neon-glow.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-neon-glow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-parallax-layers.mdx

@@ -0,0 +1,38 @@
+---
+title: "Parallax Layers"
+description: "Behind-subject 3D text layering with vertical stretch effect"
+---
+
+# Parallax Layers
+
+Behind-subject 3D text layering with vertical stretch effect
+
+`captions` `caption-style` `parallax` `3d` `depth`
+
+<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/components/caption-parallax-layers.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-parallax-layers
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-parallax-layers.html` | `compositions/components/caption-parallax-layers.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.