diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index 49c816d1c..722c75984 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -3,10 +3,35 @@ title: "App Showcase"
description: "Fitness app product showcase with three floating smartphone screens"
---
-`showcase` `app` `3d`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/apple-money-count.mdx b/docs/catalog/blocks/apple-money-count.mdx
index 69ee5680d..f4ff024c7 100644
--- a/docs/catalog/blocks/apple-money-count.mdx
+++ b/docs/catalog/blocks/apple-money-count.mdx
@@ -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`
+
-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
```
-
+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
+
+```
+
+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).
+
+
+
+```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.
+```
+
+
diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
index 00c71e08f..dea8c8350 100644
--- a/docs/catalog/blocks/beat-freeze-cut.mdx
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/blue-sweater-intro-video.mdx b/docs/catalog/blocks/blue-sweater-intro-video.mdx
index b17912927..9da9566c7 100644
--- a/docs/catalog/blocks/blue-sweater-intro-video.mdx
+++ b/docs/catalog/blocks/blue-sweater-intro-video.mdx
@@ -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_).
-
+## 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
+
+```
+
+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_).
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
index 2114cb1d8..2d26ffe8b 100644
--- a/docs/catalog/blocks/camcorder-hud.mdx
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index 6b8c1ce7d..0d167775b 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -3,10 +3,35 @@ title: "Chromatic Radial Split"
description: "Shader transition with chromatic aberration radial split"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index df248f748..7b9b21d78 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -3,10 +3,35 @@ title: "Cinematic Zoom"
description: "Shader transition with dramatic zoom blur"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
index df6685590..65767a0ec 100644
--- a/docs/catalog/blocks/code-3d-extrude.mdx
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
index 3c6b0ab8f..8aa9aecea 100644
--- a/docs/catalog/blocks/code-diff.mdx
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
index 24089fbbd..45cbd392c 100644
--- a/docs/catalog/blocks/code-highlight.mdx
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
index 5795e7ba5..181287bde 100644
--- a/docs/catalog/blocks/code-morph.mdx
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
index b4aa8a425..f946757f4 100644
--- a/docs/catalog/blocks/code-particle-assemble.mdx
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
index fdae5829a..db9afc74c 100644
--- a/docs/catalog/blocks/code-scroll.mdx
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
index 4d66dd0a2..12549f5ca 100644
--- a/docs/catalog/blocks/code-shader-dissolve.mdx
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index 012e3f121..499447f8c 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
index eebb9b950..eccfd2382 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
index 2a64bd9ac..7f7e82bfb 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
index 8583a02ee..4f7362878 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
index a2faee9de..8cb91ef8b 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
index 62af2f0e8..5ab1e200b 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
index 909237677..199e81596 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
index 5222330b9..c9c899f4b 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index ae3d33417..0eb15c064 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
index 6a977cdac..e7ba21057 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
index 55709927f..05573d412 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
index ebc9150d6..dccdaaa3a 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -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`
+
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index ae7fae709..b667444b5 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index 3c579a397..1c109b901 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-dark-plus.mdx b/docs/catalog/blocks/code-snippet-dark-plus.mdx
index 5216159ec..405e87fa2 100644
--- a/docs/catalog/blocks/code-snippet-dark-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-plus.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
index 20c924d12..757b06045 100644
--- a/docs/catalog/blocks/code-snippet-flight.mdx
+++ b/docs/catalog/blocks/code-snippet-flight.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
index fa9212bd3..7976d56c8 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-high-contrast.mdx b/docs/catalog/blocks/code-snippet-high-contrast.mdx
index 6c5724f97..83b22c3cc 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-light-2026.mdx b/docs/catalog/blocks/code-snippet-light-2026.mdx
index e9eb473d2..c3e281ae5 100644
--- a/docs/catalog/blocks/code-snippet-light-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-light-2026.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-light-modern.mdx b/docs/catalog/blocks/code-snippet-light-modern.mdx
index 735283f37..15cd0abd6 100644
--- a/docs/catalog/blocks/code-snippet-light-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-light-modern.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-light-plus.mdx b/docs/catalog/blocks/code-snippet-light-plus.mdx
index f8fe05189..452561fff 100644
--- a/docs/catalog/blocks/code-snippet-light-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-light-plus.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-monokai.mdx b/docs/catalog/blocks/code-snippet-monokai.mdx
index 68fb16b7f..a90bafecc 100644
--- a/docs/catalog/blocks/code-snippet-monokai.mdx
+++ b/docs/catalog/blocks/code-snippet-monokai.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-solarized-light.mdx b/docs/catalog/blocks/code-snippet-solarized-light.mdx
index 8a140c3cb..c0f734f16 100644
--- a/docs/catalog/blocks/code-snippet-solarized-light.mdx
+++ b/docs/catalog/blocks/code-snippet-solarized-light.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
index c36c3b9f2..62e6483fc 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
index 1fadf21a2..fac9abcbf 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
index a7c43b83d..6148f0526 100644
--- a/docs/catalog/blocks/code-typing.mdx
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index 346ebc2e1..2756fa9d9 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -3,10 +3,35 @@ title: "Cross Warp Morph"
description: "Shader transition with cross-warped morphing"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index 427cc7c5f..040d60961 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -3,10 +3,42 @@ title: "Data Chart"
description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
---
-`data` `chart` `statistics`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index 3bd87774e..6a88d3389 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -3,10 +3,35 @@ title: "Domain Warp Dissolve"
description: "Shader transition with fractal noise domain warping"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
index db4d5a2a6..5b4cdffef 100644
--- a/docs/catalog/blocks/editorial-flash-overlay.mdx
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index f85df513e..e90e25a4f 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -3,10 +3,35 @@ title: "Flash Through White"
description: "Shader transition with white flash crossfade"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index eb128fe3d..df00fb199 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 0dbb6f7a8..29a829fc8 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -3,10 +3,35 @@ title: "Flowchart"
description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
---
-`diagram` `flowchart` `interactive`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
index 2acd7eb4d..09e80455d 100644
--- a/docs/catalog/blocks/freeze-frame-dressing.mdx
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index 67cdf5307..a738fcf6a 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -3,10 +3,35 @@ title: "Glitch"
description: "Shader transition with digital glitch artifacts"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index 322025425..f53fbdc7d 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -3,10 +3,35 @@ title: "Gravitational Lens"
description: "Shader transition with gravitational lensing distortion"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
index 65f265d95..30ae6df41 100644
--- a/docs/catalog/blocks/hw-frame.mdx
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
index eb9ddb14f..cd28aed7e 100644
--- a/docs/catalog/blocks/hw-path-text.mdx
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
index 75e801e73..ea98b7e53 100644
--- a/docs/catalog/blocks/hw-pipeline.mdx
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
index 943055e58..2e3ca26c1 100644
--- a/docs/catalog/blocks/hw-scribble-transition.mdx
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
index c08c39b79..6e221c595 100644
--- a/docs/catalog/blocks/hw-text-cloud.mdx
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
index 9c26f47f0..514608efe 100644
--- a/docs/catalog/blocks/hw-title.mdx
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index 58abe9c56..3a704f395 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -3,10 +3,35 @@ title: "Instagram Follow"
description: "Animated Instagram follow overlay with profile card and follow button"
---
-`social` `overlay` `instagram`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index 0bdfe3edc..d7d574afc 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -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`
+
+
+## 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/`.
-**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)
-
+## Add it to your video
+
+It runs for 15 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index 2220b42b9..91e387ffe 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -3,10 +3,35 @@ title: "Light Leak"
description: "Shader transition with cinematic light leak overlay"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/liquid-glass-context-menu.mdx b/docs/catalog/blocks/liquid-glass-context-menu.mdx
index 98339d71b..395df6868 100644
--- a/docs/catalog/blocks/liquid-glass-context-menu.mdx
+++ b/docs/catalog/blocks/liquid-glass-context-menu.mdx
@@ -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`
+
+
+## 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/`.
-**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)
-
+## Add it to your video
+
+It runs for 8 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/liquid-glass-media-controls.mdx b/docs/catalog/blocks/liquid-glass-media-controls.mdx
index cdd934861..5a9717a22 100644
--- a/docs/catalog/blocks/liquid-glass-media-controls.mdx
+++ b/docs/catalog/blocks/liquid-glass-media-controls.mdx
@@ -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`
+
+
+## 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/`.
-**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)
-
+## Add it to your video
+
+It runs for 8 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index 8c092dfac..0f16f5f4d 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -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`
+
+
+## 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/`.
-**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)
-
+## Add it to your video
+
+It runs for 8 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index 58fafbfc3..a78c969a3 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -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`
+
+
+## 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/`.
-**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)
-
+## Add it to your video
+
+It runs for 8 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index 676958ee8..cbcc57217 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
index 42bc83ecf..c589cb148 100644
--- a/docs/catalog/blocks/lower-third-bild.mdx
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-accent-underline.mdx b/docs/catalog/blocks/lt-accent-underline.mdx
index 59a4111b2..1db556d20 100644
--- a/docs/catalog/blocks/lt-accent-underline.mdx
+++ b/docs/catalog/blocks/lt-accent-underline.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-bold-block.mdx b/docs/catalog/blocks/lt-bold-block.mdx
index dfa9623c4..d372efa1a 100644
--- a/docs/catalog/blocks/lt-bold-block.mdx
+++ b/docs/catalog/blocks/lt-bold-block.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-clean-bar.mdx b/docs/catalog/blocks/lt-clean-bar.mdx
index 59129b4a7..655afab0a 100644
--- a/docs/catalog/blocks/lt-clean-bar.mdx
+++ b/docs/catalog/blocks/lt-clean-bar.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-color-block.mdx b/docs/catalog/blocks/lt-color-block.mdx
index 8f2a845bd..8114e6eeb 100644
--- a/docs/catalog/blocks/lt-color-block.mdx
+++ b/docs/catalog/blocks/lt-color-block.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-dark-card.mdx b/docs/catalog/blocks/lt-dark-card.mdx
index 6bc382841..70b44d017 100644
--- a/docs/catalog/blocks/lt-dark-card.mdx
+++ b/docs/catalog/blocks/lt-dark-card.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-kicker-name.mdx b/docs/catalog/blocks/lt-kicker-name.mdx
index a6af604c4..596795acf 100644
--- a/docs/catalog/blocks/lt-kicker-name.mdx
+++ b/docs/catalog/blocks/lt-kicker-name.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-mask-reveal.mdx b/docs/catalog/blocks/lt-mask-reveal.mdx
index abf98daa1..47f5217ff 100644
--- a/docs/catalog/blocks/lt-mask-reveal.mdx
+++ b/docs/catalog/blocks/lt-mask-reveal.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-side-rule.mdx b/docs/catalog/blocks/lt-side-rule.mdx
index 5a775128e..7458e9558 100644
--- a/docs/catalog/blocks/lt-side-rule.mdx
+++ b/docs/catalog/blocks/lt-side-rule.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-soft-pill.mdx b/docs/catalog/blocks/lt-soft-pill.mdx
index 406c9f8da..0af6d55f6 100644
--- a/docs/catalog/blocks/lt-soft-pill.mdx
+++ b/docs/catalog/blocks/lt-soft-pill.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/lt-stack-bars.mdx b/docs/catalog/blocks/lt-stack-bars.mdx
index 21a4b48b5..862231d6c 100644
--- a/docs/catalog/blocks/lt-stack-bars.mdx
+++ b/docs/catalog/blocks/lt-stack-bars.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index 58508174f..739a7b2e9 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -3,10 +3,35 @@ title: "macOS Notification"
description: "Animated macOS-style notification banner with app icon and message"
---
-`social` `overlay` `notification`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index 51f4b3453..8855852b2 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -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`
+
+
+## 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/`.
-**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)
-
+## Add it to your video
+
+It runs for 15 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
index 101459f7f..576a6b162 100644
--- a/docs/catalog/blocks/mk-background.mdx
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
index cd007cdcb..1bd61dcfb 100644
--- a/docs/catalog/blocks/mk-callout-highlight.mdx
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
index 2e53f6585..a8b57a501 100644
--- a/docs/catalog/blocks/mk-clone-wall-transition.mdx
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
index 0ce436deb..1379ae0f5 100644
--- a/docs/catalog/blocks/mk-line-graph.mdx
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
index a743072f2..aae979152 100644
--- a/docs/catalog/blocks/mk-placeholder-grid.mdx
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
index ac7bc07a6..e8769a24b 100644
--- a/docs/catalog/blocks/mk-progress-stat.mdx
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
index e5624a085..dc22b4830 100644
--- a/docs/catalog/blocks/mk-specs-list.mdx
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/news-ticker.mdx b/docs/catalog/blocks/news-ticker.mdx
index 96ff4493c..941392fbc 100644
--- a/docs/catalog/blocks/news-ticker.mdx
+++ b/docs/catalog/blocks/news-ticker.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/north-korea-locked-down.mdx b/docs/catalog/blocks/north-korea-locked-down.mdx
index 2145aa075..da3542850 100644
--- a/docs/catalog/blocks/north-korea-locked-down.mdx
+++ b/docs/catalog/blocks/north-korea-locked-down.mdx
@@ -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`
+
-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
```
-
+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
+
+```
+
+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).
+
+
+
+```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
+```
+
+
diff --git a/docs/catalog/blocks/nyc-paris-flight.mdx b/docs/catalog/blocks/nyc-paris-flight.mdx
index b26fcec17..0bdd59274 100644
--- a/docs/catalog/blocks/nyc-paris-flight.mdx
+++ b/docs/catalog/blocks/nyc-paris-flight.mdx
@@ -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`
+
-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
```
-
+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
+
+```
+
+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).
+
+
+
+```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.
+```
+
+
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
index 2bf876eec..debd24eb6 100644
--- a/docs/catalog/blocks/organic-light-leak-overlay.mdx
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index 9fbd55815..6cec8d406 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -3,10 +3,35 @@ title: "Reddit Post Card"
description: "Animated Reddit post card overlay with upvotes and comments"
---
-`social` `overlay` `reddit`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index 4246e3f33..2f6241de4 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -3,10 +3,35 @@ title: "Ridged Burn"
description: "Shader transition with ridged turbulence burn effect"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index a6fd37982..e4812e2d3 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -3,10 +3,35 @@ title: "Ripple Waves"
description: "Shader transition with concentric ripple wave distortion"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index 18da36e53..b1e5196a8 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -3,10 +3,35 @@ title: "SDF Iris"
description: "Shader transition with signed distance field iris reveal"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/spain-map.mdx b/docs/catalog/blocks/spain-map.mdx
index 743397926..e8b698973 100644
--- a/docs/catalog/blocks/spain-map.mdx
+++ b/docs/catalog/blocks/spain-map.mdx
@@ -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`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index 196a6c236..054dca1cf 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -3,10 +3,35 @@ title: "Spotify Now Playing"
description: "Animated Spotify now-playing card with album art and progress bar"
---
-`social` `overlay` `spotify`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index 984686419..09a2645f4 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -3,10 +3,35 @@ title: "Swirl Vortex"
description: "Shader transition with swirling vortex distortion"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index a478d2cda..7421aa30b 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -3,10 +3,35 @@ title: "Thermal Distortion"
description: "Shader transition with heat haze thermal distortion"
---
-`transition` `shader`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index 510cf9c1d..16708de49 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -3,10 +3,35 @@ title: "TikTok Follow"
description: "Animated TikTok follow overlay with profile card and follow button"
---
-`social` `overlay` `tiktok`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index 886764508..05bade778 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -3,10 +3,35 @@ title: "3D Transitions"
description: "Showcase of 3D perspective flip and rotate transitions"
---
-`transition` `showcase`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index 4ade0819a..7d0e44cc3 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -3,10 +3,35 @@ title: "Blur Transitions"
description: "Showcase of blur-based transitions between scenes"
---
-`transition` `showcase`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index f53ef285a..8c33eb838 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -3,10 +3,35 @@ title: "Cover Transitions"
description: "Showcase of cover/uncover slide transitions"
---
-`transition` `showcase`
-
+## 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
+
+```
+
+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`.
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index 12e7bc6b1..cdcffc247 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -3,10 +3,35 @@ title: "Destruction Transitions"
description: "Showcase of destructive break-apart transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-destruction
+```
+
+That writes one file: `compositions/transitions-destruction.html`.
+
+## Add it to your video
+
+It runs for 14 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-destruction
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 14s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-destruction.html` | `compositions/transitions-destruction.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`.
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index 023f8a5c7..0e2b6735e 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -3,10 +3,35 @@ title: "Dissolve Transitions"
description: "Showcase of dissolve and fade transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-dissolve
+```
+
+That writes one file: `compositions/transitions-dissolve.html`.
+
+## Add it to your video
+
+It runs for 24 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-dissolve
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 24s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-dissolve.html` | `compositions/transitions-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` `showcase`.
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index a32e29bf3..f9285b097 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -3,10 +3,35 @@ title: "Distortion Transitions"
description: "Showcase of warp and distortion transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-distortion
+```
+
+That writes one file: `compositions/transitions-distortion.html`.
+
+## Add it to your video
+
+It runs for 21 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-distortion
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 21s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-distortion.html` | `compositions/transitions-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` `showcase`.
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index 6056825c6..df528b64d 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -3,10 +3,35 @@ title: "Grid Transitions"
description: "Showcase of grid-based tile transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-grid
+```
+
+That writes one file: `compositions/transitions-grid.html`.
+
+## Add it to your video
+
+It runs for 11 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-grid
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 11s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-grid.html` | `compositions/transitions-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 `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index 7f16fd994..d506fb58d 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -3,10 +3,35 @@ title: "Light Transitions"
description: "Showcase of light-based glow and flash transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-light
+```
+
+That writes one file: `compositions/transitions-light.html`.
+
+## Add it to your video
+
+It runs for 21 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-light
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 21s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-light.html` | `compositions/transitions-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 `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index b71df6a60..7c70700e5 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -3,10 +3,35 @@ title: "Mechanical Transitions"
description: "Showcase of mechanical shutter and iris transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-mechanical
+```
+
+That writes one file: `compositions/transitions-mechanical.html`.
+
+## Add it to your video
+
+It runs for 15 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-mechanical
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 15s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-mechanical.html` | `compositions/transitions-mechanical.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`.
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index a1f871fae..c240bad27 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -3,10 +3,35 @@ title: "Other Transitions"
description: "Showcase of miscellaneous creative transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-other
+```
+
+That writes one file: `compositions/transitions-other.html`.
+
+## Add it to your video
+
+It runs for 20 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-other
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 20s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-other.html` | `compositions/transitions-other.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`.
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index 6bc7bb593..ccc5daf67 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -3,10 +3,35 @@ title: "Push Transitions"
description: "Showcase of push and slide transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-push
+```
+
+That writes one file: `compositions/transitions-push.html`.
+
+## Add it to your video
+
+It runs for 24 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-push
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 24s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-push.html` | `compositions/transitions-push.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`.
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index c307b81c6..8325910eb 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -3,10 +3,35 @@ title: "Radial Transitions"
description: "Showcase of radial wipe and reveal transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-radial
+```
+
+That writes one file: `compositions/transitions-radial.html`.
+
+## Add it to your video
+
+It runs for 20 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-radial
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 20s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-radial.html` | `compositions/transitions-radial.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`.
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index 646ca6efc..23179042c 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -3,10 +3,35 @@ title: "Scale Transitions"
description: "Showcase of scale and zoom transitions"
---
-`transition` `showcase`
-
+## Install
+
+```bash Terminal
+npx hyperframes add transitions-scale
+```
+
+That writes one file: `compositions/transitions-scale.html`.
+
+## Add it to your video
+
+It runs for 15 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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-scale
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 15s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `transitions-scale.html` | `compositions/transitions-scale.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`.
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index 2f878ee6e..e0caaf7eb 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -3,10 +3,35 @@ title: "3D UI Reveal"
description: "Perspective 3D reveal animation for UI elements"
---
-`showcase` `3d` `reveal`
-
+## Install
+
+```bash Terminal
+npx hyperframes add ui-3d-reveal
+```
+
+That writes one file: `compositions/ui-3d-reveal.html`.
+
+## Add it to your video
+
+It runs for 13 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 ui-3d-reveal
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 13s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `ui-3d-reveal.html` | `compositions/ui-3d-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 `showcase` `3d` `reveal`.
diff --git a/docs/catalog/blocks/us-map-bubble.mdx b/docs/catalog/blocks/us-map-bubble.mdx
index 19a930729..e0bd507a3 100644
--- a/docs/catalog/blocks/us-map-bubble.mdx
+++ b/docs/catalog/blocks/us-map-bubble.mdx
@@ -3,10 +3,35 @@ title: "US Bubble Map"
description: "Animated US bubble map with proportional city markers, value callouts, and connection lines β composable with us-map"
---
-`data` `map` `geography` `usa` `bubble` `cities`
-
+## Install
+
+```bash Terminal
+npx hyperframes add us-map-bubble
+```
+
+That writes one file: `compositions/us-map-bubble.html`.
+
+## Add it to your video
+
+It runs for 12 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 us-map-bubble
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 12s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `us-map-bubble.html` | `compositions/us-map-bubble.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` `usa` `bubble` `cities`.
diff --git a/docs/catalog/blocks/us-map-flow.mdx b/docs/catalog/blocks/us-map-flow.mdx
index 2e0a67df4..565376214 100644
--- a/docs/catalog/blocks/us-map-flow.mdx
+++ b/docs/catalog/blocks/us-map-flow.mdx
@@ -3,10 +3,35 @@ title: "US Flow Map"
description: "Animated connection arcs between US cities over a base map β composable origin-destination flow visualization"
---
-`data` `map` `geography` `usa` `flow` `connections` `arcs`
-
+## Install
+
+```bash Terminal
+npx hyperframes add us-map-flow
+```
+
+That writes one file: `compositions/us-map-flow.html`.
+
+## Add it to your video
+
+It runs for 12 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 us-map-flow
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 12s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `us-map-flow.html` | `compositions/us-map-flow.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` `usa` `flow` `connections` `arcs`.
diff --git a/docs/catalog/blocks/us-map-hex.mdx b/docs/catalog/blocks/us-map-hex.mdx
index 59d35ec7f..5bbb3a1be 100644
--- a/docs/catalog/blocks/us-map-hex.mdx
+++ b/docs/catalog/blocks/us-map-hex.mdx
@@ -3,10 +3,35 @@ title: "US Hex Grid Map"
description: "Animated hexagonal tile grid map β each state as an equal-weight hex with data fill and abbreviation label"
---
-`data` `map` `geography` `usa` `hexgrid` `tilegrid`
-
+## Install
+
+```bash Terminal
+npx hyperframes add us-map-hex
+```
+
+That writes one file: `compositions/us-map-hex.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 us-map-hex
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 10s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `us-map-hex.html` | `compositions/us-map-hex.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` `usa` `hexgrid` `tilegrid`.
diff --git a/docs/catalog/blocks/us-map.mdx b/docs/catalog/blocks/us-map.mdx
index f55c9390b..d5f627522 100644
--- a/docs/catalog/blocks/us-map.mdx
+++ b/docs/catalog/blocks/us-map.mdx
@@ -3,10 +3,35 @@ title: "US Map"
description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend β pure inline SVG with GSAP"
---
-`data` `map` `geography` `usa` `choropleth`
-
+## Install
+
+```bash Terminal
+npx hyperframes add us-map
+```
+
+That writes one file: `compositions/us-map.html`.
+
+## Add it to your video
+
+It runs for 12 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 us-map
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 12s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `us-map.html` | `compositions/us-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` `usa` `choropleth`.
diff --git a/docs/catalog/blocks/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index c639feef5..0b028d6a7 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -3,13 +3,40 @@ title: "iPhone & MacBook 3D Showcase"
description: "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360Β° turntable."
---
-`html-in-canvas` `3d` `device` `iphone` `macbook` `gltf`
+
+
+## Install
+
+```bash Terminal
+npx hyperframes add vfx-iphone-device
+```
+
+That writes `compositions/vfx-iphone-device.html`, plus 4 supporting files under `models/`.
-**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)
-
+## Add it to your video
+
+It runs for 15 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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,24 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add vfx-iphone-device
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 15s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `vfx-iphone-device.html` | `compositions/vfx-iphone-device.html` | hyperframes:composition |
-| `models/iphone.glb` | `models/iphone.glb` | asset |
-| `models/macbook.glb` | `models/macbook.glb` | asset |
-| `models/hyperframes-mobile.png` | `models/hyperframes-mobile.png` | asset |
-| `models/hyperframes-desktop.png` | `models/hyperframes-desktop.png` | asset |
-
## 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.
@@ -59,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` `device` `iphone` `macbook` `gltf`.
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index 04a85c81a..0feda3266 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -3,13 +3,47 @@ title: "Liquid Background"
description: "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics."
---
-`html-in-canvas` `liquid` `webgl` `displacement` `background`
+
+
+## Install
+
+```bash Terminal
+npx hyperframes add vfx-liquid-background
+```
+
+That writes one file: `compositions/vfx-liquid-background.html`.
-**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)
-
+## Add it to your video
+
+It runs for 12 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 `#0a0e17`.
+- `--text-color` β Text color. Defaults to `#e2e8f0`.
## Add it to a project
@@ -26,20 +60,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add vfx-liquid-background
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 12s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `vfx-liquid-background.html` | `compositions/vfx-liquid-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.
@@ -55,3 +75,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` `webgl` `displacement` `background`.
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index b1f2642ac..017b9a016 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -3,13 +3,47 @@ title: "Liquid Glass"
description: "VFX composition block"
---
-`html-in-canvas` `webgl`
+
+
+## Install
+
+```bash Terminal
+npx hyperframes add vfx-liquid-glass
+```
+
+That writes one file: `compositions/vfx-liquid-glass.html`.
-**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)
-
+## Add it to your video
+
+It runs for 20 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 `#030407`.
+- `--accent-color` β Accent. Defaults to `#00d4ff`.
## Add it to a project
@@ -26,20 +60,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add vfx-liquid-glass
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 20s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `vfx-liquid-glass.html` | `compositions/vfx-liquid-glass.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.
@@ -55,3 +75,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` `webgl`.
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index e10a13ef7..8cfc47969 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -3,13 +3,47 @@ title: "Magnetic"
description: "VFX composition block"
---
-`html-in-canvas` `webgl`
+
+
+## Install
+
+```bash Terminal
+npx hyperframes add vfx-magnetic
+```
+
+That writes one file: `compositions/vfx-magnetic.html`.
-**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)
-
+## Add it to your video
+
+It runs for 15 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 `#0c0c0c`.
+- `--text-color` β Text color. Defaults to `#e8e8e8`.
## Add it to a project
@@ -26,20 +60,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add vfx-magnetic
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 15s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `vfx-magnetic.html` | `compositions/vfx-magnetic.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.
@@ -55,3 +75,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` `webgl`.
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index e016e6b9a..3dfad2033 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -3,13 +3,47 @@ title: "Portal"
description: "VFX composition block"
---
-`html-in-canvas` `webgl`
+
+
+## Install
+
+```bash Terminal
+npx hyperframes add vfx-portal
+```
+
+That writes one file: `compositions/vfx-portal.html`.
-**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)
-
+## Add it to your video
+
+It runs for 10 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 `#000000`.
+- `--portal-color` β Portal color. Defaults to `#fafafa`.
## Add it to a project
@@ -26,20 +60,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add vfx-portal
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 10s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `vfx-portal.html` | `compositions/vfx-portal.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.
@@ -55,3 +75,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` `webgl`.
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index a11422be6..7aff75187 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -3,13 +3,40 @@ title: "Shatter"
description: "VFX composition block"
---
-`html-in-canvas` `webgl`
+
+
+## Install
+
+```bash Terminal
+npx hyperframes add vfx-shatter
+```
+
+That writes one file: `compositions/vfx-shatter.html`.
-**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)
-
+## Add it to your video
+
+It runs for 12 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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,20 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add vfx-shatter
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 12s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `vfx-shatter.html` | `compositions/vfx-shatter.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.
@@ -55,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` `webgl`.
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index 19804a7aa..908af3755 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -3,13 +3,40 @@ title: "VFX Text Cursor"
description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges."
---
-`html-in-canvas` `text` `shader` `cursor` `chromatic`
+
+
+## Install
+
+```bash Terminal
+npx hyperframes add vfx-text-cursor
+```
+
+That writes one file: `compositions/vfx-text-cursor.html`.
-**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)
-
+## Add it to your video
+
+It runs for 8 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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,20 +53,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add vfx-text-cursor
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 8s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `vfx-text-cursor.html` | `compositions/vfx-text-cursor.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.
@@ -55,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` `text` `shader` `cursor` `chromatic`.
diff --git a/docs/catalog/blocks/vpn-youtube-spot.mdx b/docs/catalog/blocks/vpn-youtube-spot.mdx
index a180fa80f..4291dbcb9 100644
--- a/docs/catalog/blocks/vpn-youtube-spot.mdx
+++ b/docs/catalog/blocks/vpn-youtube-spot.mdx
@@ -3,17 +3,34 @@ title: "VPN YouTube Spot"
description: "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects."
---
-`app` `showcase` `youtube` `sfx`
+
-Created by [Stronkter](https://x.com/Stronkter).
+## Install
-## Source Prompt
-
-```text
-HyperFrames by HeyGen make me a 7s video with Apple-style bold font and styling: a phone scrolling in an app store, clicking on a friendly VPN app called VPN, installing it, then snapping down and fading to a white background. Make it snappy and polished for a YouTube insert, with sound effects, 60fps, and 1920x1080.
+```bash Terminal
+npx hyperframes add vpn-youtube-spot
```
-
+That writes `compositions/vpn-youtube-spot.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
+
+```
+
+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 vpn-youtube-spot
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 7s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `vpn-youtube-spot.html` | `compositions/vpn-youtube-spot.html` | hyperframes:composition |
-| `assets/vpn-sfx.wav` | `assets/vpn-sfx.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 `app` `showcase` `youtube` `sfx`.
+
+Created by [Stronkter](https://x.com/Stronkter).
+
+
+
+```text
+HyperFrames by HeyGen make me a 7s video with Apple-style bold font and styling: a phone scrolling in an app store, clicking on a friendly VPN app called VPN, installing it, then snapping down and fading to a white background. Make it snappy and polished for a YouTube insert, with sound effects, 60fps, and 1920x1080.
+```
+
+
diff --git a/docs/catalog/blocks/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index bcb831ab8..7048f6e81 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -3,10 +3,35 @@ title: "Whip Pan"
description: "Shader transition simulating a fast camera whip pan"
---
-`transition` `shader`
-
+## Install
+
+```bash Terminal
+npx hyperframes add whip-pan
+```
+
+That writes one file: `compositions/whip-pan.html`.
+
+## Add it to your video
+
+It runs for 4 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 whip-pan
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 4s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `whip-pan.html` | `compositions/whip-pan.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`.
diff --git a/docs/catalog/blocks/world-map.mdx b/docs/catalog/blocks/world-map.mdx
index 4a28426c2..7a9d88b03 100644
--- a/docs/catalog/blocks/world-map.mdx
+++ b/docs/catalog/blocks/world-map.mdx
@@ -3,10 +3,35 @@ title: "World Map"
description: "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset β D3 Natural Earth projection"
---
-`data` `map` `geography` `world` `choropleth`
-
+## Install
+
+```bash Terminal
+npx hyperframes add world-map
+```
+
+That writes one file: `compositions/world-map.html`.
+
+## Add it to your video
+
+It runs for 14 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 world-map
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 14s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `world-map.html` | `compositions/world-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` `world` `choropleth`.
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index cc5da347f..9f34f986e 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -3,10 +3,35 @@ title: "X Post Card"
description: "Animated X/Twitter post card overlay with engagement metrics"
---
-`social` `overlay` `twitter`
-
+## Install
+
+```bash Terminal
+npx hyperframes add x-post
+```
+
+That writes one file: `compositions/x-post.html`.
+
+## Add it to your video
+
+It runs for 5 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 x-post
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 5s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `x-post.html` | `compositions/x-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` `twitter`.
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
index f529fc4e1..585d4309a 100644
--- a/docs/catalog/blocks/yt-comment-card.mdx
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -3,10 +3,35 @@ title: "Comment Cards"
description: "Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips"
---
-`social` `comments` `creator` `overlay`
-
+## Install
+
+```bash Terminal
+npx hyperframes add yt-comment-card
+```
+
+That writes one file: `compositions/yt-comment-card.html`.
+
+## Add it to your video
+
+It runs for 8 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 yt-comment-card
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 8s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `yt-comment-card.html` | `compositions/yt-comment-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` `comments` `creator` `overlay`.
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
index fd5ace98d..14d1a7a99 100644
--- a/docs/catalog/blocks/yt-lcd-background.mdx
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -3,10 +3,35 @@ title: "Scanline Board Background"
description: "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title"
---
-`background` `texture` `creator`
-
+## Install
+
+```bash Terminal
+npx hyperframes add yt-lcd-background
+```
+
+That writes one file: `compositions/yt-lcd-background.html`.
+
+## Add it to your video
+
+It runs for 10 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 yt-lcd-background
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 10s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `yt-lcd-background.html` | `compositions/yt-lcd-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` `texture` `creator`.
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
index ab26fc32d..326991c6f 100644
--- a/docs/catalog/blocks/yt-logo-intro.mdx
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -3,10 +3,35 @@ title: "Logo Intro Sequence"
description: "Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion"
---
-`logo` `intro` `creator`
-
+## Install
+
+```bash Terminal
+npx hyperframes add yt-logo-intro
+```
+
+That writes one file: `compositions/yt-logo-intro.html`.
+
+## Add it to your video
+
+It runs for 6 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 yt-logo-intro
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 6s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `yt-logo-intro.html` | `compositions/yt-logo-intro.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 `logo` `intro` `creator`.
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index 4b017f5c2..53ebf9f30 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -3,10 +3,35 @@ title: "YouTube Lower Third"
description: "Animated YouTube subscribe lower third with avatar and channel info"
---
-`social` `overlay` `youtube`
-
+## Install
+
+```bash Terminal
+npx hyperframes add yt-lower-third
+```
+
+That writes `compositions/yt-lower-third.html`, plus 1 supporting file under `assets/`.
+
+## Add it to your video
+
+It runs for 4.5 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 yt-lower-third
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 4.5s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `yt-lower-third.html` | `compositions/yt-lower-third.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` `youtube`.
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
index a1c07d0d7..7a6d5b86d 100644
--- a/docs/catalog/blocks/yt-prism-title.mdx
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -3,10 +3,35 @@ title: "Chromatic Fringe Title"
description: "Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift"
---
-`typography` `title-card` `creator`
-
+## Install
+
+```bash Terminal
+npx hyperframes add yt-prism-title
+```
+
+That writes one file: `compositions/yt-prism-title.html`.
+
+## Add it to your video
+
+It runs for 6 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 yt-prism-title
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 6s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `yt-prism-title.html` | `compositions/yt-prism-title.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` `title-card` `creator`.
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
index 7f79dd6a1..987e76229 100644
--- a/docs/catalog/blocks/yt-vertical-fill.mdx
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -3,10 +3,35 @@ title: "Vertical Media Filler"
description: "Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)"
---
-`placeholder` `vertical` `media`
-
+## Install
+
+```bash Terminal
+npx hyperframes add yt-vertical-fill
+```
+
+That writes one file: `compositions/yt-vertical-fill.html`.
+
+## Add it to your video
+
+It runs for 8 seconds at 1920Γ1080. Paste this into your composition:
+
+```html index.html
+
+```
+
+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 yt-vertical-fill
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Block |
-| Dimensions | 1920Γ1080 |
-| Duration | 8s |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `yt-vertical-fill.html` | `compositions/yt-vertical-fill.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` `vertical` `media`.
diff --git a/docs/catalog/components/caption-blend-difference.mdx b/docs/catalog/components/caption-blend-difference.mdx
index e0ded3089..3b54f4220 100644
--- a/docs/catalog/components/caption-blend-difference.mdx
+++ b/docs/catalog/components/caption-blend-difference.mdx
@@ -3,10 +3,24 @@ title: "Blend Difference"
description: "Auto-inverting text using mix-blend-mode: difference β flips between white and black per-pixel against the background"
---
-`text` `text-effect` `effect` `blend-mode` `contrast` `inversion`
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-blend-difference
+```
+
+That writes one file: `compositions/components/caption-blend-difference.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-blend-difference.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +36,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-blend-difference
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-blend-difference.html` | `compositions/components/caption-blend-difference.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +47,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `text` `text-effect` `effect` `blend-mode` `contrast` `inversion`.
diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index 2b88a2285..52fb1ac9e 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -3,9 +3,22 @@ title: "Clip Wipe"
description: "Left-to-right clip-path wipe reveal per word"
---
-`captions` `caption-style` `wipe` `clip-path` `reveal`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-clip-wipe
+```
+
+That writes one file: `compositions/components/caption-clip-wipe.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-clip-wipe.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-clip-wipe
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-clip-wipe.html` | `compositions/components/caption-clip-wipe.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `wipe` `clip-path` `reveal`.
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index 2fe9be5a9..95a6b6711 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -3,9 +3,22 @@ title: "Editorial Emphasis"
description: "Dual-font system with dramatic size contrast for emphasis words"
---
-`captions` `caption-style` `editorial` `typography` `emphasis`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-editorial-emphasis
+```
+
+That writes one file: `compositions/components/caption-editorial-emphasis.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-editorial-emphasis.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-editorial-emphasis
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-editorial-emphasis.html` | `compositions/components/caption-editorial-emphasis.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `editorial` `typography` `emphasis`.
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index 36e0a5136..654ded435 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -3,9 +3,22 @@ title: "Emoji Pop"
description: "Emoji integration with stroked text and horizontal squeeze entrance"
---
-`captions` `caption-style` `emoji` `social`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-emoji-pop
+```
+
+That writes one file: `compositions/components/caption-emoji-pop.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-emoji-pop.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-emoji-pop
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-emoji-pop.html` | `compositions/components/caption-emoji-pop.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `emoji` `social`.
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index c236e0c6a..474efe163 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -3,9 +3,22 @@ title: "Glitch RGB"
description: "RGB chromatic aberration with CRT scanline overlay"
---
-`captions` `caption-style` `glitch` `cyber` `tech`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-glitch-rgb
+```
+
+That writes one file: `compositions/components/caption-glitch-rgb.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-glitch-rgb.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-glitch-rgb
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-glitch-rgb.html` | `compositions/components/caption-glitch-rgb.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `glitch` `cyber` `tech`.
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index b991f2f3b..7517034c3 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -3,9 +3,22 @@ title: "Gradient Fill"
description: "Gradient-clipped text with elastic bounce entrance"
---
-`captions` `caption-style` `gradient` `colorful`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-gradient-fill
+```
+
+That writes one file: `compositions/components/caption-gradient-fill.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-gradient-fill.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-gradient-fill
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-gradient-fill.html` | `compositions/components/caption-gradient-fill.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `gradient` `colorful`.
diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
index 3aa89acf9..a64ee7a5b 100644
--- a/docs/catalog/components/caption-highlight.mdx
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -3,9 +3,22 @@ title: "Highlight"
description: "Red background sweep behind each active word, TikTok-style"
---
-`captions` `caption-style` `highlight` `social` `tiktok`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-highlight
+```
+
+That writes one file: `compositions/components/caption-highlight.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-highlight.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-highlight
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-highlight.html` | `compositions/components/caption-highlight.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `highlight` `social` `tiktok`.
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index 4551ca526..695ab46ac 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -3,9 +3,22 @@ title: "Kinetic Slam"
description: "Full-screen single-word display with alternating entrance directions"
---
-`captions` `caption-style` `kinetic` `typography` `slam`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-kinetic-slam
+```
+
+That writes one file: `compositions/components/caption-kinetic-slam.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-kinetic-slam.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-kinetic-slam
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-kinetic-slam.html` | `compositions/components/caption-kinetic-slam.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `kinetic` `typography` `slam`.
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index 09b84d85b..347115fa2 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -3,9 +3,22 @@ title: "Matrix Decode"
description: "Character scramble animation before text reveal"
---
-`captions` `caption-style` `matrix` `scramble` `decode`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-matrix-decode
+```
+
+That writes one file: `compositions/components/caption-matrix-decode.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-matrix-decode.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-matrix-decode
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-matrix-decode.html` | `compositions/components/caption-matrix-decode.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `matrix` `scramble` `decode`.
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index f13fe9838..42bbc79f9 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -3,9 +3,22 @@ title: "Neon Accent"
description: "Multi-color neon glow accents with wiggle drift animation"
---
-`captions` `caption-style` `neon` `glow` `accent`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-neon-accent
+```
+
+That writes one file: `compositions/components/caption-neon-accent.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-neon-accent.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-neon-accent
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-neon-accent.html` | `compositions/components/caption-neon-accent.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `neon` `glow` `accent`.
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index fda30b00e..a28d2baa6 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -3,9 +3,22 @@ title: "Neon Glow"
description: "Cyan and magenta neon glow with keyword accent colors"
---
-`captions` `caption-style` `neon` `glow` `gaming`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-neon-glow
+```
+
+That writes one file: `compositions/components/caption-neon-glow.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-neon-glow.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-neon-glow
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-neon-glow.html` | `compositions/components/caption-neon-glow.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `neon` `glow` `gaming`.
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index 4d8f7e4aa..bcf1f7833 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -3,9 +3,22 @@ title: "Parallax Layers"
description: "Behind-subject 3D text layering with vertical stretch effect"
---
-`captions` `caption-style` `parallax` `3d` `depth`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-parallax-layers
+```
+
+That writes one file: `compositions/components/caption-parallax-layers.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-parallax-layers.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-parallax-layers
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-parallax-layers.html` | `compositions/components/caption-parallax-layers.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `parallax` `3d` `depth`.
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index 9d510dfe7..0fe6e9a7a 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -3,9 +3,22 @@ title: "Particle Burst"
description: "Keyword words trigger colored particle explosions"
---
-`captions` `caption-style` `particles` `burst` `effects`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-particle-burst
+```
+
+That writes one file: `compositions/components/caption-particle-burst.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-particle-burst.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-particle-burst
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-particle-burst.html` | `compositions/components/caption-particle-burst.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `particles` `burst` `effects`.
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index bf33f2bdc..b4e10ecc9 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -3,9 +3,22 @@ title: "Pill Karaoke"
description: "Pill-shaped container with per-word karaoke color highlight"
---
-`captions` `caption-style` `karaoke` `pill`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-pill-karaoke
+```
+
+That writes one file: `compositions/components/caption-pill-karaoke.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-pill-karaoke.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-pill-karaoke
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-pill-karaoke.html` | `compositions/components/caption-pill-karaoke.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `karaoke` `pill`.
diff --git a/docs/catalog/components/caption-texture.mdx b/docs/catalog/components/caption-texture.mdx
index d3f1199ca..8b65c1a8a 100644
--- a/docs/catalog/components/caption-texture.mdx
+++ b/docs/catalog/components/caption-texture.mdx
@@ -3,9 +3,22 @@ title: "Texture"
description: "Flowing texture mask over large uppercase text β ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable"
---
-`captions` `caption-style` `texture` `mask`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-texture
+```
+
+That writes `compositions/components/caption-texture.html`, plus 6 supporting files under `compositions/components/`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-texture.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,24 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-texture
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-texture.html` | `compositions/components/caption-texture.html` | hyperframes:snippet |
-| `lava.png` | `compositions/components/lava.png` | hyperframes:asset |
-| `marble-012.png` | `compositions/components/marble-012.png` | hyperframes:asset |
-| `metal-046-b.png` | `compositions/components/metal-046-b.png` | hyperframes:asset |
-| `wood-066.png` | `compositions/components/wood-066.png` | hyperframes:asset |
-| `concrete-042-a.png` | `compositions/components/concrete-042-a.png` | hyperframes:asset |
-| `rock-058.png` | `compositions/components/rock-058.png` | hyperframes:asset |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -51,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `texture` `mask`.
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index bbff555fc..2fb2ca51b 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -3,9 +3,22 @@ title: "Weight Shift"
description: "Elegant font-weight transition between caption lines"
---
-`captions` `caption-style` `minimal` `typography`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add caption-weight-shift
+```
+
+That writes one file: `compositions/components/caption-weight-shift.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/caption-weight-shift.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add caption-weight-shift
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `caption-weight-shift.html` | `compositions/components/caption-weight-shift.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `captions` `caption-style` `minimal` `typography`.
diff --git a/docs/catalog/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index a4ac17d50..3d996e6d0 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -3,10 +3,24 @@ title: "Grain Overlay"
description: "Animated film grain texture overlay using CSS keyframes β adds warmth and analog character to any composition"
---
-`texture` `grain` `overlay` `film`
-
+## Install
+
+```bash Terminal
+npx hyperframes add grain-overlay
+```
+
+That writes one file: `compositions/components/grain-overlay.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/grain-overlay.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +36,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add grain-overlay
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `grain-overlay.html` | `compositions/components/grain-overlay.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +47,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `texture` `grain` `overlay` `film`.
diff --git a/docs/catalog/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index 2ce38abcc..fe0096983 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -3,10 +3,24 @@ title: "Grid Pixelate Wipe"
description: "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing β use between scenes"
---
-`transition` `wipe` `grid` `pixelate`
-
+## Install
+
+```bash Terminal
+npx hyperframes add grid-pixelate-wipe
+```
+
+That writes one file: `compositions/components/grid-pixelate-wipe.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/grid-pixelate-wipe.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +36,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add grid-pixelate-wipe
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `grid-pixelate-wipe.html` | `compositions/components/grid-pixelate-wipe.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +47,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `wipe` `grid` `pixelate`.
diff --git a/docs/catalog/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
index 083e643a5..7d2f10533 100644
--- a/docs/catalog/components/hw-arrow.mdx
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -3,10 +3,23 @@ title: "Hand-Drawn Arrow"
description: "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen"
---
-`handwritten` `annotation` `arrow` `overlay`
-
+## Install
+
+```bash Terminal
+npx hyperframes add hw-arrow
+```
+
+That writes `compositions/components/hw-arrow.html`, plus 1 supporting file under `assets/fonts/`.
+
+## Paste it into your composition
+
+Open `compositions/components/hw-arrow.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,19 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add hw-arrow
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `hw-arrow.html` | `compositions/components/hw-arrow.html` | hyperframes:snippet |
-| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -46,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `annotation` `arrow` `overlay`.
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
index c184d513d..12238a763 100644
--- a/docs/catalog/components/hw-boil.mdx
+++ b/docs/catalog/components/hw-boil.mdx
@@ -3,10 +3,23 @@ title: "Hand-Drawn Boil"
description: "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator"
---
-`handwritten` `effect` `annotation`
-
+## Install
+
+```bash Terminal
+npx hyperframes add hw-boil
+```
+
+That writes `compositions/components/hw-boil.html`, plus 1 supporting file under `assets/fonts/`.
+
+## Paste it into your composition
+
+Open `compositions/components/hw-boil.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,19 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add hw-boil
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `hw-boil.html` | `compositions/components/hw-boil.html` | hyperframes:snippet |
-| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -46,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `effect` `annotation`.
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
index ed8cdf1f8..a1b54897e 100644
--- a/docs/catalog/components/hw-box-label.mdx
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -3,10 +3,23 @@ title: "Hand-Drawn Box Label"
description: "Wobbled rounded rectangle draws around a region with a handwritten label above or centered"
---
-`handwritten` `annotation` `overlay`
-
+## Install
+
+```bash Terminal
+npx hyperframes add hw-box-label
+```
+
+That writes `compositions/components/hw-box-label.html`, plus 1 supporting file under `assets/fonts/`.
+
+## Paste it into your composition
+
+Open `compositions/components/hw-box-label.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,19 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add hw-box-label
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `hw-box-label.html` | `compositions/components/hw-box-label.html` | hyperframes:snippet |
-| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -46,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `annotation` `overlay`.
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
index 95cb3b42c..fc49b4364 100644
--- a/docs/catalog/components/hw-callout-circle.mdx
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -3,10 +3,23 @@ title: "Scribble Callout Circle"
description: "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label"
---
-`handwritten` `annotation` `callout` `overlay`
-
+## Install
+
+```bash Terminal
+npx hyperframes add hw-callout-circle
+```
+
+That writes `compositions/components/hw-callout-circle.html`, plus 1 supporting file under `assets/fonts/`.
+
+## Paste it into your composition
+
+Open `compositions/components/hw-callout-circle.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,19 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add hw-callout-circle
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `hw-callout-circle.html` | `compositions/components/hw-callout-circle.html` | hyperframes:snippet |
-| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -46,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `annotation` `callout` `overlay`.
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
index f2cbad2ea..f5f4d3519 100644
--- a/docs/catalog/components/hw-underline.mdx
+++ b/docs/catalog/components/hw-underline.mdx
@@ -3,10 +3,23 @@ title: "Squiggle Marks"
description: "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on"
---
-`handwritten` `annotation` `text-treatment`
-
+## Install
+
+```bash Terminal
+npx hyperframes add hw-underline
+```
+
+That writes `compositions/components/hw-underline.html`, plus 1 supporting file under `assets/fonts/`.
+
+## Paste it into your composition
+
+Open `compositions/components/hw-underline.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,19 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add hw-underline
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `hw-underline.html` | `compositions/components/hw-underline.html` | hyperframes:snippet |
-| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -46,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `annotation` `text-treatment`.
diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
index f2d32b2ff..693f75204 100644
--- a/docs/catalog/components/mk-emphasis-type.mdx
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -3,10 +3,23 @@ title: "Background Emphasis Type"
description: "Oversized low-contrast background word drifting slowly behind the subject β typography as texture"
---
-`typography` `text-treatment` `minimal`
-
+## Install
+
+```bash Terminal
+npx hyperframes add mk-emphasis-type
+```
+
+That writes one file: `compositions/components/mk-emphasis-type.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/mk-emphasis-type.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add mk-emphasis-type
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `mk-emphasis-type.html` | `compositions/components/mk-emphasis-type.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `text-treatment` `minimal`.
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
index 711bd2aab..505fb1592 100644
--- a/docs/catalog/components/mk-usage-arc.mdx
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -3,10 +3,23 @@ title: "Hairline Arc Gauge"
description: "Thin circular gauge that draws on while its percentage counts up; one helper call drives both"
---
-`data-viz` `gauge` `minimal`
-
+## Install
+
+```bash Terminal
+npx hyperframes add mk-usage-arc
+```
+
+That writes one file: `compositions/components/mk-usage-arc.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/mk-usage-arc.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add mk-usage-arc
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `mk-usage-arc.html` | `compositions/components/mk-usage-arc.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `gauge` `minimal`.
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 8979d996b..cdb52977d 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -3,9 +3,22 @@ title: "Morph Text"
description: "Gooey text morph β cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect"
---
-`text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`
+
-
+## Install
+
+```bash Terminal
+npx hyperframes add morph-text
+```
+
+That writes one file: `compositions/components/morph-text.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/morph-text.html` and copy what is inside into your own composition.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
## Add it to a project
@@ -22,18 +35,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add morph-text
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `morph-text.html` | `compositions/components/morph-text.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +46,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`.
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index 446155f47..6afc84c9d 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -3,10 +3,24 @@ title: "Motion Blur"
description: "Velocity-driven motion blur β samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed"
---
-`effect` `motion-blur` `velocity` `animation` `physics`
-
+## Install
+
+```bash Terminal
+npx hyperframes add motion-blur
+```
+
+That writes one file: `compositions/components/motion-blur.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/motion-blur.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +36,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add motion-blur
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `motion-blur.html` | `compositions/components/motion-blur.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +47,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `effect` `motion-blur` `velocity` `animation` `physics`.
diff --git a/docs/catalog/components/parallax-unzoom.mdx b/docs/catalog/components/parallax-unzoom.mdx
index 20da1e050..f023cfc0a 100644
--- a/docs/catalog/components/parallax-unzoom.mdx
+++ b/docs/catalog/components/parallax-unzoom.mdx
@@ -3,10 +3,24 @@ title: "Parallax Unzoom"
description: "Reveal transition β focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)"
---
-`transition` `reveal` `unzoom` `parallax` `grid` `hero`
-
+## Install
+
+```bash Terminal
+npx hyperframes add parallax-unzoom
+```
+
+That writes one file: `compositions/components/parallax-unzoom.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/parallax-unzoom.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +36,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add parallax-unzoom
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `parallax-unzoom.html` | `compositions/components/parallax-unzoom.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +47,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `reveal` `unzoom` `parallax` `grid` `hero`.
diff --git a/docs/catalog/components/parallax-zoom.mdx b/docs/catalog/components/parallax-zoom.mdx
index 023f85733..26bf1008b 100644
--- a/docs/catalog/components/parallax-zoom.mdx
+++ b/docs/catalog/components/parallax-zoom.mdx
@@ -3,10 +3,24 @@ title: "Parallax Zoom"
description: "Center card scales up to fill the frame while siblings parallax outward β inspired by the eBay Playbook hero transition"
---
-`transition` `zoom` `parallax` `grid` `hero`
-
+## Install
+
+```bash Terminal
+npx hyperframes add parallax-zoom
+```
+
+That writes one file: `compositions/components/parallax-zoom.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/parallax-zoom.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +36,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add parallax-zoom
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `parallax-zoom.html` | `compositions/components/parallax-zoom.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +47,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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` `zoom` `parallax` `grid` `hero`.
diff --git a/docs/catalog/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index 24afc874e..0010f33b0 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -3,10 +3,24 @@ title: "Shimmer Sweep"
description: "Animated light sweep across text or elements using a CSS gradient mask β ideal for AI accents and premium reveals"
---
-`text` `shimmer` `highlight` `effect`
-
+## Install
+
+```bash Terminal
+npx hyperframes add shimmer-sweep
+```
+
+That writes one file: `compositions/components/shimmer-sweep.html`.
+
+## Paste it into your composition
+
+Open `compositions/components/shimmer-sweep.html` and copy what is inside into your own composition.
+The file opens with a comment header that walks you through it.
+
+A component has no size or duration of its own. It takes both from the composition
+you paste it into.
+
## Add it to a project
### Ask your agent
@@ -22,18 +36,6 @@ Replace the demo content with mine and match the existing design and timing.
npx hyperframes add shimmer-sweep
```
-## Details
-
-| Property | Value |
-| --- | --- |
-| Type | Component |
-
-**Installed files**
-
-| File | Target | Type |
-| --- | --- | --- |
-| `shimmer-sweep.html` | `compositions/components/shimmer-sweep.html` | hyperframes:snippet |
-
## Use it
Ask your agent to apply the component to the intended element and preserve the projectβs existing timing.
@@ -45,3 +47,7 @@ Ask your agent to apply the component to the intended element and preserve the p
- [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 `text` `shimmer` `highlight` `effect`.
diff --git a/docs/catalog/components/texture-mask-text.mdx b/docs/catalog/components/texture-mask-text.mdx
index 7d676eaf2..a08b39cb0 100644
--- a/docs/catalog/components/texture-mask-text.mdx
+++ b/docs/catalog/components/texture-mask-text.mdx
@@ -3,8 +3,6 @@ title: "Texture Mask Text"
description: "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps"
---
-`text` `text-effect` `effect` `texture` `mask`
-
Brick
@@ -32,30 +30,24 @@ description: "CSS luminance masks that cut holes through letterforms - 66 pre-bu
-## Add it to a project
+## Install
-### Ask your agent
-
-```text
-Add the Texture Mask Text component from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
+```bash Terminal
npx hyperframes add texture-mask-text
```
-## Details
+That writes `compositions/components/texture-mask-text/texture-mask-text.html`, plus 66 supporting files under `assets/texture-mask-text/masks/`.
-| Property | Value |
-| --- | --- |
-| Type | Component |
+## Paste it into your composition
-## Agent Usage
+Open `compositions/components/texture-mask-text/texture-mask-text.html`. Near the bottom is a real `