Skip to content

Commit f44d53e

Browse files
miguel-heygenmiguel-heygen
authored
Merge pull request #921 from heygen-com/feat/caption-catalog-components
feat(registry): add 15 caption style catalog components
2 parents 1ac70e8 + ae193d9 commit f44d53e

65 files changed

Lines changed: 10886 additions & 2 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Clip Wipe"
3+
description: "Left-to-right clip-path wipe reveal per word"
4+
---
5+
6+
# Clip Wipe
7+
8+
Left-to-right clip-path wipe reveal per word
9+
10+
`captions` `caption-style` `wipe` `clip-path` `reveal`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-clip-wipe
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-clip-wipe.html` | `compositions/components/caption-clip-wipe.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Editorial Emphasis"
3+
description: "Dual-font system with dramatic size contrast for emphasis words"
4+
---
5+
6+
# Editorial Emphasis
7+
8+
Dual-font system with dramatic size contrast for emphasis words
9+
10+
`captions` `caption-style` `editorial` `typography` `emphasis`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-editorial-emphasis
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-editorial-emphasis.html` | `compositions/components/caption-editorial-emphasis.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Emoji Pop"
3+
description: "Emoji integration with stroked text and horizontal squeeze entrance"
4+
---
5+
6+
# Emoji Pop
7+
8+
Emoji integration with stroked text and horizontal squeeze entrance
9+
10+
`captions` `caption-style` `emoji` `social`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-emoji-pop
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-emoji-pop.html` | `compositions/components/caption-emoji-pop.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Glitch RGB"
3+
description: "RGB chromatic aberration with CRT scanline overlay"
4+
---
5+
6+
# Glitch RGB
7+
8+
RGB chromatic aberration with CRT scanline overlay
9+
10+
`captions` `caption-style` `glitch` `cyber` `tech`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-glitch-rgb
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-glitch-rgb.html` | `compositions/components/caption-glitch-rgb.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Gradient Fill"
3+
description: "Gradient-clipped text with elastic bounce entrance"
4+
---
5+
6+
# Gradient Fill
7+
8+
Gradient-clipped text with elastic bounce entrance
9+
10+
`captions` `caption-style` `gradient` `colorful`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-gradient-fill
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-gradient-fill.html` | `compositions/components/caption-gradient-fill.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Kinetic Slam"
3+
description: "Full-screen single-word display with alternating entrance directions"
4+
---
5+
6+
# Kinetic Slam
7+
8+
Full-screen single-word display with alternating entrance directions
9+
10+
`captions` `caption-style` `kinetic` `typography` `slam`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-kinetic-slam
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-kinetic-slam.html` | `compositions/components/caption-kinetic-slam.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Matrix Decode"
3+
description: "Character scramble animation before text reveal"
4+
---
5+
6+
# Matrix Decode
7+
8+
Character scramble animation before text reveal
9+
10+
`captions` `caption-style` `matrix` `scramble` `decode`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-matrix-decode
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-matrix-decode.html` | `compositions/components/caption-matrix-decode.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Neon Accent"
3+
description: "Multi-color neon glow accents with wiggle drift animation"
4+
---
5+
6+
# Neon Accent
7+
8+
Multi-color neon glow accents with wiggle drift animation
9+
10+
`captions` `caption-style` `neon` `glow` `accent`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-neon-accent
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-neon-accent.html` | `compositions/components/caption-neon-accent.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Neon Glow"
3+
description: "Cyan and magenta neon glow with keyword accent colors"
4+
---
5+
6+
# Neon Glow
7+
8+
Cyan and magenta neon glow with keyword accent colors
9+
10+
`captions` `caption-style` `neon` `glow` `gaming`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-neon-glow
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-neon-glow.html` | `compositions/components/caption-neon-glow.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
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‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: "Parallax Layers"
3+
description: "Behind-subject 3D text layering with vertical stretch effect"
4+
---
5+
6+
# Parallax Layers
7+
8+
Behind-subject 3D text layering with vertical stretch effect
9+
10+
`captions` `caption-style` `parallax` `3d` `depth`
11+
12+
<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 />
13+
14+
## Install
15+
16+
<CodeGroup>
17+
18+
```bash Terminal
19+
npx hyperframes add caption-parallax-layers
20+
```
21+
22+
</CodeGroup>
23+
24+
## Details
25+
26+
| Property | Value |
27+
| --- | --- |
28+
| Type | Component |
29+
30+
## Files
31+
32+
| File | Target | Type |
33+
| --- | --- | --- |
34+
| `caption-parallax-layers.html` | `compositions/components/caption-parallax-layers.html` | hyperframes:snippet |
35+
36+
## Usage
37+
38+
Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

0 commit comments

Comments
 (0)