mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-02 12:08:50 +00:00
docs: make Catalog visual and reproducible
This commit is contained in:
ukimsanov
@@ -3,23 +3,24 @@ title: "App Showcase"
|
||||
description: "Fitness app product showcase with three floating smartphone screens"
|
||||
---
|
||||
|
||||
# App Showcase
|
||||
|
||||
Fitness app product showcase with three floating smartphone screens
|
||||
|
||||
`showcase` `app` `3d`
|
||||
|
||||
<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/app-showcase.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add app-showcase
|
||||
```text
|
||||
Add the App Showcase block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add app-showcase
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add app-showcase
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5.5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `app-showcase.html` | `compositions/app-showcase.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="app-showcase" data-composition-src="compositions/app-showcase.html" data-start="0" data-duration="5.5" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "Apple Money Count"
|
||||
description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
|
||||
---
|
||||
|
||||
# Apple Money Count
|
||||
|
||||
Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.
|
||||
|
||||
`showcase` `finance` `kinetic` `youtube` `sfx`
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
@@ -19,15 +15,20 @@ Created by [Stronkter](https://x.com/Stronkter).
|
||||
|
||||
<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/apple-money-count.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-money-count
|
||||
```text
|
||||
Add the Apple Money Count block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add apple-money-count
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -37,17 +38,25 @@ npx hyperframes add apple-money-count
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `apple-money-count.html` | `compositions/apple-money-count.html` | hyperframes:composition |
|
||||
| `assets/sfx-production.wav` | `assets/sfx-production.wav` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="apple-money-count" data-composition-src="compositions/apple-money-count.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Beat Freeze Cut"
|
||||
description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
|
||||
---
|
||||
|
||||
# Beat Freeze Cut
|
||||
|
||||
A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
|
||||
|
||||
`transition` `music` `beat-driven` `freeze-frame`
|
||||
|
||||
<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/beat-freeze-cut.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add beat-freeze-cut
|
||||
```text
|
||||
Add the Beat Freeze Cut block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add beat-freeze-cut
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add beat-freeze-cut
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `beat-freeze-cut.html` | `compositions/beat-freeze-cut.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="beat-freeze-cut" data-composition-src="compositions/beat-freeze-cut.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,25 +3,26 @@ title: "Blue Sweater Intro Video"
|
||||
description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
|
||||
---
|
||||
|
||||
# Blue Sweater Intro Video
|
||||
|
||||
Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.
|
||||
|
||||
`showcase` `ai` `creator` `sfx`
|
||||
|
||||
Created by [Joe Sai](https://x.com/_blue_sweater_).
|
||||
|
||||
<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/blue-sweater-intro-video.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add blue-sweater-intro-video
|
||||
```text
|
||||
Add the Blue Sweater Intro Video block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add blue-sweater-intro-video
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -31,7 +32,7 @@ npx hyperframes add blue-sweater-intro-video
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
@@ -39,10 +40,18 @@ npx hyperframes add blue-sweater-intro-video
|
||||
| `assets/joe-sai-avatar.png` | `assets/joe-sai-avatar.png` | hyperframes:asset |
|
||||
| `assets/sfx/integrated-melodic-tech-mix.wav` | `assets/sfx/integrated-melodic-tech-mix.wav` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="blue-sweater-intro-video" data-composition-src="compositions/blue-sweater-intro-video.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Camcorder HUD"
|
||||
description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
|
||||
---
|
||||
|
||||
# Camcorder HUD
|
||||
|
||||
Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments
|
||||
|
||||
`camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`
|
||||
|
||||
<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/camcorder-hud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add camcorder-hud
|
||||
```text
|
||||
Add the Camcorder HUD block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add camcorder-hud
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add camcorder-hud
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `camcorder-hud.html` | `compositions/camcorder-hud.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="camcorder-hud" data-composition-src="compositions/camcorder-hud.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Chromatic Radial Split"
|
||||
description: "Shader transition with chromatic aberration radial split"
|
||||
---
|
||||
|
||||
# Chromatic Radial Split
|
||||
|
||||
Shader transition with chromatic aberration radial split
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/chromatic-radial-split.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add chromatic-radial-split
|
||||
```text
|
||||
Add the Chromatic Radial Split block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add chromatic-radial-split
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add chromatic-radial-split
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `chromatic-radial-split.html` | `compositions/chromatic-radial-split.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="chromatic-radial-split" data-composition-src="compositions/chromatic-radial-split.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Cinematic Zoom"
|
||||
description: "Shader transition with dramatic zoom blur"
|
||||
---
|
||||
|
||||
# Cinematic Zoom
|
||||
|
||||
Shader transition with dramatic zoom blur
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/cinematic-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add cinematic-zoom
|
||||
```text
|
||||
Add the Cinematic Zoom block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add cinematic-zoom
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add cinematic-zoom
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `cinematic-zoom.html` | `compositions/cinematic-zoom.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="cinematic-zoom" data-composition-src="compositions/cinematic-zoom.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code 3D Extrude"
|
||||
description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
|
||||
---
|
||||
|
||||
# Code 3D Extrude
|
||||
|
||||
Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.
|
||||
|
||||
`code` `code-animation` `3d` `webgl` `developer`
|
||||
|
||||
<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/code-3d-extrude.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-3d-extrude
|
||||
```text
|
||||
Add the Code 3D Extrude block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-3d-extrude
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-3d-extrude
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-3d-extrude.html` | `compositions/code-3d-extrude.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-3d-extrude" data-composition-src="compositions/code-3d-extrude.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code Diff"
|
||||
description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
|
||||
---
|
||||
|
||||
# Code Diff
|
||||
|
||||
An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
|
||||
|
||||
`code` `code-animation` `diff` `developer`
|
||||
|
||||
<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/code-diff.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-diff
|
||||
```text
|
||||
Add the Code Diff block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-diff
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-diff
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-diff.html` | `compositions/code-diff.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-diff" data-composition-src="compositions/code-diff.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code Highlight Sweep"
|
||||
description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based)."
|
||||
---
|
||||
|
||||
# Code Highlight Sweep
|
||||
|
||||
A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based).
|
||||
|
||||
`code` `code-animation` `highlight` `developer`
|
||||
|
||||
<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/code-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-highlight
|
||||
```text
|
||||
Add the Code Highlight Sweep block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-highlight
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-highlight
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-highlight.html` | `compositions/code-highlight.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-highlight" data-composition-src="compositions/code-highlight.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code Morph"
|
||||
description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
|
||||
---
|
||||
|
||||
# Code Morph
|
||||
|
||||
One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.
|
||||
|
||||
`code` `code-animation` `morph` `refactor` `developer`
|
||||
|
||||
<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/code-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-morph
|
||||
```text
|
||||
Add the Code Morph block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-morph
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-morph
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-morph.html` | `compositions/code-morph.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-morph" data-composition-src="compositions/code-morph.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code Particle Assemble"
|
||||
description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
|
||||
---
|
||||
|
||||
# Code Particle Assemble
|
||||
|
||||
Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.
|
||||
|
||||
`code` `code-animation` `particles` `gpu` `webgl` `developer`
|
||||
|
||||
<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/code-particle-assemble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-particle-assemble
|
||||
```text
|
||||
Add the Code Particle Assemble block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-particle-assemble
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-particle-assemble
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-particle-assemble.html` | `compositions/code-particle-assemble.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-particle-assemble" data-composition-src="compositions/code-particle-assemble.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code Scroll To Line"
|
||||
description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
|
||||
---
|
||||
|
||||
# Code Scroll To Line
|
||||
|
||||
The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
|
||||
|
||||
`code` `code-animation` `scroll` `developer`
|
||||
|
||||
<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/code-scroll.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-scroll
|
||||
```text
|
||||
Add the Code Scroll To Line block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-scroll
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-scroll
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-scroll.html` | `compositions/code-scroll.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-scroll" data-composition-src="compositions/code-scroll.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code Shader Dissolve"
|
||||
description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
|
||||
---
|
||||
|
||||
# Code Shader Dissolve
|
||||
|
||||
The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.
|
||||
|
||||
`code` `code-animation` `shader` `webgl` `developer`
|
||||
|
||||
<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/code-shader-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-shader-dissolve
|
||||
```text
|
||||
Add the Code Shader Dissolve block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-shader-dissolve
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-shader-dissolve
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-shader-dissolve.html` | `compositions/code-shader-dissolve.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-shader-dissolve" data-composition-src="compositions/code-shader-dissolve.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Basic"
|
||||
description: "Apple Terminal Basic profile with white background and black text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Basic"
|
||||
description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Basic
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Basic profile — clean white background with black monospace text and a solid black cursor. Per-character typing animation with output 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/blocks/code-snippet-apple-terminal-basic.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-basic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-basic
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Basic block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-basic
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-basic.html` | `compositions/code-snippet-apple-terminal-basic.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-basic"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-basic.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-basic" data-composition-src="compositions/code-snippet-apple-terminal-basic.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Basic profile — white background, black text, solid cursor
|
||||
- macOS window chrome with traffic light buttons (close, minimize, fullscreen) and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,31 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Clear Dark"
|
||||
description: "Apple Terminal Clear Dark profile with semi-transparent dark background and white text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Clear Dark"
|
||||
description: "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Clear Dark
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Clear Dark profile — translucent black background with white text and a grey cursor. Per-character typing animation with output 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/blocks/code-snippet-apple-terminal-clear-dark.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-clear-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-dark
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Clear Dark block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-dark
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-clear-dark.html` | `compositions/code-snippet-apple-terminal-clear-dark.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-clear-dark"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-clear-dark.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-clear-dark" data-composition-src="compositions/code-snippet-apple-terminal-clear-dark.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Clear Dark profile — semi-transparent black background with white text
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Clear Light"
|
||||
description: "Apple Terminal Clear Light profile with semi-transparent white background and black text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Clear Light"
|
||||
description: "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Clear Light
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Clear Light profile — translucent white background with black text and a grey cursor. Per-character typing animation with output 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/blocks/code-snippet-apple-terminal-clear-light.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-clear-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-light
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Clear Light block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-light
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-clear-light.html` | `compositions/code-snippet-apple-terminal-clear-light.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-clear-light"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-clear-light.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-clear-light" data-composition-src="compositions/code-snippet-apple-terminal-clear-light.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Clear Light profile — semi-transparent white background with black text
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Grass"
|
||||
description: "Apple Terminal Grass profile with black background and bright green text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Grass"
|
||||
description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Grass
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Grass profile — pitch-black background with pure green text and a matching cursor. Classic terminal aesthetic with per-character typing animation.
|
||||
<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/code-snippet-apple-terminal-grass.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-grass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-grass
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Grass block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-grass
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-grass.html` | `compositions/code-snippet-apple-terminal-grass.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-grass"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-grass.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-grass" data-composition-src="compositions/code-snippet-apple-terminal-grass.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Grass profile — black background with #00C100 green text
|
||||
- macOS window chrome with green-accented title bar and traffic light buttons
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,31 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Homebrew"
|
||||
description: "Apple Terminal Homebrew profile with black background, bright green text and lime cursor, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Homebrew"
|
||||
description: "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Homebrew
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Homebrew profile — black background with vivid green text and a lime `#48F800` cursor. One of the most beloved classic terminal looks.
|
||||
<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/code-snippet-apple-terminal-homebrew.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-homebrew.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-homebrew
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Homebrew block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-homebrew
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-homebrew.html` | `compositions/code-snippet-apple-terminal-homebrew.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-homebrew"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-homebrew.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-homebrew" data-composition-src="compositions/code-snippet-apple-terminal-homebrew.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Homebrew profile — black background with #00CF00 text and #48F800 cursor
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Man Page"
|
||||
description: "Apple Terminal Man Page profile with pale yellow background and black text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Man Page"
|
||||
description: "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Man Page
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Man Page profile — pale yellow `#FEF49C` background with black text. Evoking classic Unix manual pages, with per-character typing animation.
|
||||
<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/code-snippet-apple-terminal-man-page.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-man-page.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-man-page
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Man Page block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-man-page
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-man-page.html` | `compositions/code-snippet-apple-terminal-man-page.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-man-page"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-man-page.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-man-page" data-composition-src="compositions/code-snippet-apple-terminal-man-page.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Man Page profile — pale yellow background with black text
|
||||
- Shows a realistic man page output structure with sections and indented content
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,31 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Novel"
|
||||
description: "Apple Terminal Novel profile with warm parchment background and dark brown text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Novel"
|
||||
description: "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Novel
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC18A` background with deep brown text. A distinctive earthy look, with per-character typing animation.
|
||||
<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/code-snippet-apple-terminal-novel.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-novel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-novel
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Novel block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-novel
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-novel.html` | `compositions/code-snippet-apple-terminal-novel.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-novel"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-novel.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-novel" data-composition-src="compositions/code-snippet-apple-terminal-novel.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Novel profile — warm parchment background with #3E2900 dark brown text
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,31 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Ocean"
|
||||
description: "Apple Terminal Ocean profile with deep blue background and white text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Ocean"
|
||||
description: "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Ocean
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue background with crisp white text. Bold and distinctive, with per-character typing animation.
|
||||
<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/code-snippet-apple-terminal-ocean.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-ocean.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-ocean
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Ocean block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-ocean
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-ocean.html` | `compositions/code-snippet-apple-terminal-ocean.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-ocean"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-ocean.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-ocean" data-composition-src="compositions/code-snippet-apple-terminal-ocean.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Ocean profile — #224FBE blue background with white text
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,31 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Pro"
|
||||
description: "Apple Terminal Pro profile with black background, grey text and lime green cursor, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Pro"
|
||||
description: "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Pro
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Pro profile — pure black background with grey `#BBBBBB` text and a distinctive `#88FF67` lime cursor. Hacker aesthetic with per-character typing animation.
|
||||
<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/code-snippet-apple-terminal-pro.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-pro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-pro
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Pro block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-pro
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-pro.html` | `compositions/code-snippet-apple-terminal-pro.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-pro"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-pro.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-pro" data-composition-src="compositions/code-snippet-apple-terminal-pro.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Pro profile — black background, #BBBBBB grey text, #88FF67 lime cursor
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,31 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Red Sands"
|
||||
description: "Apple Terminal Red Sands profile with deep red background and sandy text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Red Sands"
|
||||
description: "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Red Sands
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7B140E` background with warm sandy `#FFE1B9` text. A bold, dramatic look with per-character typing animation.
|
||||
<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/code-snippet-apple-terminal-red-sands.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-red-sands.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-red-sands
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Red Sands block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-red-sands
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-red-sands.html` | `compositions/code-snippet-apple-terminal-red-sands.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-red-sands"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-red-sands.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-red-sands" data-composition-src="compositions/code-snippet-apple-terminal-red-sands.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Red Sands profile — #7B140E red background with #FFE1B9 sandy text
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,31 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Silver Aerogel"
|
||||
description: "Apple Terminal Silver Aerogel profile with dark grey background and white text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Silver Aerogel"
|
||||
description: "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Silver Aerogel
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `#3D3D3D` background with clean white text. A professional neutral look with per-character typing animation.
|
||||
<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/code-snippet-apple-terminal-silver-aerogel.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-silver-aerogel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-silver-aerogel
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Silver Aerogel block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-silver-aerogel
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-silver-aerogel.html` | `compositions/code-snippet-apple-terminal-silver-aerogel.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-silver-aerogel"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-silver-aerogel.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-silver-aerogel" data-composition-src="compositions/code-snippet-apple-terminal-silver-aerogel.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Silver Aerogel profile — #3D3D3D dark grey background with white text
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,31 +1,25 @@
|
||||
---
|
||||
title: "Apple Terminal Solid Colors"
|
||||
description: "Apple Terminal Solid Colors profile with deep purple background and white text, per-character typing animation."
|
||||
title: "Code Snippet - Apple Terminal Solid Colors"
|
||||
description: "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
# Apple Terminal Solid Colors
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
|
||||
macOS Terminal.app window in the built-in Solid Colors profile — vivid deep purple `#4C0099` background with white text. Eye-catching and vibrant, with per-character typing animation.
|
||||
<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/code-snippet-apple-terminal-solid-colors.mp4" autoPlay muted loop playsInline />
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
## Add it to a project
|
||||
|
||||
<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/code-snippet-apple-terminal-solid-colors.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png" autoPlay muted loop playsInline />
|
||||
### Ask your agent
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-solid-colors
|
||||
```text
|
||||
Add the Code Snippet - Apple Terminal Solid Colors block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
```bash
|
||||
npx hyperframes add code-snippet-apple-terminal-solid-colors
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-solid-colors.html` | `compositions/code-snippet-apple-terminal-solid-colors.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-apple-terminal-solid-colors"
|
||||
data-composition-src="compositions/code-snippet-apple-terminal-solid-colors.html"
|
||||
data-start="0"
|
||||
data-duration="12"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-apple-terminal-solid-colors" data-composition-src="compositions/code-snippet-apple-terminal-solid-colors.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Faithful recreation of macOS Terminal.app Solid Colors profile — #4C0099 deep purple background with white text
|
||||
- macOS window chrome with traffic light buttons and centered title bar
|
||||
- Per-character GSAP typing animation — command types out character by character
|
||||
- Output lines reveal sequentially after command executes
|
||||
- Cursor blinks three times at the end then holds steady
|
||||
- Self-contained HTML — no external assets, only GSAP CDN
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Dark 2026"
|
||||
description: "The newest VS Code dark theme with refined token scopes and updated palette."
|
||||
title: "Code Snippet - Dark 2026"
|
||||
description: "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Dark 2026
|
||||
|
||||
VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-dark-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-2026
|
||||
```text
|
||||
Add the Code Snippet - Dark 2026 block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-dark-2026
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-2026.html` | `compositions/code-snippet-dark-2026.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-dark-2026"
|
||||
data-composition-src="compositions/code-snippet-dark-2026.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-dark-2026" data-composition-src="compositions/code-snippet-dark-2026.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Dark Modern"
|
||||
description: "The default dark theme — clean and contemporary with comfortable contrast."
|
||||
title: "Code Snippet - Dark Modern"
|
||||
description: "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Dark Modern
|
||||
|
||||
VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-dark-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-modern
|
||||
```text
|
||||
Add the Code Snippet - Dark Modern block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-dark-modern
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-modern.html` | `compositions/code-snippet-dark-modern.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-dark-modern"
|
||||
data-composition-src="compositions/code-snippet-dark-modern.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-dark-modern" data-composition-src="compositions/code-snippet-dark-modern.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Dark+"
|
||||
description: "Classic dark theme with enhanced syntax highlighting for popular languages."
|
||||
title: "Code Snippet - Dark+"
|
||||
description: "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Dark+
|
||||
|
||||
VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-dark-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-plus
|
||||
```text
|
||||
Add the Code Snippet - Dark+ block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-dark-plus
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-plus.html` | `compositions/code-snippet-dark-plus.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-dark-plus"
|
||||
data-composition-src="compositions/code-snippet-dark-plus.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-dark-plus" data-composition-src="compositions/code-snippet-dark-plus.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code Snippet Flight"
|
||||
description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
|
||||
---
|
||||
|
||||
# Code Snippet Flight
|
||||
|
||||
Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.
|
||||
|
||||
`code` `code-animation` `flight` `developer`
|
||||
|
||||
<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/code-snippet-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-flight
|
||||
```text
|
||||
Add the Code Snippet Flight block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-snippet-flight
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-snippet-flight
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-flight.html` | `compositions/code-snippet-flight.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-snippet-flight" data-composition-src="compositions/code-snippet-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "High Contrast Light"
|
||||
description: "Maximum contrast light theme for accessibility."
|
||||
title: "Code Snippet - High Contrast Light"
|
||||
description: "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# High Contrast Light
|
||||
|
||||
VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-high-contrast-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-high-contrast-light
|
||||
```text
|
||||
Add the Code Snippet - High Contrast Light block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-high-contrast-light
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-high-contrast-light.html` | `compositions/code-snippet-high-contrast-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-high-contrast-light"
|
||||
data-composition-src="compositions/code-snippet-high-contrast-light.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-high-contrast-light" data-composition-src="compositions/code-snippet-high-contrast-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "High Contrast"
|
||||
description: "Maximum contrast dark theme for accessibility."
|
||||
title: "Code Snippet - High Contrast"
|
||||
description: "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# High Contrast
|
||||
|
||||
VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-high-contrast.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-high-contrast
|
||||
```text
|
||||
Add the Code Snippet - High Contrast block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-high-contrast
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-high-contrast.html` | `compositions/code-snippet-high-contrast.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-high-contrast"
|
||||
data-composition-src="compositions/code-snippet-high-contrast.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-high-contrast" data-composition-src="compositions/code-snippet-high-contrast.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Light 2026"
|
||||
description: "The newest VS Code light theme with refined token scopes and updated palette."
|
||||
title: "Code Snippet - Light 2026"
|
||||
description: "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Light 2026
|
||||
|
||||
VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-light-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-2026
|
||||
```text
|
||||
Add the Code Snippet - Light 2026 block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-light-2026
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-2026.html` | `compositions/code-snippet-light-2026.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-light-2026"
|
||||
data-composition-src="compositions/code-snippet-light-2026.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-light-2026" data-composition-src="compositions/code-snippet-light-2026.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Light Modern"
|
||||
description: "The default light theme — a fresh, modern take on the classic VS light experience."
|
||||
title: "Code Snippet - Light Modern"
|
||||
description: "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Light Modern
|
||||
|
||||
VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-light-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-modern
|
||||
```text
|
||||
Add the Code Snippet - Light Modern block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-light-modern
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-modern.html` | `compositions/code-snippet-light-modern.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-light-modern"
|
||||
data-composition-src="compositions/code-snippet-light-modern.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-light-modern" data-composition-src="compositions/code-snippet-light-modern.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Light+"
|
||||
description: "Classic light theme with enhanced syntax highlighting for popular languages."
|
||||
title: "Code Snippet - Light+"
|
||||
description: "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Light+
|
||||
|
||||
VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-light-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-plus
|
||||
```text
|
||||
Add the Code Snippet - Light+ block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-light-plus
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-plus.html` | `compositions/code-snippet-light-plus.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-light-plus"
|
||||
data-composition-src="compositions/code-snippet-light-plus.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-light-plus" data-composition-src="compositions/code-snippet-light-plus.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Monokai"
|
||||
description: "The iconic warm-toned dark theme beloved by developers worldwide."
|
||||
title: "Code Snippet - Monokai"
|
||||
description: "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Monokai
|
||||
|
||||
VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-monokai.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-monokai
|
||||
```text
|
||||
Add the Code Snippet - Monokai block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-monokai
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-monokai.html` | `compositions/code-snippet-monokai.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-monokai"
|
||||
data-composition-src="compositions/code-snippet-monokai.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-monokai" data-composition-src="compositions/code-snippet-monokai.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Solarized Light"
|
||||
description: "Ethan Schoonover's precision-engineered light color scheme."
|
||||
title: "Code Snippet - Solarized Light"
|
||||
description: "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Solarized Light
|
||||
|
||||
VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-solarized-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-solarized-light
|
||||
```text
|
||||
Add the Code Snippet - Solarized Light block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-solarized-light
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-solarized-light.html` | `compositions/code-snippet-solarized-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-solarized-light"
|
||||
data-composition-src="compositions/code-snippet-solarized-light.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-solarized-light" data-composition-src="compositions/code-snippet-solarized-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Visual Studio Dark"
|
||||
description: "The traditional Visual Studio dark color scheme."
|
||||
title: "Code Snippet - Visual Studio Dark"
|
||||
description: "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Visual Studio Dark
|
||||
|
||||
VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-visual-studio-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-visual-studio-dark
|
||||
```text
|
||||
Add the Code Snippet - Visual Studio Dark block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-visual-studio-dark
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-visual-studio-dark.html` | `compositions/code-snippet-visual-studio-dark.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-visual-studio-dark"
|
||||
data-composition-src="compositions/code-snippet-visual-studio-dark.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-visual-studio-dark" data-composition-src="compositions/code-snippet-visual-studio-dark.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -1,30 +1,25 @@
|
||||
---
|
||||
title: "Visual Studio Light"
|
||||
description: "The traditional Visual Studio light color scheme."
|
||||
title: "Code Snippet - Visual Studio Light"
|
||||
description: "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
|
||||
---
|
||||
|
||||
# Visual Studio Light
|
||||
|
||||
VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<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/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-visual-studio-light
|
||||
```text
|
||||
Add the Code Snippet - Visual Studio Light block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
```bash
|
||||
npx hyperframes add code-snippet-visual-studio-light
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -35,33 +30,25 @@ npx hyperframes add code
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-visual-studio-light.html` | `compositions/code-snippet-visual-studio-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div
|
||||
data-composition-id="code-snippet-visual-studio-light"
|
||||
data-composition-src="compositions/code-snippet-visual-studio-light.html"
|
||||
data-start="0"
|
||||
data-duration="11"
|
||||
data-track-index="1"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
></div>
|
||||
<div data-composition-id="code-snippet-visual-studio-light" data-composition-src="compositions/code-snippet-visual-studio-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Features
|
||||
## Related topics
|
||||
|
||||
- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
|
||||
- Per-character typing animation with cursor tracking and active line highlight
|
||||
- Colors sourced from official `microsoft/vscode` built-in theme JSON
|
||||
- 3D perspective tilt at the end of the typing sequence
|
||||
- Terminal panel with mock test output
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Code Typing"
|
||||
description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
|
||||
---
|
||||
|
||||
# Code Typing
|
||||
|
||||
Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
|
||||
|
||||
`code` `code-animation` `typing` `developer`
|
||||
|
||||
<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/code-typing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-typing
|
||||
```text
|
||||
Add the Code Typing block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add code-typing
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add code-typing
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-typing.html` | `compositions/code-typing.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="code-typing" data-composition-src="compositions/code-typing.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Cross Warp Morph"
|
||||
description: "Shader transition with cross-warped morphing"
|
||||
---
|
||||
|
||||
# Cross Warp Morph
|
||||
|
||||
Shader transition with cross-warped morphing
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/cross-warp-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add cross-warp-morph
|
||||
```text
|
||||
Add the Cross Warp Morph block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add cross-warp-morph
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add cross-warp-morph
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `cross-warp-morph.html` | `compositions/cross-warp-morph.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="cross-warp-morph" data-composition-src="compositions/cross-warp-morph.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Data Chart"
|
||||
description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
|
||||
---
|
||||
|
||||
# Data Chart
|
||||
|
||||
Animated bar + line chart with staggered reveal, NYT-style typography, and value labels
|
||||
|
||||
`data` `chart` `statistics`
|
||||
|
||||
<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/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add data-chart
|
||||
```text
|
||||
Add the Data Chart block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add data-chart
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add data-chart
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 15s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `data-chart.html` | `compositions/data-chart.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="data-chart" data-composition-src="compositions/data-chart.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Domain Warp Dissolve"
|
||||
description: "Shader transition with fractal noise domain warping"
|
||||
---
|
||||
|
||||
# Domain Warp Dissolve
|
||||
|
||||
Shader transition with fractal noise domain warping
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/domain-warp-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add domain-warp-dissolve
|
||||
```text
|
||||
Add the Domain Warp Dissolve block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add domain-warp-dissolve
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add domain-warp-dissolve
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `domain-warp-dissolve.html` | `compositions/domain-warp-dissolve.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="domain-warp-dissolve" data-composition-src="compositions/domain-warp-dissolve.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Editorial Flash Overlay"
|
||||
description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
|
||||
---
|
||||
|
||||
# Editorial Flash Overlay
|
||||
|
||||
Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal
|
||||
|
||||
`flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`
|
||||
|
||||
<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/editorial-flash-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add editorial-flash-overlay
|
||||
```text
|
||||
Add the Editorial Flash Overlay block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add editorial-flash-overlay
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add editorial-flash-overlay
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `editorial-flash-overlay.html` | `compositions/editorial-flash-overlay.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="editorial-flash-overlay" data-composition-src="compositions/editorial-flash-overlay.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Flash Through White"
|
||||
description: "Shader transition with white flash crossfade"
|
||||
---
|
||||
|
||||
# Flash Through White
|
||||
|
||||
Shader transition with white flash crossfade
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/flash-through-white.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flash-through-white
|
||||
```text
|
||||
Add the Flash Through White block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add flash-through-white
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add flash-through-white
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flash-through-white.html` | `compositions/flash-through-white.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="flash-through-white" data-composition-src="compositions/flash-through-white.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Flowchart Vertical"
|
||||
description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
||||
---
|
||||
|
||||
# Flowchart Vertical
|
||||
|
||||
Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
|
||||
|
||||
`diagram` `flowchart` `interactive` `portrait`
|
||||
|
||||
<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/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flowchart-vertical
|
||||
```text
|
||||
Add the Flowchart Vertical block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add flowchart-vertical
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add flowchart-vertical
|
||||
| Dimensions | 1440×2560 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="flowchart-vertical" data-composition-src="compositions/flowchart-vertical.html" data-start="0" data-duration="12" data-track-index="1" data-width="1440" data-height="2560"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Flowchart"
|
||||
description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
||||
---
|
||||
|
||||
# Flowchart
|
||||
|
||||
Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
|
||||
|
||||
`diagram` `flowchart` `interactive`
|
||||
|
||||
<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/flowchart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flowchart
|
||||
```text
|
||||
Add the Flowchart block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add flowchart
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add flowchart
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flowchart.html` | `compositions/flowchart.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="flowchart" data-composition-src="compositions/flowchart.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Freeze-Frame Dressing"
|
||||
description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
|
||||
---
|
||||
|
||||
# Freeze-Frame Dressing
|
||||
|
||||
Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject
|
||||
|
||||
`freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`
|
||||
|
||||
<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/freeze-frame-dressing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add freeze-frame-dressing
|
||||
```text
|
||||
Add the Freeze-Frame Dressing block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add freeze-frame-dressing
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add freeze-frame-dressing
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `freeze-frame-dressing.html` | `compositions/freeze-frame-dressing.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="freeze-frame-dressing" data-composition-src="compositions/freeze-frame-dressing.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Glitch"
|
||||
description: "Shader transition with digital glitch artifacts"
|
||||
---
|
||||
|
||||
# Glitch
|
||||
|
||||
Shader transition with digital glitch artifacts
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/glitch.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add glitch
|
||||
```text
|
||||
Add the Glitch block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add glitch
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add glitch
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `glitch.html` | `compositions/glitch.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="glitch" data-composition-src="compositions/glitch.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Gravitational Lens"
|
||||
description: "Shader transition with gravitational lensing distortion"
|
||||
---
|
||||
|
||||
# Gravitational Lens
|
||||
|
||||
Shader transition with gravitational lensing distortion
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/gravitational-lens.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add gravitational-lens
|
||||
```text
|
||||
Add the Gravitational Lens block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add gravitational-lens
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add gravitational-lens
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `gravitational-lens.html` | `compositions/gravitational-lens.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="gravitational-lens" data-composition-src="compositions/gravitational-lens.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Sketched Frame"
|
||||
description: "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)"
|
||||
---
|
||||
|
||||
# Sketched Frame
|
||||
|
||||
Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)
|
||||
|
||||
`handwritten` `frame` `media`
|
||||
|
||||
<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/hw-frame.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-frame
|
||||
```text
|
||||
Add the Sketched Frame block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add hw-frame
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,17 +30,25 @@ npx hyperframes add hw-frame
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-frame.html` | `compositions/hw-frame.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="hw-frame" data-composition-src="compositions/hw-frame.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Text Along a Path"
|
||||
description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
|
||||
---
|
||||
|
||||
# Text Along a Path
|
||||
|
||||
Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input
|
||||
|
||||
`handwritten` `typography` `path` `overlay`
|
||||
|
||||
<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/hw-path-text.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-path-text
|
||||
```text
|
||||
Add the Text Along a Path block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add hw-path-text
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,17 +30,25 @@ npx hyperframes add hw-path-text
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-path-text.html` | `compositions/hw-path-text.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="hw-path-text" data-composition-src="compositions/hw-path-text.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Hand-Drawn Flowchart"
|
||||
description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
|
||||
---
|
||||
|
||||
# Hand-Drawn Flowchart
|
||||
|
||||
Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list
|
||||
|
||||
`handwritten` `diagram` `data-viz` `overlay`
|
||||
|
||||
<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/hw-pipeline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-pipeline
|
||||
```text
|
||||
Add the Hand-Drawn Flowchart block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add hw-pipeline
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,17 +30,25 @@ npx hyperframes add hw-pipeline
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-pipeline.html` | `compositions/hw-pipeline.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="hw-pipeline" data-composition-src="compositions/hw-pipeline.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Scribble Transition"
|
||||
description: "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears"
|
||||
---
|
||||
|
||||
# Scribble Transition
|
||||
|
||||
Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears
|
||||
|
||||
`handwritten` `transition` `wipe`
|
||||
|
||||
<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/hw-scribble-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-scribble-transition
|
||||
```text
|
||||
Add the Scribble Transition block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add hw-scribble-transition
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add hw-scribble-transition
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 2.2s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-scribble-transition.html` | `compositions/hw-scribble-transition.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="hw-scribble-transition" data-composition-src="compositions/hw-scribble-transition.html" data-start="0" data-duration="2.2" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Speech Bubble"
|
||||
description: "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils"
|
||||
---
|
||||
|
||||
# Speech Bubble
|
||||
|
||||
Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils
|
||||
|
||||
`handwritten` `speech-bubble` `overlay`
|
||||
|
||||
<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/hw-text-cloud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-text-cloud
|
||||
```text
|
||||
Add the Speech Bubble block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add hw-text-cloud
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,17 +30,25 @@ npx hyperframes add hw-text-cloud
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-text-cloud.html` | `compositions/hw-text-cloud.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="hw-text-cloud" data-composition-src="compositions/hw-text-cloud.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Handwritten Title"
|
||||
description: "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
|
||||
---
|
||||
|
||||
# Handwritten Title
|
||||
|
||||
Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils
|
||||
|
||||
`handwritten` `typography` `title-card` `overlay`
|
||||
|
||||
<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/hw-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-title
|
||||
```text
|
||||
Add the Handwritten Title block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add hw-title
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,17 +30,25 @@ npx hyperframes add hw-title
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-title.html` | `compositions/hw-title.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="hw-title" data-composition-src="compositions/hw-title.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Instagram Follow"
|
||||
description: "Animated Instagram follow overlay with profile card and follow button"
|
||||
---
|
||||
|
||||
# Instagram Follow
|
||||
|
||||
Animated Instagram follow overlay with profile card and follow button
|
||||
|
||||
`social` `overlay` `instagram`
|
||||
|
||||
<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/instagram-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add instagram-follow
|
||||
```text
|
||||
Add the Instagram Follow block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add instagram-follow
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,17 +30,25 @@ npx hyperframes add instagram-follow
|
||||
| Dimensions | 1080×1920 |
|
||||
| Duration | 4.5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `instagram-follow.html` | `compositions/instagram-follow.html` | hyperframes:composition |
|
||||
| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="instagram-follow" data-composition-src="compositions/instagram-follow.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1080" data-height="1920"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "iOS 26 Liquid Glass Home Screen"
|
||||
description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
|
||||
---
|
||||
|
||||
# iOS 26 Liquid Glass Home Screen
|
||||
|
||||
3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.
|
||||
|
||||
`liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`
|
||||
|
||||
<Warning>
|
||||
@@ -15,15 +11,20 @@ description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons
|
||||
|
||||
<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/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add ios26-liquid-glass
|
||||
```text
|
||||
Add the iOS 26 Liquid Glass Home Screen block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add ios26-liquid-glass
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -33,18 +34,52 @@ npx hyperframes add ios26-liquid-glass
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 15s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
|
||||
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
|
||||
| `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
|
||||
| `assets/icons/weather.jpg` | `assets/icons/weather.jpg` | hyperframes:asset |
|
||||
| `assets/icons/stocks.jpg` | `assets/icons/stocks.jpg` | hyperframes:asset |
|
||||
| `assets/icons/find-my.jpg` | `assets/icons/find-my.jpg` | hyperframes:asset |
|
||||
| `assets/icons/home.jpg` | `assets/icons/home.jpg` | hyperframes:asset |
|
||||
| `assets/icons/books.jpg` | `assets/icons/books.jpg` | hyperframes:asset |
|
||||
| `assets/icons/itunes-store.jpg` | `assets/icons/itunes-store.jpg` | hyperframes:asset |
|
||||
| `assets/icons/fitness.jpg` | `assets/icons/fitness.jpg` | hyperframes:asset |
|
||||
| `assets/icons/watch.jpg` | `assets/icons/watch.jpg` | hyperframes:asset |
|
||||
| `assets/icons/contacts.jpg` | `assets/icons/contacts.jpg` | hyperframes:asset |
|
||||
| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
|
||||
| `assets/icons/translate.jpg` | `assets/icons/translate.jpg` | hyperframes:asset |
|
||||
| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
|
||||
| `assets/icons/chatgpt.jpg` | `assets/icons/chatgpt.jpg` | hyperframes:asset |
|
||||
| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
|
||||
| `assets/icons/instagram.jpg` | `assets/icons/instagram.jpg` | hyperframes:asset |
|
||||
| `assets/icons/x.jpg` | `assets/icons/x.jpg` | hyperframes:asset |
|
||||
| `assets/icons/proton-mail.jpg` | `assets/icons/proton-mail.jpg` | hyperframes:asset |
|
||||
| `assets/icons/gmail.jpg` | `assets/icons/gmail.jpg` | hyperframes:asset |
|
||||
| `assets/icons/revolut.jpg` | `assets/icons/revolut.jpg` | hyperframes:asset |
|
||||
| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
|
||||
| `assets/icons/phone.jpg` | `assets/icons/phone.jpg` | hyperframes:asset |
|
||||
| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
|
||||
| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
|
||||
| `assets/icons/whatsapp.jpg` | `assets/icons/whatsapp.jpg` | hyperframes:asset |
|
||||
| `assets/icons/notify-messages.jpg` | `assets/icons/notify-messages.jpg` | hyperframes:asset |
|
||||
| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="ios26-liquid-glass" data-composition-src="compositions/ios26-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Light Leak"
|
||||
description: "Shader transition with cinematic light leak overlay"
|
||||
---
|
||||
|
||||
# Light Leak
|
||||
|
||||
Shader transition with cinematic light leak overlay
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/light-leak.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add light-leak
|
||||
```text
|
||||
Add the Light Leak block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add light-leak
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add light-leak
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `light-leak.html` | `compositions/light-leak.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="light-leak" data-composition-src="compositions/light-leak.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "Liquid Glass Context Menu"
|
||||
description: "Frosted glass context menu panel drifting over an aurora shader background"
|
||||
---
|
||||
|
||||
# Liquid Glass Context Menu
|
||||
|
||||
Frosted glass context menu panel drifting over an aurora shader background
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
|
||||
<Warning>
|
||||
@@ -15,15 +11,20 @@ Frosted glass context menu panel drifting over an aurora shader 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/liquid-glass-context-menu.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-context-menu
|
||||
```text
|
||||
Add the Liquid Glass Context Menu block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add liquid-glass-context-menu
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -33,16 +34,25 @@ npx hyperframes add liquid-glass-context-menu
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-context-menu.html` | `compositions/liquid-glass-context-menu.html` | hyperframes:composition |
|
||||
| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="liquid-glass-context-menu" data-composition-src="compositions/liquid-glass-context-menu.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "Liquid Glass Media Controls"
|
||||
description: "Frosted glass media control panels spreading over an aurora shader background"
|
||||
---
|
||||
|
||||
# Liquid Glass Media Controls
|
||||
|
||||
Frosted glass media control panels spreading over an aurora shader background
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
|
||||
<Warning>
|
||||
@@ -15,15 +11,20 @@ Frosted glass media control panels spreading over an aurora shader 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/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-media-controls
|
||||
```text
|
||||
Add the Liquid Glass Media Controls block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add liquid-glass-media-controls
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -33,16 +34,25 @@ npx hyperframes add liquid-glass-media-controls
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-media-controls.html` | `compositions/liquid-glass-media-controls.html` | hyperframes:composition |
|
||||
| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="liquid-glass-media-controls" data-composition-src="compositions/liquid-glass-media-controls.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "Liquid Glass Notification"
|
||||
description: "Frosted glass notification cards floating over an aurora shader background"
|
||||
---
|
||||
|
||||
# Liquid Glass Notification
|
||||
|
||||
Frosted glass notification cards floating over an aurora shader background
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
|
||||
<Warning>
|
||||
@@ -15,15 +11,20 @@ Frosted glass notification cards floating over an aurora shader 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/liquid-glass-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-notification
|
||||
```text
|
||||
Add the Liquid Glass Notification block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add liquid-glass-notification
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -33,16 +34,26 @@ npx hyperframes add liquid-glass-notification
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
|
||||
| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
|
||||
| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="liquid-glass-notification" data-composition-src="compositions/liquid-glass-notification.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "Liquid Glass Widgets"
|
||||
description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
|
||||
---
|
||||
|
||||
# Liquid Glass Widgets
|
||||
|
||||
Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
|
||||
<Warning>
|
||||
@@ -15,15 +11,20 @@ Frosted glass stat cards, showcase panel and pill chips over an aurora shader ba
|
||||
|
||||
<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/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-widgets
|
||||
```text
|
||||
Add the Liquid Glass Widgets block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add liquid-glass-widgets
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -33,16 +34,26 @@ npx hyperframes add liquid-glass-widgets
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-widgets.html` | `compositions/liquid-glass-widgets.html` | hyperframes:composition |
|
||||
| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
|
||||
| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="liquid-glass-widgets" data-composition-src="compositions/liquid-glass-widgets.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Logo Outro"
|
||||
description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
|
||||
---
|
||||
|
||||
# Logo Outro
|
||||
|
||||
Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill
|
||||
|
||||
`branding` `outro` `logo`
|
||||
|
||||
<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/logo-outro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add logo-outro
|
||||
```text
|
||||
Add the Logo Outro block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add logo-outro
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add logo-outro
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `logo-outro.html` | `compositions/logo-outro.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="logo-outro" data-composition-src="compositions/logo-outro.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — BILD Style"
|
||||
description: "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
|
||||
---
|
||||
|
||||
# Lower Third — BILD Style
|
||||
|
||||
News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.
|
||||
|
||||
`broadcast` `lower-third` `news` `overlay`
|
||||
|
||||
<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/lower-third-bild.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lower-third-bild
|
||||
```text
|
||||
Add the Lower Third — BILD Style block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lower-third-bild
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,7 +30,7 @@ npx hyperframes add lower-third-bild
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
@@ -37,10 +38,18 @@ npx hyperframes add lower-third-bild
|
||||
| `assets/fonts/BarlowCondensed-Bold.woff2` | `compositions/assets/fonts/BarlowCondensed-Bold.woff2` | hyperframes:asset |
|
||||
| `assets/fonts/BarlowCondensed-ExtraBold.woff2` | `compositions/assets/fonts/BarlowCondensed-ExtraBold.woff2` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lower-third-bild" data-composition-src="compositions/lower-third-bild.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Accent Underline"
|
||||
description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
|
||||
---
|
||||
|
||||
# Lower Third — Accent Underline
|
||||
|
||||
Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `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/lt-accent-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-accent-underline
|
||||
```text
|
||||
Add the Lower Third — Accent Underline block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-accent-underline
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-accent-underline
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-accent-underline.html` | `compositions/lt-accent-underline.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-accent-underline" data-composition-src="compositions/lt-accent-underline.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Bold Block"
|
||||
description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
|
||||
---
|
||||
|
||||
# Lower Third — Bold Block
|
||||
|
||||
High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-bold-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-bold-block
|
||||
```text
|
||||
Add the Lower Third — Bold Block block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-bold-block
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-bold-block
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-bold-block.html` | `compositions/lt-bold-block.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-bold-block" data-composition-src="compositions/lt-bold-block.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Clean Bar"
|
||||
description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
|
||||
---
|
||||
|
||||
# Lower Third — Clean Bar
|
||||
|
||||
Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview`
|
||||
|
||||
<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/lt-clean-bar.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-clean-bar
|
||||
```text
|
||||
Add the Lower Third — Clean Bar block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-clean-bar
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-clean-bar
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-clean-bar.html` | `compositions/lt-clean-bar.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-clean-bar" data-composition-src="compositions/lt-clean-bar.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Color Block"
|
||||
description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
|
||||
---
|
||||
|
||||
# Lower Third — Color Block
|
||||
|
||||
High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-color-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-color-block
|
||||
```text
|
||||
Add the Lower Third — Color Block block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-color-block
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-color-block
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-color-block.html` | `compositions/lt-color-block.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-color-block" data-composition-src="compositions/lt-color-block.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Dark Card"
|
||||
description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
|
||||
---
|
||||
|
||||
# Lower Third — Dark Card
|
||||
|
||||
Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `dark`
|
||||
|
||||
<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/lt-dark-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-dark-card
|
||||
```text
|
||||
Add the Lower Third — Dark Card block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-dark-card
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-dark-card
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-dark-card.html` | `compositions/lt-dark-card.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-dark-card" data-composition-src="compositions/lt-dark-card.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Kicker Name"
|
||||
description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
|
||||
---
|
||||
|
||||
# Lower Third — Kicker Name
|
||||
|
||||
Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-kicker-name.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-kicker-name
|
||||
```text
|
||||
Add the Lower Third — Kicker Name block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-kicker-name
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-kicker-name
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-kicker-name.html` | `compositions/lt-kicker-name.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-kicker-name" data-composition-src="compositions/lt-kicker-name.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Mask Reveal"
|
||||
description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
|
||||
---
|
||||
|
||||
# Lower Third — Mask Reveal
|
||||
|
||||
Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-mask-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-mask-reveal
|
||||
```text
|
||||
Add the Lower Third — Mask Reveal block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-mask-reveal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-mask-reveal
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-mask-reveal.html` | `compositions/lt-mask-reveal.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-mask-reveal" data-composition-src="compositions/lt-mask-reveal.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Side Rule"
|
||||
description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
|
||||
---
|
||||
|
||||
# Lower Third — Side Rule
|
||||
|
||||
Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `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/lt-side-rule.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-side-rule
|
||||
```text
|
||||
Add the Lower Third — Side Rule block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-side-rule
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-side-rule
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-side-rule.html` | `compositions/lt-side-rule.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-side-rule" data-composition-src="compositions/lt-side-rule.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Soft Pill"
|
||||
description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
|
||||
---
|
||||
|
||||
# Lower Third — Soft Pill
|
||||
|
||||
Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `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/lt-soft-pill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-soft-pill
|
||||
```text
|
||||
Add the Lower Third — Soft Pill block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-soft-pill
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-soft-pill
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-soft-pill.html` | `compositions/lt-soft-pill.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-soft-pill" data-composition-src="compositions/lt-soft-pill.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Lower Third — Stack Bars"
|
||||
description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
|
||||
---
|
||||
|
||||
# Lower Third — Stack Bars
|
||||
|
||||
Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<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/lt-stack-bars.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-stack-bars
|
||||
```text
|
||||
Add the Lower Third — Stack Bars block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add lt-stack-bars
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add lt-stack-bars
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-stack-bars.html` | `compositions/lt-stack-bars.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="lt-stack-bars" data-composition-src="compositions/lt-stack-bars.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "macOS Notification"
|
||||
description: "Animated macOS-style notification banner with app icon and message"
|
||||
---
|
||||
|
||||
# macOS Notification
|
||||
|
||||
Animated macOS-style notification banner with app icon and message
|
||||
|
||||
`social` `overlay` `notification`
|
||||
|
||||
<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/macos-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add macos-notification
|
||||
```text
|
||||
Add the macOS Notification block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add macos-notification
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add macos-notification
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `macos-notification.html` | `compositions/macos-notification.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="macos-notification" data-composition-src="compositions/macos-notification.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "macOS Tahoe Liquid Glass Desktop"
|
||||
description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
|
||||
---
|
||||
|
||||
# macOS Tahoe Liquid Glass Desktop
|
||||
|
||||
3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
|
||||
|
||||
`html-in-canvas` `3d` `macos` `tahoe` `gltf`
|
||||
|
||||
<Warning>
|
||||
@@ -15,15 +11,20 @@ description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finde
|
||||
|
||||
<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/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add macos-tahoe-liquid-glass
|
||||
```text
|
||||
Add the macOS Tahoe Liquid Glass Desktop block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add macos-tahoe-liquid-glass
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -33,18 +34,42 @@ npx hyperframes add macos-tahoe-liquid-glass
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 15s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `macos-tahoe-liquid-glass.html` | `compositions/macos-tahoe-liquid-glass.html` | hyperframes:composition |
|
||||
| `models/macbook.glb` | `models/macbook.glb` | hyperframes:asset |
|
||||
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
|
||||
| `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | hyperframes:asset |
|
||||
| `assets/icons/finder.png` | `assets/icons/finder.png` | hyperframes:asset |
|
||||
| `assets/icons/safari.jpg` | `assets/icons/safari.jpg` | hyperframes:asset |
|
||||
| `assets/icons/mail.jpg` | `assets/icons/mail.jpg` | hyperframes:asset |
|
||||
| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
|
||||
| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
|
||||
| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
|
||||
| `assets/icons/toast-messages.jpg` | `assets/icons/toast-messages.jpg` | hyperframes:asset |
|
||||
| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
|
||||
| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
|
||||
| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
|
||||
| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
|
||||
| `assets/icons/dock-finder.png` | `assets/icons/dock-finder.png` | hyperframes:asset |
|
||||
| `assets/icons/dock-safari.jpg` | `assets/icons/dock-safari.jpg` | hyperframes:asset |
|
||||
| `assets/icons/dock-mail.jpg` | `assets/icons/dock-mail.jpg` | hyperframes:asset |
|
||||
| `assets/icons/dock-photos.jpg` | `assets/icons/dock-photos.jpg` | hyperframes:asset |
|
||||
| `assets/icons/dock-music.jpg` | `assets/icons/dock-music.jpg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="macos-tahoe-liquid-glass" data-composition-src="compositions/macos-tahoe-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Minimal Gradient Background"
|
||||
description: "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode"
|
||||
---
|
||||
|
||||
# Minimal Gradient Background
|
||||
|
||||
Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode
|
||||
|
||||
`background` `gradient` `minimal` `professional` `presentation`
|
||||
|
||||
<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/mk-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-background
|
||||
```text
|
||||
Add the Minimal Gradient Background block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add mk-background
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add mk-background
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 10s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-background.html` | `compositions/mk-background.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="mk-background" data-composition-src="compositions/mk-background.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Word-Sweep Highlight"
|
||||
description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
|
||||
---
|
||||
|
||||
# Word-Sweep Highlight
|
||||
|
||||
A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover
|
||||
|
||||
`typography` `karaoke` `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/mk-callout-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-callout-highlight
|
||||
```text
|
||||
Add the Word-Sweep Highlight block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add mk-callout-highlight
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add mk-callout-highlight
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-callout-highlight.html` | `compositions/mk-callout-highlight.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="mk-callout-highlight" data-composition-src="compositions/mk-callout-highlight.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Text Clone Wall Transition"
|
||||
description: "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
|
||||
---
|
||||
|
||||
# Text Clone Wall Transition
|
||||
|
||||
Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered
|
||||
|
||||
`transition` `typography` `wipe`
|
||||
|
||||
<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/mk-clone-wall-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-clone-wall-transition
|
||||
```text
|
||||
Add the Text Clone Wall Transition block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add mk-clone-wall-transition
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add mk-clone-wall-transition
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 2.4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-clone-wall-transition.html` | `compositions/mk-clone-wall-transition.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="mk-clone-wall-transition" data-composition-src="compositions/mk-clone-wall-transition.html" data-start="0" data-duration="2.4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Minimal Line Graph"
|
||||
description: "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend"
|
||||
---
|
||||
|
||||
# Minimal Line Graph
|
||||
|
||||
One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend
|
||||
|
||||
`data-viz` `chart` `graph` `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/mk-line-graph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-line-graph
|
||||
```text
|
||||
Add the Minimal Line Graph block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add mk-line-graph
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add mk-line-graph
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-line-graph.html` | `compositions/mk-line-graph.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="mk-line-graph" data-composition-src="compositions/mk-line-graph.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Rounded Media Grid"
|
||||
description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
|
||||
---
|
||||
|
||||
# Rounded Media Grid
|
||||
|
||||
N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle
|
||||
|
||||
`placeholder` `media` `grid` `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/mk-placeholder-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-placeholder-grid
|
||||
```text
|
||||
Add the Rounded Media Grid block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add mk-placeholder-grid
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add mk-placeholder-grid
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-placeholder-grid.html` | `compositions/mk-placeholder-grid.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="mk-placeholder-grid" data-composition-src="compositions/mk-placeholder-grid.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Count-Up Stat Card"
|
||||
description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
|
||||
---
|
||||
|
||||
# Count-Up Stat Card
|
||||
|
||||
Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes
|
||||
|
||||
`data-viz` `stat` `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/mk-progress-stat.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-progress-stat
|
||||
```text
|
||||
Add the Count-Up Stat Card block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add mk-progress-stat
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add mk-progress-stat
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-progress-stat.html` | `compositions/mk-progress-stat.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="mk-progress-stat" data-composition-src="compositions/mk-progress-stat.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Specs Checklist"
|
||||
description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
|
||||
---
|
||||
|
||||
# Specs Checklist
|
||||
|
||||
Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes
|
||||
|
||||
`data-viz` `list` `minimal` `professional`
|
||||
|
||||
<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/mk-specs-list.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-specs-list
|
||||
```text
|
||||
Add the Specs Checklist block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add mk-specs-list
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add mk-specs-list
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-specs-list.html` | `compositions/mk-specs-list.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="mk-specs-list" data-composition-src="compositions/mk-specs-list.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "News Ticker"
|
||||
description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
|
||||
---
|
||||
|
||||
# News Ticker
|
||||
|
||||
Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.
|
||||
|
||||
`lower-third` `overlay` `news` `ticker`
|
||||
|
||||
<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/news-ticker.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add news-ticker
|
||||
```text
|
||||
Add the News Ticker block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add news-ticker
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add news-ticker
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `news-ticker.html` | `compositions/news-ticker.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="news-ticker" data-composition-src="compositions/news-ticker.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "North Korea Locked Down"
|
||||
description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
|
||||
---
|
||||
|
||||
# North Korea Locked Down
|
||||
|
||||
Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.
|
||||
|
||||
`showcase` `map` `annotation` `youtube` `kinetic`
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
@@ -19,15 +15,20 @@ use 📷HyperFrames by HeyGen and Image Gen if you need it for assets or like p
|
||||
|
||||
<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/north-korea-locked-down.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add north-korea-locked-down
|
||||
```text
|
||||
Add the North Korea Locked Down block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add north-korea-locked-down
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -37,17 +38,25 @@ npx hyperframes add north-korea-locked-down
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `north-korea-locked-down.html` | `compositions/north-korea-locked-down.html` | hyperframes:composition |
|
||||
| `assets/korea-map.png` | `assets/korea-map.png` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="north-korea-locked-down" data-composition-src="compositions/north-korea-locked-down.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,10 +3,6 @@ title: "NYC Paris Flight"
|
||||
description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
|
||||
---
|
||||
|
||||
# NYC Paris Flight
|
||||
|
||||
Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.
|
||||
|
||||
`showcase` `travel` `map` `youtube` `sfx`
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
@@ -19,15 +15,20 @@ Created by [Stronkter](https://x.com/Stronkter).
|
||||
|
||||
<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/nyc-paris-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add nyc-paris-flight
|
||||
```text
|
||||
Add the NYC Paris Flight block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add nyc-paris-flight
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -37,7 +38,7 @@ npx hyperframes add nyc-paris-flight
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
@@ -45,10 +46,18 @@ npx hyperframes add nyc-paris-flight
|
||||
| `assets/map-nyc-paris.png` | `assets/map-nyc-paris.png` | hyperframes:asset |
|
||||
| `assets/sfx-mix.wav` | `assets/sfx-mix.wav` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="nyc-paris-flight" data-composition-src="compositions/nyc-paris-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Organic Light Leak Overlay"
|
||||
description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
|
||||
---
|
||||
|
||||
# Organic Light Leak Overlay
|
||||
|
||||
Finite CSS light-leak overlay for memory beats and motivated transitions
|
||||
|
||||
`light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`
|
||||
|
||||
<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/organic-light-leak-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add organic-light-leak-overlay
|
||||
```text
|
||||
Add the Organic Light Leak Overlay block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add organic-light-leak-overlay
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add organic-light-leak-overlay
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `organic-light-leak-overlay.html` | `compositions/organic-light-leak-overlay.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="organic-light-leak-overlay" data-composition-src="compositions/organic-light-leak-overlay.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Reddit Post Card"
|
||||
description: "Animated Reddit post card overlay with upvotes and comments"
|
||||
---
|
||||
|
||||
# Reddit Post Card
|
||||
|
||||
Animated Reddit post card overlay with upvotes and comments
|
||||
|
||||
`social` `overlay` `reddit`
|
||||
|
||||
<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/reddit-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add reddit-post
|
||||
```text
|
||||
Add the Reddit Post Card block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add reddit-post
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add reddit-post
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `reddit-post.html` | `compositions/reddit-post.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="reddit-post" data-composition-src="compositions/reddit-post.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Ridged Burn"
|
||||
description: "Shader transition with ridged turbulence burn effect"
|
||||
---
|
||||
|
||||
# Ridged Burn
|
||||
|
||||
Shader transition with ridged turbulence burn effect
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/ridged-burn.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add ridged-burn
|
||||
```text
|
||||
Add the Ridged Burn block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add ridged-burn
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add ridged-burn
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `ridged-burn.html` | `compositions/ridged-burn.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="ridged-burn" data-composition-src="compositions/ridged-burn.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Ripple Waves"
|
||||
description: "Shader transition with concentric ripple wave distortion"
|
||||
---
|
||||
|
||||
# Ripple Waves
|
||||
|
||||
Shader transition with concentric ripple wave distortion
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/ripple-waves.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add ripple-waves
|
||||
```text
|
||||
Add the Ripple Waves block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add ripple-waves
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add ripple-waves
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `ripple-waves.html` | `compositions/ripple-waves.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="ripple-waves" data-composition-src="compositions/ripple-waves.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "SDF Iris"
|
||||
description: "Shader transition with signed distance field iris reveal"
|
||||
---
|
||||
|
||||
# SDF Iris
|
||||
|
||||
Shader transition with signed distance field iris reveal
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/sdf-iris.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add sdf-iris
|
||||
```text
|
||||
Add the SDF Iris block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add sdf-iris
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add sdf-iris
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `sdf-iris.html` | `compositions/sdf-iris.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="sdf-iris" data-composition-src="compositions/sdf-iris.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Spain Map"
|
||||
description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
|
||||
---
|
||||
|
||||
# Spain Map
|
||||
|
||||
Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection
|
||||
|
||||
`data` `map` `geography` `spain` `europe` `choropleth`
|
||||
|
||||
<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/spain-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add spain-map
|
||||
```text
|
||||
Add the Spain Map block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add spain-map
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add spain-map
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `spain-map.html` | `compositions/spain-map.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="spain-map" data-composition-src="compositions/spain-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Spotify Now Playing"
|
||||
description: "Animated Spotify now-playing card with album art and progress bar"
|
||||
---
|
||||
|
||||
# Spotify Now Playing
|
||||
|
||||
Animated Spotify now-playing card with album art and progress bar
|
||||
|
||||
`social` `overlay` `spotify`
|
||||
|
||||
<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/spotify-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add spotify-card
|
||||
```text
|
||||
Add the Spotify Now Playing block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add spotify-card
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add spotify-card
|
||||
| Dimensions | 1080×1920 |
|
||||
| Duration | 5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `spotify-card.html` | `compositions/spotify-card.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="spotify-card" data-composition-src="compositions/spotify-card.html" data-start="0" data-duration="5" data-track-index="1" data-width="1080" data-height="1920"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Swirl Vortex"
|
||||
description: "Shader transition with swirling vortex distortion"
|
||||
---
|
||||
|
||||
# Swirl Vortex
|
||||
|
||||
Shader transition with swirling vortex distortion
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/swirl-vortex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add swirl-vortex
|
||||
```text
|
||||
Add the Swirl Vortex block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add swirl-vortex
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add swirl-vortex
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `swirl-vortex.html` | `compositions/swirl-vortex.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="swirl-vortex" data-composition-src="compositions/swirl-vortex.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Thermal Distortion"
|
||||
description: "Shader transition with heat haze thermal distortion"
|
||||
---
|
||||
|
||||
# Thermal Distortion
|
||||
|
||||
Shader transition with heat haze thermal distortion
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<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/thermal-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add thermal-distortion
|
||||
```text
|
||||
Add the Thermal Distortion block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add thermal-distortion
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add thermal-distortion
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `thermal-distortion.html` | `compositions/thermal-distortion.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="thermal-distortion" data-composition-src="compositions/thermal-distortion.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "TikTok Follow"
|
||||
description: "Animated TikTok follow overlay with profile card and follow button"
|
||||
---
|
||||
|
||||
# TikTok Follow
|
||||
|
||||
Animated TikTok follow overlay with profile card and follow button
|
||||
|
||||
`social` `overlay` `tiktok`
|
||||
|
||||
<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/tiktok-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add tiktok-follow
|
||||
```text
|
||||
Add the TikTok Follow block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add tiktok-follow
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,17 +30,25 @@ npx hyperframes add tiktok-follow
|
||||
| Dimensions | 1080×1920 |
|
||||
| Duration | 4.5s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `tiktok-follow.html` | `compositions/tiktok-follow.html` | hyperframes:composition |
|
||||
| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="tiktok-follow" data-composition-src="compositions/tiktok-follow.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1080" data-height="1920"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "3D Transitions"
|
||||
description: "Showcase of 3D perspective flip and rotate transitions"
|
||||
---
|
||||
|
||||
# 3D Transitions
|
||||
|
||||
Showcase of 3D perspective flip and rotate transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<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/transitions-3d.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add transitions-3d
|
||||
```text
|
||||
Add the 3D Transitions block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add transitions-3d
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add transitions-3d
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `transitions-3d.html` | `compositions/transitions-3d.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="transitions-3d" data-composition-src="compositions/transitions-3d.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Blur Transitions"
|
||||
description: "Showcase of blur-based transitions between scenes"
|
||||
---
|
||||
|
||||
# Blur Transitions
|
||||
|
||||
Showcase of blur-based transitions between scenes
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<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/transitions-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add transitions-blur
|
||||
```text
|
||||
Add the Blur Transitions block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add transitions-blur
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add transitions-blur
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 20s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `transitions-blur.html` | `compositions/transitions-blur.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="transitions-blur" data-composition-src="compositions/transitions-blur.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
@@ -3,23 +3,24 @@ title: "Cover Transitions"
|
||||
description: "Showcase of cover/uncover slide transitions"
|
||||
---
|
||||
|
||||
# Cover Transitions
|
||||
|
||||
Showcase of cover/uncover slide transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<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/transitions-cover.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
## Add it to a project
|
||||
|
||||
<CodeGroup>
|
||||
### Ask your agent
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add transitions-cover
|
||||
```text
|
||||
Add the Cover Transitions block from the HyperFrames Catalog to this project.
|
||||
Replace the demo content with mine and match the existing design and timing.
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
### Install from the terminal
|
||||
|
||||
```bash
|
||||
npx hyperframes add transitions-cover
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -29,16 +30,24 @@ npx hyperframes add transitions-cover
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 21s |
|
||||
|
||||
## Files
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `transitions-cover.html` | `compositions/transitions-cover.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
## Use it
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
|
||||
|
||||
**Wiring it by hand.** The installed block can be added to a host composition with:
|
||||
|
||||
```html
|
||||
<div data-composition-id="transitions-cover" data-composition-src="compositions/transitions-cover.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
|
||||
## Related topics
|
||||
|
||||
- [Browse the complete Catalog](/catalog)
|
||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
||||
- [Build a richer composition](/go-further)
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user