diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index 640804ad7..49c816d1c 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -3,23 +3,24 @@ title: "App Showcase"
description: "Fitness app product showcase with three floating smartphone screens"
---
-# App Showcase
-
-Fitness app product showcase with three floating smartphone screens
-
`showcase` `app` `3d`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add app-showcase
+```text
+Add the App Showcase block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add app-showcase
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add app-showcase
| Dimensions | 1920×1080 |
| Duration | 5.5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `app-showcase.html` | `compositions/app-showcase.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/apple-money-count.mdx b/docs/catalog/blocks/apple-money-count.mdx
index 34056c079..69ee5680d 100644
--- a/docs/catalog/blocks/apple-money-count.mdx
+++ b/docs/catalog/blocks/apple-money-count.mdx
@@ -3,10 +3,6 @@ title: "Apple Money Count"
description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
---
-# Apple Money Count
-
-Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.
-
`showcase` `finance` `kinetic` `youtube` `sfx`
Created by [Stronkter](https://x.com/Stronkter).
@@ -19,15 +15,20 @@ Created by [Stronkter](https://x.com/Stronkter).
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add apple-money-count
+```text
+Add the Apple Money Count block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add apple-money-count
+```
## Details
@@ -37,17 +38,25 @@ npx hyperframes add apple-money-count
| Dimensions | 1920×1080 |
| Duration | 5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `apple-money-count.html` | `compositions/apple-money-count.html` | hyperframes:composition |
| `assets/sfx-production.wav` | `assets/sfx-production.wav` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
index 7a7b8e97b..00c71e08f 100644
--- a/docs/catalog/blocks/beat-freeze-cut.mdx
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -3,23 +3,24 @@ title: "Beat Freeze Cut"
description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
---
-# Beat Freeze Cut
-
-A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
-
`transition` `music` `beat-driven` `freeze-frame`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add beat-freeze-cut
+```text
+Add the Beat Freeze Cut block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add beat-freeze-cut
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add beat-freeze-cut
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `beat-freeze-cut.html` | `compositions/beat-freeze-cut.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/blue-sweater-intro-video.mdx b/docs/catalog/blocks/blue-sweater-intro-video.mdx
index 2c3417dff..b17912927 100644
--- a/docs/catalog/blocks/blue-sweater-intro-video.mdx
+++ b/docs/catalog/blocks/blue-sweater-intro-video.mdx
@@ -3,25 +3,26 @@ title: "Blue Sweater Intro Video"
description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
---
-# Blue Sweater Intro Video
-
-Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.
-
`showcase` `ai` `creator` `sfx`
Created by [Joe Sai](https://x.com/_blue_sweater_).
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add blue-sweater-intro-video
+```text
+Add the Blue Sweater Intro Video block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add blue-sweater-intro-video
+```
## Details
@@ -31,7 +32,7 @@ npx hyperframes add blue-sweater-intro-video
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
@@ -39,10 +40,18 @@ npx hyperframes add blue-sweater-intro-video
| `assets/joe-sai-avatar.png` | `assets/joe-sai-avatar.png` | hyperframes:asset |
| `assets/sfx/integrated-melodic-tech-mix.wav` | `assets/sfx/integrated-melodic-tech-mix.wav` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
index 27231e816..2114cb1d8 100644
--- a/docs/catalog/blocks/camcorder-hud.mdx
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -3,23 +3,24 @@ title: "Camcorder HUD"
description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
---
-# Camcorder HUD
-
-Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments
-
`camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add camcorder-hud
+```text
+Add the Camcorder HUD block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add camcorder-hud
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add camcorder-hud
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `camcorder-hud.html` | `compositions/camcorder-hud.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index a4f235d20..6b8c1ce7d 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -3,23 +3,24 @@ title: "Chromatic Radial Split"
description: "Shader transition with chromatic aberration radial split"
---
-# Chromatic Radial Split
-
-Shader transition with chromatic aberration radial split
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add chromatic-radial-split
+```text
+Add the Chromatic Radial Split block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add chromatic-radial-split
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add chromatic-radial-split
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `chromatic-radial-split.html` | `compositions/chromatic-radial-split.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index f8eb1060f..df248f748 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -3,23 +3,24 @@ title: "Cinematic Zoom"
description: "Shader transition with dramatic zoom blur"
---
-# Cinematic Zoom
-
-Shader transition with dramatic zoom blur
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add cinematic-zoom
+```text
+Add the Cinematic Zoom block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add cinematic-zoom
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add cinematic-zoom
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `cinematic-zoom.html` | `compositions/cinematic-zoom.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
index f36694b88..df6685590 100644
--- a/docs/catalog/blocks/code-3d-extrude.mdx
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -3,23 +3,24 @@ title: "Code 3D Extrude"
description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
---
-# Code 3D Extrude
-
-Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.
-
`code` `code-animation` `3d` `webgl` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-3d-extrude
+```text
+Add the Code 3D Extrude block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-3d-extrude
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-3d-extrude
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-3d-extrude.html` | `compositions/code-3d-extrude.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
index d17740fa8..3c6b0ab8f 100644
--- a/docs/catalog/blocks/code-diff.mdx
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -3,23 +3,24 @@ title: "Code Diff"
description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
---
-# Code Diff
-
-An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
-
`code` `code-animation` `diff` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-diff
+```text
+Add the Code Diff block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-diff
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-diff
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-diff.html` | `compositions/code-diff.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
index 7423e1376..24089fbbd 100644
--- a/docs/catalog/blocks/code-highlight.mdx
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -3,23 +3,24 @@ title: "Code Highlight Sweep"
description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based)."
---
-# Code Highlight Sweep
-
-A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based).
-
`code` `code-animation` `highlight` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-highlight
+```text
+Add the Code Highlight Sweep block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-highlight
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-highlight
| Dimensions | 1920×1080 |
| Duration | 5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-highlight.html` | `compositions/code-highlight.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
index b5f8b52e0..5795e7ba5 100644
--- a/docs/catalog/blocks/code-morph.mdx
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -3,23 +3,24 @@ title: "Code Morph"
description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
---
-# Code Morph
-
-One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.
-
`code` `code-animation` `morph` `refactor` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-morph
+```text
+Add the Code Morph block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-morph
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-morph
| Dimensions | 1920×1080 |
| Duration | 7s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-morph.html` | `compositions/code-morph.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
index da29dde0c..b4aa8a425 100644
--- a/docs/catalog/blocks/code-particle-assemble.mdx
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -3,23 +3,24 @@ title: "Code Particle Assemble"
description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
---
-# Code Particle Assemble
-
-Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.
-
`code` `code-animation` `particles` `gpu` `webgl` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-particle-assemble
+```text
+Add the Code Particle Assemble block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-particle-assemble
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-particle-assemble
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-particle-assemble.html` | `compositions/code-particle-assemble.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
index 8f5ef3323..fdae5829a 100644
--- a/docs/catalog/blocks/code-scroll.mdx
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -3,23 +3,24 @@ title: "Code Scroll To Line"
description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
---
-# Code Scroll To Line
-
-The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
-
`code` `code-animation` `scroll` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-scroll
+```text
+Add the Code Scroll To Line block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-scroll
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-scroll
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-scroll.html` | `compositions/code-scroll.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
index 2d327221f..4d66dd0a2 100644
--- a/docs/catalog/blocks/code-shader-dissolve.mdx
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -3,23 +3,24 @@ title: "Code Shader Dissolve"
description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
---
-# Code Shader Dissolve
-
-The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.
-
`code` `code-animation` `shader` `webgl` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-shader-dissolve
+```text
+Add the Code Shader Dissolve block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-shader-dissolve
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-shader-dissolve
| Dimensions | 1920×1080 |
| Duration | 7s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-shader-dissolve.html` | `compositions/code-shader-dissolve.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index 0021f80a7..012e3f121 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -1,30 +1,25 @@
---
-title: "Apple Terminal Basic"
-description: "Apple Terminal Basic profile with white background and black text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Basic"
+description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
---
-# Apple Terminal Basic
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Basic profile — clean white background with black monospace text and a solid black cursor. Per-character typing animation with output reveal.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-basic
+```text
+Add the Code Snippet - Apple Terminal Basic block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-basic
```
## Details
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-basic.html` | `compositions/code-snippet-apple-terminal-basic.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Basic profile — white background, black text, solid cursor
-- macOS window chrome with traffic light buttons (close, minimize, fullscreen) and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
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 98e7eaf68..eebb9b950 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -1,31 +1,25 @@
---
-title: "Apple Terminal Clear Dark"
-description: "Apple Terminal Clear Dark profile with semi-transparent dark background and white text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Clear Dark"
+description: "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session."
---
-# Apple Terminal Clear Dark
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Clear Dark profile — translucent black background with white text and a grey cursor. Per-character typing animation with output reveal.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-clear-dark
+```text
+Add the Code Snippet - Apple Terminal Clear Dark block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-clear-dark
```
## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-clear-dark.html` | `compositions/code-snippet-apple-terminal-clear-dark.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Clear Dark profile — semi-transparent black background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
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 7654fe4e8..2a64bd9ac 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -1,30 +1,25 @@
---
-title: "Apple Terminal Clear Light"
-description: "Apple Terminal Clear Light profile with semi-transparent white background and black text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Clear Light"
+description: "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session."
---
-# Apple Terminal Clear Light
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Clear Light profile — translucent white background with black text and a grey cursor. Per-character typing animation with output reveal.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-clear-light
+```text
+Add the Code Snippet - Apple Terminal Clear Light block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-clear-light
```
## Details
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-clear-light.html` | `compositions/code-snippet-apple-terminal-clear-light.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Clear Light profile — semi-transparent white background with black text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
index d64bb7e5b..8583a02ee 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -1,30 +1,25 @@
---
-title: "Apple Terminal Grass"
-description: "Apple Terminal Grass profile with black background and bright green text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Grass"
+description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
---
-# Apple Terminal Grass
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Grass profile — pitch-black background with pure green text and a matching cursor. Classic terminal aesthetic with per-character typing animation.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-grass
+```text
+Add the Code Snippet - Apple Terminal Grass block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-grass
```
## Details
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-grass.html` | `compositions/code-snippet-apple-terminal-grass.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Grass profile — black background with #00C100 green text
-- macOS window chrome with green-accented title bar and traffic light buttons
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
index f9c3340a9..a2faee9de 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -1,31 +1,25 @@
---
-title: "Apple Terminal Homebrew"
-description: "Apple Terminal Homebrew profile with black background, bright green text and lime cursor, per-character typing animation."
+title: "Code Snippet - Apple Terminal Homebrew"
+description: "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session."
---
-# Apple Terminal Homebrew
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Homebrew profile — black background with vivid green text and a lime `#48F800` cursor. One of the most beloved classic terminal looks.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-homebrew
+```text
+Add the Code Snippet - Apple Terminal Homebrew block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-homebrew
```
## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-homebrew.html` | `compositions/code-snippet-apple-terminal-homebrew.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Homebrew profile — black background with #00CF00 text and #48F800 cursor
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
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 11c96f415..62af2f0e8 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -1,30 +1,25 @@
---
-title: "Apple Terminal Man Page"
-description: "Apple Terminal Man Page profile with pale yellow background and black text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Man Page"
+description: "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session."
---
-# Apple Terminal Man Page
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Man Page profile — pale yellow `#FEF49C` background with black text. Evoking classic Unix manual pages, with per-character typing animation.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-man-page
+```text
+Add the Code Snippet - Apple Terminal Man Page block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-man-page
```
## Details
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-man-page.html` | `compositions/code-snippet-apple-terminal-man-page.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Man Page profile — pale yellow background with black text
-- Shows a realistic man page output structure with sections and indented content
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
index 9a7a0adba..909237677 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -1,31 +1,25 @@
---
-title: "Apple Terminal Novel"
-description: "Apple Terminal Novel profile with warm parchment background and dark brown text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Novel"
+description: "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session."
---
-# Apple Terminal Novel
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC18A` background with deep brown text. A distinctive earthy look, with per-character typing animation.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-novel
+```text
+Add the Code Snippet - Apple Terminal Novel block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-novel
```
## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-novel.html` | `compositions/code-snippet-apple-terminal-novel.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Novel profile — warm parchment background with #3E2900 dark brown text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
index d519bd4c9..5222330b9 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -1,31 +1,25 @@
---
-title: "Apple Terminal Ocean"
-description: "Apple Terminal Ocean profile with deep blue background and white text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Ocean"
+description: "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session."
---
-# Apple Terminal Ocean
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue background with crisp white text. Bold and distinctive, with per-character typing animation.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-ocean
+```text
+Add the Code Snippet - Apple Terminal Ocean block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-ocean
```
## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-ocean.html` | `compositions/code-snippet-apple-terminal-ocean.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Ocean profile — #224FBE blue background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index e8441e6c5..ae3d33417 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -1,31 +1,25 @@
---
-title: "Apple Terminal Pro"
-description: "Apple Terminal Pro profile with black background, grey text and lime green cursor, per-character typing animation."
+title: "Code Snippet - Apple Terminal Pro"
+description: "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session."
---
-# Apple Terminal Pro
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Pro profile — pure black background with grey `#BBBBBB` text and a distinctive `#88FF67` lime cursor. Hacker aesthetic with per-character typing animation.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-pro
+```text
+Add the Code Snippet - Apple Terminal Pro block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-pro
```
## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-pro.html` | `compositions/code-snippet-apple-terminal-pro.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Pro profile — black background, #BBBBBB grey text, #88FF67 lime cursor
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
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 c740c6e29..6a977cdac 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -1,31 +1,25 @@
---
-title: "Apple Terminal Red Sands"
-description: "Apple Terminal Red Sands profile with deep red background and sandy text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Red Sands"
+description: "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session."
---
-# Apple Terminal Red Sands
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7B140E` background with warm sandy `#FFE1B9` text. A bold, dramatic look with per-character typing animation.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-red-sands
+```text
+Add the Code Snippet - Apple Terminal Red Sands block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-red-sands
```
## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-red-sands.html` | `compositions/code-snippet-apple-terminal-red-sands.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Red Sands profile — #7B140E red background with #FFE1B9 sandy text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
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 810f2f670..55709927f 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -1,31 +1,25 @@
---
-title: "Apple Terminal Silver Aerogel"
-description: "Apple Terminal Silver Aerogel profile with dark grey background and white text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Silver Aerogel"
+description: "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session."
---
-# Apple Terminal Silver Aerogel
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `#3D3D3D` background with clean white text. A professional neutral look with per-character typing animation.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-silver-aerogel
+```text
+Add the Code Snippet - Apple Terminal Silver Aerogel block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-silver-aerogel
```
## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-silver-aerogel.html` | `compositions/code-snippet-apple-terminal-silver-aerogel.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Silver Aerogel profile — #3D3D3D dark grey background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
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 30b81485c..ebc9150d6 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -1,31 +1,25 @@
---
-title: "Apple Terminal Solid Colors"
-description: "Apple Terminal Solid Colors profile with deep purple background and white text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Solid Colors"
+description: "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session."
---
-# Apple Terminal Solid Colors
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
-macOS Terminal.app window in the built-in Solid Colors profile — vivid deep purple `#4C0099` background with white text. Eye-catching and vibrant, with per-character typing animation.
+
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
-
+### Ask your agent
-
-## Install
-
-
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-solid-colors
+```text
+Add the Code Snippet - Apple Terminal Solid Colors block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-solid-colors
```
## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-apple-terminal-solid-colors.html` | `compositions/code-snippet-apple-terminal-solid-colors.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Faithful recreation of macOS Terminal.app Solid Colors profile — #4C0099 deep purple background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index cd86c9756..ae7fae709 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -1,30 +1,25 @@
---
-title: "Dark 2026"
-description: "The newest VS Code dark theme with refined token scopes and updated palette."
+title: "Code Snippet - Dark 2026"
+description: "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Dark 2026
-
-VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-dark-2026
+```text
+Add the Code Snippet - Dark 2026 block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-dark-2026
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-dark-2026.html` | `compositions/code-snippet-dark-2026.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index 8cb547804..3c579a397 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -1,30 +1,25 @@
---
-title: "Dark Modern"
-description: "The default dark theme — clean and contemporary with comfortable contrast."
+title: "Code Snippet - Dark Modern"
+description: "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Dark Modern
-
-VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-dark-modern
+```text
+Add the Code Snippet - Dark Modern block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-dark-modern
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-dark-modern.html` | `compositions/code-snippet-dark-modern.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-dark-plus.mdx b/docs/catalog/blocks/code-snippet-dark-plus.mdx
index defe289c1..5216159ec 100644
--- a/docs/catalog/blocks/code-snippet-dark-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-plus.mdx
@@ -1,30 +1,25 @@
---
-title: "Dark+"
-description: "Classic dark theme with enhanced syntax highlighting for popular languages."
+title: "Code Snippet - Dark+"
+description: "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Dark+
-
-VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-dark-plus
+```text
+Add the Code Snippet - Dark+ block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-dark-plus
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-dark-plus.html` | `compositions/code-snippet-dark-plus.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
index 547a86961..20c924d12 100644
--- a/docs/catalog/blocks/code-snippet-flight.mdx
+++ b/docs/catalog/blocks/code-snippet-flight.mdx
@@ -3,23 +3,24 @@ title: "Code Snippet Flight"
description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
---
-# Code Snippet Flight
-
-Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.
-
`code` `code-animation` `flight` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-flight
+```text
+Add the Code Snippet Flight block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-snippet-flight
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-snippet-flight
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-flight.html` | `compositions/code-snippet-flight.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
index 43bfada32..fa9212bd3 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
@@ -1,30 +1,25 @@
---
-title: "High Contrast Light"
-description: "Maximum contrast light theme for accessibility."
+title: "Code Snippet - High Contrast Light"
+description: "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# High Contrast Light
-
-VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-high-contrast-light
+```text
+Add the Code Snippet - High Contrast Light block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-high-contrast-light
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-high-contrast-light.html` | `compositions/code-snippet-high-contrast-light.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-high-contrast.mdx b/docs/catalog/blocks/code-snippet-high-contrast.mdx
index 9daa00450..6c5724f97 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast.mdx
@@ -1,30 +1,25 @@
---
-title: "High Contrast"
-description: "Maximum contrast dark theme for accessibility."
+title: "Code Snippet - High Contrast"
+description: "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# High Contrast
-
-VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-high-contrast
+```text
+Add the Code Snippet - High Contrast block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-high-contrast
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-high-contrast.html` | `compositions/code-snippet-high-contrast.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-light-2026.mdx b/docs/catalog/blocks/code-snippet-light-2026.mdx
index 62265a255..e9eb473d2 100644
--- a/docs/catalog/blocks/code-snippet-light-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-light-2026.mdx
@@ -1,30 +1,25 @@
---
-title: "Light 2026"
-description: "The newest VS Code light theme with refined token scopes and updated palette."
+title: "Code Snippet - Light 2026"
+description: "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Light 2026
-
-VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-light-2026
+```text
+Add the Code Snippet - Light 2026 block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-light-2026
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-light-2026.html` | `compositions/code-snippet-light-2026.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-light-modern.mdx b/docs/catalog/blocks/code-snippet-light-modern.mdx
index 65a53d6e6..735283f37 100644
--- a/docs/catalog/blocks/code-snippet-light-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-light-modern.mdx
@@ -1,30 +1,25 @@
---
-title: "Light Modern"
-description: "The default light theme — a fresh, modern take on the classic VS light experience."
+title: "Code Snippet - Light Modern"
+description: "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Light Modern
-
-VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-light-modern
+```text
+Add the Code Snippet - Light Modern block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-light-modern
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-light-modern.html` | `compositions/code-snippet-light-modern.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-light-plus.mdx b/docs/catalog/blocks/code-snippet-light-plus.mdx
index f351c45a9..f8fe05189 100644
--- a/docs/catalog/blocks/code-snippet-light-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-light-plus.mdx
@@ -1,30 +1,25 @@
---
-title: "Light+"
-description: "Classic light theme with enhanced syntax highlighting for popular languages."
+title: "Code Snippet - Light+"
+description: "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Light+
-
-VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-light-plus
+```text
+Add the Code Snippet - Light+ block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-light-plus
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-light-plus.html` | `compositions/code-snippet-light-plus.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-monokai.mdx b/docs/catalog/blocks/code-snippet-monokai.mdx
index a1511f0f3..68fb16b7f 100644
--- a/docs/catalog/blocks/code-snippet-monokai.mdx
+++ b/docs/catalog/blocks/code-snippet-monokai.mdx
@@ -1,30 +1,25 @@
---
-title: "Monokai"
-description: "The iconic warm-toned dark theme beloved by developers worldwide."
+title: "Code Snippet - Monokai"
+description: "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Monokai
-
-VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-monokai
+```text
+Add the Code Snippet - Monokai block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-monokai
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-monokai.html` | `compositions/code-snippet-monokai.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-solarized-light.mdx b/docs/catalog/blocks/code-snippet-solarized-light.mdx
index 914b784b6..8a140c3cb 100644
--- a/docs/catalog/blocks/code-snippet-solarized-light.mdx
+++ b/docs/catalog/blocks/code-snippet-solarized-light.mdx
@@ -1,30 +1,25 @@
---
-title: "Solarized Light"
-description: "Ethan Schoonover's precision-engineered light color scheme."
+title: "Code Snippet - Solarized Light"
+description: "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Solarized Light
-
-VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-solarized-light
+```text
+Add the Code Snippet - Solarized Light block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-solarized-light
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-solarized-light.html` | `compositions/code-snippet-solarized-light.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
index 494c2f853..c36c3b9f2 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
@@ -1,30 +1,25 @@
---
-title: "Visual Studio Dark"
-description: "The traditional Visual Studio dark color scheme."
+title: "Code Snippet - Visual Studio Dark"
+description: "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Visual Studio Dark
-
-VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-visual-studio-dark
+```text
+Add the Code Snippet - Visual Studio Dark block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-visual-studio-dark
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-visual-studio-dark.html` | `compositions/code-snippet-visual-studio-dark.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
index 7f9060917..1fadf21a2 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
@@ -1,30 +1,25 @@
---
-title: "Visual Studio Light"
-description: "The traditional Visual Studio light color scheme."
+title: "Code Snippet - Visual Studio Light"
+description: "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-# Visual Studio Light
-
-VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
`code` `developer` `showcase` `vscode`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-snippet-visual-studio-light
+```text
+Add the Code Snippet - Visual Studio Light block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-visual-studio-light
```
## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-snippet-visual-studio-light.html` | `compositions/code-snippet-visual-studio-light.html` | hyperframes:composition |
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
-
+
```
-## Features
+## Related topics
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
index d706d6b7d..a7c43b83d 100644
--- a/docs/catalog/blocks/code-typing.mdx
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -3,23 +3,24 @@ title: "Code Typing"
description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
---
-# Code Typing
-
-Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
-
`code` `code-animation` `typing` `developer`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add code-typing
+```text
+Add the Code Typing block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add code-typing
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add code-typing
| Dimensions | 1920×1080 |
| Duration | 5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `code-typing.html` | `compositions/code-typing.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index ab7ee688e..346ebc2e1 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -3,23 +3,24 @@ title: "Cross Warp Morph"
description: "Shader transition with cross-warped morphing"
---
-# Cross Warp Morph
-
-Shader transition with cross-warped morphing
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add cross-warp-morph
+```text
+Add the Cross Warp Morph block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add cross-warp-morph
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add cross-warp-morph
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `cross-warp-morph.html` | `compositions/cross-warp-morph.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index 9e5804770..427cc7c5f 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -3,23 +3,24 @@ title: "Data Chart"
description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
---
-# Data Chart
-
-Animated bar + line chart with staggered reveal, NYT-style typography, and value labels
-
`data` `chart` `statistics`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add data-chart
+```text
+Add the Data Chart block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add data-chart
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add data-chart
| Dimensions | 1920×1080 |
| Duration | 15s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `data-chart.html` | `compositions/data-chart.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index 18b9a5bb1..3bd87774e 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -3,23 +3,24 @@ title: "Domain Warp Dissolve"
description: "Shader transition with fractal noise domain warping"
---
-# Domain Warp Dissolve
-
-Shader transition with fractal noise domain warping
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add domain-warp-dissolve
+```text
+Add the Domain Warp Dissolve block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add domain-warp-dissolve
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add domain-warp-dissolve
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `domain-warp-dissolve.html` | `compositions/domain-warp-dissolve.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
index 3626f1083..db4d5a2a6 100644
--- a/docs/catalog/blocks/editorial-flash-overlay.mdx
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -3,23 +3,24 @@ title: "Editorial Flash Overlay"
description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
---
-# Editorial Flash Overlay
-
-Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal
-
`flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add editorial-flash-overlay
+```text
+Add the Editorial Flash Overlay block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add editorial-flash-overlay
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add editorial-flash-overlay
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `editorial-flash-overlay.html` | `compositions/editorial-flash-overlay.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index e57d89f8e..f85df513e 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -3,23 +3,24 @@ title: "Flash Through White"
description: "Shader transition with white flash crossfade"
---
-# Flash Through White
-
-Shader transition with white flash crossfade
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add flash-through-white
+```text
+Add the Flash Through White block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add flash-through-white
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add flash-through-white
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `flash-through-white.html` | `compositions/flash-through-white.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index b6102cca9..eb128fe3d 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -3,23 +3,24 @@ title: "Flowchart Vertical"
description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
---
-# Flowchart Vertical
-
-Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
-
`diagram` `flowchart` `interactive` `portrait`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add flowchart-vertical
+```text
+Add the Flowchart Vertical block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add flowchart-vertical
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add flowchart-vertical
| Dimensions | 1440×2560 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 690c255c2..0dbb6f7a8 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -3,23 +3,24 @@ title: "Flowchart"
description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
---
-# Flowchart
-
-Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
-
`diagram` `flowchart` `interactive`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add flowchart
+```text
+Add the Flowchart block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add flowchart
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add flowchart
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `flowchart.html` | `compositions/flowchart.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
index 2dc72e472..2acd7eb4d 100644
--- a/docs/catalog/blocks/freeze-frame-dressing.mdx
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -3,23 +3,24 @@ title: "Freeze-Frame Dressing"
description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
---
-# Freeze-Frame Dressing
-
-Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject
-
`freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add freeze-frame-dressing
+```text
+Add the Freeze-Frame Dressing block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add freeze-frame-dressing
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add freeze-frame-dressing
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `freeze-frame-dressing.html` | `compositions/freeze-frame-dressing.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index c56d507d2..67cdf5307 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -3,23 +3,24 @@ title: "Glitch"
description: "Shader transition with digital glitch artifacts"
---
-# Glitch
-
-Shader transition with digital glitch artifacts
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add glitch
+```text
+Add the Glitch block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add glitch
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add glitch
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `glitch.html` | `compositions/glitch.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index dd6510335..322025425 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -3,23 +3,24 @@ title: "Gravitational Lens"
description: "Shader transition with gravitational lensing distortion"
---
-# Gravitational Lens
-
-Shader transition with gravitational lensing distortion
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add gravitational-lens
+```text
+Add the Gravitational Lens block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add gravitational-lens
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add gravitational-lens
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `gravitational-lens.html` | `compositions/gravitational-lens.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
index ba9eb32c7..65f265d95 100644
--- a/docs/catalog/blocks/hw-frame.mdx
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -3,23 +3,24 @@ title: "Sketched Frame"
description: "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)"
---
-# Sketched Frame
-
-Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)
-
`handwritten` `frame` `media`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-frame
+```text
+Add the Sketched Frame block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-frame
+```
## Details
@@ -29,17 +30,25 @@ npx hyperframes add hw-frame
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `hw-frame.html` | `compositions/hw-frame.html` | hyperframes:composition |
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
index 30e7ef1cd..eb9ddb14f 100644
--- a/docs/catalog/blocks/hw-path-text.mdx
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -3,23 +3,24 @@ title: "Text Along a Path"
description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
---
-# Text Along a Path
-
-Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input
-
`handwritten` `typography` `path` `overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-path-text
+```text
+Add the Text Along a Path block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-path-text
+```
## Details
@@ -29,17 +30,25 @@ npx hyperframes add hw-path-text
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `hw-path-text.html` | `compositions/hw-path-text.html` | hyperframes:composition |
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
index 73fa2e80f..75e801e73 100644
--- a/docs/catalog/blocks/hw-pipeline.mdx
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -3,23 +3,24 @@ title: "Hand-Drawn Flowchart"
description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
---
-# Hand-Drawn Flowchart
-
-Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list
-
`handwritten` `diagram` `data-viz` `overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-pipeline
+```text
+Add the Hand-Drawn Flowchart block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-pipeline
+```
## Details
@@ -29,17 +30,25 @@ npx hyperframes add hw-pipeline
| Dimensions | 1920×1080 |
| Duration | 7s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `hw-pipeline.html` | `compositions/hw-pipeline.html` | hyperframes:composition |
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
index cc49439c7..943055e58 100644
--- a/docs/catalog/blocks/hw-scribble-transition.mdx
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -3,23 +3,24 @@ title: "Scribble Transition"
description: "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears"
---
-# Scribble Transition
-
-Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears
-
`handwritten` `transition` `wipe`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-scribble-transition
+```text
+Add the Scribble Transition block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-scribble-transition
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add hw-scribble-transition
| Dimensions | 1920×1080 |
| Duration | 2.2s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `hw-scribble-transition.html` | `compositions/hw-scribble-transition.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
index 361068f8f..c08c39b79 100644
--- a/docs/catalog/blocks/hw-text-cloud.mdx
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -3,23 +3,24 @@ title: "Speech Bubble"
description: "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils"
---
-# Speech Bubble
-
-Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils
-
`handwritten` `speech-bubble` `overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-text-cloud
+```text
+Add the Speech Bubble block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-text-cloud
+```
## Details
@@ -29,17 +30,25 @@ npx hyperframes add hw-text-cloud
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `hw-text-cloud.html` | `compositions/hw-text-cloud.html` | hyperframes:composition |
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
index bf6fd9325..9c26f47f0 100644
--- a/docs/catalog/blocks/hw-title.mdx
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -3,23 +3,24 @@ title: "Handwritten Title"
description: "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
---
-# Handwritten Title
-
-Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils
-
`handwritten` `typography` `title-card` `overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-title
+```text
+Add the Handwritten Title block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-title
+```
## Details
@@ -29,17 +30,25 @@ npx hyperframes add hw-title
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `hw-title.html` | `compositions/hw-title.html` | hyperframes:composition |
| `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index c74b2b832..58abe9c56 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -3,23 +3,24 @@ title: "Instagram Follow"
description: "Animated Instagram follow overlay with profile card and follow button"
---
-# Instagram Follow
-
-Animated Instagram follow overlay with profile card and follow button
-
`social` `overlay` `instagram`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add instagram-follow
+```text
+Add the Instagram Follow block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add instagram-follow
+```
## Details
@@ -29,17 +30,25 @@ npx hyperframes add instagram-follow
| Dimensions | 1080×1920 |
| Duration | 4.5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `instagram-follow.html` | `compositions/instagram-follow.html` | hyperframes:composition |
| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index 56a5979e7..0bdfe3edc 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -3,10 +3,6 @@ title: "iOS 26 Liquid Glass Home Screen"
description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
---
-# iOS 26 Liquid Glass Home Screen
-
-3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.
-
`liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`
@@ -15,15 +11,20 @@ description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add ios26-liquid-glass
+```text
+Add the iOS 26 Liquid Glass Home Screen block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add ios26-liquid-glass
+```
## Details
@@ -33,18 +34,52 @@ npx hyperframes add ios26-liquid-glass
| Dimensions | 1920×1080 |
| Duration | 15s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
| `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
+| `assets/icons/weather.jpg` | `assets/icons/weather.jpg` | hyperframes:asset |
+| `assets/icons/stocks.jpg` | `assets/icons/stocks.jpg` | hyperframes:asset |
+| `assets/icons/find-my.jpg` | `assets/icons/find-my.jpg` | hyperframes:asset |
+| `assets/icons/home.jpg` | `assets/icons/home.jpg` | hyperframes:asset |
+| `assets/icons/books.jpg` | `assets/icons/books.jpg` | hyperframes:asset |
+| `assets/icons/itunes-store.jpg` | `assets/icons/itunes-store.jpg` | hyperframes:asset |
+| `assets/icons/fitness.jpg` | `assets/icons/fitness.jpg` | hyperframes:asset |
+| `assets/icons/watch.jpg` | `assets/icons/watch.jpg` | hyperframes:asset |
+| `assets/icons/contacts.jpg` | `assets/icons/contacts.jpg` | hyperframes:asset |
+| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
+| `assets/icons/translate.jpg` | `assets/icons/translate.jpg` | hyperframes:asset |
+| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
+| `assets/icons/chatgpt.jpg` | `assets/icons/chatgpt.jpg` | hyperframes:asset |
+| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
+| `assets/icons/instagram.jpg` | `assets/icons/instagram.jpg` | hyperframes:asset |
+| `assets/icons/x.jpg` | `assets/icons/x.jpg` | hyperframes:asset |
+| `assets/icons/proton-mail.jpg` | `assets/icons/proton-mail.jpg` | hyperframes:asset |
+| `assets/icons/gmail.jpg` | `assets/icons/gmail.jpg` | hyperframes:asset |
+| `assets/icons/revolut.jpg` | `assets/icons/revolut.jpg` | hyperframes:asset |
+| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
+| `assets/icons/phone.jpg` | `assets/icons/phone.jpg` | hyperframes:asset |
+| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
+| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
+| `assets/icons/whatsapp.jpg` | `assets/icons/whatsapp.jpg` | hyperframes:asset |
+| `assets/icons/notify-messages.jpg` | `assets/icons/notify-messages.jpg` | hyperframes:asset |
+| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index 57ec50798..2220b42b9 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -3,23 +3,24 @@ title: "Light Leak"
description: "Shader transition with cinematic light leak overlay"
---
-# Light Leak
-
-Shader transition with cinematic light leak overlay
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add light-leak
+```text
+Add the Light Leak block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add light-leak
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add light-leak
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `light-leak.html` | `compositions/light-leak.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/liquid-glass-context-menu.mdx b/docs/catalog/blocks/liquid-glass-context-menu.mdx
index 1258b58f6..98339d71b 100644
--- a/docs/catalog/blocks/liquid-glass-context-menu.mdx
+++ b/docs/catalog/blocks/liquid-glass-context-menu.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass Context Menu"
description: "Frosted glass context menu panel drifting over an aurora shader background"
---
-# Liquid Glass Context Menu
-
-Frosted glass context menu panel drifting over an aurora shader background
-
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
@@ -15,15 +11,20 @@ Frosted glass context menu panel drifting over an aurora shader background
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add liquid-glass-context-menu
+```text
+Add the Liquid Glass Context Menu block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add liquid-glass-context-menu
+```
## Details
@@ -33,16 +34,25 @@ npx hyperframes add liquid-glass-context-menu
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `liquid-glass-context-menu.html` | `compositions/liquid-glass-context-menu.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/liquid-glass-media-controls.mdx b/docs/catalog/blocks/liquid-glass-media-controls.mdx
index fd1c1b532..cdd934861 100644
--- a/docs/catalog/blocks/liquid-glass-media-controls.mdx
+++ b/docs/catalog/blocks/liquid-glass-media-controls.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass Media Controls"
description: "Frosted glass media control panels spreading over an aurora shader background"
---
-# Liquid Glass Media Controls
-
-Frosted glass media control panels spreading over an aurora shader background
-
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
@@ -15,15 +11,20 @@ Frosted glass media control panels spreading over an aurora shader background
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add liquid-glass-media-controls
+```text
+Add the Liquid Glass Media Controls block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add liquid-glass-media-controls
+```
## Details
@@ -33,16 +34,25 @@ npx hyperframes add liquid-glass-media-controls
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `liquid-glass-media-controls.html` | `compositions/liquid-glass-media-controls.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index d29109501..8c092dfac 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass Notification"
description: "Frosted glass notification cards floating over an aurora shader background"
---
-# Liquid Glass Notification
-
-Frosted glass notification cards floating over an aurora shader background
-
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
@@ -15,15 +11,20 @@ Frosted glass notification cards floating over an aurora shader background
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add liquid-glass-notification
+```text
+Add the Liquid Glass Notification block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add liquid-glass-notification
+```
## Details
@@ -33,16 +34,26 @@ npx hyperframes add liquid-glass-notification
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
+| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index 19d7ccc10..58fafbfc3 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass Widgets"
description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
---
-# Liquid Glass Widgets
-
-Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
-
`html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
@@ -15,15 +11,20 @@ Frosted glass stat cards, showcase panel and pill chips over an aurora shader ba
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add liquid-glass-widgets
+```text
+Add the Liquid Glass Widgets block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add liquid-glass-widgets
+```
## Details
@@ -33,16 +34,26 @@ npx hyperframes add liquid-glass-widgets
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `liquid-glass-widgets.html` | `compositions/liquid-glass-widgets.html` | hyperframes:composition |
+| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index 3cf9abe00..676958ee8 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -3,23 +3,24 @@ title: "Logo Outro"
description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
---
-# Logo Outro
-
-Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill
-
`branding` `outro` `logo`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add logo-outro
+```text
+Add the Logo Outro block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add logo-outro
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add logo-outro
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `logo-outro.html` | `compositions/logo-outro.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
index 1d08c4067..42bc83ecf 100644
--- a/docs/catalog/blocks/lower-third-bild.mdx
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — BILD Style"
description: "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
---
-# Lower Third — BILD Style
-
-News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.
-
`broadcast` `lower-third` `news` `overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lower-third-bild
+```text
+Add the Lower Third — BILD Style block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lower-third-bild
+```
## Details
@@ -29,7 +30,7 @@ npx hyperframes add lower-third-bild
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
@@ -37,10 +38,18 @@ npx hyperframes add lower-third-bild
| `assets/fonts/BarlowCondensed-Bold.woff2` | `compositions/assets/fonts/BarlowCondensed-Bold.woff2` | hyperframes:asset |
| `assets/fonts/BarlowCondensed-ExtraBold.woff2` | `compositions/assets/fonts/BarlowCondensed-ExtraBold.woff2` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-accent-underline.mdx b/docs/catalog/blocks/lt-accent-underline.mdx
index 1a90e8797..59a4111b2 100644
--- a/docs/catalog/blocks/lt-accent-underline.mdx
+++ b/docs/catalog/blocks/lt-accent-underline.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Accent Underline"
description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
---
-# Lower Third — Accent Underline
-
-Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility
-
`lower-third` `overlay` `podcast` `interview` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-accent-underline
+```text
+Add the Lower Third — Accent Underline block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-accent-underline
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-accent-underline
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-accent-underline.html` | `compositions/lt-accent-underline.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-bold-block.mdx b/docs/catalog/blocks/lt-bold-block.mdx
index 73e66db6b..dfa9623c4 100644
--- a/docs/catalog/blocks/lt-bold-block.mdx
+++ b/docs/catalog/blocks/lt-bold-block.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Bold Block"
description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
---
-# Lower Third — Bold Block
-
-High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops
-
`lower-third` `overlay` `podcast` `interview` `bold`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-bold-block
+```text
+Add the Lower Third — Bold Block block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-bold-block
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-bold-block
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-bold-block.html` | `compositions/lt-bold-block.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-clean-bar.mdx b/docs/catalog/blocks/lt-clean-bar.mdx
index 9ab0df1e9..59129b4a7 100644
--- a/docs/catalog/blocks/lt-clean-bar.mdx
+++ b/docs/catalog/blocks/lt-clean-bar.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Clean Bar"
description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
---
-# Lower Third — Clean Bar
-
-Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance
-
`lower-third` `overlay` `podcast` `interview`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-clean-bar
+```text
+Add the Lower Third — Clean Bar block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-clean-bar
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-clean-bar
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-clean-bar.html` | `compositions/lt-clean-bar.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-color-block.mdx b/docs/catalog/blocks/lt-color-block.mdx
index 570556d4b..8f2a845bd 100644
--- a/docs/catalog/blocks/lt-color-block.mdx
+++ b/docs/catalog/blocks/lt-color-block.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Color Block"
description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
---
-# Lower Third — Color Block
-
-High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role
-
`lower-third` `overlay` `podcast` `interview` `bold`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-color-block
+```text
+Add the Lower Third — Color Block block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-color-block
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-color-block
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-color-block.html` | `compositions/lt-color-block.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-dark-card.mdx b/docs/catalog/blocks/lt-dark-card.mdx
index 7c26fba24..6bc382841 100644
--- a/docs/catalog/blocks/lt-dark-card.mdx
+++ b/docs/catalog/blocks/lt-dark-card.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Dark Card"
description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
---
-# Lower Third — Dark Card
-
-Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance
-
`lower-third` `overlay` `podcast` `interview` `dark`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-dark-card
+```text
+Add the Lower Third — Dark Card block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-dark-card
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-dark-card
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-dark-card.html` | `compositions/lt-dark-card.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-kicker-name.mdx b/docs/catalog/blocks/lt-kicker-name.mdx
index 6b1688444..a6af604c4 100644
--- a/docs/catalog/blocks/lt-kicker-name.mdx
+++ b/docs/catalog/blocks/lt-kicker-name.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Kicker Name"
description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
---
-# Lower Third — Kicker Name
-
-Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage
-
`lower-third` `overlay` `podcast` `interview` `bold`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-kicker-name
+```text
+Add the Lower Third — Kicker Name block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-kicker-name
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-kicker-name
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-kicker-name.html` | `compositions/lt-kicker-name.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-mask-reveal.mdx b/docs/catalog/blocks/lt-mask-reveal.mdx
index bf1c581f8..abf98daa1 100644
--- a/docs/catalog/blocks/lt-mask-reveal.mdx
+++ b/docs/catalog/blocks/lt-mask-reveal.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Mask Reveal"
description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
---
-# Lower Third — Mask Reveal
-
-Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage
-
`lower-third` `overlay` `podcast` `interview` `bold`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-mask-reveal
+```text
+Add the Lower Third — Mask Reveal block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-mask-reveal
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-mask-reveal
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-mask-reveal.html` | `compositions/lt-mask-reveal.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-side-rule.mdx b/docs/catalog/blocks/lt-side-rule.mdx
index 01cd94954..5a775128e 100644
--- a/docs/catalog/blocks/lt-side-rule.mdx
+++ b/docs/catalog/blocks/lt-side-rule.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Side Rule"
description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
---
-# Lower Third — Side Rule
-
-Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage
-
`lower-third` `overlay` `podcast` `interview` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-side-rule
+```text
+Add the Lower Third — Side Rule block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-side-rule
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-side-rule
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-side-rule.html` | `compositions/lt-side-rule.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-soft-pill.mdx b/docs/catalog/blocks/lt-soft-pill.mdx
index dce100400..406c9f8da 100644
--- a/docs/catalog/blocks/lt-soft-pill.mdx
+++ b/docs/catalog/blocks/lt-soft-pill.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Soft Pill"
description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
---
-# Lower Third — Soft Pill
-
-Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance
-
`lower-third` `overlay` `podcast` `interview` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-soft-pill
+```text
+Add the Lower Third — Soft Pill block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-soft-pill
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-soft-pill
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-soft-pill.html` | `compositions/lt-soft-pill.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-stack-bars.mdx b/docs/catalog/blocks/lt-stack-bars.mdx
index a21d250da..21a4b48b5 100644
--- a/docs/catalog/blocks/lt-stack-bars.mdx
+++ b/docs/catalog/blocks/lt-stack-bars.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Stack Bars"
description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
---
-# Lower Third — Stack Bars
-
-Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right
-
`lower-third` `overlay` `podcast` `interview` `bold`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add lt-stack-bars
+```text
+Add the Lower Third — Stack Bars block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-stack-bars
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add lt-stack-bars
| Dimensions | 1920×1080 |
| Duration | 4.8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `lt-stack-bars.html` | `compositions/lt-stack-bars.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index 3e5409f0f..58508174f 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -3,23 +3,24 @@ title: "macOS Notification"
description: "Animated macOS-style notification banner with app icon and message"
---
-# macOS Notification
-
-Animated macOS-style notification banner with app icon and message
-
`social` `overlay` `notification`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add macos-notification
+```text
+Add the macOS Notification block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add macos-notification
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add macos-notification
| Dimensions | 1920×1080 |
| Duration | 5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `macos-notification.html` | `compositions/macos-notification.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index e878221c2..51f4b3453 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -3,10 +3,6 @@ title: "macOS Tahoe Liquid Glass Desktop"
description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
---
-# macOS Tahoe Liquid Glass Desktop
-
-3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
-
`html-in-canvas` `3d` `macos` `tahoe` `gltf`
@@ -15,15 +11,20 @@ description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finde
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add macos-tahoe-liquid-glass
+```text
+Add the macOS Tahoe Liquid Glass Desktop block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add macos-tahoe-liquid-glass
+```
## Details
@@ -33,18 +34,42 @@ npx hyperframes add macos-tahoe-liquid-glass
| Dimensions | 1920×1080 |
| Duration | 15s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `macos-tahoe-liquid-glass.html` | `compositions/macos-tahoe-liquid-glass.html` | hyperframes:composition |
| `models/macbook.glb` | `models/macbook.glb` | hyperframes:asset |
-| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
+| `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | hyperframes:asset |
+| `assets/icons/finder.png` | `assets/icons/finder.png` | hyperframes:asset |
+| `assets/icons/safari.jpg` | `assets/icons/safari.jpg` | hyperframes:asset |
+| `assets/icons/mail.jpg` | `assets/icons/mail.jpg` | hyperframes:asset |
+| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
+| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
+| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
+| `assets/icons/toast-messages.jpg` | `assets/icons/toast-messages.jpg` | hyperframes:asset |
+| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
+| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
+| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
+| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
+| `assets/icons/dock-finder.png` | `assets/icons/dock-finder.png` | hyperframes:asset |
+| `assets/icons/dock-safari.jpg` | `assets/icons/dock-safari.jpg` | hyperframes:asset |
+| `assets/icons/dock-mail.jpg` | `assets/icons/dock-mail.jpg` | hyperframes:asset |
+| `assets/icons/dock-photos.jpg` | `assets/icons/dock-photos.jpg` | hyperframes:asset |
+| `assets/icons/dock-music.jpg` | `assets/icons/dock-music.jpg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
index ebd3e4129..101459f7f 100644
--- a/docs/catalog/blocks/mk-background.mdx
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -3,23 +3,24 @@ title: "Minimal Gradient Background"
description: "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode"
---
-# Minimal Gradient Background
-
-Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode
-
`background` `gradient` `minimal` `professional` `presentation`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-background
+```text
+Add the Minimal Gradient Background block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-background
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add mk-background
| Dimensions | 1920×1080 |
| Duration | 10s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-background.html` | `compositions/mk-background.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
index 42a47419d..cd007cdcb 100644
--- a/docs/catalog/blocks/mk-callout-highlight.mdx
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -3,23 +3,24 @@ title: "Word-Sweep Highlight"
description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
---
-# Word-Sweep Highlight
-
-A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover
-
`typography` `karaoke` `captions` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-callout-highlight
+```text
+Add the Word-Sweep Highlight block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-callout-highlight
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add mk-callout-highlight
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-callout-highlight.html` | `compositions/mk-callout-highlight.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
index 170069210..2e53f6585 100644
--- a/docs/catalog/blocks/mk-clone-wall-transition.mdx
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -3,23 +3,24 @@ title: "Text Clone Wall Transition"
description: "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
---
-# Text Clone Wall Transition
-
-Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered
-
`transition` `typography` `wipe`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-clone-wall-transition
+```text
+Add the Text Clone Wall Transition block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-clone-wall-transition
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add mk-clone-wall-transition
| Dimensions | 1920×1080 |
| Duration | 2.4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-clone-wall-transition.html` | `compositions/mk-clone-wall-transition.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
index a8813964f..0ce436deb 100644
--- a/docs/catalog/blocks/mk-line-graph.mdx
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -3,23 +3,24 @@ title: "Minimal Line Graph"
description: "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend"
---
-# Minimal Line Graph
-
-One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend
-
`data-viz` `chart` `graph` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-line-graph
+```text
+Add the Minimal Line Graph block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-line-graph
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add mk-line-graph
| Dimensions | 1920×1080 |
| Duration | 7s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-line-graph.html` | `compositions/mk-line-graph.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
index 9148e41b9..a743072f2 100644
--- a/docs/catalog/blocks/mk-placeholder-grid.mdx
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -3,23 +3,24 @@ title: "Rounded Media Grid"
description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
---
-# Rounded Media Grid
-
-N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle
-
`placeholder` `media` `grid` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-placeholder-grid
+```text
+Add the Rounded Media Grid block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-placeholder-grid
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add mk-placeholder-grid
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-placeholder-grid.html` | `compositions/mk-placeholder-grid.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
index 46ff095a5..ac7bc07a6 100644
--- a/docs/catalog/blocks/mk-progress-stat.mdx
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -3,23 +3,24 @@ title: "Count-Up Stat Card"
description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
---
-# Count-Up Stat Card
-
-Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes
-
`data-viz` `stat` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-progress-stat
+```text
+Add the Count-Up Stat Card block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-progress-stat
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add mk-progress-stat
| Dimensions | 1920×1080 |
| Duration | 7s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-progress-stat.html` | `compositions/mk-progress-stat.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
index f6c64bc37..e5624a085 100644
--- a/docs/catalog/blocks/mk-specs-list.mdx
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -3,23 +3,24 @@ title: "Specs Checklist"
description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
---
-# Specs Checklist
-
-Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes
-
`data-viz` `list` `minimal` `professional`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-specs-list
+```text
+Add the Specs Checklist block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-specs-list
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add mk-specs-list
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-specs-list.html` | `compositions/mk-specs-list.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/news-ticker.mdx b/docs/catalog/blocks/news-ticker.mdx
index 33e97da50..96ff4493c 100644
--- a/docs/catalog/blocks/news-ticker.mdx
+++ b/docs/catalog/blocks/news-ticker.mdx
@@ -3,23 +3,24 @@ title: "News Ticker"
description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
---
-# News Ticker
-
-Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.
-
`lower-third` `overlay` `news` `ticker`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add news-ticker
+```text
+Add the News Ticker block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add news-ticker
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add news-ticker
| Dimensions | 1920×1080 |
| Duration | 7s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `news-ticker.html` | `compositions/news-ticker.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/north-korea-locked-down.mdx b/docs/catalog/blocks/north-korea-locked-down.mdx
index 55262c7e6..2145aa075 100644
--- a/docs/catalog/blocks/north-korea-locked-down.mdx
+++ b/docs/catalog/blocks/north-korea-locked-down.mdx
@@ -3,10 +3,6 @@ title: "North Korea Locked Down"
description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
---
-# North Korea Locked Down
-
-Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.
-
`showcase` `map` `annotation` `youtube` `kinetic`
Created by [Stronkter](https://x.com/Stronkter).
@@ -19,15 +15,20 @@ use 📷HyperFrames by HeyGen and Image Gen if you need it for assets or like p
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add north-korea-locked-down
+```text
+Add the North Korea Locked Down block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add north-korea-locked-down
+```
## Details
@@ -37,17 +38,25 @@ npx hyperframes add north-korea-locked-down
| Dimensions | 1920×1080 |
| Duration | 7s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `north-korea-locked-down.html` | `compositions/north-korea-locked-down.html` | hyperframes:composition |
| `assets/korea-map.png` | `assets/korea-map.png` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/nyc-paris-flight.mdx b/docs/catalog/blocks/nyc-paris-flight.mdx
index f384e7623..b26fcec17 100644
--- a/docs/catalog/blocks/nyc-paris-flight.mdx
+++ b/docs/catalog/blocks/nyc-paris-flight.mdx
@@ -3,10 +3,6 @@ title: "NYC Paris Flight"
description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
---
-# NYC Paris Flight
-
-Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.
-
`showcase` `travel` `map` `youtube` `sfx`
Created by [Stronkter](https://x.com/Stronkter).
@@ -19,15 +15,20 @@ Created by [Stronkter](https://x.com/Stronkter).
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add nyc-paris-flight
+```text
+Add the NYC Paris Flight block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add nyc-paris-flight
+```
## Details
@@ -37,7 +38,7 @@ npx hyperframes add nyc-paris-flight
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
@@ -45,10 +46,18 @@ npx hyperframes add nyc-paris-flight
| `assets/map-nyc-paris.png` | `assets/map-nyc-paris.png` | hyperframes:asset |
| `assets/sfx-mix.wav` | `assets/sfx-mix.wav` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
index 2613b2296..2bf876eec 100644
--- a/docs/catalog/blocks/organic-light-leak-overlay.mdx
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -3,23 +3,24 @@ title: "Organic Light Leak Overlay"
description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
---
-# Organic Light Leak Overlay
-
-Finite CSS light-leak overlay for memory beats and motivated transitions
-
`light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add organic-light-leak-overlay
+```text
+Add the Organic Light Leak Overlay block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add organic-light-leak-overlay
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add organic-light-leak-overlay
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `organic-light-leak-overlay.html` | `compositions/organic-light-leak-overlay.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index 1f4c7bc7f..9fbd55815 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -3,23 +3,24 @@ title: "Reddit Post Card"
description: "Animated Reddit post card overlay with upvotes and comments"
---
-# Reddit Post Card
-
-Animated Reddit post card overlay with upvotes and comments
-
`social` `overlay` `reddit`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add reddit-post
+```text
+Add the Reddit Post Card block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add reddit-post
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add reddit-post
| Dimensions | 1920×1080 |
| Duration | 5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `reddit-post.html` | `compositions/reddit-post.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index c7fc61c5b..4246e3f33 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -3,23 +3,24 @@ title: "Ridged Burn"
description: "Shader transition with ridged turbulence burn effect"
---
-# Ridged Burn
-
-Shader transition with ridged turbulence burn effect
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add ridged-burn
+```text
+Add the Ridged Burn block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add ridged-burn
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add ridged-burn
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `ridged-burn.html` | `compositions/ridged-burn.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index 09acb6cb0..a6fd37982 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -3,23 +3,24 @@ title: "Ripple Waves"
description: "Shader transition with concentric ripple wave distortion"
---
-# Ripple Waves
-
-Shader transition with concentric ripple wave distortion
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add ripple-waves
+```text
+Add the Ripple Waves block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add ripple-waves
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add ripple-waves
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `ripple-waves.html` | `compositions/ripple-waves.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index 01fbd5175..18da36e53 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -3,23 +3,24 @@ title: "SDF Iris"
description: "Shader transition with signed distance field iris reveal"
---
-# SDF Iris
-
-Shader transition with signed distance field iris reveal
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add sdf-iris
+```text
+Add the SDF Iris block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add sdf-iris
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add sdf-iris
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `sdf-iris.html` | `compositions/sdf-iris.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/spain-map.mdx b/docs/catalog/blocks/spain-map.mdx
index afbc8f367..743397926 100644
--- a/docs/catalog/blocks/spain-map.mdx
+++ b/docs/catalog/blocks/spain-map.mdx
@@ -3,23 +3,24 @@ title: "Spain Map"
description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
---
-# Spain Map
-
-Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection
-
`data` `map` `geography` `spain` `europe` `choropleth`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add spain-map
+```text
+Add the Spain Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add spain-map
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add spain-map
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `spain-map.html` | `compositions/spain-map.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index 9dcef7fe8..196a6c236 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -3,23 +3,24 @@ title: "Spotify Now Playing"
description: "Animated Spotify now-playing card with album art and progress bar"
---
-# Spotify Now Playing
-
-Animated Spotify now-playing card with album art and progress bar
-
`social` `overlay` `spotify`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add spotify-card
+```text
+Add the Spotify Now Playing block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add spotify-card
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add spotify-card
| Dimensions | 1080×1920 |
| Duration | 5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `spotify-card.html` | `compositions/spotify-card.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index 622e07d8b..984686419 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -3,23 +3,24 @@ title: "Swirl Vortex"
description: "Shader transition with swirling vortex distortion"
---
-# Swirl Vortex
-
-Shader transition with swirling vortex distortion
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add swirl-vortex
+```text
+Add the Swirl Vortex block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add swirl-vortex
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add swirl-vortex
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `swirl-vortex.html` | `compositions/swirl-vortex.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index ffa8d5132..a478d2cda 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -3,23 +3,24 @@ title: "Thermal Distortion"
description: "Shader transition with heat haze thermal distortion"
---
-# Thermal Distortion
-
-Shader transition with heat haze thermal distortion
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add thermal-distortion
+```text
+Add the Thermal Distortion block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add thermal-distortion
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add thermal-distortion
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `thermal-distortion.html` | `compositions/thermal-distortion.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index e68a78734..510cf9c1d 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -3,23 +3,24 @@ title: "TikTok Follow"
description: "Animated TikTok follow overlay with profile card and follow button"
---
-# TikTok Follow
-
-Animated TikTok follow overlay with profile card and follow button
-
`social` `overlay` `tiktok`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add tiktok-follow
+```text
+Add the TikTok Follow block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add tiktok-follow
+```
## Details
@@ -29,17 +30,25 @@ npx hyperframes add tiktok-follow
| Dimensions | 1080×1920 |
| Duration | 4.5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `tiktok-follow.html` | `compositions/tiktok-follow.html` | hyperframes:composition |
| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index 67b015bfa..886764508 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -3,23 +3,24 @@ title: "3D Transitions"
description: "Showcase of 3D perspective flip and rotate transitions"
---
-# 3D Transitions
-
-Showcase of 3D perspective flip and rotate transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-3d
+```text
+Add the 3D Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-3d
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-3d
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-3d.html` | `compositions/transitions-3d.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index d09dd1d89..4ade0819a 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -3,23 +3,24 @@ title: "Blur Transitions"
description: "Showcase of blur-based transitions between scenes"
---
-# Blur Transitions
-
-Showcase of blur-based transitions between scenes
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-blur
+```text
+Add the Blur Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-blur
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-blur
| Dimensions | 1920×1080 |
| Duration | 20s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-blur.html` | `compositions/transitions-blur.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index e22448ced..f53ef285a 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -3,23 +3,24 @@ title: "Cover Transitions"
description: "Showcase of cover/uncover slide transitions"
---
-# Cover Transitions
-
-Showcase of cover/uncover slide transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-cover
+```text
+Add the Cover Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-cover
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-cover
| Dimensions | 1920×1080 |
| Duration | 21s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-cover.html` | `compositions/transitions-cover.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index e3598f8ab..12e7bc6b1 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -3,23 +3,24 @@ title: "Destruction Transitions"
description: "Showcase of destructive break-apart transitions"
---
-# Destruction Transitions
-
-Showcase of destructive break-apart transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-destruction
+```text
+Add the Destruction Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-destruction
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-destruction
| Dimensions | 1920×1080 |
| Duration | 14s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-destruction.html` | `compositions/transitions-destruction.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index f49f24e38..023f8a5c7 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -3,23 +3,24 @@ title: "Dissolve Transitions"
description: "Showcase of dissolve and fade transitions"
---
-# Dissolve Transitions
-
-Showcase of dissolve and fade transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-dissolve
+```text
+Add the Dissolve Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-dissolve
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-dissolve
| Dimensions | 1920×1080 |
| Duration | 24s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-dissolve.html` | `compositions/transitions-dissolve.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index 9d57d74ef..a32e29bf3 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -3,23 +3,24 @@ title: "Distortion Transitions"
description: "Showcase of warp and distortion transitions"
---
-# Distortion Transitions
-
-Showcase of warp and distortion transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-distortion
+```text
+Add the Distortion Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-distortion
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-distortion
| Dimensions | 1920×1080 |
| Duration | 21s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-distortion.html` | `compositions/transitions-distortion.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index 4cb164ecf..6056825c6 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -3,23 +3,24 @@ title: "Grid Transitions"
description: "Showcase of grid-based tile transitions"
---
-# Grid Transitions
-
-Showcase of grid-based tile transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-grid
+```text
+Add the Grid Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-grid
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-grid
| Dimensions | 1920×1080 |
| Duration | 11s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-grid.html` | `compositions/transitions-grid.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index 74b2ea1aa..7f16fd994 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -3,23 +3,24 @@ title: "Light Transitions"
description: "Showcase of light-based glow and flash transitions"
---
-# Light Transitions
-
-Showcase of light-based glow and flash transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-light
+```text
+Add the Light Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-light
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-light
| Dimensions | 1920×1080 |
| Duration | 21s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-light.html` | `compositions/transitions-light.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index 0553b381c..b71df6a60 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -3,23 +3,24 @@ title: "Mechanical Transitions"
description: "Showcase of mechanical shutter and iris transitions"
---
-# Mechanical Transitions
-
-Showcase of mechanical shutter and iris transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-mechanical
+```text
+Add the Mechanical Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-mechanical
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-mechanical
| Dimensions | 1920×1080 |
| Duration | 15s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-mechanical.html` | `compositions/transitions-mechanical.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index bd7f44179..a1f871fae 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -3,23 +3,24 @@ title: "Other Transitions"
description: "Showcase of miscellaneous creative transitions"
---
-# Other Transitions
-
-Showcase of miscellaneous creative transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-other
+```text
+Add the Other Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-other
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-other
| Dimensions | 1920×1080 |
| Duration | 20s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-other.html` | `compositions/transitions-other.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index aabd0fd57..6bc7bb593 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -3,23 +3,24 @@ title: "Push Transitions"
description: "Showcase of push and slide transitions"
---
-# Push Transitions
-
-Showcase of push and slide transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-push
+```text
+Add the Push Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-push
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-push
| Dimensions | 1920×1080 |
| Duration | 24s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-push.html` | `compositions/transitions-push.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index 3bde01c61..c307b81c6 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -3,23 +3,24 @@ title: "Radial Transitions"
description: "Showcase of radial wipe and reveal transitions"
---
-# Radial Transitions
-
-Showcase of radial wipe and reveal transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-radial
+```text
+Add the Radial Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-radial
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-radial
| Dimensions | 1920×1080 |
| Duration | 20s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-radial.html` | `compositions/transitions-radial.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index 080035ba0..646ca6efc 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -3,23 +3,24 @@ title: "Scale Transitions"
description: "Showcase of scale and zoom transitions"
---
-# Scale Transitions
-
-Showcase of scale and zoom transitions
-
`transition` `showcase`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add transitions-scale
+```text
+Add the Scale Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-scale
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add transitions-scale
| Dimensions | 1920×1080 |
| Duration | 15s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `transitions-scale.html` | `compositions/transitions-scale.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index 4b981de53..2f878ee6e 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -3,23 +3,24 @@ title: "3D UI Reveal"
description: "Perspective 3D reveal animation for UI elements"
---
-# 3D UI Reveal
-
-Perspective 3D reveal animation for UI elements
-
`showcase` `3d` `reveal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add ui-3d-reveal
+```text
+Add the 3D UI Reveal block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add ui-3d-reveal
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add ui-3d-reveal
| Dimensions | 1920×1080 |
| Duration | 13s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `ui-3d-reveal.html` | `compositions/ui-3d-reveal.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/us-map-bubble.mdx b/docs/catalog/blocks/us-map-bubble.mdx
index 65bbf9001..19a930729 100644
--- a/docs/catalog/blocks/us-map-bubble.mdx
+++ b/docs/catalog/blocks/us-map-bubble.mdx
@@ -3,23 +3,24 @@ title: "US Bubble Map"
description: "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map"
---
-# US Bubble Map
-
-Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map
-
`data` `map` `geography` `usa` `bubble` `cities`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add us-map-bubble
+```text
+Add the US Bubble Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add us-map-bubble
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add us-map-bubble
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `us-map-bubble.html` | `compositions/us-map-bubble.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/us-map-flow.mdx b/docs/catalog/blocks/us-map-flow.mdx
index c63057fae..2e0a67df4 100644
--- a/docs/catalog/blocks/us-map-flow.mdx
+++ b/docs/catalog/blocks/us-map-flow.mdx
@@ -3,23 +3,24 @@ title: "US Flow Map"
description: "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization"
---
-# US Flow Map
-
-Animated connection arcs between US cities over a base map — composable origin-destination flow visualization
-
`data` `map` `geography` `usa` `flow` `connections` `arcs`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add us-map-flow
+```text
+Add the US Flow Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add us-map-flow
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add us-map-flow
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `us-map-flow.html` | `compositions/us-map-flow.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/us-map-hex.mdx b/docs/catalog/blocks/us-map-hex.mdx
index 8736304a7..59d35ec7f 100644
--- a/docs/catalog/blocks/us-map-hex.mdx
+++ b/docs/catalog/blocks/us-map-hex.mdx
@@ -3,23 +3,24 @@ title: "US Hex Grid Map"
description: "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label"
---
-# US Hex Grid Map
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add us-map-hex
+```text
+Add the US Hex Grid Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add us-map-hex
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add us-map-hex
| Dimensions | 1920×1080 |
| Duration | 10s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `us-map-hex.html` | `compositions/us-map-hex.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/us-map.mdx b/docs/catalog/blocks/us-map.mdx
index 8508ce0c0..f55c9390b 100644
--- a/docs/catalog/blocks/us-map.mdx
+++ b/docs/catalog/blocks/us-map.mdx
@@ -3,23 +3,24 @@ title: "US Map"
description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP"
---
-# US Map
-
-Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP
-
`data` `map` `geography` `usa` `choropleth`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add us-map
+```text
+Add the US Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add us-map
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add us-map
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `us-map.html` | `compositions/us-map.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index d08a8445d..c639feef5 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -3,10 +3,6 @@ title: "iPhone & MacBook 3D Showcase"
description: "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable."
---
-# iPhone & MacBook 3D Showcase
-
-Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.
-
`html-in-canvas` `3d` `device` `iphone` `macbook` `gltf`
@@ -15,15 +11,20 @@ Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas scre
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add vfx-iphone-device
+```text
+Add the iPhone & MacBook 3D Showcase block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-iphone-device
+```
## Details
@@ -33,7 +34,7 @@ npx hyperframes add vfx-iphone-device
| Dimensions | 1920×1080 |
| Duration | 15s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
@@ -43,10 +44,18 @@ npx hyperframes add vfx-iphone-device
| `models/hyperframes-mobile.png` | `models/hyperframes-mobile.png` | asset |
| `models/hyperframes-desktop.png` | `models/hyperframes-desktop.png` | asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index 67bc9c01e..04a85c81a 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -3,10 +3,6 @@ title: "Liquid Background"
description: "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics."
---
-# Liquid Background
-
-Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.
-
`html-in-canvas` `liquid` `webgl` `displacement` `background`
@@ -15,15 +11,20 @@ Organic liquid simulation with vertex displacement on a subdivided plane. HTML c
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add vfx-liquid-background
+```text
+Add the Liquid Background block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-liquid-background
+```
## Details
@@ -33,16 +34,24 @@ npx hyperframes add vfx-liquid-background
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `vfx-liquid-background.html` | `compositions/vfx-liquid-background.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index 76b667086..b1f2642ac 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass"
description: "VFX composition block"
---
-# Liquid Glass
-
-VFX composition block
-
`html-in-canvas` `webgl`
@@ -15,15 +11,20 @@ VFX composition block
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add vfx-liquid-glass
+```text
+Add the Liquid Glass block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-liquid-glass
+```
## Details
@@ -33,16 +34,24 @@ npx hyperframes add vfx-liquid-glass
| Dimensions | 1920×1080 |
| Duration | 20s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `vfx-liquid-glass.html` | `compositions/vfx-liquid-glass.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index 2eb6046ff..e10a13ef7 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -3,10 +3,6 @@ title: "Magnetic"
description: "VFX composition block"
---
-# Magnetic
-
-VFX composition block
-
`html-in-canvas` `webgl`
@@ -15,15 +11,20 @@ VFX composition block
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add vfx-magnetic
+```text
+Add the Magnetic block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-magnetic
+```
## Details
@@ -33,16 +34,24 @@ npx hyperframes add vfx-magnetic
| Dimensions | 1920×1080 |
| Duration | 15s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `vfx-magnetic.html` | `compositions/vfx-magnetic.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index a060a613e..e016e6b9a 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -3,10 +3,6 @@ title: "Portal"
description: "VFX composition block"
---
-# Portal
-
-VFX composition block
-
`html-in-canvas` `webgl`
@@ -15,15 +11,20 @@ VFX composition block
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add vfx-portal
+```text
+Add the Portal block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-portal
+```
## Details
@@ -33,16 +34,24 @@ npx hyperframes add vfx-portal
| Dimensions | 1920×1080 |
| Duration | 10s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `vfx-portal.html` | `compositions/vfx-portal.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index bb659c8aa..a11422be6 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -3,10 +3,6 @@ title: "Shatter"
description: "VFX composition block"
---
-# Shatter
-
-VFX composition block
-
`html-in-canvas` `webgl`
@@ -15,15 +11,20 @@ VFX composition block
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add vfx-shatter
+```text
+Add the Shatter block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-shatter
+```
## Details
@@ -33,16 +34,24 @@ npx hyperframes add vfx-shatter
| Dimensions | 1920×1080 |
| Duration | 12s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `vfx-shatter.html` | `compositions/vfx-shatter.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index 2f8b4d2d8..19804a7aa 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -3,10 +3,6 @@ title: "VFX Text Cursor"
description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges."
---
-# VFX Text Cursor
-
-Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.
-
`html-in-canvas` `text` `shader` `cursor` `chromatic`
@@ -15,15 +11,20 @@ Dramatic text reveal with cursor glow, chromatic shadow rays, and directional li
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add vfx-text-cursor
+```text
+Add the VFX Text Cursor block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-text-cursor
+```
## Details
@@ -33,16 +34,24 @@ npx hyperframes add vfx-text-cursor
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `vfx-text-cursor.html` | `compositions/vfx-text-cursor.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vpn-youtube-spot.mdx b/docs/catalog/blocks/vpn-youtube-spot.mdx
index d2d044b9e..a180fa80f 100644
--- a/docs/catalog/blocks/vpn-youtube-spot.mdx
+++ b/docs/catalog/blocks/vpn-youtube-spot.mdx
@@ -3,10 +3,6 @@ title: "VPN YouTube Spot"
description: "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects."
---
-# VPN YouTube Spot
-
-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).
@@ -19,15 +15,20 @@ HyperFrames by HeyGen make me a 7s video with Apple-style bold font and styling:
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add vpn-youtube-spot
+```text
+Add the VPN YouTube Spot block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add vpn-youtube-spot
+```
## Details
@@ -37,17 +38,25 @@ npx hyperframes add vpn-youtube-spot
| Dimensions | 1920×1080 |
| Duration | 7s |
-## Files
+**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 |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index c0f6dba95..bcb831ab8 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -3,23 +3,24 @@ title: "Whip Pan"
description: "Shader transition simulating a fast camera whip pan"
---
-# Whip Pan
-
-Shader transition simulating a fast camera whip pan
-
`transition` `shader`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add whip-pan
+```text
+Add the Whip Pan block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add whip-pan
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add whip-pan
| Dimensions | 1920×1080 |
| Duration | 4s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `whip-pan.html` | `compositions/whip-pan.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/world-map.mdx b/docs/catalog/blocks/world-map.mdx
index b1a41ccaa..4a28426c2 100644
--- a/docs/catalog/blocks/world-map.mdx
+++ b/docs/catalog/blocks/world-map.mdx
@@ -3,23 +3,24 @@ title: "World Map"
description: "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection"
---
-# World Map
-
-Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection
-
`data` `map` `geography` `world` `choropleth`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add world-map
+```text
+Add the World Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add world-map
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add world-map
| Dimensions | 1920×1080 |
| Duration | 14s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `world-map.html` | `compositions/world-map.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index dfd0c8b08..cc5da347f 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -3,23 +3,24 @@ title: "X Post Card"
description: "Animated X/Twitter post card overlay with engagement metrics"
---
-# X Post Card
-
-Animated X/Twitter post card overlay with engagement metrics
-
`social` `overlay` `twitter`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add x-post
+```text
+Add the X Post Card block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add x-post
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add x-post
| Dimensions | 1920×1080 |
| Duration | 5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `x-post.html` | `compositions/x-post.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
index 116281e49..f529fc4e1 100644
--- a/docs/catalog/blocks/yt-comment-card.mdx
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -3,23 +3,24 @@ 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"
---
-# Comment Cards
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add yt-comment-card
+```text
+Add the Comment Cards block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-comment-card
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add yt-comment-card
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `yt-comment-card.html` | `compositions/yt-comment-card.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
index 270cc28b5..fd5ace98d 100644
--- a/docs/catalog/blocks/yt-lcd-background.mdx
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -3,23 +3,24 @@ 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"
---
-# Scanline Board Background
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add yt-lcd-background
+```text
+Add the Scanline Board Background block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-lcd-background
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add yt-lcd-background
| Dimensions | 1920×1080 |
| Duration | 10s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `yt-lcd-background.html` | `compositions/yt-lcd-background.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
index 7d7a51de9..ab26fc32d 100644
--- a/docs/catalog/blocks/yt-logo-intro.mdx
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -3,23 +3,24 @@ 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 Sequence
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add yt-logo-intro
+```text
+Add the Logo Intro Sequence block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-logo-intro
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add yt-logo-intro
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `yt-logo-intro.html` | `compositions/yt-logo-intro.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index e0843d632..4b017f5c2 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -3,23 +3,24 @@ title: "YouTube Lower Third"
description: "Animated YouTube subscribe lower third with avatar and channel info"
---
-# YouTube Lower Third
-
-Animated YouTube subscribe lower third with avatar and channel info
-
`social` `overlay` `youtube`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add yt-lower-third
+```text
+Add the YouTube Lower Third block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-lower-third
+```
## Details
@@ -29,17 +30,25 @@ npx hyperframes add yt-lower-third
| Dimensions | 1920×1080 |
| Duration | 4.5s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `yt-lower-third.html` | `compositions/yt-lower-third.html` | hyperframes:composition |
| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
index 6de55589a..a1c07d0d7 100644
--- a/docs/catalog/blocks/yt-prism-title.mdx
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -3,23 +3,24 @@ 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"
---
-# Chromatic Fringe Title
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add yt-prism-title
+```text
+Add the Chromatic Fringe Title block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-prism-title
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add yt-prism-title
| Dimensions | 1920×1080 |
| Duration | 6s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `yt-prism-title.html` | `compositions/yt-prism-title.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
index 36c5e0f7d..7f79dd6a1 100644
--- a/docs/catalog/blocks/yt-vertical-fill.mdx
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -3,23 +3,24 @@ 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)"
---
-# Vertical Media Filler
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add yt-vertical-fill
+```text
+Add the Vertical Media Filler block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
```
-
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-vertical-fill
+```
## Details
@@ -29,16 +30,24 @@ npx hyperframes add yt-vertical-fill
| Dimensions | 1920×1080 |
| Duration | 8s |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `yt-vertical-fill.html` | `compositions/yt-vertical-fill.html` | hyperframes:composition |
-## Usage
+## Use it
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
```html
```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-blend-difference.mdx b/docs/catalog/components/caption-blend-difference.mdx
index e53931737..e0ded3089 100644
--- a/docs/catalog/components/caption-blend-difference.mdx
+++ b/docs/catalog/components/caption-blend-difference.mdx
@@ -3,23 +3,24 @@ title: "Blend Difference"
description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
---
-# Blend Difference
-
-Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background
-
-`text` `effect` `blend-mode` `contrast` `inversion`
+`text` `text-effect` `effect` `blend-mode` `contrast` `inversion`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-blend-difference
+```text
+Add the Blend Difference 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
+npx hyperframes add caption-blend-difference
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-blend-difference
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-blend-difference.html` | `compositions/components/caption-blend-difference.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-blend-difference.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-blend-difference.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index 9816574f0..2b88a2285 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -3,23 +3,24 @@ title: "Clip Wipe"
description: "Left-to-right clip-path wipe reveal per word"
---
-# Clip Wipe
-
-Left-to-right clip-path wipe reveal per word
-
`captions` `caption-style` `wipe` `clip-path` `reveal`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-clip-wipe
+```text
+Add the Clip Wipe 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
+npx hyperframes add caption-clip-wipe
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-clip-wipe
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-clip-wipe.html` | `compositions/components/caption-clip-wipe.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-clip-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-clip-wipe.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index 35b3e17ff..2fe9be5a9 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -3,23 +3,24 @@ title: "Editorial Emphasis"
description: "Dual-font system with dramatic size contrast for emphasis words"
---
-# Editorial Emphasis
-
-Dual-font system with dramatic size contrast for emphasis words
-
`captions` `caption-style` `editorial` `typography` `emphasis`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-editorial-emphasis
+```text
+Add the Editorial Emphasis 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
+npx hyperframes add caption-editorial-emphasis
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-editorial-emphasis
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-editorial-emphasis.html` | `compositions/components/caption-editorial-emphasis.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-editorial-emphasis.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-editorial-emphasis.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index a1914f97c..36e0a5136 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -3,23 +3,24 @@ title: "Emoji Pop"
description: "Emoji integration with stroked text and horizontal squeeze entrance"
---
-# Emoji Pop
-
-Emoji integration with stroked text and horizontal squeeze entrance
-
`captions` `caption-style` `emoji` `social`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-emoji-pop
+```text
+Add the Emoji Pop 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
+npx hyperframes add caption-emoji-pop
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-emoji-pop
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-emoji-pop.html` | `compositions/components/caption-emoji-pop.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-emoji-pop.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-emoji-pop.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index a1344b546..c236e0c6a 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -3,23 +3,24 @@ title: "Glitch RGB"
description: "RGB chromatic aberration with CRT scanline overlay"
---
-# Glitch RGB
-
-RGB chromatic aberration with CRT scanline overlay
-
`captions` `caption-style` `glitch` `cyber` `tech`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-glitch-rgb
+```text
+Add the Glitch RGB 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
+npx hyperframes add caption-glitch-rgb
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-glitch-rgb
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-glitch-rgb.html` | `compositions/components/caption-glitch-rgb.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-glitch-rgb.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-glitch-rgb.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index a81eea83b..b991f2f3b 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -3,23 +3,24 @@ title: "Gradient Fill"
description: "Gradient-clipped text with elastic bounce entrance"
---
-# Gradient Fill
-
-Gradient-clipped text with elastic bounce entrance
-
`captions` `caption-style` `gradient` `colorful`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-gradient-fill
+```text
+Add the Gradient Fill 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
+npx hyperframes add caption-gradient-fill
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-gradient-fill
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-gradient-fill.html` | `compositions/components/caption-gradient-fill.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-gradient-fill.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-gradient-fill.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
index 5937f0962..3aa89acf9 100644
--- a/docs/catalog/components/caption-highlight.mdx
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -3,23 +3,24 @@ title: "Highlight"
description: "Red background sweep behind each active word, TikTok-style"
---
-# Highlight
-
-Red background sweep behind each active word, TikTok-style
-
`captions` `caption-style` `highlight` `social` `tiktok`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-highlight
+```text
+Add the Highlight 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
+npx hyperframes add caption-highlight
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-highlight
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-highlight.html` | `compositions/components/caption-highlight.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-highlight.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index ec24d38d3..4551ca526 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -3,23 +3,24 @@ title: "Kinetic Slam"
description: "Full-screen single-word display with alternating entrance directions"
---
-# Kinetic Slam
-
-Full-screen single-word display with alternating entrance directions
-
`captions` `caption-style` `kinetic` `typography` `slam`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-kinetic-slam
+```text
+Add the Kinetic Slam 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
+npx hyperframes add caption-kinetic-slam
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-kinetic-slam
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-kinetic-slam.html` | `compositions/components/caption-kinetic-slam.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-kinetic-slam.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-kinetic-slam.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index dcc363a8a..09b84d85b 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -3,23 +3,24 @@ title: "Matrix Decode"
description: "Character scramble animation before text reveal"
---
-# Matrix Decode
-
-Character scramble animation before text reveal
-
`captions` `caption-style` `matrix` `scramble` `decode`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-matrix-decode
+```text
+Add the Matrix Decode 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
+npx hyperframes add caption-matrix-decode
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-matrix-decode
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-matrix-decode.html` | `compositions/components/caption-matrix-decode.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-matrix-decode.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-matrix-decode.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index 4a921810f..f13fe9838 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -3,23 +3,24 @@ title: "Neon Accent"
description: "Multi-color neon glow accents with wiggle drift animation"
---
-# Neon Accent
-
-Multi-color neon glow accents with wiggle drift animation
-
`captions` `caption-style` `neon` `glow` `accent`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-neon-accent
+```text
+Add the Neon Accent 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
+npx hyperframes add caption-neon-accent
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-neon-accent
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-neon-accent.html` | `compositions/components/caption-neon-accent.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-neon-accent.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-neon-accent.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index d2cb58a04..fda30b00e 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -3,23 +3,24 @@ title: "Neon Glow"
description: "Cyan and magenta neon glow with keyword accent colors"
---
-# Neon Glow
-
-Cyan and magenta neon glow with keyword accent colors
-
`captions` `caption-style` `neon` `glow` `gaming`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-neon-glow
+```text
+Add the Neon Glow 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
+npx hyperframes add caption-neon-glow
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-neon-glow
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-neon-glow.html` | `compositions/components/caption-neon-glow.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-neon-glow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-neon-glow.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index 72eda7492..4d8f7e4aa 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -3,23 +3,24 @@ title: "Parallax Layers"
description: "Behind-subject 3D text layering with vertical stretch effect"
---
-# Parallax Layers
-
-Behind-subject 3D text layering with vertical stretch effect
-
`captions` `caption-style` `parallax` `3d` `depth`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-parallax-layers
+```text
+Add the Parallax Layers 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
+npx hyperframes add caption-parallax-layers
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-parallax-layers
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-parallax-layers.html` | `compositions/components/caption-parallax-layers.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index d4f304dde..9d510dfe7 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -3,23 +3,24 @@ title: "Particle Burst"
description: "Keyword words trigger colored particle explosions"
---
-# Particle Burst
-
-Keyword words trigger colored particle explosions
-
`captions` `caption-style` `particles` `burst` `effects`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-particle-burst
+```text
+Add the Particle Burst 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
+npx hyperframes add caption-particle-burst
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-particle-burst
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-particle-burst.html` | `compositions/components/caption-particle-burst.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-particle-burst.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-particle-burst.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index e16845939..bf33f2bdc 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -3,23 +3,24 @@ title: "Pill Karaoke"
description: "Pill-shaped container with per-word karaoke color highlight"
---
-# Pill Karaoke
-
-Pill-shaped container with per-word karaoke color highlight
-
`captions` `caption-style` `karaoke` `pill`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-pill-karaoke
+```text
+Add the Pill Karaoke 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
+npx hyperframes add caption-pill-karaoke
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-pill-karaoke
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-pill-karaoke.html` | `compositions/components/caption-pill-karaoke.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-pill-karaoke.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-pill-karaoke.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-texture.mdx b/docs/catalog/components/caption-texture.mdx
index a8ab0e71e..d3f1199ca 100644
--- a/docs/catalog/components/caption-texture.mdx
+++ b/docs/catalog/components/caption-texture.mdx
@@ -3,23 +3,24 @@ 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"
---
-# Texture
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-texture
+```text
+Add the Texture 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
+npx hyperframes add caption-texture
+```
## Details
@@ -27,7 +28,7 @@ npx hyperframes add caption-texture
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
@@ -39,6 +40,14 @@ npx hyperframes add caption-texture
| `concrete-042-a.png` | `compositions/components/concrete-042-a.png` | hyperframes:asset |
| `rock-058.png` | `compositions/components/rock-058.png` | hyperframes:asset |
-## Usage
+## Use it
-Open `compositions/components/caption-texture.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-texture.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index f32439c52..bbff555fc 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -3,23 +3,24 @@ title: "Weight Shift"
description: "Elegant font-weight transition between caption lines"
---
-# Weight Shift
-
-Elegant font-weight transition between caption lines
-
`captions` `caption-style` `minimal` `typography`
-
+
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add caption-weight-shift
+```text
+Add the Weight Shift 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
+npx hyperframes add caption-weight-shift
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add caption-weight-shift
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `caption-weight-shift.html` | `compositions/components/caption-weight-shift.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/caption-weight-shift.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-weight-shift.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index fbd793696..a4ac17d50 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -3,23 +3,24 @@ title: "Grain Overlay"
description: "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition"
---
-# Grain Overlay
-
-Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition
-
`texture` `grain` `overlay` `film`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add grain-overlay
+```text
+Add the Grain Overlay 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
+npx hyperframes add grain-overlay
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add grain-overlay
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `grain-overlay.html` | `compositions/components/grain-overlay.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/grain-overlay.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/grain-overlay.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index c9a72d678..2ce38abcc 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -3,23 +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"
---
-# Grid Pixelate Wipe
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add grid-pixelate-wipe
+```text
+Add the Grid Pixelate Wipe 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
+npx hyperframes add grid-pixelate-wipe
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add grid-pixelate-wipe
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `grid-pixelate-wipe.html` | `compositions/components/grid-pixelate-wipe.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/grid-pixelate-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/grid-pixelate-wipe.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
index f339af19d..083e643a5 100644
--- a/docs/catalog/components/hw-arrow.mdx
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -3,23 +3,24 @@ title: "Hand-Drawn Arrow"
description: "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen"
---
-# Hand-Drawn Arrow
-
-Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen
-
`handwritten` `annotation` `arrow` `overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-arrow
+```text
+Add the Hand-Drawn Arrow 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
+npx hyperframes add hw-arrow
+```
## Details
@@ -27,13 +28,21 @@ npx hyperframes add hw-arrow
| --- | --- |
| Type | Component |
-## Files
+**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 |
-## Usage
+## Use it
-Open `compositions/components/hw-arrow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-arrow.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
index 3d2ef16c4..c184d513d 100644
--- a/docs/catalog/components/hw-boil.mdx
+++ b/docs/catalog/components/hw-boil.mdx
@@ -3,23 +3,24 @@ 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"
---
-# Hand-Drawn Boil
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-boil
+```text
+Add the Hand-Drawn Boil 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
+npx hyperframes add hw-boil
+```
## Details
@@ -27,13 +28,21 @@ npx hyperframes add hw-boil
| --- | --- |
| Type | Component |
-## Files
+**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 |
-## Usage
+## Use it
-Open `compositions/components/hw-boil.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-boil.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
index d605f85b0..ed8cdf1f8 100644
--- a/docs/catalog/components/hw-box-label.mdx
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -3,23 +3,24 @@ title: "Hand-Drawn Box Label"
description: "Wobbled rounded rectangle draws around a region with a handwritten label above or centered"
---
-# Hand-Drawn Box Label
-
-Wobbled rounded rectangle draws around a region with a handwritten label above or centered
-
`handwritten` `annotation` `overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-box-label
+```text
+Add the Hand-Drawn Box Label 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
+npx hyperframes add hw-box-label
+```
## Details
@@ -27,13 +28,21 @@ npx hyperframes add hw-box-label
| --- | --- |
| Type | Component |
-## Files
+**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 |
-## Usage
+## Use it
-Open `compositions/components/hw-box-label.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-box-label.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
index cdf20139c..95cb3b42c 100644
--- a/docs/catalog/components/hw-callout-circle.mdx
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -3,23 +3,24 @@ title: "Scribble Callout Circle"
description: "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label"
---
-# Scribble Callout Circle
-
-Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label
-
`handwritten` `annotation` `callout` `overlay`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-callout-circle
+```text
+Add the Scribble Callout Circle 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
+npx hyperframes add hw-callout-circle
+```
## Details
@@ -27,13 +28,21 @@ npx hyperframes add hw-callout-circle
| --- | --- |
| Type | Component |
-## Files
+**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 |
-## Usage
+## Use it
-Open `compositions/components/hw-callout-circle.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-callout-circle.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
index 18dbb7eea..f2cbad2ea 100644
--- a/docs/catalog/components/hw-underline.mdx
+++ b/docs/catalog/components/hw-underline.mdx
@@ -3,23 +3,24 @@ title: "Squiggle Marks"
description: "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on"
---
-# Squiggle Marks
-
-Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on
-
`handwritten` `annotation` `text-treatment`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add hw-underline
+```text
+Add the Squiggle Marks 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
+npx hyperframes add hw-underline
+```
## Details
@@ -27,13 +28,21 @@ npx hyperframes add hw-underline
| --- | --- |
| Type | Component |
-## Files
+**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 |
-## Usage
+## Use it
-Open `compositions/components/hw-underline.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-underline.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
index 1d71cb0d1..f2d32b2ff 100644
--- a/docs/catalog/components/mk-emphasis-type.mdx
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -3,23 +3,24 @@ title: "Background Emphasis Type"
description: "Oversized low-contrast background word drifting slowly behind the subject — typography as texture"
---
-# Background Emphasis Type
-
-Oversized low-contrast background word drifting slowly behind the subject — typography as texture
-
`typography` `text-treatment` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-emphasis-type
+```text
+Add the Background Emphasis Type 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
+npx hyperframes add mk-emphasis-type
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add mk-emphasis-type
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-emphasis-type.html` | `compositions/components/mk-emphasis-type.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/mk-emphasis-type.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/mk-emphasis-type.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
index 57add45ae..711bd2aab 100644
--- a/docs/catalog/components/mk-usage-arc.mdx
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -3,23 +3,24 @@ title: "Hairline Arc Gauge"
description: "Thin circular gauge that draws on while its percentage counts up; one helper call drives both"
---
-# Hairline Arc Gauge
-
-Thin circular gauge that draws on while its percentage counts up; one helper call drives both
-
`data-viz` `gauge` `minimal`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add mk-usage-arc
+```text
+Add the Hairline Arc Gauge 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
+npx hyperframes add mk-usage-arc
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add mk-usage-arc
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `mk-usage-arc.html` | `compositions/components/mk-usage-arc.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/mk-usage-arc.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/mk-usage-arc.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 660a3bb89..8979d996b 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -3,23 +3,24 @@ 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"
---
-# Morph Text
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add morph-text
+```text
+Add the Morph 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
+npx hyperframes add morph-text
+```
## Details
@@ -27,14 +28,20 @@ npx hyperframes add morph-text
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `morph-text.html` | `compositions/components/morph-text.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/morph-text.html` and paste its contents into your composition.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
-Edit the `` list to change the statements that cycle through. Each `
` accepts `data-font` (CSS font-family) and `data-color` (hex) attributes. Adjust `data-morph-speed` (seconds per transition) and `data-morph-pause` (hold time) on the root element.
+**Wiring it by hand.** Open `compositions/components/morph-text.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index 3257f64b6..446155f47 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -1,25 +1,26 @@
---
title: "Motion Blur"
-description: "Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed"
+description: "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed"
---
-# Motion Blur
-
-Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed.
-
`effect` `motion-blur` `velocity` `animation` `physics`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add motion-blur
+```text
+Add the Motion Blur 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
+npx hyperframes add motion-blur
+```
## Details
@@ -27,44 +28,20 @@ npx hyperframes add motion-blur
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `motion-blur.html` | `compositions/components/motion-blur.html` | hyperframes:snippet |
-## Usage
+## Use it
-Paste the snippet into your composition, then call `attachMotionBlur()` after your GSAP tweens and before registering `window.__timelines`.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
-```html
-
-tl.set(document.body, {}, DATA_DURATION);
+**Wiring it by hand.** Open `compositions/components/motion-blur.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
-attachMotionBlur("#my-box", tl, {
- axis: "x", // "x" | "y" | "both"
- blurMax: 40, // max blur radius in px (default 20)
-});
+## Related topics
-window.__timelines = window.__timelines || {};
-window.__timelines["my-composition"] = tl;
-```
-
-## How it works
-
-Each target element gets its own SVG filter. On every timeline seek, `attachMotionBlur` samples the element's GSAP `x`/`y` position, computes velocity, and drives three SVG filter primitives:
-
-1. **Ghost copies** — three faded, blurred copies of the element placed behind it at increasing offsets proportional to speed. Inherently one-sided: no forward blur.
-2. **Top blur** — a small symmetric Gaussian at the current position so the element looks in-motion rather than crisp on top of the trail.
-
-Blur scales linearly with velocity up to `blurMax`. Both the ghost trail and top blur clear automatically when the element decelerates to rest.
-
-## Options
-
-| Option | Default | Description |
-| --- | --- | --- |
-| `axis` | `"both"` | Motion axis — `"x"`, `"y"`, or `"both"` |
-| `blurScale` | `0.008` | Blur per px/s of velocity |
-| `blurMax` | `20` | Max blur radius on the motion axis (px) |
-| `stretchScale` | `0.0002` | scaleX/Y added per px/s (requires `stretchMax > 0`) |
-| `stretchMax` | `0` | Max stretch above 1.0 — disabled by default |
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/parallax-unzoom.mdx b/docs/catalog/components/parallax-unzoom.mdx
index 9e08e9e95..20da1e050 100644
--- a/docs/catalog/components/parallax-unzoom.mdx
+++ b/docs/catalog/components/parallax-unzoom.mdx
@@ -3,23 +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)"
---
-# Parallax Unzoom
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add parallax-unzoom
+```text
+Add the Parallax Unzoom 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
+npx hyperframes add parallax-unzoom
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add parallax-unzoom
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `parallax-unzoom.html` | `compositions/components/parallax-unzoom.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/parallax-unzoom.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/parallax-unzoom.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/parallax-zoom.mdx b/docs/catalog/components/parallax-zoom.mdx
index fdd48e378..023f85733 100644
--- a/docs/catalog/components/parallax-zoom.mdx
+++ b/docs/catalog/components/parallax-zoom.mdx
@@ -3,23 +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"
---
-# Parallax Zoom
-
-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
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add parallax-zoom
+```text
+Add the Parallax Zoom 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
+npx hyperframes add parallax-zoom
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add parallax-zoom
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `parallax-zoom.html` | `compositions/components/parallax-zoom.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/parallax-zoom.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/parallax-zoom.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index 0738ccb27..24afc874e 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -3,23 +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"
---
-# Shimmer Sweep
-
-Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals
-
`text` `shimmer` `highlight` `effect`
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add shimmer-sweep
+```text
+Add the Shimmer Sweep 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
+npx hyperframes add shimmer-sweep
+```
## Details
@@ -27,12 +28,20 @@ npx hyperframes add shimmer-sweep
| --- | --- |
| Type | Component |
-## Files
+**Installed files**
| File | Target | Type |
| --- | --- | --- |
| `shimmer-sweep.html` | `compositions/components/shimmer-sweep.html` | hyperframes:snippet |
-## Usage
+## Use it
-Open `compositions/components/shimmer-sweep.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/shimmer-sweep.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/texture-mask-text.mdx b/docs/catalog/components/texture-mask-text.mdx
index 7f0309097..7d676eaf2 100644
--- a/docs/catalog/components/texture-mask-text.mdx
+++ b/docs/catalog/components/texture-mask-text.mdx
@@ -1,8 +1,9 @@
---
title: "Texture Mask Text"
+description: "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps"
---
-`text` `texture` `mask` `effect`
+`text` `text-effect` `effect` `texture` `mask`
@@ -31,15 +32,20 @@ title: "Texture Mask Text"
-## Install
+## Add it to a project
-
+### Ask your agent
-```bash Terminal
-npx hyperframes add texture-mask-text
+```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
+npx hyperframes add texture-mask-text
+```
## Details
@@ -482,6 +488,12 @@ window.__timelines["my-composition"] = tl;
-## Usage
+## Use it
After `npx hyperframes add texture-mask-text`, the installed snippet lives at `compositions/components/texture-mask-text/texture-mask-text.html` inside your current HyperFrames project. Open that file and paste the real `