mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-02 20:18:35 +00:00
fix(scripts): drop the catalog poster instead of guarding it, and cut the encode pass down
**The poster guard I added twice was unworkable and I never ran it.** It called existsSync on docs/images/catalog/<name>.png. That directory is gitignored — previews are generated locally, uploaded to the CDN and never committed — so the check is false on every clean checkout and in CI. It would have stripped the poster from all 168 pages, not the 13 with a missing file. It also referenced REPO_ROOT, which does not exist in that file, so the script crashed on the first item. I described this guard in two commit messages without once executing the generator. The poster is now gone entirely, which is the smaller and more honest fix. These previews are autoPlay muted loop, so the poster is visible for a few hundred milliseconds; 13 of the 168 files do not exist and the browser fetches the poster before the video. Removing the attribute kills 13 x 403 and 168 needless image requests, and there is nothing to keep in sync. Also applied a complexity pass to the delivery encode: - hasAudio() deleted. 17 lines and a spawnSync per item to choose between "-c:a aac" and "-an". ffmpeg ignores -c:a when the input has no audio stream; checked, exit 0, output carries no audio track. - The 40-line spawn + Promise wrapper is execFileSync. Everything around it in that script is already synchronous. - The duplicated poster lookup is gone with the poster itself. Net 76 lines lighter. Generator runs clean, emits 168 pages, carry-forward intact.
This commit is contained in:
ukimsanov
@@ -3,7 +3,7 @@ title: "App Showcase"
|
|||||||
description: "Fitness app product showcase with three floating smartphone screens"
|
description: "Fitness app product showcase with three floating smartphone screens"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 5.5 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add app-showcase
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `showcase` `app` `3d`.
|
Tagged `showcase` `app` `3d`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Apple Money Count"
|
|||||||
description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
|
description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add apple-money-count
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `showcase` `finance` `kinetic` `youtube` `sfx`.
|
Tagged `showcase` `finance` `kinetic` `youtube` `sfx`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Beat Freeze Cut"
|
|||||||
description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
|
description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -39,37 +39,6 @@ Set these CSS variables on the block:
|
|||||||
- `--bg-color` — Background. Defaults to `#0B0D10`.
|
- `--bg-color` — Background. Defaults to `#0B0D10`.
|
||||||
- `--accent-color` — Accent. Defaults to `#00E5C7`.
|
- `--accent-color` — Accent. Defaults to `#00E5C7`.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add beat-freeze-cut
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `music` `beat-driven` `freeze-frame`.
|
Tagged `transition` `music` `beat-driven` `freeze-frame`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Blue Sweater Intro Video"
|
|||||||
description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
|
description: "Warm AI creator intro sequence that resolves into an X follow card for @_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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add blue-sweater-intro-video
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `showcase` `ai` `creator` `sfx`.
|
Tagged `showcase` `ai` `creator` `sfx`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Camcorder HUD"
|
|||||||
description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
|
description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add camcorder-hud
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`.
|
Tagged `camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Chromatic Radial Split"
|
|||||||
description: "Shader transition with chromatic aberration radial split"
|
description: "Shader transition with chromatic aberration radial split"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add chromatic-radial-split
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Cinematic Zoom"
|
|||||||
description: "Shader transition with dramatic zoom blur"
|
description: "Shader transition with dramatic zoom blur"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add cinematic-zoom
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-3d-extrude
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `3d` `webgl` `developer`.
|
Tagged `code` `code-animation` `3d` `webgl` `developer`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Code Diff"
|
|||||||
description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
|
description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-diff
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `diff` `developer`.
|
Tagged `code` `code-animation` `diff` `developer`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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)."
|
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)."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-highlight
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `highlight` `developer`.
|
Tagged `code` `code-animation` `highlight` `developer`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-morph
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `morph` `refactor` `developer`.
|
Tagged `code` `code-animation` `morph` `refactor` `developer`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-particle-assemble
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `particles` `gpu` `webgl` `developer`.
|
Tagged `code` `code-animation` `particles` `gpu` `webgl` `developer`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-scroll
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `scroll` `developer`.
|
Tagged `code` `code-animation` `scroll` `developer`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-shader-dissolve
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `shader` `webgl` `developer`.
|
Tagged `code` `code-animation` `shader` `webgl` `developer`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-basic
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-clear-dark
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-clear-light
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-grass
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-homebrew
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-man-page
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-novel
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-ocean
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-pro
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-red-sands
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-silver-aerogel
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-apple-terminal-solid-colors
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-dark-2026
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-dark-modern
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-dark-plus
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Code Snippet Flight"
|
|||||||
description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
|
description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-flight
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `flight` `developer`.
|
Tagged `code` `code-animation` `flight` `developer`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-high-contrast-light
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-high-contrast
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-light-2026
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-light-modern
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-light-plus
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-monokai
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-solarized-light
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-visual-studio-dark
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-snippet-visual-studio-light
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Related topics
|
|
||||||
|
|
||||||
- [Browse the complete Catalog](/catalog)
|
|
||||||
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
|
|
||||||
- [Build a richer composition](/go-further)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `developer` `showcase` `vscode`.
|
Tagged `code` `developer` `showcase` `vscode`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Code Typing"
|
|||||||
description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
|
description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS 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-typing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add code-typing
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `code` `code-animation` `typing` `developer`.
|
Tagged `code` `code-animation` `typing` `developer`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Cross Warp Morph"
|
|||||||
description: "Shader transition with cross-warped morphing"
|
description: "Shader transition with cross-warped morphing"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add cross-warp-morph
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Data Chart"
|
|||||||
description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
|
description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -39,37 +39,6 @@ Set these CSS variables on the block:
|
|||||||
- `--bg-color` — Background. Defaults to `#faf9f6`.
|
- `--bg-color` — Background. Defaults to `#faf9f6`.
|
||||||
- `--text-color` — Text color. Defaults to `#333333`.
|
- `--text-color` — Text color. Defaults to `#333333`.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add data-chart
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `data` `chart` `statistics`.
|
Tagged `data` `chart` `statistics`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Domain Warp Dissolve"
|
|||||||
description: "Shader transition with fractal noise domain warping"
|
description: "Shader transition with fractal noise domain warping"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add domain-warp-dissolve
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Editorial Flash Overlay"
|
|||||||
description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
|
description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social 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/editorial-flash-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png" autoPlay muted loop playsInline />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add editorial-flash-overlay
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`.
|
Tagged `flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Flash Through White"
|
|||||||
description: "Shader transition with white flash crossfade"
|
description: "Shader transition with white flash crossfade"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add flash-through-white
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Flowchart Vertical"
|
|||||||
description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1440×2560. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add flowchart-vertical
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `diagram` `flowchart` `interactive` `portrait`.
|
Tagged `diagram` `flowchart` `interactive` `portrait`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Flowchart"
|
|||||||
description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add flowchart
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `diagram` `flowchart` `interactive`.
|
Tagged `diagram` `flowchart` `interactive`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Freeze-Frame Dressing"
|
|||||||
description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
|
description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add freeze-frame-dressing
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`.
|
Tagged `freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Glitch"
|
|||||||
description: "Shader transition with digital glitch artifacts"
|
description: "Shader transition with digital glitch artifacts"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add glitch
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Gravitational Lens"
|
|||||||
description: "Shader transition with gravitational lensing distortion"
|
description: "Shader transition with gravitational lensing distortion"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add gravitational-lens
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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)"
|
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)"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add hw-frame
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `handwritten` `frame` `media`.
|
Tagged `handwritten` `frame` `media`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Text Along a Path"
|
|||||||
description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
|
description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add hw-path-text
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `handwritten` `typography` `path` `overlay`.
|
Tagged `handwritten` `typography` `path` `overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Hand-Drawn Flowchart"
|
|||||||
description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
|
description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add hw-pipeline
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `handwritten` `diagram` `data-viz` `overlay`.
|
Tagged `handwritten` `diagram` `data-viz` `overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 2.2 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add hw-scribble-transition
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `handwritten` `transition` `wipe`.
|
Tagged `handwritten` `transition` `wipe`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add hw-text-cloud
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `handwritten` `speech-bubble` `overlay`.
|
Tagged `handwritten` `speech-bubble` `overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add hw-title
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `handwritten` `typography` `title-card` `overlay`.
|
Tagged `handwritten` `typography` `title-card` `overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Instagram Follow"
|
|||||||
description: "Animated Instagram follow overlay with profile card and follow button"
|
description: "Animated Instagram follow overlay with profile card and follow button"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.5 seconds at 1080×1920. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add instagram-follow
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `social` `overlay` `instagram`.
|
Tagged `social` `overlay` `instagram`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
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."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -38,37 +38,6 @@ It runs for 15 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add ios26-liquid-glass
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`.
|
Tagged `liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Light Leak"
|
|||||||
description: "Shader transition with cinematic light leak overlay"
|
description: "Shader transition with cinematic light leak 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/light-leak.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add light-leak
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Liquid Glass Context Menu"
|
|||||||
description: "Frosted glass context menu panel drifting over an aurora shader background"
|
description: "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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add liquid-glass-context-menu
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Liquid Glass Media Controls"
|
|||||||
description: "Frosted glass media control panels spreading over an aurora shader background"
|
description: "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-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add liquid-glass-media-controls
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Liquid Glass Notification"
|
|||||||
description: "Frosted glass notification cards floating over an aurora shader background"
|
description: "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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add liquid-glass-notification
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Liquid Glass Widgets"
|
|||||||
description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
|
description: "Frosted glass stat cards, showcase panel and pill chips 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-widgets-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add liquid-glass-widgets
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Logo Outro"
|
|||||||
description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
|
description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -39,37 +39,6 @@ Set these CSS variables on the block:
|
|||||||
- `--bg-color` — Background. Defaults to `#0a0a0f`.
|
- `--bg-color` — Background. Defaults to `#0a0a0f`.
|
||||||
- `--accent-color` — Accent. Defaults to `#1a1a1f`.
|
- `--accent-color` — Accent. Defaults to `#1a1a1f`.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add logo-outro
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `branding` `outro` `logo`.
|
Tagged `branding` `outro` `logo`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
description: "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lower-third-bild
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `broadcast` `lower-third` `news` `overlay`.
|
Tagged `broadcast` `lower-third` `news` `overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-accent-underline
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Lower Third — Bold Block"
|
|||||||
description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
|
description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-bold-block
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Lower Third — Clean Bar"
|
|||||||
description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
|
description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-clean-bar
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview`.
|
Tagged `lower-third` `overlay` `podcast` `interview`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Lower Third — Color Block"
|
|||||||
description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
|
description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-color-block
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Lower Third — Dark Card"
|
|||||||
description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
|
description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-dark-card
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `dark`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `dark`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Lower Third — Kicker Name"
|
|||||||
description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
|
description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-kicker-name
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-mask-reveal
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Lower Third — Side Rule"
|
|||||||
description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
|
description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-side-rule
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Lower Third — Soft Pill"
|
|||||||
description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
|
description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-soft-pill
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add lt-stack-bars
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "macOS Notification"
|
|||||||
description: "Animated macOS-style notification banner with app icon and message"
|
description: "Animated macOS-style notification banner with app icon and message"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add macos-notification
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `social` `overlay` `notification`.
|
Tagged `social` `overlay` `notification`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -38,37 +38,6 @@ It runs for 15 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add macos-tahoe-liquid-glass
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `html-in-canvas` `3d` `macos` `tahoe` `gltf`.
|
Tagged `html-in-canvas` `3d` `macos` `tahoe` `gltf`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
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"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 10 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add mk-background
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `background` `gradient` `minimal` `professional` `presentation`.
|
Tagged `background` `gradient` `minimal` `professional` `presentation`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add mk-callout-highlight
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `typography` `karaoke` `captions` `minimal`.
|
Tagged `typography` `karaoke` `captions` `minimal`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 2.4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add mk-clone-wall-transition
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `typography` `wipe`.
|
Tagged `transition` `typography` `wipe`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
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"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add mk-line-graph
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `data-viz` `chart` `graph` `minimal`.
|
Tagged `data-viz` `chart` `graph` `minimal`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
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"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add mk-placeholder-grid
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `placeholder` `media` `grid` `minimal`.
|
Tagged `placeholder` `media` `grid` `minimal`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add mk-progress-stat
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `data-viz` `stat` `minimal`.
|
Tagged `data-viz` `stat` `minimal`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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"
|
description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add mk-specs-list
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `data-viz` `list` `minimal` `professional`.
|
Tagged `data-viz` `list` `minimal` `professional`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "News Ticker"
|
|||||||
description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
|
description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add news-ticker
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `lower-third` `overlay` `news` `ticker`.
|
Tagged `lower-third` `overlay` `news` `ticker`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add north-korea-locked-down
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `showcase` `map` `annotation` `youtube` `kinetic`.
|
Tagged `showcase` `map` `annotation` `youtube` `kinetic`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ 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."
|
description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add nyc-paris-flight
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `showcase` `travel` `map` `youtube` `sfx`.
|
Tagged `showcase` `travel` `map` `youtube` `sfx`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Organic Light Leak Overlay"
|
|||||||
description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
|
description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add organic-light-leak-overlay
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`.
|
Tagged `light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Reddit Post Card"
|
|||||||
description: "Animated Reddit post card overlay with upvotes and comments"
|
description: "Animated Reddit post card overlay with upvotes and comments"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add reddit-post
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `social` `overlay` `reddit`.
|
Tagged `social` `overlay` `reddit`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Ridged Burn"
|
|||||||
description: "Shader transition with ridged turbulence burn effect"
|
description: "Shader transition with ridged turbulence burn effect"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add ridged-burn
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Ripple Waves"
|
|||||||
description: "Shader transition with concentric ripple wave distortion"
|
description: "Shader transition with concentric ripple wave distortion"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add ripple-waves
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "SDF Iris"
|
|||||||
description: "Shader transition with signed distance field iris reveal"
|
description: "Shader transition with signed distance field iris 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/sdf-iris.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add sdf-iris
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Spain Map"
|
|||||||
description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
|
description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add spain-map
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `data` `map` `geography` `spain` `europe` `choropleth`.
|
Tagged `data` `map` `geography` `spain` `europe` `choropleth`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Spotify Now Playing"
|
|||||||
description: "Animated Spotify now-playing card with album art and progress bar"
|
description: "Animated Spotify now-playing card with album art and progress bar"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1080×1920. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add spotify-card
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `social` `overlay` `spotify`.
|
Tagged `social` `overlay` `spotify`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Swirl Vortex"
|
|||||||
description: "Shader transition with swirling vortex distortion"
|
description: "Shader transition with swirling vortex distortion"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add swirl-vortex
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Thermal Distortion"
|
|||||||
description: "Shader transition with heat haze thermal distortion"
|
description: "Shader transition with heat haze thermal distortion"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add thermal-distortion
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `shader`.
|
Tagged `transition` `shader`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "TikTok Follow"
|
|||||||
description: "Animated TikTok follow overlay with profile card and follow button"
|
description: "Animated TikTok follow overlay with profile card and follow button"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 4.5 seconds at 1080×1920. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add tiktok-follow
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `social` `overlay` `tiktok`.
|
Tagged `social` `overlay` `tiktok`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "3D Transitions"
|
|||||||
description: "Showcase of 3D perspective flip and rotate transitions"
|
description: "Showcase of 3D perspective flip and rotate transitions"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add transitions-3d
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `showcase`.
|
Tagged `transition` `showcase`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Blur Transitions"
|
|||||||
description: "Showcase of blur-based transitions between scenes"
|
description: "Showcase of blur-based transitions between scenes"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 20 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add transitions-blur
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `showcase`.
|
Tagged `transition` `showcase`.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ title: "Cover Transitions"
|
|||||||
description: "Showcase of cover/uncover slide transitions"
|
description: "Showcase of cover/uncover slide transitions"
|
||||||
---
|
---
|
||||||
|
|
||||||
<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 />
|
<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" autoPlay muted loop playsInline />
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
@@ -32,37 +32,6 @@ It runs for 21 seconds at 1920×1080. Paste this into your composition:
|
|||||||
Move it in time with `data-start`. Put it on a different timeline row with
|
Move it in time with `data-start`. Put it on a different timeline row with
|
||||||
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
|
||||||
|
|
||||||
## Add it to a project
|
|
||||||
|
|
||||||
### Ask your agent
|
|
||||||
|
|
||||||
```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.
|
|
||||||
```
|
|
||||||
|
|
||||||
### Install from the terminal
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx hyperframes add transitions-cover
|
|
||||||
```
|
|
||||||
|
|
||||||
## Use it
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
{/* hf:generated-footer */}
|
{/* hf:generated-footer */}
|
||||||
|
|
||||||
Tagged `transition` `showcase`.
|
Tagged `transition` `showcase`.
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user