diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index 722c75984..927a8ae3e 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -3,7 +3,7 @@ title: "App Showcase"
description: "Fitness app product showcase with three floating smartphone screens"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 5.5 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the App Showcase block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add app-showcase
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `showcase` `app` `3d`.
diff --git a/docs/catalog/blocks/apple-money-count.mdx b/docs/catalog/blocks/apple-money-count.mdx
index f4ff024c7..6df9f47fd 100644
--- a/docs/catalog/blocks/apple-money-count.mdx
+++ b/docs/catalog/blocks/apple-money-count.mdx
@@ -3,7 +3,7 @@ title: "Apple Money Count"
description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Apple Money Count block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add apple-money-count
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `showcase` `finance` `kinetic` `youtube` `sfx`.
diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
index dea8c8350..ab206e7e7 100644
--- a/docs/catalog/blocks/beat-freeze-cut.mdx
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -3,7 +3,7 @@ title: "Beat Freeze Cut"
description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
---
-
+
## Install
@@ -39,37 +39,6 @@ Set these CSS variables on the block:
- `--bg-color` — Background. Defaults to `#0B0D10`.
- `--accent-color` — Accent. Defaults to `#00E5C7`.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Beat Freeze Cut block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add beat-freeze-cut
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `music` `beat-driven` `freeze-frame`.
diff --git a/docs/catalog/blocks/blue-sweater-intro-video.mdx b/docs/catalog/blocks/blue-sweater-intro-video.mdx
index 9da9566c7..1c79f7f28 100644
--- a/docs/catalog/blocks/blue-sweater-intro-video.mdx
+++ b/docs/catalog/blocks/blue-sweater-intro-video.mdx
@@ -3,7 +3,7 @@ title: "Blue Sweater Intro Video"
description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Blue Sweater Intro Video block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add blue-sweater-intro-video
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `showcase` `ai` `creator` `sfx`.
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
index 2d26ffe8b..72e0831a1 100644
--- a/docs/catalog/blocks/camcorder-hud.mdx
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -3,7 +3,7 @@ title: "Camcorder HUD"
description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Camcorder HUD block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add camcorder-hud
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`.
diff --git a/docs/catalog/blocks/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index 0d167775b..d3dba2c3d 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -3,7 +3,7 @@ title: "Chromatic Radial Split"
description: "Shader transition with chromatic aberration radial split"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Chromatic Radial Split block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add chromatic-radial-split
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index 7b9b21d78..924570dc3 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -3,7 +3,7 @@ title: "Cinematic Zoom"
description: "Shader transition with dramatic zoom blur"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Cinematic Zoom block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add cinematic-zoom
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
index 65767a0ec..f25544079 100644
--- a/docs/catalog/blocks/code-3d-extrude.mdx
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -3,7 +3,7 @@ title: "Code 3D Extrude"
description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code 3D Extrude block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-3d-extrude
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `3d` `webgl` `developer`.
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
index 8aa9aecea..6c7a5c537 100644
--- a/docs/catalog/blocks/code-diff.mdx
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -3,7 +3,7 @@ title: "Code Diff"
description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Diff block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-diff
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `diff` `developer`.
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
index 45cbd392c..980e38e8c 100644
--- a/docs/catalog/blocks/code-highlight.mdx
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -3,7 +3,7 @@ title: "Code Highlight Sweep"
description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based)."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Highlight Sweep block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-highlight
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `highlight` `developer`.
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
index 181287bde..daa376d48 100644
--- a/docs/catalog/blocks/code-morph.mdx
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -3,7 +3,7 @@ title: "Code Morph"
description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Morph block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-morph
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `morph` `refactor` `developer`.
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
index f946757f4..6bc14b563 100644
--- a/docs/catalog/blocks/code-particle-assemble.mdx
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -3,7 +3,7 @@ title: "Code Particle Assemble"
description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Particle Assemble block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-particle-assemble
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `particles` `gpu` `webgl` `developer`.
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
index db9afc74c..7f0f3f39a 100644
--- a/docs/catalog/blocks/code-scroll.mdx
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -3,7 +3,7 @@ title: "Code Scroll To Line"
description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Scroll To Line block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-scroll
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `scroll` `developer`.
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
index 12549f5ca..238e420ab 100644
--- a/docs/catalog/blocks/code-shader-dissolve.mdx
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -3,7 +3,7 @@ title: "Code Shader Dissolve"
description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Shader Dissolve block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-shader-dissolve
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `shader` `webgl` `developer`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index 242307fbb..76929ee55 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Basic block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-basic
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
index f9b330691..dbbb38afb 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Clear Dark block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-clear-dark
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
index a3572b92e..4aa7c4de8 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Clear Light block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-clear-light
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
index 253815b63..e0f92cbc0 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Grass block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-grass
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
index 2d362fafd..bbe593767 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Homebrew block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-homebrew
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
index e3b76d78e..1e823435e 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Man Page block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-man-page
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
index bd7b37232..2b73ceaaf 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Novel block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-novel
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
index 2f35643b0..07d198823 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Ocean block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-ocean
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index a5978e6bc..b597daa6f 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Pro block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-pro
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
index cf04ad3a1..ca05060f0 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Red Sands block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-red-sands
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
index b0def2e06..2c5c4056b 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Silver Aerogel block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-silver-aerogel
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
index 3783ec79d..f46cda99d 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Apple Terminal Solid Colors block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-apple-terminal-solid-colors
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index b667444b5..5560cfe57 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Dark 2026"
description: "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Dark 2026 block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-dark-2026
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index 1c109b901..97b212a70 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Dark Modern"
description: "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Dark Modern block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-dark-modern
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-dark-plus.mdx b/docs/catalog/blocks/code-snippet-dark-plus.mdx
index 405e87fa2..bbb3bb709 100644
--- a/docs/catalog/blocks/code-snippet-dark-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-plus.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Dark+"
description: "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Dark+ block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-dark-plus
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
index 757b06045..69369a010 100644
--- a/docs/catalog/blocks/code-snippet-flight.mdx
+++ b/docs/catalog/blocks/code-snippet-flight.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet Flight"
description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet Flight block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-flight
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `flight` `developer`.
diff --git a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
index 7976d56c8..958d9d52f 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - High Contrast Light"
description: "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - High Contrast Light block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-high-contrast-light
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-high-contrast.mdx b/docs/catalog/blocks/code-snippet-high-contrast.mdx
index 83b22c3cc..8979b4ad7 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - High Contrast"
description: "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - High Contrast block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-high-contrast
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-light-2026.mdx b/docs/catalog/blocks/code-snippet-light-2026.mdx
index c3e281ae5..73120b48d 100644
--- a/docs/catalog/blocks/code-snippet-light-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-light-2026.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Light 2026"
description: "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Light 2026 block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-light-2026
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-light-modern.mdx b/docs/catalog/blocks/code-snippet-light-modern.mdx
index 15cd0abd6..fd1e0205d 100644
--- a/docs/catalog/blocks/code-snippet-light-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-light-modern.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Light Modern"
description: "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Light Modern block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-light-modern
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-light-plus.mdx b/docs/catalog/blocks/code-snippet-light-plus.mdx
index 452561fff..4b9980762 100644
--- a/docs/catalog/blocks/code-snippet-light-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-light-plus.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Light+"
description: "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Light+ block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-light-plus
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-monokai.mdx b/docs/catalog/blocks/code-snippet-monokai.mdx
index a90bafecc..e49221b28 100644
--- a/docs/catalog/blocks/code-snippet-monokai.mdx
+++ b/docs/catalog/blocks/code-snippet-monokai.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Monokai"
description: "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Monokai block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-monokai
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-solarized-light.mdx b/docs/catalog/blocks/code-snippet-solarized-light.mdx
index c0f734f16..bc1d824fa 100644
--- a/docs/catalog/blocks/code-snippet-solarized-light.mdx
+++ b/docs/catalog/blocks/code-snippet-solarized-light.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Solarized Light"
description: "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Solarized Light block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-solarized-light
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
index 62e6483fc..cbfa7f681 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Visual Studio Dark"
description: "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Visual Studio Dark block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-visual-studio-dark
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
index fac9abcbf..51345e40a 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
@@ -3,7 +3,7 @@ title: "Code Snippet - Visual Studio Light"
description: "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Snippet - Visual Studio Light block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-snippet-visual-studio-light
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `developer` `showcase` `vscode`.
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
index 6148f0526..4e05759c2 100644
--- a/docs/catalog/blocks/code-typing.mdx
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -3,7 +3,7 @@ title: "Code Typing"
description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Code Typing block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add code-typing
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `code` `code-animation` `typing` `developer`.
diff --git a/docs/catalog/blocks/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index 2756fa9d9..4a998c12b 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -3,7 +3,7 @@ title: "Cross Warp Morph"
description: "Shader transition with cross-warped morphing"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Cross Warp Morph block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add cross-warp-morph
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index 040d60961..d62c40ab5 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -3,7 +3,7 @@ title: "Data Chart"
description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
---
-
+
## Install
@@ -39,37 +39,6 @@ Set these CSS variables on the block:
- `--bg-color` — Background. Defaults to `#faf9f6`.
- `--text-color` — Text color. Defaults to `#333333`.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Data Chart block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add data-chart
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data` `chart` `statistics`.
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index 6a88d3389..24499ce1c 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -3,7 +3,7 @@ title: "Domain Warp Dissolve"
description: "Shader transition with fractal noise domain warping"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Domain Warp Dissolve block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add domain-warp-dissolve
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
index 5b4cdffef..8f8fe7354 100644
--- a/docs/catalog/blocks/editorial-flash-overlay.mdx
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -3,7 +3,7 @@ title: "Editorial Flash Overlay"
description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Editorial Flash Overlay block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add editorial-flash-overlay
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`.
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index e90e25a4f..ae7debc12 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -3,7 +3,7 @@ title: "Flash Through White"
description: "Shader transition with white flash crossfade"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Flash Through White block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add flash-through-white
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index df00fb199..e5fcd884e 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -3,7 +3,7 @@ title: "Flowchart Vertical"
description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1440×2560. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Flowchart Vertical block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add flowchart-vertical
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `diagram` `flowchart` `interactive` `portrait`.
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 29a829fc8..2301c7e40 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -3,7 +3,7 @@ title: "Flowchart"
description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Flowchart block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add flowchart
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `diagram` `flowchart` `interactive`.
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
index 09e80455d..433a35875 100644
--- a/docs/catalog/blocks/freeze-frame-dressing.mdx
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -3,7 +3,7 @@ title: "Freeze-Frame Dressing"
description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Freeze-Frame Dressing block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add freeze-frame-dressing
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`.
diff --git a/docs/catalog/blocks/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index a738fcf6a..8a04531a0 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -3,7 +3,7 @@ title: "Glitch"
description: "Shader transition with digital glitch artifacts"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Glitch block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add glitch
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index f53fbdc7d..308ea1d4b 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -3,7 +3,7 @@ title: "Gravitational Lens"
description: "Shader transition with gravitational lensing distortion"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Gravitational Lens block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add gravitational-lens
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
index 30ae6df41..134bbb6cf 100644
--- a/docs/catalog/blocks/hw-frame.mdx
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -3,7 +3,7 @@ title: "Sketched Frame"
description: "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Sketched Frame block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add hw-frame
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `handwritten` `frame` `media`.
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
index cd28aed7e..c5d76e7a0 100644
--- a/docs/catalog/blocks/hw-path-text.mdx
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -3,7 +3,7 @@ title: "Text Along a Path"
description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Text Along a Path block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add hw-path-text
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `handwritten` `typography` `path` `overlay`.
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
index ea98b7e53..e1e92a26c 100644
--- a/docs/catalog/blocks/hw-pipeline.mdx
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -3,7 +3,7 @@ title: "Hand-Drawn Flowchart"
description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Hand-Drawn Flowchart block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add hw-pipeline
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `handwritten` `diagram` `data-viz` `overlay`.
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
index 2e3ca26c1..ba8b4969a 100644
--- a/docs/catalog/blocks/hw-scribble-transition.mdx
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -3,7 +3,7 @@ title: "Scribble Transition"
description: "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 2.2 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Scribble Transition block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add hw-scribble-transition
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `handwritten` `transition` `wipe`.
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
index 6e221c595..54db0c273 100644
--- a/docs/catalog/blocks/hw-text-cloud.mdx
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -3,7 +3,7 @@ title: "Speech Bubble"
description: "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Speech Bubble block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add hw-text-cloud
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `handwritten` `speech-bubble` `overlay`.
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
index 514608efe..427d949f7 100644
--- a/docs/catalog/blocks/hw-title.mdx
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -3,7 +3,7 @@ title: "Handwritten Title"
description: "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Handwritten Title block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add hw-title
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `handwritten` `typography` `title-card` `overlay`.
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index 3a704f395..1486607a8 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -3,7 +3,7 @@ title: "Instagram Follow"
description: "Animated Instagram follow overlay with profile card and follow button"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.5 seconds at 1080×1920. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Instagram Follow block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add instagram-follow
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `social` `overlay` `instagram`.
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index c02c5a6c0..a801ad61c 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -3,7 +3,7 @@ title: "iOS 26 Liquid Glass Home Screen"
description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 15 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the iOS 26 Liquid Glass Home Screen block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add ios26-liquid-glass
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`.
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index 91e387ffe..a78a98df7 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -3,7 +3,7 @@ title: "Light Leak"
description: "Shader transition with cinematic light leak overlay"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Light Leak block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add light-leak
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/liquid-glass-context-menu.mdx b/docs/catalog/blocks/liquid-glass-context-menu.mdx
index 395df6868..96b4c21f7 100644
--- a/docs/catalog/blocks/liquid-glass-context-menu.mdx
+++ b/docs/catalog/blocks/liquid-glass-context-menu.mdx
@@ -3,7 +3,7 @@ title: "Liquid Glass Context Menu"
description: "Frosted glass context menu panel drifting over an aurora shader background"
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Liquid Glass Context Menu block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add liquid-glass-context-menu
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
diff --git a/docs/catalog/blocks/liquid-glass-media-controls.mdx b/docs/catalog/blocks/liquid-glass-media-controls.mdx
index 43e537e48..ea64396eb 100644
--- a/docs/catalog/blocks/liquid-glass-media-controls.mdx
+++ b/docs/catalog/blocks/liquid-glass-media-controls.mdx
@@ -3,7 +3,7 @@ title: "Liquid Glass Media Controls"
description: "Frosted glass media control panels spreading over an aurora shader background"
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Liquid Glass Media Controls block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add liquid-glass-media-controls
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index 0f16f5f4d..63ff079b4 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -3,7 +3,7 @@ title: "Liquid Glass Notification"
description: "Frosted glass notification cards floating over an aurora shader background"
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Liquid Glass Notification block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add liquid-glass-notification
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index de40611ed..5aa907216 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -3,7 +3,7 @@ title: "Liquid Glass Widgets"
description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Liquid Glass Widgets block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add liquid-glass-widgets
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`.
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index cbcc57217..811275504 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -3,7 +3,7 @@ title: "Logo Outro"
description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
---
-
+
## Install
@@ -39,37 +39,6 @@ Set these CSS variables on the block:
- `--bg-color` — Background. Defaults to `#0a0a0f`.
- `--accent-color` — Accent. Defaults to `#1a1a1f`.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Logo Outro block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add logo-outro
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `branding` `outro` `logo`.
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
index c589cb148..312d9172e 100644
--- a/docs/catalog/blocks/lower-third-bild.mdx
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — BILD Style"
description: "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — BILD Style block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lower-third-bild
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `broadcast` `lower-third` `news` `overlay`.
diff --git a/docs/catalog/blocks/lt-accent-underline.mdx b/docs/catalog/blocks/lt-accent-underline.mdx
index 1db556d20..e159fe5ef 100644
--- a/docs/catalog/blocks/lt-accent-underline.mdx
+++ b/docs/catalog/blocks/lt-accent-underline.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Accent Underline"
description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Accent Underline block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-accent-underline
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
diff --git a/docs/catalog/blocks/lt-bold-block.mdx b/docs/catalog/blocks/lt-bold-block.mdx
index d372efa1a..82c728a6b 100644
--- a/docs/catalog/blocks/lt-bold-block.mdx
+++ b/docs/catalog/blocks/lt-bold-block.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Bold Block"
description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Bold Block block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-bold-block
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
diff --git a/docs/catalog/blocks/lt-clean-bar.mdx b/docs/catalog/blocks/lt-clean-bar.mdx
index 655afab0a..ec92e237f 100644
--- a/docs/catalog/blocks/lt-clean-bar.mdx
+++ b/docs/catalog/blocks/lt-clean-bar.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Clean Bar"
description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Clean Bar block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-clean-bar
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview`.
diff --git a/docs/catalog/blocks/lt-color-block.mdx b/docs/catalog/blocks/lt-color-block.mdx
index 8114e6eeb..b6bc7dd06 100644
--- a/docs/catalog/blocks/lt-color-block.mdx
+++ b/docs/catalog/blocks/lt-color-block.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Color Block"
description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Color Block block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-color-block
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
diff --git a/docs/catalog/blocks/lt-dark-card.mdx b/docs/catalog/blocks/lt-dark-card.mdx
index 70b44d017..71768e95c 100644
--- a/docs/catalog/blocks/lt-dark-card.mdx
+++ b/docs/catalog/blocks/lt-dark-card.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Dark Card"
description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Dark Card block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-dark-card
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `dark`.
diff --git a/docs/catalog/blocks/lt-kicker-name.mdx b/docs/catalog/blocks/lt-kicker-name.mdx
index 596795acf..146e9ac77 100644
--- a/docs/catalog/blocks/lt-kicker-name.mdx
+++ b/docs/catalog/blocks/lt-kicker-name.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Kicker Name"
description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Kicker Name block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-kicker-name
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
diff --git a/docs/catalog/blocks/lt-mask-reveal.mdx b/docs/catalog/blocks/lt-mask-reveal.mdx
index 47f5217ff..eba3a23cf 100644
--- a/docs/catalog/blocks/lt-mask-reveal.mdx
+++ b/docs/catalog/blocks/lt-mask-reveal.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Mask Reveal"
description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Mask Reveal block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-mask-reveal
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
diff --git a/docs/catalog/blocks/lt-side-rule.mdx b/docs/catalog/blocks/lt-side-rule.mdx
index 7458e9558..9e326bc9e 100644
--- a/docs/catalog/blocks/lt-side-rule.mdx
+++ b/docs/catalog/blocks/lt-side-rule.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Side Rule"
description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Side Rule block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-side-rule
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
diff --git a/docs/catalog/blocks/lt-soft-pill.mdx b/docs/catalog/blocks/lt-soft-pill.mdx
index 0af6d55f6..25564af88 100644
--- a/docs/catalog/blocks/lt-soft-pill.mdx
+++ b/docs/catalog/blocks/lt-soft-pill.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Soft Pill"
description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Soft Pill block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-soft-pill
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `minimal`.
diff --git a/docs/catalog/blocks/lt-stack-bars.mdx b/docs/catalog/blocks/lt-stack-bars.mdx
index 862231d6c..2b77caf00 100644
--- a/docs/catalog/blocks/lt-stack-bars.mdx
+++ b/docs/catalog/blocks/lt-stack-bars.mdx
@@ -3,7 +3,7 @@ title: "Lower Third — Stack Bars"
description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Lower Third — Stack Bars block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add lt-stack-bars
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `podcast` `interview` `bold`.
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index 739a7b2e9..03221cad4 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -3,7 +3,7 @@ title: "macOS Notification"
description: "Animated macOS-style notification banner with app icon and message"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the macOS Notification block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add macos-notification
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `social` `overlay` `notification`.
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index b682daf07..3151689ec 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -3,7 +3,7 @@ title: "macOS Tahoe Liquid Glass Desktop"
description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 15 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the macOS Tahoe Liquid Glass Desktop block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add macos-tahoe-liquid-glass
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `3d` `macos` `tahoe` `gltf`.
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
index 576a6b162..b56c54ef9 100644
--- a/docs/catalog/blocks/mk-background.mdx
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -3,7 +3,7 @@ title: "Minimal Gradient Background"
description: "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 10 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Minimal Gradient Background block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add mk-background
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `background` `gradient` `minimal` `professional` `presentation`.
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
index 1bd61dcfb..4c7d089eb 100644
--- a/docs/catalog/blocks/mk-callout-highlight.mdx
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -3,7 +3,7 @@ title: "Word-Sweep Highlight"
description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Word-Sweep Highlight block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add mk-callout-highlight
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `typography` `karaoke` `captions` `minimal`.
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
index a8b57a501..d8ba2b9b7 100644
--- a/docs/catalog/blocks/mk-clone-wall-transition.mdx
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -3,7 +3,7 @@ title: "Text Clone Wall Transition"
description: "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 2.4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Text Clone Wall Transition block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add mk-clone-wall-transition
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `typography` `wipe`.
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
index 1379ae0f5..f57d07693 100644
--- a/docs/catalog/blocks/mk-line-graph.mdx
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -3,7 +3,7 @@ title: "Minimal Line Graph"
description: "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Minimal Line Graph block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add mk-line-graph
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data-viz` `chart` `graph` `minimal`.
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
index aae979152..113a3b60a 100644
--- a/docs/catalog/blocks/mk-placeholder-grid.mdx
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -3,7 +3,7 @@ title: "Rounded Media Grid"
description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Rounded Media Grid block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add mk-placeholder-grid
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `placeholder` `media` `grid` `minimal`.
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
index e8769a24b..0a8dcca32 100644
--- a/docs/catalog/blocks/mk-progress-stat.mdx
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -3,7 +3,7 @@ title: "Count-Up Stat Card"
description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Count-Up Stat Card block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add mk-progress-stat
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data-viz` `stat` `minimal`.
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
index dc22b4830..1bd05f248 100644
--- a/docs/catalog/blocks/mk-specs-list.mdx
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -3,7 +3,7 @@ title: "Specs Checklist"
description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Specs Checklist block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add mk-specs-list
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data-viz` `list` `minimal` `professional`.
diff --git a/docs/catalog/blocks/news-ticker.mdx b/docs/catalog/blocks/news-ticker.mdx
index 941392fbc..eb3344f05 100644
--- a/docs/catalog/blocks/news-ticker.mdx
+++ b/docs/catalog/blocks/news-ticker.mdx
@@ -3,7 +3,7 @@ title: "News Ticker"
description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the News Ticker block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add news-ticker
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `lower-third` `overlay` `news` `ticker`.
diff --git a/docs/catalog/blocks/north-korea-locked-down.mdx b/docs/catalog/blocks/north-korea-locked-down.mdx
index da3542850..1f7a7a231 100644
--- a/docs/catalog/blocks/north-korea-locked-down.mdx
+++ b/docs/catalog/blocks/north-korea-locked-down.mdx
@@ -3,7 +3,7 @@ title: "North Korea Locked Down"
description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the North Korea Locked Down block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add north-korea-locked-down
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `showcase` `map` `annotation` `youtube` `kinetic`.
diff --git a/docs/catalog/blocks/nyc-paris-flight.mdx b/docs/catalog/blocks/nyc-paris-flight.mdx
index 0bdd59274..04d26de78 100644
--- a/docs/catalog/blocks/nyc-paris-flight.mdx
+++ b/docs/catalog/blocks/nyc-paris-flight.mdx
@@ -3,7 +3,7 @@ title: "NYC Paris Flight"
description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the NYC Paris Flight block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add nyc-paris-flight
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `showcase` `travel` `map` `youtube` `sfx`.
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
index debd24eb6..13591e621 100644
--- a/docs/catalog/blocks/organic-light-leak-overlay.mdx
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -3,7 +3,7 @@ title: "Organic Light Leak Overlay"
description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Organic Light Leak Overlay block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add organic-light-leak-overlay
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`.
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index 6cec8d406..777b31c18 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -3,7 +3,7 @@ title: "Reddit Post Card"
description: "Animated Reddit post card overlay with upvotes and comments"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Reddit Post Card block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add reddit-post
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `social` `overlay` `reddit`.
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index 2f6241de4..f5bad8ee9 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -3,7 +3,7 @@ title: "Ridged Burn"
description: "Shader transition with ridged turbulence burn effect"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Ridged Burn block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add ridged-burn
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index e4812e2d3..3bb172256 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -3,7 +3,7 @@ title: "Ripple Waves"
description: "Shader transition with concentric ripple wave distortion"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Ripple Waves block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add ripple-waves
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index b1e5196a8..a7196dde7 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -3,7 +3,7 @@ title: "SDF Iris"
description: "Shader transition with signed distance field iris reveal"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the SDF Iris block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add sdf-iris
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/spain-map.mdx b/docs/catalog/blocks/spain-map.mdx
index e8b698973..cc07579dc 100644
--- a/docs/catalog/blocks/spain-map.mdx
+++ b/docs/catalog/blocks/spain-map.mdx
@@ -3,7 +3,7 @@ title: "Spain Map"
description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Spain Map block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add spain-map
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data` `map` `geography` `spain` `europe` `choropleth`.
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index 054dca1cf..7c61517ca 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -3,7 +3,7 @@ title: "Spotify Now Playing"
description: "Animated Spotify now-playing card with album art and progress bar"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1080×1920. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Spotify Now Playing block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add spotify-card
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `social` `overlay` `spotify`.
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index 09a2645f4..99719349e 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -3,7 +3,7 @@ title: "Swirl Vortex"
description: "Shader transition with swirling vortex distortion"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Swirl Vortex block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add swirl-vortex
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index 7421aa30b..e6bd555d4 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -3,7 +3,7 @@ title: "Thermal Distortion"
description: "Shader transition with heat haze thermal distortion"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Thermal Distortion block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add thermal-distortion
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index 16708de49..4dbf0e644 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -3,7 +3,7 @@ title: "TikTok Follow"
description: "Animated TikTok follow overlay with profile card and follow button"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.5 seconds at 1080×1920. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the TikTok Follow block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add tiktok-follow
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `social` `overlay` `tiktok`.
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index 05bade778..eed233441 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -3,7 +3,7 @@ title: "3D Transitions"
description: "Showcase of 3D perspective flip and rotate transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the 3D Transitions block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add transitions-3d
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index 7d0e44cc3..35eeea928 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -3,7 +3,7 @@ title: "Blur Transitions"
description: "Showcase of blur-based transitions between scenes"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 20 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Blur Transitions block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add transitions-blur
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index 8c33eb838..23ea21313 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -3,7 +3,7 @@ title: "Cover Transitions"
description: "Showcase of cover/uncover slide transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 21 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Cover Transitions block from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add transitions-cover
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index cdcffc247..534748da1 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -3,7 +3,7 @@ title: "Destruction Transitions"
description: "Showcase of destructive break-apart transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 14 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index 0e2b6735e..4f2c692f0 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -3,7 +3,7 @@ title: "Dissolve Transitions"
description: "Showcase of dissolve and fade transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 24 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index f9285b097..8c56cf598 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -3,7 +3,7 @@ title: "Distortion Transitions"
description: "Showcase of warp and distortion transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 21 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index df528b64d..6f847d864 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -3,7 +3,7 @@ title: "Grid Transitions"
description: "Showcase of grid-based tile transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 11 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index d506fb58d..c46fc7906 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -3,7 +3,7 @@ title: "Light Transitions"
description: "Showcase of light-based glow and flash transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 21 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index 7c70700e5..72e698261 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -3,7 +3,7 @@ title: "Mechanical Transitions"
description: "Showcase of mechanical shutter and iris transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 15 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index c240bad27..16ee78d07 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -3,7 +3,7 @@ title: "Other Transitions"
description: "Showcase of miscellaneous creative transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 20 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index ccc5daf67..dfc916da5 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -3,7 +3,7 @@ title: "Push Transitions"
description: "Showcase of push and slide transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 24 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index 8325910eb..f54d7f619 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -3,7 +3,7 @@ title: "Radial Transitions"
description: "Showcase of radial wipe and reveal transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 20 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index 23179042c..59c4f522f 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -3,7 +3,7 @@ title: "Scale Transitions"
description: "Showcase of scale and zoom transitions"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 15 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `showcase`.
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index e0caaf7eb..af909ca4e 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -3,7 +3,7 @@ title: "3D UI Reveal"
description: "Perspective 3D reveal animation for UI elements"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 13 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `showcase` `3d` `reveal`.
diff --git a/docs/catalog/blocks/us-map-bubble.mdx b/docs/catalog/blocks/us-map-bubble.mdx
index e0bd507a3..2cbb8c26f 100644
--- a/docs/catalog/blocks/us-map-bubble.mdx
+++ b/docs/catalog/blocks/us-map-bubble.mdx
@@ -3,7 +3,7 @@ title: "US Bubble Map"
description: "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data` `map` `geography` `usa` `bubble` `cities`.
diff --git a/docs/catalog/blocks/us-map-flow.mdx b/docs/catalog/blocks/us-map-flow.mdx
index 565376214..4ec064a3d 100644
--- a/docs/catalog/blocks/us-map-flow.mdx
+++ b/docs/catalog/blocks/us-map-flow.mdx
@@ -3,7 +3,7 @@ title: "US Flow Map"
description: "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data` `map` `geography` `usa` `flow` `connections` `arcs`.
diff --git a/docs/catalog/blocks/us-map-hex.mdx b/docs/catalog/blocks/us-map-hex.mdx
index 5bbb3a1be..a8d49ced1 100644
--- a/docs/catalog/blocks/us-map-hex.mdx
+++ b/docs/catalog/blocks/us-map-hex.mdx
@@ -3,7 +3,7 @@ title: "US Hex Grid Map"
description: "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 10 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data` `map` `geography` `usa` `hexgrid` `tilegrid`.
diff --git a/docs/catalog/blocks/us-map.mdx b/docs/catalog/blocks/us-map.mdx
index d5f627522..a73af51c1 100644
--- a/docs/catalog/blocks/us-map.mdx
+++ b/docs/catalog/blocks/us-map.mdx
@@ -3,7 +3,7 @@ title: "US Map"
description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data` `map` `geography` `usa` `choropleth`.
diff --git a/docs/catalog/blocks/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index 0b028d6a7..2e3c19797 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -3,7 +3,7 @@ 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."
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 15 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `3d` `device` `iphone` `macbook` `gltf`.
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index d26bd8b08..8706aee79 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -3,7 +3,7 @@ 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."
---
-
+
## Install
@@ -45,37 +45,6 @@ Set these CSS variables on the block:
- `--bg-color` — Background. Defaults to `#0a0e17`.
- `--text-color` — Text color. Defaults to `#e2e8f0`.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `liquid` `webgl` `displacement` `background`.
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index 189584315..3322eb3d5 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -3,7 +3,7 @@ title: "Liquid Glass"
description: "VFX composition block"
---
-
+
## Install
@@ -45,37 +45,6 @@ Set these CSS variables on the block:
- `--bg-color` — Background. Defaults to `#030407`.
- `--accent-color` — Accent. Defaults to `#00d4ff`.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `webgl`.
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index 61caf4101..5603348f5 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -3,7 +3,7 @@ title: "Magnetic"
description: "VFX composition block"
---
-
+
## Install
@@ -45,37 +45,6 @@ Set these CSS variables on the block:
- `--bg-color` — Background. Defaults to `#0c0c0c`.
- `--text-color` — Text color. Defaults to `#e8e8e8`.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `webgl`.
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index 3dfad2033..a6cf2f9cd 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -3,7 +3,7 @@ title: "Portal"
description: "VFX composition block"
---
-
+
## Install
@@ -45,37 +45,6 @@ Set these CSS variables on the block:
- `--bg-color` — Background. Defaults to `#000000`.
- `--portal-color` — Portal color. Defaults to `#fafafa`.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `webgl`.
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index 7aff75187..b4341e115 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -3,7 +3,7 @@ title: "Shatter"
description: "VFX composition block"
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 12 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `webgl`.
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index 2162fd26e..db0a42363 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -3,7 +3,7 @@ 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."
---
-
+
## Install
@@ -38,37 +38,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `html-in-canvas` `text` `shader` `cursor` `chromatic`.
diff --git a/docs/catalog/blocks/vpn-youtube-spot.mdx b/docs/catalog/blocks/vpn-youtube-spot.mdx
index 4291dbcb9..4a2dc5f5c 100644
--- a/docs/catalog/blocks/vpn-youtube-spot.mdx
+++ b/docs/catalog/blocks/vpn-youtube-spot.mdx
@@ -3,7 +3,7 @@ title: "VPN YouTube Spot"
description: "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects."
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 7 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `app` `showcase` `youtube` `sfx`.
diff --git a/docs/catalog/blocks/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index 7048f6e81..ad33748e6 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -3,7 +3,7 @@ title: "Whip Pan"
description: "Shader transition simulating a fast camera whip pan"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `transition` `shader`.
diff --git a/docs/catalog/blocks/world-map.mdx b/docs/catalog/blocks/world-map.mdx
index 7a9d88b03..dbbecdf90 100644
--- a/docs/catalog/blocks/world-map.mdx
+++ b/docs/catalog/blocks/world-map.mdx
@@ -3,7 +3,7 @@ title: "World Map"
description: "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 14 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `data` `map` `geography` `world` `choropleth`.
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index 9f34f986e..4258dedd7 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -3,7 +3,7 @@ title: "X Post Card"
description: "Animated X/Twitter post card overlay with engagement metrics"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 5 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `social` `overlay` `twitter`.
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
index 585d4309a..8bc30c186 100644
--- a/docs/catalog/blocks/yt-comment-card.mdx
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -3,7 +3,7 @@ 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"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `social` `comments` `creator` `overlay`.
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
index 3c39bebb7..12a6ce003 100644
--- a/docs/catalog/blocks/yt-lcd-background.mdx
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -3,7 +3,7 @@ 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"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 10 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `background` `texture` `creator`.
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
index 326991c6f..70c04f861 100644
--- a/docs/catalog/blocks/yt-logo-intro.mdx
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -3,7 +3,7 @@ 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"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `logo` `intro` `creator`.
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index 53ebf9f30..86f958644 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -3,7 +3,7 @@ title: "YouTube Lower Third"
description: "Animated YouTube subscribe lower third with avatar and channel info"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 4.5 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `social` `overlay` `youtube`.
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
index 7a6d5b86d..bbc08dc40 100644
--- a/docs/catalog/blocks/yt-prism-title.mdx
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -3,7 +3,7 @@ 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"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 6 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `typography` `title-card` `creator`.
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
index 987e76229..f80a815d6 100644
--- a/docs/catalog/blocks/yt-vertical-fill.mdx
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -3,7 +3,7 @@ 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)"
---
-
+
## Install
@@ -32,37 +32,6 @@ It runs for 8 seconds at 1920×1080. Paste this into your composition:
Move it in time with `data-start`. Put it on a different timeline row with
`data-track-index`. See [data attributes](/concepts/data-attributes) for the rest.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
-
-**Wiring it by hand.** The installed block can be added to a host composition with:
-
-```html
-
-```
-
-## Related topics
-
-- [Browse the complete Catalog](/catalog)
-- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
-- [Build a richer composition](/go-further)
-
{/* hf:generated-footer */}
Tagged `placeholder` `vertical` `media`.
diff --git a/docs/catalog/components/caption-blend-difference.mdx b/docs/catalog/components/caption-blend-difference.mdx
index 69b23951e..0349e01e2 100644
--- a/docs/catalog/components/caption-blend-difference.mdx
+++ b/docs/catalog/components/caption-blend-difference.mdx
@@ -3,7 +3,7 @@ title: "Blend Difference"
description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
---
-
+
## Install
@@ -21,33 +21,6 @@ The file opens with a comment header that walks you through it.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `text` `text-effect` `effect` `blend-mode` `contrast` `inversion`.
diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index 52fb1ac9e..4a487b137 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -3,7 +3,7 @@ title: "Clip Wipe"
description: "Left-to-right clip-path wipe reveal per word"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-clip-wipe.html` and copy what is inside in
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `wipe` `clip-path` `reveal`.
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index 95a6b6711..bea9f7e23 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -3,7 +3,7 @@ title: "Editorial Emphasis"
description: "Dual-font system with dramatic size contrast for emphasis words"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-editorial-emphasis.html` and copy what is
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `editorial` `typography` `emphasis`.
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index 654ded435..af01c8210 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -3,7 +3,7 @@ title: "Emoji Pop"
description: "Emoji integration with stroked text and horizontal squeeze entrance"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-emoji-pop.html` and copy what is inside in
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `emoji` `social`.
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index 474efe163..949d07857 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -3,7 +3,7 @@ title: "Glitch RGB"
description: "RGB chromatic aberration with CRT scanline overlay"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-glitch-rgb.html` and copy what is inside i
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `glitch` `cyber` `tech`.
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index 7517034c3..da0de405f 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -3,7 +3,7 @@ title: "Gradient Fill"
description: "Gradient-clipped text with elastic bounce entrance"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-gradient-fill.html` and copy what is insid
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `gradient` `colorful`.
diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
index a64ee7a5b..ce2f9e181 100644
--- a/docs/catalog/components/caption-highlight.mdx
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -3,7 +3,7 @@ title: "Highlight"
description: "Red background sweep behind each active word, TikTok-style"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-highlight.html` and copy what is inside in
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `highlight` `social` `tiktok`.
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index 695ab46ac..d54dd80fb 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -3,7 +3,7 @@ title: "Kinetic Slam"
description: "Full-screen single-word display with alternating entrance directions"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-kinetic-slam.html` and copy what is inside
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `kinetic` `typography` `slam`.
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index 347115fa2..7ea3149a1 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -3,7 +3,7 @@ title: "Matrix Decode"
description: "Character scramble animation before text reveal"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-matrix-decode.html` and copy what is insid
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `matrix` `scramble` `decode`.
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index 42bbc79f9..fc82a3a38 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -3,7 +3,7 @@ title: "Neon Accent"
description: "Multi-color neon glow accents with wiggle drift animation"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-neon-accent.html` and copy what is inside
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `neon` `glow` `accent`.
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index a28d2baa6..b7da4c4ab 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -3,7 +3,7 @@ title: "Neon Glow"
description: "Cyan and magenta neon glow with keyword accent colors"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-neon-glow.html` and copy what is inside in
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `neon` `glow` `gaming`.
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index bcf1f7833..f5137afba 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -3,7 +3,7 @@ title: "Parallax Layers"
description: "Behind-subject 3D text layering with vertical stretch effect"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-parallax-layers.html` and copy what is ins
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `parallax` `3d` `depth`.
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index 0fe6e9a7a..f27c5fde2 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -3,7 +3,7 @@ title: "Particle Burst"
description: "Keyword words trigger colored particle explosions"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-particle-burst.html` and copy what is insi
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `particles` `burst` `effects`.
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index b4e10ecc9..fda96cd77 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -3,7 +3,7 @@ title: "Pill Karaoke"
description: "Pill-shaped container with per-word karaoke color highlight"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-pill-karaoke.html` and copy what is inside
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `karaoke` `pill`.
diff --git a/docs/catalog/components/caption-texture.mdx b/docs/catalog/components/caption-texture.mdx
index 8b65c1a8a..38aaab6ec 100644
--- a/docs/catalog/components/caption-texture.mdx
+++ b/docs/catalog/components/caption-texture.mdx
@@ -3,7 +3,7 @@ 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"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-texture.html` and copy what is inside into
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `texture` `mask`.
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index 2fb2ca51b..40797849a 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -3,7 +3,7 @@ title: "Weight Shift"
description: "Elegant font-weight transition between caption lines"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/caption-weight-shift.html` and copy what is inside
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `captions` `caption-style` `minimal` `typography`.
diff --git a/docs/catalog/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index 3d996e6d0..dc6ae51ff 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -3,7 +3,7 @@ title: "Grain Overlay"
description: "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition"
---
-
+
## Install
@@ -21,33 +21,6 @@ The file opens with a comment header that walks you through it.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `texture` `grain` `overlay` `film`.
diff --git a/docs/catalog/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index fe0096983..0b8d0f668 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -3,7 +3,7 @@ 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"
---
-
+
## Install
@@ -21,33 +21,6 @@ The file opens with a comment header that walks you through it.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `transition` `wipe` `grid` `pixelate`.
diff --git a/docs/catalog/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
index 7d2f10533..80ff9d9cf 100644
--- a/docs/catalog/components/hw-arrow.mdx
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -3,7 +3,7 @@ title: "Hand-Drawn Arrow"
description: "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/hw-arrow.html` and copy what is inside into your o
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `handwritten` `annotation` `arrow` `overlay`.
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
index 12238a763..fbe105f29 100644
--- a/docs/catalog/components/hw-boil.mdx
+++ b/docs/catalog/components/hw-boil.mdx
@@ -3,7 +3,7 @@ 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"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/hw-boil.html` and copy what is inside into your ow
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `handwritten` `effect` `annotation`.
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
index a1b54897e..3277fb4b8 100644
--- a/docs/catalog/components/hw-box-label.mdx
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -3,7 +3,7 @@ title: "Hand-Drawn Box Label"
description: "Wobbled rounded rectangle draws around a region with a handwritten label above or centered"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/hw-box-label.html` and copy what is inside into yo
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `handwritten` `annotation` `overlay`.
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
index fc49b4364..c23726cea 100644
--- a/docs/catalog/components/hw-callout-circle.mdx
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -3,7 +3,7 @@ title: "Scribble Callout Circle"
description: "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/hw-callout-circle.html` and copy what is inside in
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `handwritten` `annotation` `callout` `overlay`.
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
index f5f4d3519..d9c926e78 100644
--- a/docs/catalog/components/hw-underline.mdx
+++ b/docs/catalog/components/hw-underline.mdx
@@ -3,7 +3,7 @@ title: "Squiggle Marks"
description: "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/hw-underline.html` and copy what is inside into yo
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `handwritten` `annotation` `text-treatment`.
diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
index 693f75204..db53a2424 100644
--- a/docs/catalog/components/mk-emphasis-type.mdx
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -3,7 +3,7 @@ title: "Background Emphasis Type"
description: "Oversized low-contrast background word drifting slowly behind the subject — typography as texture"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/mk-emphasis-type.html` and copy what is inside int
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `typography` `text-treatment` `minimal`.
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
index 505fb1592..6a9a7e55b 100644
--- a/docs/catalog/components/mk-usage-arc.mdx
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -3,7 +3,7 @@ title: "Hairline Arc Gauge"
description: "Thin circular gauge that draws on while its percentage counts up; one helper call drives both"
---
-
+
## Install
@@ -20,33 +20,6 @@ Open `compositions/components/mk-usage-arc.html` and copy what is inside into yo
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `data-viz` `gauge` `minimal`.
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 5075fb896..088aca8c7 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -20,33 +20,6 @@ Open `compositions/components/morph-text.html` and copy what is inside into your
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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/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)
-
{/* hf:generated-footer */}
Tagged `text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`.
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index 6afc84c9d..14f94c3de 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -3,7 +3,7 @@ title: "Motion Blur"
description: "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed"
---
-
+
## Install
@@ -21,33 +21,6 @@ The file opens with a comment header that walks you through it.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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/motion-blur.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)
-
{/* hf:generated-footer */}
Tagged `effect` `motion-blur` `velocity` `animation` `physics`.
diff --git a/docs/catalog/components/parallax-unzoom.mdx b/docs/catalog/components/parallax-unzoom.mdx
index f023cfc0a..066aa5a6c 100644
--- a/docs/catalog/components/parallax-unzoom.mdx
+++ b/docs/catalog/components/parallax-unzoom.mdx
@@ -3,7 +3,7 @@ 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)"
---
-
+
## Install
@@ -21,33 +21,6 @@ The file opens with a comment header that walks you through it.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `transition` `reveal` `unzoom` `parallax` `grid` `hero`.
diff --git a/docs/catalog/components/parallax-zoom.mdx b/docs/catalog/components/parallax-zoom.mdx
index 26bf1008b..5370d26fb 100644
--- a/docs/catalog/components/parallax-zoom.mdx
+++ b/docs/catalog/components/parallax-zoom.mdx
@@ -3,7 +3,7 @@ title: "Parallax Zoom"
description: "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition"
---
-
+
## Install
@@ -21,33 +21,6 @@ The file opens with a comment header that walks you through it.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `transition` `zoom` `parallax` `grid` `hero`.
diff --git a/docs/catalog/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index 0010f33b0..675174a5c 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -3,7 +3,7 @@ title: "Shimmer Sweep"
description: "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals"
---
-
+
## Install
@@ -21,33 +21,6 @@ The file opens with a comment header that walks you through it.
A component has no size or duration of its own. It takes both from the composition
you paste it into.
-## Add it to a project
-
-### Ask your agent
-
-```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
-```
-
-## Use it
-
-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)
-
{/* hf:generated-footer */}
Tagged `text` `shimmer` `highlight` `effect`.
diff --git a/docs/catalog/components/texture-mask-text.mdx b/docs/catalog/components/texture-mask-text.mdx
index a08b39cb0..44661e8d0 100644
--- a/docs/catalog/components/texture-mask-text.mdx
+++ b/docs/catalog/components/texture-mask-text.mdx
@@ -478,31 +478,6 @@ window.__timelines["my-composition"] = tl;
-## Add it to a project
-
-### Ask your agent
-
-```text
-Add the Texture Mask Text component from the HyperFrames Catalog to this project.
-Replace the demo content with mine and match the existing design and timing.
-```
-
-### Install from the terminal
-
-```bash
-npx hyperframes add texture-mask-text
-```
-
-## 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 `