mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 08:13:11 +00:00
docs: generate catalog pages for VFX and caption blocks
This commit is contained in:
Miguel Ángel
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
@@ -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>
|
||||||
|
```
|
||||||
+13
-1
@@ -148,6 +148,7 @@
|
|||||||
"catalog/blocks/north-korea-locked-down",
|
"catalog/blocks/north-korea-locked-down",
|
||||||
"catalog/blocks/nyc-paris-flight",
|
"catalog/blocks/nyc-paris-flight",
|
||||||
"catalog/blocks/ui-3d-reveal",
|
"catalog/blocks/ui-3d-reveal",
|
||||||
|
"catalog/blocks/vfx-iphone-device",
|
||||||
"catalog/blocks/vpn-youtube-spot"
|
"catalog/blocks/vpn-youtube-spot"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -168,8 +169,19 @@
|
|||||||
{
|
{
|
||||||
"group": "Blocks",
|
"group": "Blocks",
|
||||||
"pages": [
|
"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/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"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -41,6 +41,66 @@
|
|||||||
"href": "/catalog/blocks/blue-sweater-intro-video",
|
"href": "/catalog/blocks/blue-sweater-intro-video",
|
||||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
|
"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",
|
"name": "chromatic-radial-split",
|
||||||
"type": "block",
|
"type": "block",
|
||||||
@@ -542,6 +602,100 @@
|
|||||||
"href": "/catalog/blocks/ui-3d-reveal",
|
"href": "/catalog/blocks/ui-3d-reveal",
|
||||||
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
|
"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",
|
"name": "vpn-youtube-spot",
|
||||||
"type": "block",
|
"type": "block",
|
||||||
|
|||||||
Reference in New Issue
Block a user