mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-02 12:08:50 +00:00
docs: rebuild the catalog generator, and show what background removal and HDR do
**The catalog generator destroys hand-written documentation on every run.** It
does `rmSync(dir, { recursive: true })` on both catalog folders before
regenerating, so any section a human added to a generated page is deleted the
next time anyone runs it. There is now a carry-forward pass that reads those
sections off the existing pages first and re-emits any heading the template does
not own. Note this prevents future loss only — the earlier regeneration in this
stack already removed what was there, and it is recoverable from git if wanted.
It was also clobbering `docs.json`: rebuilding the Catalog tab dropped its icon
and unlinked `catalog/index.mdx` from the sidebar entirely.
And 27 of 36 component pages told the reader to "see the comment header in the
file" when no such header exists. The generator reads the file now and only says
it when true.
On presentation: 1,365 table rows across 168 pages became 0. `## Details` was a
table whose rows were "Type: Block" and the duration; `## Files` was three
columns where most items have exactly one file. Both are one sentence now. The
preview leads the page instead of sitting under title, description, tags, a
warning and a credit — four of which Mintlify already renders from frontmatter.
**Two guides that showed nothing now show the thing.** Background removal plays a
real cutout with the matte magnified at the hair edge and at a shoulder a plant
overlapped, because those are where matting fails. HDR is the honest one: you
cannot show HDR brightness on an SDR page, so it shows the `ffprobe` verdict and
a measured round-trip — 4000 nits authored, 4012 back out — and says on screen
for all 26 seconds that it is not simulating anything.
Both films were checked before publishing: no black or frozen stretches, and read
at the real 590px docs column width rather than full size. Nav after regeneration:
307 pages, 0 dangling, 0 redirect collisions.
This commit is contained in:
ukimsanov
@@ -3,10 +3,35 @@ title: "App Showcase"
|
||||
description: "Fitness app product showcase with three floating smartphone screens"
|
||||
---
|
||||
|
||||
`showcase` `app` `3d`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add app-showcase
|
||||
```
|
||||
|
||||
That writes one file: `compositions/app-showcase.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 5.5 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add app-showcase
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5.5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `app-showcase.html` | `compositions/app-showcase.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `showcase` `app` `3d`.
|
||||
|
||||
@@ -3,17 +3,34 @@ title: "Apple Money Count"
|
||||
description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
|
||||
---
|
||||
|
||||
`showcase` `finance` `kinetic` `youtube` `sfx`
|
||||
<video className="w-full 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 />
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
## Install
|
||||
|
||||
## Source Prompt
|
||||
|
||||
```text
|
||||
📷HyperFrames by HeyGen Make me a five-second video of, on a white background, of a Apple-style bold font counting from $0 to $10,000. Once it counts to $10,000, it changes to a green color and the screen also flashes green for a second, and then money icons come out of the $10,000 amount all over the screen and then disappear.
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-money-count
|
||||
```
|
||||
|
||||
<video className="w-full 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 />
|
||||
That writes `compositions/apple-money-count.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -30,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add apple-money-count
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `apple-money-count.html` | `compositions/apple-money-count.html` | hyperframes:composition |
|
||||
| `assets/sfx-production.wav` | `assets/sfx-production.wav` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -60,3 +62,17 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `showcase` `finance` `kinetic` `youtube` `sfx`.
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
|
||||
<Accordion title="The prompt this was built from">
|
||||
|
||||
```text
|
||||
📷HyperFrames by HeyGen Make me a five-second video of, on a white background, of a Apple-style bold font counting from $0 to $10,000. Once it counts to $10,000, it changes to a green color and the screen also flashes green for a second, and then money icons come out of the $10,000 amount all over the screen and then disappear.
|
||||
```
|
||||
|
||||
</Accordion>
|
||||
|
||||
@@ -3,10 +3,42 @@ title: "Beat Freeze Cut"
|
||||
description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
|
||||
---
|
||||
|
||||
`transition` `music` `beat-driven` `freeze-frame`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add beat-freeze-cut
|
||||
```
|
||||
|
||||
That writes one file: `compositions/beat-freeze-cut.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Change the colors
|
||||
|
||||
Set these CSS variables on the block:
|
||||
|
||||
- `--bg-color` — Background. Defaults to `#0B0D10`.
|
||||
- `--accent-color` — Accent. Defaults to `#00E5C7`.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +54,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add beat-freeze-cut
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `beat-freeze-cut.html` | `compositions/beat-freeze-cut.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +69,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `music` `beat-driven` `freeze-frame`.
|
||||
|
||||
@@ -3,12 +3,35 @@ title: "Blue Sweater Intro Video"
|
||||
description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
|
||||
---
|
||||
|
||||
`showcase` `ai` `creator` `sfx`
|
||||
|
||||
Created by [Joe Sai](https://x.com/_blue_sweater_).
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add blue-sweater-intro-video
|
||||
```
|
||||
|
||||
That writes `compositions/blue-sweater-intro-video.html`, plus 2 supporting files under `assets/` and `assets/sfx/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -24,22 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add blue-sweater-intro-video
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `blue-sweater-intro-video.html` | `compositions/blue-sweater-intro-video.html` | hyperframes:composition |
|
||||
| `assets/joe-sai-avatar.png` | `assets/joe-sai-avatar.png` | hyperframes:asset |
|
||||
| `assets/sfx/integrated-melodic-tech-mix.wav` | `assets/sfx/integrated-melodic-tech-mix.wav` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -55,3 +62,9 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `showcase` `ai` `creator` `sfx`.
|
||||
|
||||
Created by [Joe Sai](https://x.com/_blue_sweater_).
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Camcorder HUD"
|
||||
description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
|
||||
---
|
||||
|
||||
`camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add camcorder-hud
|
||||
```
|
||||
|
||||
That writes one file: `compositions/camcorder-hud.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add camcorder-hud
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `camcorder-hud.html` | `compositions/camcorder-hud.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Chromatic Radial Split"
|
||||
description: "Shader transition with chromatic aberration radial split"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add chromatic-radial-split
|
||||
```
|
||||
|
||||
That writes one file: `compositions/chromatic-radial-split.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add chromatic-radial-split
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `chromatic-radial-split.html` | `compositions/chromatic-radial-split.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Cinematic Zoom"
|
||||
description: "Shader transition with dramatic zoom blur"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add cinematic-zoom
|
||||
```
|
||||
|
||||
That writes one file: `compositions/cinematic-zoom.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add cinematic-zoom
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `cinematic-zoom.html` | `compositions/cinematic-zoom.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code 3D Extrude"
|
||||
description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
|
||||
---
|
||||
|
||||
`code` `code-animation` `3d` `webgl` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-3d-extrude
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-3d-extrude.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-3d-extrude
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-3d-extrude.html` | `compositions/code-3d-extrude.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `3d` `webgl` `developer`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code Diff"
|
||||
description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
|
||||
---
|
||||
|
||||
`code` `code-animation` `diff` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-diff
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-diff.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-diff
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-diff.html` | `compositions/code-diff.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `diff` `developer`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code Highlight Sweep"
|
||||
description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based)."
|
||||
---
|
||||
|
||||
`code` `code-animation` `highlight` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-highlight
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-highlight.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-highlight
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-highlight.html` | `compositions/code-highlight.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `highlight` `developer`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code Morph"
|
||||
description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
|
||||
---
|
||||
|
||||
`code` `code-animation` `morph` `refactor` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-morph
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-morph.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-morph
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-morph.html` | `compositions/code-morph.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `morph` `refactor` `developer`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code Particle Assemble"
|
||||
description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
|
||||
---
|
||||
|
||||
`code` `code-animation` `particles` `gpu` `webgl` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-particle-assemble
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-particle-assemble.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-particle-assemble
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-particle-assemble.html` | `compositions/code-particle-assemble.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `particles` `gpu` `webgl` `developer`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code Scroll To Line"
|
||||
description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
|
||||
---
|
||||
|
||||
`code` `code-animation` `scroll` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-scroll
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-scroll.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-scroll
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-scroll.html` | `compositions/code-scroll.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `scroll` `developer`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code Shader Dissolve"
|
||||
description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
|
||||
---
|
||||
|
||||
`code` `code-animation` `shader` `webgl` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-shader-dissolve
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-shader-dissolve.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-shader-dissolve
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-shader-dissolve.html` | `compositions/code-shader-dissolve.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `shader` `webgl` `developer`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Basic"
|
||||
description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-basic
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-basic.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-basic
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-basic.html` | `compositions/code-snippet-apple-terminal-basic.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Clear Dark"
|
||||
description: "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-dark
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-clear-dark.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-dark
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-clear-dark.html` | `compositions/code-snippet-apple-terminal-clear-dark.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Clear Light"
|
||||
description: "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-light
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-clear-light.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-light
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-clear-light.html` | `compositions/code-snippet-apple-terminal-clear-light.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Grass"
|
||||
description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-grass
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-grass.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-grass
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-grass.html` | `compositions/code-snippet-apple-terminal-grass.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Homebrew"
|
||||
description: "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-homebrew
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-homebrew.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-homebrew
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-homebrew.html` | `compositions/code-snippet-apple-terminal-homebrew.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Man Page"
|
||||
description: "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-man-page
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-man-page.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-man-page
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-man-page.html` | `compositions/code-snippet-apple-terminal-man-page.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Novel"
|
||||
description: "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-novel
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-novel.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-novel
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-novel.html` | `compositions/code-snippet-apple-terminal-novel.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Ocean"
|
||||
description: "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-ocean
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-ocean.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-ocean
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-ocean.html` | `compositions/code-snippet-apple-terminal-ocean.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Pro"
|
||||
description: "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-pro
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-pro.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-pro
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-pro.html` | `compositions/code-snippet-apple-terminal-pro.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Red Sands"
|
||||
description: "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-red-sands
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-red-sands.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-red-sands
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-red-sands.html` | `compositions/code-snippet-apple-terminal-red-sands.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Silver Aerogel"
|
||||
description: "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-silver-aerogel
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-silver-aerogel.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-silver-aerogel
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-silver-aerogel.html` | `compositions/code-snippet-apple-terminal-silver-aerogel.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,9 +3,34 @@ title: "Code Snippet - Apple Terminal Solid Colors"
|
||||
description: "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png" autoPlay muted loop playsInline />
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" autoPlay muted loop playsInline />
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-solid-colors
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-apple-terminal-solid-colors.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-apple-terminal-solid-colors
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-solid-colors.html` | `compositions/code-snippet-apple-terminal-solid-colors.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-2026
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-dark-2026.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-dark-2026
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-2026.html` | `compositions/code-snippet-dark-2026.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-modern
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-dark-modern.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-dark-modern
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-modern.html` | `compositions/code-snippet-dark-modern.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-plus
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-dark-plus.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-dark-plus
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-plus.html` | `compositions/code-snippet-dark-plus.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code Snippet Flight"
|
||||
description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
|
||||
---
|
||||
|
||||
`code` `code-animation` `flight` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-flight
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-snippet-flight.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-flight
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-flight.html` | `compositions/code-snippet-flight.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `flight` `developer`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-high-contrast-light
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-high-contrast-light.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-high-contrast-light
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-high-contrast-light.html` | `compositions/code-snippet-high-contrast-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-high-contrast
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-high-contrast.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-high-contrast
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-high-contrast.html` | `compositions/code-snippet-high-contrast.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-2026
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-light-2026.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-light-2026
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-2026.html` | `compositions/code-snippet-light-2026.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-modern
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-light-modern.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-light-modern
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-modern.html` | `compositions/code-snippet-light-modern.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-plus
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-light-plus.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-light-plus
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-plus.html` | `compositions/code-snippet-light-plus.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-monokai
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-monokai.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-monokai
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-monokai.html` | `compositions/code-snippet-monokai.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-solarized-light
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-solarized-light.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-solarized-light
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-solarized-light.html` | `compositions/code-snippet-solarized-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-visual-studio-dark
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-visual-studio-dark.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-visual-studio-dark
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-visual-studio-dark.html` | `compositions/code-snippet-visual-studio-dark.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-visual-studio-light
|
||||
```
|
||||
|
||||
That writes `compositions/code-snippet-visual-studio-light.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-snippet-visual-studio-light
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-visual-studio-light.html` | `compositions/code-snippet-visual-studio-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `developer` `showcase` `vscode`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Code Typing"
|
||||
description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
|
||||
---
|
||||
|
||||
`code` `code-animation` `typing` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-typing
|
||||
```
|
||||
|
||||
That writes one file: `compositions/code-typing.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add code-typing
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-typing.html` | `compositions/code-typing.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `code` `code-animation` `typing` `developer`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Cross Warp Morph"
|
||||
description: "Shader transition with cross-warped morphing"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add cross-warp-morph
|
||||
```
|
||||
|
||||
That writes one file: `compositions/cross-warp-morph.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add cross-warp-morph
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `cross-warp-morph.html` | `compositions/cross-warp-morph.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,42 @@ title: "Data Chart"
|
||||
description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
|
||||
---
|
||||
|
||||
`data` `chart` `statistics`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add data-chart
|
||||
```
|
||||
|
||||
That writes one file: `compositions/data-chart.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 15 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Change the colors
|
||||
|
||||
Set these CSS variables on the block:
|
||||
|
||||
- `--bg-color` — Background. Defaults to `#faf9f6`.
|
||||
- `--text-color` — Text color. Defaults to `#333333`.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +54,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add data-chart
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 15s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `data-chart.html` | `compositions/data-chart.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +69,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `data` `chart` `statistics`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Domain Warp Dissolve"
|
||||
description: "Shader transition with fractal noise domain warping"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add domain-warp-dissolve
|
||||
```
|
||||
|
||||
That writes one file: `compositions/domain-warp-dissolve.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add domain-warp-dissolve
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `domain-warp-dissolve.html` | `compositions/domain-warp-dissolve.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Editorial Flash Overlay"
|
||||
description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
|
||||
---
|
||||
|
||||
`flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add editorial-flash-overlay
|
||||
```
|
||||
|
||||
That writes one file: `compositions/editorial-flash-overlay.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add editorial-flash-overlay
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `editorial-flash-overlay.html` | `compositions/editorial-flash-overlay.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Flash Through White"
|
||||
description: "Shader transition with white flash crossfade"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flash-through-white
|
||||
```
|
||||
|
||||
That writes one file: `compositions/flash-through-white.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add flash-through-white
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flash-through-white.html` | `compositions/flash-through-white.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Flowchart Vertical"
|
||||
description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
||||
---
|
||||
|
||||
`diagram` `flowchart` `interactive` `portrait`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flowchart-vertical
|
||||
```
|
||||
|
||||
That writes one file: `compositions/flowchart-vertical.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1440×2560. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add flowchart-vertical
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1440×2560 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `diagram` `flowchart` `interactive` `portrait`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Flowchart"
|
||||
description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
|
||||
---
|
||||
|
||||
`diagram` `flowchart` `interactive`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flowchart
|
||||
```
|
||||
|
||||
That writes one file: `compositions/flowchart.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add flowchart
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flowchart.html` | `compositions/flowchart.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `diagram` `flowchart` `interactive`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Freeze-Frame Dressing"
|
||||
description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
|
||||
---
|
||||
|
||||
`freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add freeze-frame-dressing
|
||||
```
|
||||
|
||||
That writes one file: `compositions/freeze-frame-dressing.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add freeze-frame-dressing
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `freeze-frame-dressing.html` | `compositions/freeze-frame-dressing.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Glitch"
|
||||
description: "Shader transition with digital glitch artifacts"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add glitch
|
||||
```
|
||||
|
||||
That writes one file: `compositions/glitch.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add glitch
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `glitch.html` | `compositions/glitch.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Gravitational Lens"
|
||||
description: "Shader transition with gravitational lensing distortion"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add gravitational-lens
|
||||
```
|
||||
|
||||
That writes one file: `compositions/gravitational-lens.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add gravitational-lens
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `gravitational-lens.html` | `compositions/gravitational-lens.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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)"
|
||||
---
|
||||
|
||||
`handwritten` `frame` `media`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-frame
|
||||
```
|
||||
|
||||
That writes `compositions/hw-frame.html`, plus 1 supporting file under `assets/fonts/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add hw-frame
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-frame.html` | `compositions/hw-frame.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `handwritten` `frame` `media`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Text Along a Path"
|
||||
description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
|
||||
---
|
||||
|
||||
`handwritten` `typography` `path` `overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-path-text
|
||||
```
|
||||
|
||||
That writes `compositions/hw-path-text.html`, plus 1 supporting file under `assets/fonts/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add hw-path-text
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-path-text.html` | `compositions/hw-path-text.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `handwritten` `typography` `path` `overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Hand-Drawn Flowchart"
|
||||
description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
|
||||
---
|
||||
|
||||
`handwritten` `diagram` `data-viz` `overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-pipeline
|
||||
```
|
||||
|
||||
That writes `compositions/hw-pipeline.html`, plus 1 supporting file under `assets/fonts/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add hw-pipeline
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-pipeline.html` | `compositions/hw-pipeline.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `handwritten` `diagram` `data-viz` `overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`handwritten` `transition` `wipe`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-scribble-transition
|
||||
```
|
||||
|
||||
That writes one file: `compositions/hw-scribble-transition.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 2.2 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add hw-scribble-transition
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 2.2s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-scribble-transition.html` | `compositions/hw-scribble-transition.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `handwritten` `transition` `wipe`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`handwritten` `speech-bubble` `overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-text-cloud
|
||||
```
|
||||
|
||||
That writes `compositions/hw-text-cloud.html`, plus 1 supporting file under `assets/fonts/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add hw-text-cloud
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-text-cloud.html` | `compositions/hw-text-cloud.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `handwritten` `speech-bubble` `overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Handwritten Title"
|
||||
description: "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
|
||||
---
|
||||
|
||||
`handwritten` `typography` `title-card` `overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add hw-title
|
||||
```
|
||||
|
||||
That writes `compositions/hw-title.html`, plus 1 supporting file under `assets/fonts/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add hw-title
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `hw-title.html` | `compositions/hw-title.html` | hyperframes:composition |
|
||||
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `handwritten` `typography` `title-card` `overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Instagram Follow"
|
||||
description: "Animated Instagram follow overlay with profile card and follow button"
|
||||
---
|
||||
|
||||
`social` `overlay` `instagram`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add instagram-follow
|
||||
```
|
||||
|
||||
That writes `compositions/instagram-follow.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.5 seconds at 1080×1920. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add instagram-follow
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1080×1920 |
|
||||
| Duration | 4.5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `instagram-follow.html` | `compositions/instagram-follow.html` | hyperframes:composition |
|
||||
| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `social` `overlay` `instagram`.
|
||||
|
||||
@@ -3,13 +3,40 @@ 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."
|
||||
---
|
||||
|
||||
`liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add ios26-liquid-glass
|
||||
```
|
||||
|
||||
That writes `compositions/ios26-liquid-glass.html`, plus 28 supporting files under `models/`, `lib/`, and `assets/icons/`.
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
|
||||
Rendering from the CLI switches it on for you. [How it
|
||||
works](/guides/html-in-canvas)
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
## Add it to your video
|
||||
|
||||
It runs for 15 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -26,48 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add ios26-liquid-glass
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 15s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
|
||||
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
|
||||
| `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
|
||||
| `assets/icons/weather.jpg` | `assets/icons/weather.jpg` | hyperframes:asset |
|
||||
| `assets/icons/stocks.jpg` | `assets/icons/stocks.jpg` | hyperframes:asset |
|
||||
| `assets/icons/find-my.jpg` | `assets/icons/find-my.jpg` | hyperframes:asset |
|
||||
| `assets/icons/home.jpg` | `assets/icons/home.jpg` | hyperframes:asset |
|
||||
| `assets/icons/books.jpg` | `assets/icons/books.jpg` | hyperframes:asset |
|
||||
| `assets/icons/itunes-store.jpg` | `assets/icons/itunes-store.jpg` | hyperframes:asset |
|
||||
| `assets/icons/fitness.jpg` | `assets/icons/fitness.jpg` | hyperframes:asset |
|
||||
| `assets/icons/watch.jpg` | `assets/icons/watch.jpg` | hyperframes:asset |
|
||||
| `assets/icons/contacts.jpg` | `assets/icons/contacts.jpg` | hyperframes:asset |
|
||||
| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
|
||||
| `assets/icons/translate.jpg` | `assets/icons/translate.jpg` | hyperframes:asset |
|
||||
| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
|
||||
| `assets/icons/chatgpt.jpg` | `assets/icons/chatgpt.jpg` | hyperframes:asset |
|
||||
| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
|
||||
| `assets/icons/instagram.jpg` | `assets/icons/instagram.jpg` | hyperframes:asset |
|
||||
| `assets/icons/x.jpg` | `assets/icons/x.jpg` | hyperframes:asset |
|
||||
| `assets/icons/proton-mail.jpg` | `assets/icons/proton-mail.jpg` | hyperframes:asset |
|
||||
| `assets/icons/gmail.jpg` | `assets/icons/gmail.jpg` | hyperframes:asset |
|
||||
| `assets/icons/revolut.jpg` | `assets/icons/revolut.jpg` | hyperframes:asset |
|
||||
| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
|
||||
| `assets/icons/phone.jpg` | `assets/icons/phone.jpg` | hyperframes:asset |
|
||||
| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
|
||||
| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
|
||||
| `assets/icons/whatsapp.jpg` | `assets/icons/whatsapp.jpg` | hyperframes:asset |
|
||||
| `assets/icons/notify-messages.jpg` | `assets/icons/notify-messages.jpg` | hyperframes:asset |
|
||||
| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -83,3 +68,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Light Leak"
|
||||
description: "Shader transition with cinematic light leak overlay"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add light-leak
|
||||
```
|
||||
|
||||
That writes one file: `compositions/light-leak.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add light-leak
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `light-leak.html` | `compositions/light-leak.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,13 +3,40 @@ title: "Liquid Glass Context Menu"
|
||||
description: "Frosted glass context menu panel drifting over an aurora shader background"
|
||||
---
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-context-menu
|
||||
```
|
||||
|
||||
That writes `compositions/liquid-glass-context-menu.html`, plus 1 supporting file under `compositions/lib/`.
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
|
||||
Rendering from the CLI switches it on for you. [How it
|
||||
works](/guides/html-in-canvas)
|
||||
</Warning>
|
||||
|
||||
<video className="w-full 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 />
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -26,21 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add liquid-glass-context-menu
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-context-menu.html` | `compositions/liquid-glass-context-menu.html` | hyperframes:composition |
|
||||
| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
|
||||
|
||||
## 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.
|
||||
@@ -56,3 +68,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
||||
|
||||
@@ -3,13 +3,40 @@ title: "Liquid Glass Media Controls"
|
||||
description: "Frosted glass media control panels spreading over an aurora shader background"
|
||||
---
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-media-controls
|
||||
```
|
||||
|
||||
That writes `compositions/liquid-glass-media-controls.html`, plus 1 supporting file under `compositions/lib/`.
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
|
||||
Rendering from the CLI switches it on for you. [How it
|
||||
works](/guides/html-in-canvas)
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -26,21 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add liquid-glass-media-controls
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-media-controls.html` | `compositions/liquid-glass-media-controls.html` | hyperframes:composition |
|
||||
| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
|
||||
|
||||
## 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.
|
||||
@@ -56,3 +68,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
||||
|
||||
@@ -3,13 +3,40 @@ title: "Liquid Glass Notification"
|
||||
description: "Frosted glass notification cards floating over an aurora shader background"
|
||||
---
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-notification
|
||||
```
|
||||
|
||||
That writes `compositions/liquid-glass-notification.html`, plus 2 supporting files under `compositions/lib/` and `compositions/assets/`.
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
|
||||
Rendering from the CLI switches it on for you. [How it
|
||||
works](/guides/html-in-canvas)
|
||||
</Warning>
|
||||
|
||||
<video className="w-full 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 />
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -26,22 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add liquid-glass-notification
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
|
||||
| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
|
||||
| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
|
||||
|
||||
## 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.
|
||||
@@ -57,3 +68,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
||||
|
||||
@@ -3,13 +3,40 @@ title: "Liquid Glass Widgets"
|
||||
description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
|
||||
---
|
||||
|
||||
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add liquid-glass-widgets
|
||||
```
|
||||
|
||||
That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
|
||||
Rendering from the CLI switches it on for you. [How it
|
||||
works](/guides/html-in-canvas)
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -26,22 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add liquid-glass-widgets
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `liquid-glass-widgets.html` | `compositions/liquid-glass-widgets.html` | hyperframes:composition |
|
||||
| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
|
||||
| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
|
||||
|
||||
## 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.
|
||||
@@ -57,3 +68,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
|
||||
|
||||
@@ -3,10 +3,42 @@ title: "Logo Outro"
|
||||
description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
|
||||
---
|
||||
|
||||
`branding` `outro` `logo`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add logo-outro
|
||||
```
|
||||
|
||||
That writes one file: `compositions/logo-outro.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Change the colors
|
||||
|
||||
Set these CSS variables on the block:
|
||||
|
||||
- `--bg-color` — Background. Defaults to `#0a0a0f`.
|
||||
- `--accent-color` — Accent. Defaults to `#1a1a1f`.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +54,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add logo-outro
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `logo-outro.html` | `compositions/logo-outro.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +69,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `branding` `outro` `logo`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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."
|
||||
---
|
||||
|
||||
`broadcast` `lower-third` `news` `overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lower-third-bild
|
||||
```
|
||||
|
||||
That writes `compositions/lower-third-bild.html`, plus 2 supporting files under `compositions/assets/fonts/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,22 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lower-third-bild
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lower-third-bild.html` | `compositions/lower-third-bild.html` | hyperframes:composition |
|
||||
| `assets/fonts/BarlowCondensed-Bold.woff2` | `compositions/assets/fonts/BarlowCondensed-Bold.woff2` | hyperframes:asset |
|
||||
| `assets/fonts/BarlowCondensed-ExtraBold.woff2` | `compositions/assets/fonts/BarlowCondensed-ExtraBold.woff2` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -53,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `broadcast` `lower-third` `news` `overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Accent Underline"
|
||||
description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-accent-underline
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-accent-underline.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-accent-underline
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-accent-underline.html` | `compositions/lt-accent-underline.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Bold Block"
|
||||
description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-bold-block
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-bold-block.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-bold-block
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-bold-block.html` | `compositions/lt-bold-block.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Clean Bar"
|
||||
description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-clean-bar
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-clean-bar.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-clean-bar
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-clean-bar.html` | `compositions/lt-clean-bar.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Color Block"
|
||||
description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-color-block
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-color-block.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-color-block
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-color-block.html` | `compositions/lt-color-block.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Dark Card"
|
||||
description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `dark`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-dark-card
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-dark-card.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-dark-card
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-dark-card.html` | `compositions/lt-dark-card.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `dark`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Kicker Name"
|
||||
description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-kicker-name
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-kicker-name.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-kicker-name
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-kicker-name.html` | `compositions/lt-kicker-name.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Mask Reveal"
|
||||
description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-mask-reveal
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-mask-reveal.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-mask-reveal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-mask-reveal.html` | `compositions/lt-mask-reveal.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Side Rule"
|
||||
description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-side-rule
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-side-rule.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-side-rule
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-side-rule.html` | `compositions/lt-side-rule.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Soft Pill"
|
||||
description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-soft-pill
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-soft-pill.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-soft-pill
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-soft-pill.html` | `compositions/lt-soft-pill.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Lower Third — Stack Bars"
|
||||
description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add lt-stack-bars
|
||||
```
|
||||
|
||||
That writes one file: `compositions/lt-stack-bars.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add lt-stack-bars
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4.8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `lt-stack-bars.html` | `compositions/lt-stack-bars.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "macOS Notification"
|
||||
description: "Animated macOS-style notification banner with app icon and message"
|
||||
---
|
||||
|
||||
`social` `overlay` `notification`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add macos-notification
|
||||
```
|
||||
|
||||
That writes one file: `compositions/macos-notification.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add macos-notification
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `macos-notification.html` | `compositions/macos-notification.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `social` `overlay` `notification`.
|
||||
|
||||
@@ -3,13 +3,40 @@ 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."
|
||||
---
|
||||
|
||||
`html-in-canvas` `3d` `macos` `tahoe` `gltf`
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add macos-tahoe-liquid-glass
|
||||
```
|
||||
|
||||
That writes `compositions/macos-tahoe-liquid-glass.html`, plus 18 supporting files under `models/`, `assets/wallpapers/`, and `assets/icons/`.
|
||||
|
||||
<Warning>
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
|
||||
Rendering from the CLI switches it on for you. [How it
|
||||
works](/guides/html-in-canvas)
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
## Add it to your video
|
||||
|
||||
It runs for 15 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -26,38 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add macos-tahoe-liquid-glass
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 15s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `macos-tahoe-liquid-glass.html` | `compositions/macos-tahoe-liquid-glass.html` | hyperframes:composition |
|
||||
| `models/macbook.glb` | `models/macbook.glb` | hyperframes:asset |
|
||||
| `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | hyperframes:asset |
|
||||
| `assets/icons/finder.png` | `assets/icons/finder.png` | hyperframes:asset |
|
||||
| `assets/icons/safari.jpg` | `assets/icons/safari.jpg` | hyperframes:asset |
|
||||
| `assets/icons/mail.jpg` | `assets/icons/mail.jpg` | hyperframes:asset |
|
||||
| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
|
||||
| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
|
||||
| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
|
||||
| `assets/icons/toast-messages.jpg` | `assets/icons/toast-messages.jpg` | hyperframes:asset |
|
||||
| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
|
||||
| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
|
||||
| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
|
||||
| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
|
||||
| `assets/icons/dock-finder.png` | `assets/icons/dock-finder.png` | hyperframes:asset |
|
||||
| `assets/icons/dock-safari.jpg` | `assets/icons/dock-safari.jpg` | hyperframes:asset |
|
||||
| `assets/icons/dock-mail.jpg` | `assets/icons/dock-mail.jpg` | hyperframes:asset |
|
||||
| `assets/icons/dock-photos.jpg` | `assets/icons/dock-photos.jpg` | hyperframes:asset |
|
||||
| `assets/icons/dock-music.jpg` | `assets/icons/dock-music.jpg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -73,3 +68,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `html-in-canvas` `3d` `macos` `tahoe` `gltf`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`background` `gradient` `minimal` `professional` `presentation`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-background
|
||||
```
|
||||
|
||||
That writes one file: `compositions/mk-background.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 10 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add mk-background
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 10s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-background.html` | `compositions/mk-background.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `background` `gradient` `minimal` `professional` `presentation`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`typography` `karaoke` `captions` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-callout-highlight
|
||||
```
|
||||
|
||||
That writes one file: `compositions/mk-callout-highlight.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add mk-callout-highlight
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-callout-highlight.html` | `compositions/mk-callout-highlight.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `typography` `karaoke` `captions` `minimal`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`transition` `typography` `wipe`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-clone-wall-transition
|
||||
```
|
||||
|
||||
That writes one file: `compositions/mk-clone-wall-transition.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 2.4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add mk-clone-wall-transition
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 2.4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-clone-wall-transition.html` | `compositions/mk-clone-wall-transition.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `typography` `wipe`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`data-viz` `chart` `graph` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-line-graph
|
||||
```
|
||||
|
||||
That writes one file: `compositions/mk-line-graph.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add mk-line-graph
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-line-graph.html` | `compositions/mk-line-graph.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `data-viz` `chart` `graph` `minimal`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`placeholder` `media` `grid` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-placeholder-grid
|
||||
```
|
||||
|
||||
That writes one file: `compositions/mk-placeholder-grid.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add mk-placeholder-grid
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-placeholder-grid.html` | `compositions/mk-placeholder-grid.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `placeholder` `media` `grid` `minimal`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`data-viz` `stat` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-progress-stat
|
||||
```
|
||||
|
||||
That writes one file: `compositions/mk-progress-stat.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add mk-progress-stat
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-progress-stat.html` | `compositions/mk-progress-stat.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `data-viz` `stat` `minimal`.
|
||||
|
||||
@@ -3,10 +3,35 @@ 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"
|
||||
---
|
||||
|
||||
`data-viz` `list` `minimal` `professional`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-specs-list
|
||||
```
|
||||
|
||||
That writes one file: `compositions/mk-specs-list.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 8 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add mk-specs-list
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 8s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-specs-list.html` | `compositions/mk-specs-list.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `data-viz` `list` `minimal` `professional`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "News Ticker"
|
||||
description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
|
||||
---
|
||||
|
||||
`lower-third` `overlay` `news` `ticker`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add news-ticker
|
||||
```
|
||||
|
||||
That writes one file: `compositions/news-ticker.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add news-ticker
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `news-ticker.html` | `compositions/news-ticker.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `lower-third` `overlay` `news` `ticker`.
|
||||
|
||||
@@ -3,17 +3,34 @@ 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."
|
||||
---
|
||||
|
||||
`showcase` `map` `annotation` `youtube` `kinetic`
|
||||
<video className="w-full 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 />
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
## Install
|
||||
|
||||
## Source Prompt
|
||||
|
||||
```text
|
||||
use 📷HyperFrames by HeyGen and Image Gen if you need it for assets or like png images of assets without backround to make a youtube style camera moving in out and other things that are in youtube videos, to make a video of a map zooms in on north korea and a scribble style circle circles the country and a text pops up above it saying locked down when the text apears the video turns a bit redish make the video 7 seconds long id like the map to look realistic and accurate to real lfe
|
||||
```bash Terminal
|
||||
npx hyperframes add north-korea-locked-down
|
||||
```
|
||||
|
||||
<video className="w-full 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 />
|
||||
That writes `compositions/north-korea-locked-down.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 7 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -30,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add north-korea-locked-down
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 7s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `north-korea-locked-down.html` | `compositions/north-korea-locked-down.html` | hyperframes:composition |
|
||||
| `assets/korea-map.png` | `assets/korea-map.png` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -60,3 +62,17 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `showcase` `map` `annotation` `youtube` `kinetic`.
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
|
||||
<Accordion title="The prompt this was built from">
|
||||
|
||||
```text
|
||||
use 📷HyperFrames by HeyGen and Image Gen if you need it for assets or like png images of assets without backround to make a youtube style camera moving in out and other things that are in youtube videos, to make a video of a map zooms in on north korea and a scribble style circle circles the country and a text pops up above it saying locked down when the text apears the video turns a bit redish make the video 7 seconds long id like the map to look realistic and accurate to real lfe
|
||||
```
|
||||
|
||||
</Accordion>
|
||||
|
||||
@@ -3,17 +3,34 @@ 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."
|
||||
---
|
||||
|
||||
`showcase` `travel` `map` `youtube` `sfx`
|
||||
<video className="w-full 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 />
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
## Install
|
||||
|
||||
## Source Prompt
|
||||
|
||||
```text
|
||||
📷HyperFrames by HeyGen Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.
|
||||
```bash Terminal
|
||||
npx hyperframes add nyc-paris-flight
|
||||
```
|
||||
|
||||
<video className="w-full 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 />
|
||||
That writes `compositions/nyc-paris-flight.html`, plus 2 supporting files under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 6 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
@@ -30,22 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add nyc-paris-flight
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 6s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `nyc-paris-flight.html` | `compositions/nyc-paris-flight.html` | hyperframes:composition |
|
||||
| `assets/map-nyc-paris.png` | `assets/map-nyc-paris.png` | hyperframes:asset |
|
||||
| `assets/sfx-mix.wav` | `assets/sfx-mix.wav` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -61,3 +62,17 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `showcase` `travel` `map` `youtube` `sfx`.
|
||||
|
||||
Created by [Stronkter](https://x.com/Stronkter).
|
||||
|
||||
<Accordion title="The prompt this was built from">
|
||||
|
||||
```text
|
||||
📷HyperFrames by HeyGen Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.
|
||||
```
|
||||
|
||||
</Accordion>
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Organic Light Leak Overlay"
|
||||
description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
|
||||
---
|
||||
|
||||
`light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add organic-light-leak-overlay
|
||||
```
|
||||
|
||||
That writes one file: `compositions/organic-light-leak-overlay.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add organic-light-leak-overlay
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `organic-light-leak-overlay.html` | `compositions/organic-light-leak-overlay.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Reddit Post Card"
|
||||
description: "Animated Reddit post card overlay with upvotes and comments"
|
||||
---
|
||||
|
||||
`social` `overlay` `reddit`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add reddit-post
|
||||
```
|
||||
|
||||
That writes one file: `compositions/reddit-post.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 5 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add reddit-post
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `reddit-post.html` | `compositions/reddit-post.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `social` `overlay` `reddit`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Ridged Burn"
|
||||
description: "Shader transition with ridged turbulence burn effect"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add ridged-burn
|
||||
```
|
||||
|
||||
That writes one file: `compositions/ridged-burn.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add ridged-burn
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `ridged-burn.html` | `compositions/ridged-burn.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Ripple Waves"
|
||||
description: "Shader transition with concentric ripple wave distortion"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add ripple-waves
|
||||
```
|
||||
|
||||
That writes one file: `compositions/ripple-waves.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add ripple-waves
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `ripple-waves.html` | `compositions/ripple-waves.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "SDF Iris"
|
||||
description: "Shader transition with signed distance field iris reveal"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add sdf-iris
|
||||
```
|
||||
|
||||
That writes one file: `compositions/sdf-iris.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add sdf-iris
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `sdf-iris.html` | `compositions/sdf-iris.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Spain Map"
|
||||
description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
|
||||
---
|
||||
|
||||
`data` `map` `geography` `spain` `europe` `choropleth`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add spain-map
|
||||
```
|
||||
|
||||
That writes one file: `compositions/spain-map.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 12 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add spain-map
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 12s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `spain-map.html` | `compositions/spain-map.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `data` `map` `geography` `spain` `europe` `choropleth`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Spotify Now Playing"
|
||||
description: "Animated Spotify now-playing card with album art and progress bar"
|
||||
---
|
||||
|
||||
`social` `overlay` `spotify`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add spotify-card
|
||||
```
|
||||
|
||||
That writes one file: `compositions/spotify-card.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 5 seconds at 1080×1920. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add spotify-card
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1080×1920 |
|
||||
| Duration | 5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `spotify-card.html` | `compositions/spotify-card.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `social` `overlay` `spotify`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Swirl Vortex"
|
||||
description: "Shader transition with swirling vortex distortion"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add swirl-vortex
|
||||
```
|
||||
|
||||
That writes one file: `compositions/swirl-vortex.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add swirl-vortex
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `swirl-vortex.html` | `compositions/swirl-vortex.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Thermal Distortion"
|
||||
description: "Shader transition with heat haze thermal distortion"
|
||||
---
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add thermal-distortion
|
||||
```
|
||||
|
||||
That writes one file: `compositions/thermal-distortion.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add thermal-distortion
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 4s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `thermal-distortion.html` | `compositions/thermal-distortion.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `shader`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "TikTok Follow"
|
||||
description: "Animated TikTok follow overlay with profile card and follow button"
|
||||
---
|
||||
|
||||
`social` `overlay` `tiktok`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add tiktok-follow
|
||||
```
|
||||
|
||||
That writes `compositions/tiktok-follow.html`, plus 1 supporting file under `assets/`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 4.5 seconds at 1080×1920. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,21 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add tiktok-follow
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1080×1920 |
|
||||
| Duration | 4.5s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `tiktok-follow.html` | `compositions/tiktok-follow.html` | hyperframes:composition |
|
||||
| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
|
||||
|
||||
## 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.
|
||||
@@ -52,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `social` `overlay` `tiktok`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "3D Transitions"
|
||||
description: "Showcase of 3D perspective flip and rotate transitions"
|
||||
---
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add transitions-3d
|
||||
```
|
||||
|
||||
That writes one file: `compositions/transitions-3d.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 11 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add transitions-3d
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 11s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `transitions-3d.html` | `compositions/transitions-3d.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `showcase`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Blur Transitions"
|
||||
description: "Showcase of blur-based transitions between scenes"
|
||||
---
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add transitions-blur
|
||||
```
|
||||
|
||||
That writes one file: `compositions/transitions-blur.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 20 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add transitions-blur
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 20s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `transitions-blur.html` | `compositions/transitions-blur.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
Tagged `transition` `showcase`.
|
||||
|
||||
@@ -3,10 +3,35 @@ title: "Cover Transitions"
|
||||
description: "Showcase of cover/uncover slide transitions"
|
||||
---
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add transitions-cover
|
||||
```
|
||||
|
||||
That writes one file: `compositions/transitions-cover.html`.
|
||||
|
||||
## Add it to your video
|
||||
|
||||
It runs for 21 seconds at 1920×1080. Paste this into your composition:
|
||||
|
||||
```html index.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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## Add it to a project
|
||||
|
||||
### Ask your agent
|
||||
@@ -22,20 +47,6 @@ Replace the demo content with mine and match the existing design and timing.
|
||||
npx hyperframes add transitions-cover
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 21s |
|
||||
|
||||
**Installed files**
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `transitions-cover.html` | `compositions/transitions-cover.html` | hyperframes:composition |
|
||||
|
||||
## 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.
|
||||
@@ -51,3 +62,7 @@ Ask your agent to replace the example content, match the project style, and plac
|
||||
- [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 */}
|
||||
|
||||
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