From 79c4056a3f7d509f330392d2198d0001fc4bd5a6 Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Mon, 3 Aug 2026 16:14:00 -0700
Subject: [PATCH] docs: make Catalog visual and reproducible

---
 docs/catalog/blocks/app-showcase.mdx          |  33 ++--
 docs/catalog/blocks/apple-money-count.mdx     |  33 ++--
 docs/catalog/blocks/beat-freeze-cut.mdx       |  33 ++--
 .../blocks/blue-sweater-intro-video.mdx       |  33 ++--
 docs/catalog/blocks/camcorder-hud.mdx         |  33 ++--
 .../catalog/blocks/chromatic-radial-split.mdx |  33 ++--
 docs/catalog/blocks/cinematic-zoom.mdx        |  33 ++--
 docs/catalog/blocks/code-3d-extrude.mdx       |  33 ++--
 docs/catalog/blocks/code-diff.mdx             |  33 ++--
 docs/catalog/blocks/code-highlight.mdx        |  33 ++--
 docs/catalog/blocks/code-morph.mdx            |  33 ++--
 .../catalog/blocks/code-particle-assemble.mdx |  33 ++--
 docs/catalog/blocks/code-scroll.mdx           |  33 ++--
 docs/catalog/blocks/code-shader-dissolve.mdx  |  33 ++--
 .../code-snippet-apple-terminal-basic.mdx     |  58 +++---
 ...code-snippet-apple-terminal-clear-dark.mdx |  59 +++---
 ...ode-snippet-apple-terminal-clear-light.mdx |  58 +++---
 .../code-snippet-apple-terminal-grass.mdx     |  58 +++---
 .../code-snippet-apple-terminal-homebrew.mdx  |  59 +++---
 .../code-snippet-apple-terminal-man-page.mdx  |  58 +++---
 .../code-snippet-apple-terminal-novel.mdx     |  59 +++---
 .../code-snippet-apple-terminal-ocean.mdx     |  59 +++---
 .../code-snippet-apple-terminal-pro.mdx       |  59 +++---
 .../code-snippet-apple-terminal-red-sands.mdx |  59 +++---
 ...-snippet-apple-terminal-silver-aerogel.mdx |  59 +++---
 ...de-snippet-apple-terminal-solid-colors.mdx |  59 +++---
 .../catalog/blocks/code-snippet-dark-2026.mdx |  53 ++---
 .../blocks/code-snippet-dark-modern.mdx       |  53 ++---
 .../catalog/blocks/code-snippet-dark-plus.mdx |  53 ++---
 docs/catalog/blocks/code-snippet-flight.mdx   |  33 ++--
 .../code-snippet-high-contrast-light.mdx      |  53 ++---
 .../blocks/code-snippet-high-contrast.mdx     |  53 ++---
 .../blocks/code-snippet-light-2026.mdx        |  53 ++---
 .../blocks/code-snippet-light-modern.mdx      |  53 ++---
 .../blocks/code-snippet-light-plus.mdx        |  53 ++---
 docs/catalog/blocks/code-snippet-monokai.mdx  |  53 ++---
 .../blocks/code-snippet-solarized-light.mdx   |  53 ++---
 .../code-snippet-visual-studio-dark.mdx       |  53 ++---
 .../code-snippet-visual-studio-light.mdx      |  53 ++---
 docs/catalog/blocks/code-typing.mdx           |  33 ++--
 docs/catalog/blocks/cross-warp-morph.mdx      |  33 ++--
 docs/catalog/blocks/data-chart.mdx            |  33 ++--
 docs/catalog/blocks/domain-warp-dissolve.mdx  |  33 ++--
 .../blocks/editorial-flash-overlay.mdx        |  33 ++--
 docs/catalog/blocks/flash-through-white.mdx   |  33 ++--
 docs/catalog/blocks/flowchart-vertical.mdx    |  33 ++--
 docs/catalog/blocks/flowchart.mdx             |  33 ++--
 docs/catalog/blocks/freeze-frame-dressing.mdx |  33 ++--
 docs/catalog/blocks/glitch.mdx                |  33 ++--
 docs/catalog/blocks/gravitational-lens.mdx    |  33 ++--
 docs/catalog/blocks/hw-frame.mdx              |  33 ++--
 docs/catalog/blocks/hw-path-text.mdx          |  33 ++--
 docs/catalog/blocks/hw-pipeline.mdx           |  33 ++--
 .../catalog/blocks/hw-scribble-transition.mdx |  33 ++--
 docs/catalog/blocks/hw-text-cloud.mdx         |  33 ++--
 docs/catalog/blocks/hw-title.mdx              |  33 ++--
 docs/catalog/blocks/instagram-follow.mdx      |  33 ++--
 docs/catalog/blocks/ios26-liquid-glass.mdx    |  59 ++++--
 docs/catalog/blocks/light-leak.mdx            |  33 ++--
 .../blocks/liquid-glass-context-menu.mdx      |  34 ++--
 .../blocks/liquid-glass-media-controls.mdx    |  34 ++--
 .../blocks/liquid-glass-notification.mdx      |  35 ++--
 docs/catalog/blocks/liquid-glass-widgets.mdx  |  35 ++--
 docs/catalog/blocks/logo-outro.mdx            |  33 ++--
 docs/catalog/blocks/lower-third-bild.mdx      |  33 ++--
 docs/catalog/blocks/lt-accent-underline.mdx   |  33 ++--
 docs/catalog/blocks/lt-bold-block.mdx         |  33 ++--
 docs/catalog/blocks/lt-clean-bar.mdx          |  33 ++--
 docs/catalog/blocks/lt-color-block.mdx        |  33 ++--
 docs/catalog/blocks/lt-dark-card.mdx          |  33 ++--
 docs/catalog/blocks/lt-kicker-name.mdx        |  33 ++--
 docs/catalog/blocks/lt-mask-reveal.mdx        |  33 ++--
 docs/catalog/blocks/lt-side-rule.mdx          |  33 ++--
 docs/catalog/blocks/lt-soft-pill.mdx          |  33 ++--
 docs/catalog/blocks/lt-stack-bars.mdx         |  33 ++--
 docs/catalog/blocks/macos-notification.mdx    |  33 ++--
 .../blocks/macos-tahoe-liquid-glass.mdx       |  51 +++--
 docs/catalog/blocks/mk-background.mdx         |  33 ++--
 docs/catalog/blocks/mk-callout-highlight.mdx  |  33 ++--
 .../blocks/mk-clone-wall-transition.mdx       |  33 ++--
 docs/catalog/blocks/mk-line-graph.mdx         |  33 ++--
 docs/catalog/blocks/mk-placeholder-grid.mdx   |  33 ++--
 docs/catalog/blocks/mk-progress-stat.mdx      |  33 ++--
 docs/catalog/blocks/mk-specs-list.mdx         |  33 ++--
 docs/catalog/blocks/news-ticker.mdx           |  33 ++--
 .../blocks/north-korea-locked-down.mdx        |  33 ++--
 docs/catalog/blocks/nyc-paris-flight.mdx      |  33 ++--
 .../blocks/organic-light-leak-overlay.mdx     |  33 ++--
 docs/catalog/blocks/reddit-post.mdx           |  33 ++--
 docs/catalog/blocks/ridged-burn.mdx           |  33 ++--
 docs/catalog/blocks/ripple-waves.mdx          |  33 ++--
 docs/catalog/blocks/sdf-iris.mdx              |  33 ++--
 docs/catalog/blocks/spain-map.mdx             |  33 ++--
 docs/catalog/blocks/spotify-card.mdx          |  33 ++--
 docs/catalog/blocks/swirl-vortex.mdx          |  33 ++--
 docs/catalog/blocks/thermal-distortion.mdx    |  33 ++--
 docs/catalog/blocks/tiktok-follow.mdx         |  33 ++--
 docs/catalog/blocks/transitions-3d.mdx        |  33 ++--
 docs/catalog/blocks/transitions-blur.mdx      |  33 ++--
 docs/catalog/blocks/transitions-cover.mdx     |  33 ++--
 .../blocks/transitions-destruction.mdx        |  33 ++--
 docs/catalog/blocks/transitions-dissolve.mdx  |  33 ++--
 .../catalog/blocks/transitions-distortion.mdx |  33 ++--
 docs/catalog/blocks/transitions-grid.mdx      |  33 ++--
 docs/catalog/blocks/transitions-light.mdx     |  33 ++--
 .../catalog/blocks/transitions-mechanical.mdx |  33 ++--
 docs/catalog/blocks/transitions-other.mdx     |  33 ++--
 docs/catalog/blocks/transitions-push.mdx      |  33 ++--
 docs/catalog/blocks/transitions-radial.mdx    |  33 ++--
 docs/catalog/blocks/transitions-scale.mdx     |  33 ++--
 docs/catalog/blocks/ui-3d-reveal.mdx          |  33 ++--
 docs/catalog/blocks/us-map-bubble.mdx         |  33 ++--
 docs/catalog/blocks/us-map-flow.mdx           |  33 ++--
 docs/catalog/blocks/us-map-hex.mdx            |  33 ++--
 docs/catalog/blocks/us-map.mdx                |  33 ++--
 docs/catalog/blocks/vfx-iphone-device.mdx     |  33 ++--
 docs/catalog/blocks/vfx-liquid-background.mdx |  33 ++--
 docs/catalog/blocks/vfx-liquid-glass.mdx      |  33 ++--
 docs/catalog/blocks/vfx-magnetic.mdx          |  33 ++--
 docs/catalog/blocks/vfx-portal.mdx            |  33 ++--
 docs/catalog/blocks/vfx-shatter.mdx           |  33 ++--
 docs/catalog/blocks/vfx-text-cursor.mdx       |  33 ++--
 docs/catalog/blocks/vpn-youtube-spot.mdx      |  33 ++--
 docs/catalog/blocks/whip-pan.mdx              |  33 ++--
 docs/catalog/blocks/world-map.mdx             |  33 ++--
 docs/catalog/blocks/x-post.mdx                |  33 ++--
 docs/catalog/blocks/yt-comment-card.mdx       |  33 ++--
 docs/catalog/blocks/yt-lcd-background.mdx     |  33 ++--
 docs/catalog/blocks/yt-logo-intro.mdx         |  33 ++--
 docs/catalog/blocks/yt-lower-third.mdx        |  33 ++--
 docs/catalog/blocks/yt-prism-title.mdx        |  33 ++--
 docs/catalog/blocks/yt-vertical-fill.mdx      |  33 ++--
 .../components/caption-blend-difference.mdx   |  35 ++--
 docs/catalog/components/caption-clip-wipe.mdx |  35 ++--
 .../components/caption-editorial-emphasis.mdx |  35 ++--
 docs/catalog/components/caption-emoji-pop.mdx |  35 ++--
 .../catalog/components/caption-glitch-rgb.mdx |  35 ++--
 .../components/caption-gradient-fill.mdx      |  35 ++--
 docs/catalog/components/caption-highlight.mdx |  35 ++--
 .../components/caption-kinetic-slam.mdx       |  35 ++--
 .../components/caption-matrix-decode.mdx      |  35 ++--
 .../components/caption-neon-accent.mdx        |  35 ++--
 docs/catalog/components/caption-neon-glow.mdx |  35 ++--
 .../components/caption-parallax-layers.mdx    |  35 ++--
 .../components/caption-particle-burst.mdx     |  35 ++--
 .../components/caption-pill-karaoke.mdx       |  35 ++--
 docs/catalog/components/caption-texture.mdx   |  35 ++--
 .../components/caption-weight-shift.mdx       |  35 ++--
 docs/catalog/components/grain-overlay.mdx     |  33 ++--
 .../catalog/components/grid-pixelate-wipe.mdx |  33 ++--
 docs/catalog/components/hw-arrow.mdx          |  33 ++--
 docs/catalog/components/hw-boil.mdx           |  33 ++--
 docs/catalog/components/hw-box-label.mdx      |  33 ++--
 docs/catalog/components/hw-callout-circle.mdx |  33 ++--
 docs/catalog/components/hw-underline.mdx      |  33 ++--
 docs/catalog/components/mk-emphasis-type.mdx  |  33 ++--
 docs/catalog/components/mk-usage-arc.mdx      |  33 ++--
 docs/catalog/components/morph-text.mdx        |  33 ++--
 docs/catalog/components/motion-blur.mdx       |  61 ++----
 docs/catalog/components/parallax-unzoom.mdx   |  33 ++--
 docs/catalog/components/parallax-zoom.mdx     |  33 ++--
 docs/catalog/components/shimmer-sweep.mdx     |  33 ++--
 docs/catalog/components/texture-mask-text.mdx |  26 ++-
 docs/catalog/components/vignette.mdx          |  33 ++--
 docs/catalog/components/yt-camera-move.mdx    |  33 ++--
 docs/catalog/components/yt-circle-pointer.mdx |  33 ++--
 .../components/yt-feather-highlight.mdx       |  33 ++--
 docs/catalog/components/yt-screen-warp.mdx    |  33 ++--
 docs/docs.json                                |  20 +-
 docs/public/catalog-index.json                |  39 ++--
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 .../registry-item.json                        |   3 +-
 scripts/generate-catalog-pages.ts             | 184 +++++++++++-------
 scripts/generate-catalog-previews.ts          |  18 ++
 184 files changed, 3760 insertions(+), 2732 deletions(-)

diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index 640804ad7..49c816d1c 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -3,23 +3,24 @@ title: "App Showcase"
 description: "Fitness app product showcase with three floating smartphone screens"
 ---
 
-# App Showcase
-
-Fitness app product showcase with three floating smartphone screens
-
 `showcase` `app` `3d`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add app-showcase
+```text
+Add the App Showcase block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add app-showcase
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add app-showcase
 | Dimensions | 1920×1080 |
 | Duration | 5.5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `app-showcase.html` | `compositions/app-showcase.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="app-showcase" data-composition-src="compositions/app-showcase.html" data-start="0" data-duration="5.5" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/apple-money-count.mdx b/docs/catalog/blocks/apple-money-count.mdx
index 34056c079..69ee5680d 100644
--- a/docs/catalog/blocks/apple-money-count.mdx
+++ b/docs/catalog/blocks/apple-money-count.mdx
@@ -3,10 +3,6 @@ title: "Apple Money Count"
 description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
 ---
 
-# Apple Money Count
-
-Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.
-
 `showcase` `finance` `kinetic` `youtube` `sfx`
 
 Created by [Stronkter](https://x.com/Stronkter).
@@ -19,15 +15,20 @@ Created by [Stronkter](https://x.com/Stronkter).
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add apple-money-count
+```text
+Add the Apple Money Count block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add apple-money-count
+```
 
 ## Details
 
@@ -37,17 +38,25 @@ npx hyperframes add apple-money-count
 | Dimensions | 1920×1080 |
 | Duration | 5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `apple-money-count.html` | `compositions/apple-money-count.html` | hyperframes:composition |
 | `assets/sfx-production.wav` | `assets/sfx-production.wav` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="apple-money-count" data-composition-src="compositions/apple-money-count.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
index 7a7b8e97b..00c71e08f 100644
--- a/docs/catalog/blocks/beat-freeze-cut.mdx
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -3,23 +3,24 @@ title: "Beat Freeze Cut"
 description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
 ---
 
-# Beat Freeze Cut
-
-A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.
-
 `transition` `music` `beat-driven` `freeze-frame`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add beat-freeze-cut
+```text
+Add the Beat Freeze Cut block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add beat-freeze-cut
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add beat-freeze-cut
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `beat-freeze-cut.html` | `compositions/beat-freeze-cut.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="beat-freeze-cut" data-composition-src="compositions/beat-freeze-cut.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/blue-sweater-intro-video.mdx b/docs/catalog/blocks/blue-sweater-intro-video.mdx
index 2c3417dff..b17912927 100644
--- a/docs/catalog/blocks/blue-sweater-intro-video.mdx
+++ b/docs/catalog/blocks/blue-sweater-intro-video.mdx
@@ -3,25 +3,26 @@ title: "Blue Sweater Intro Video"
 description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
 ---
 
-# Blue Sweater Intro Video
-
-Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.
-
 `showcase` `ai` `creator` `sfx`
 
 Created by [Joe Sai](https://x.com/_blue_sweater_).
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add blue-sweater-intro-video
+```text
+Add the Blue Sweater Intro Video block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add blue-sweater-intro-video
+```
 
 ## Details
 
@@ -31,7 +32,7 @@ npx hyperframes add blue-sweater-intro-video
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
@@ -39,10 +40,18 @@ npx hyperframes add blue-sweater-intro-video
 | `assets/joe-sai-avatar.png` | `assets/joe-sai-avatar.png` | hyperframes:asset |
 | `assets/sfx/integrated-melodic-tech-mix.wav` | `assets/sfx/integrated-melodic-tech-mix.wav` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="blue-sweater-intro-video" data-composition-src="compositions/blue-sweater-intro-video.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
index 27231e816..2114cb1d8 100644
--- a/docs/catalog/blocks/camcorder-hud.mdx
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -3,23 +3,24 @@ title: "Camcorder HUD"
 description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
 ---
 
-# Camcorder HUD
-
-Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments
-
 `camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add camcorder-hud
+```text
+Add the Camcorder HUD block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add camcorder-hud
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add camcorder-hud
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `camcorder-hud.html` | `compositions/camcorder-hud.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="camcorder-hud" data-composition-src="compositions/camcorder-hud.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index a4f235d20..6b8c1ce7d 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -3,23 +3,24 @@ title: "Chromatic Radial Split"
 description: "Shader transition with chromatic aberration radial split"
 ---
 
-# Chromatic Radial Split
-
-Shader transition with chromatic aberration radial split
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add chromatic-radial-split
+```text
+Add the Chromatic Radial Split block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add chromatic-radial-split
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add chromatic-radial-split
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `chromatic-radial-split.html` | `compositions/chromatic-radial-split.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="chromatic-radial-split" data-composition-src="compositions/chromatic-radial-split.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index f8eb1060f..df248f748 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -3,23 +3,24 @@ title: "Cinematic Zoom"
 description: "Shader transition with dramatic zoom blur"
 ---
 
-# Cinematic Zoom
-
-Shader transition with dramatic zoom blur
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add cinematic-zoom
+```text
+Add the Cinematic Zoom block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add cinematic-zoom
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add cinematic-zoom
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `cinematic-zoom.html` | `compositions/cinematic-zoom.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="cinematic-zoom" data-composition-src="compositions/cinematic-zoom.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
index f36694b88..df6685590 100644
--- a/docs/catalog/blocks/code-3d-extrude.mdx
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -3,23 +3,24 @@ title: "Code 3D Extrude"
 description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
 ---
 
-# Code 3D Extrude
-
-Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.
-
 `code` `code-animation` `3d` `webgl` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-3d-extrude
+```text
+Add the Code 3D Extrude block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-3d-extrude
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-3d-extrude
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-3d-extrude.html` | `compositions/code-3d-extrude.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-3d-extrude" data-composition-src="compositions/code-3d-extrude.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
index d17740fa8..3c6b0ab8f 100644
--- a/docs/catalog/blocks/code-diff.mdx
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -3,23 +3,24 @@ title: "Code Diff"
 description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
 ---
 
-# Code Diff
-
-An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
-
 `code` `code-animation` `diff` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-diff
+```text
+Add the Code Diff block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-diff
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-diff
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-diff.html` | `compositions/code-diff.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-diff" data-composition-src="compositions/code-diff.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
index 7423e1376..24089fbbd 100644
--- a/docs/catalog/blocks/code-highlight.mdx
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -3,23 +3,24 @@ title: "Code Highlight Sweep"
 description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based)."
 ---
 
-# Code Highlight Sweep
-
-A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based).
-
 `code` `code-animation` `highlight` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-highlight
+```text
+Add the Code Highlight Sweep block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-highlight
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-highlight
 | Dimensions | 1920×1080 |
 | Duration | 5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-highlight.html` | `compositions/code-highlight.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-highlight" data-composition-src="compositions/code-highlight.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
index b5f8b52e0..5795e7ba5 100644
--- a/docs/catalog/blocks/code-morph.mdx
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -3,23 +3,24 @@ title: "Code Morph"
 description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
 ---
 
-# Code Morph
-
-One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.
-
 `code` `code-animation` `morph` `refactor` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-morph
+```text
+Add the Code Morph block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-morph
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-morph
 | Dimensions | 1920×1080 |
 | Duration | 7s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-morph.html` | `compositions/code-morph.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-morph" data-composition-src="compositions/code-morph.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
index da29dde0c..b4aa8a425 100644
--- a/docs/catalog/blocks/code-particle-assemble.mdx
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -3,23 +3,24 @@ title: "Code Particle Assemble"
 description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
 ---
 
-# Code Particle Assemble
-
-Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.
-
 `code` `code-animation` `particles` `gpu` `webgl` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-particle-assemble
+```text
+Add the Code Particle Assemble block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-particle-assemble
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-particle-assemble
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-particle-assemble.html` | `compositions/code-particle-assemble.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-particle-assemble" data-composition-src="compositions/code-particle-assemble.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
index 8f5ef3323..fdae5829a 100644
--- a/docs/catalog/blocks/code-scroll.mdx
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -3,23 +3,24 @@ title: "Code Scroll To Line"
 description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
 ---
 
-# Code Scroll To Line
-
-The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
-
 `code` `code-animation` `scroll` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-scroll
+```text
+Add the Code Scroll To Line block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-scroll
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-scroll
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-scroll.html` | `compositions/code-scroll.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-scroll" data-composition-src="compositions/code-scroll.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
index 2d327221f..4d66dd0a2 100644
--- a/docs/catalog/blocks/code-shader-dissolve.mdx
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -3,23 +3,24 @@ title: "Code Shader Dissolve"
 description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
 ---
 
-# Code Shader Dissolve
-
-The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.
-
 `code` `code-animation` `shader` `webgl` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-shader-dissolve
+```text
+Add the Code Shader Dissolve block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-shader-dissolve
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-shader-dissolve
 | Dimensions | 1920×1080 |
 | Duration | 7s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-shader-dissolve.html` | `compositions/code-shader-dissolve.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-shader-dissolve" data-composition-src="compositions/code-shader-dissolve.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index 0021f80a7..012e3f121 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Apple Terminal Basic"
-description: "Apple Terminal Basic profile with white background and black text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Basic"
+description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Basic
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Basic profile — clean white background with black monospace text and a solid black cursor. Per-character typing animation with output reveal.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-basic
+```text
+Add the Code Snippet - Apple Terminal Basic block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-basic
 ```
 
 ## Details
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-basic.html` | `compositions/code-snippet-apple-terminal-basic.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-basic"
-  data-composition-src="compositions/code-snippet-apple-terminal-basic.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-basic" data-composition-src="compositions/code-snippet-apple-terminal-basic.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Basic profile — white background, black text, solid cursor
-- macOS window chrome with traffic light buttons (close, minimize, fullscreen) and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
index 98e7eaf68..eebb9b950 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -1,31 +1,25 @@
 ---
-title: "Apple Terminal Clear Dark"
-description: "Apple Terminal Clear Dark profile with semi-transparent dark background and white text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Clear Dark"
+description: "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Clear Dark
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Clear Dark profile — translucent black background with white text and a grey cursor. Per-character typing animation with output reveal.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-clear-dark
+```text
+Add the Code Snippet - Apple Terminal Clear Dark block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-clear-dark
 ```
 
 ## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-clear-dark.html` | `compositions/code-snippet-apple-terminal-clear-dark.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-clear-dark"
-  data-composition-src="compositions/code-snippet-apple-terminal-clear-dark.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-clear-dark" data-composition-src="compositions/code-snippet-apple-terminal-clear-dark.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Clear Dark profile — semi-transparent black background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
index 7654fe4e8..2a64bd9ac 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Apple Terminal Clear Light"
-description: "Apple Terminal Clear Light profile with semi-transparent white background and black text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Clear Light"
+description: "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Clear Light
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Clear Light profile — translucent white background with black text and a grey cursor. Per-character typing animation with output reveal.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-clear-light
+```text
+Add the Code Snippet - Apple Terminal Clear Light block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-clear-light
 ```
 
 ## Details
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-clear-light.html` | `compositions/code-snippet-apple-terminal-clear-light.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-clear-light"
-  data-composition-src="compositions/code-snippet-apple-terminal-clear-light.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-clear-light" data-composition-src="compositions/code-snippet-apple-terminal-clear-light.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Clear Light profile — semi-transparent white background with black text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
index d64bb7e5b..8583a02ee 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Apple Terminal Grass"
-description: "Apple Terminal Grass profile with black background and bright green text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Grass"
+description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Grass
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Grass profile — pitch-black background with pure green text and a matching cursor. Classic terminal aesthetic with per-character typing animation.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-grass
+```text
+Add the Code Snippet - Apple Terminal Grass block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-grass
 ```
 
 ## Details
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-grass.html` | `compositions/code-snippet-apple-terminal-grass.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-grass"
-  data-composition-src="compositions/code-snippet-apple-terminal-grass.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-grass" data-composition-src="compositions/code-snippet-apple-terminal-grass.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Grass profile — black background with #00C100 green text
-- macOS window chrome with green-accented title bar and traffic light buttons
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
index f9c3340a9..a2faee9de 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -1,31 +1,25 @@
 ---
-title: "Apple Terminal Homebrew"
-description: "Apple Terminal Homebrew profile with black background, bright green text and lime cursor, per-character typing animation."
+title: "Code Snippet - Apple Terminal Homebrew"
+description: "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Homebrew
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Homebrew profile — black background with vivid green text and a lime `#48F800` cursor. One of the most beloved classic terminal looks.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-homebrew
+```text
+Add the Code Snippet - Apple Terminal Homebrew block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-homebrew
 ```
 
 ## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-homebrew.html` | `compositions/code-snippet-apple-terminal-homebrew.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-homebrew"
-  data-composition-src="compositions/code-snippet-apple-terminal-homebrew.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-homebrew" data-composition-src="compositions/code-snippet-apple-terminal-homebrew.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Homebrew profile — black background with #00CF00 text and #48F800 cursor
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
index 11c96f415..62af2f0e8 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Apple Terminal Man Page"
-description: "Apple Terminal Man Page profile with pale yellow background and black text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Man Page"
+description: "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Man Page
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Man Page profile — pale yellow `#FEF49C` background with black text. Evoking classic Unix manual pages, with per-character typing animation.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-man-page
+```text
+Add the Code Snippet - Apple Terminal Man Page block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-man-page
 ```
 
 ## Details
@@ -35,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-man-page.html` | `compositions/code-snippet-apple-terminal-man-page.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-man-page"
-  data-composition-src="compositions/code-snippet-apple-terminal-man-page.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-man-page" data-composition-src="compositions/code-snippet-apple-terminal-man-page.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Man Page profile — pale yellow background with black text
-- Shows a realistic man page output structure with sections and indented content
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
index 9a7a0adba..909237677 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -1,31 +1,25 @@
 ---
-title: "Apple Terminal Novel"
-description: "Apple Terminal Novel profile with warm parchment background and dark brown text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Novel"
+description: "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Novel
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC18A` background with deep brown text. A distinctive earthy look, with per-character typing animation.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-novel
+```text
+Add the Code Snippet - Apple Terminal Novel block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-novel
 ```
 
 ## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-novel.html` | `compositions/code-snippet-apple-terminal-novel.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-novel"
-  data-composition-src="compositions/code-snippet-apple-terminal-novel.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-novel" data-composition-src="compositions/code-snippet-apple-terminal-novel.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Novel profile — warm parchment background with #3E2900 dark brown text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
index d519bd4c9..5222330b9 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -1,31 +1,25 @@
 ---
-title: "Apple Terminal Ocean"
-description: "Apple Terminal Ocean profile with deep blue background and white text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Ocean"
+description: "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Ocean
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue background with crisp white text. Bold and distinctive, with per-character typing animation.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-ocean
+```text
+Add the Code Snippet - Apple Terminal Ocean block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-ocean
 ```
 
 ## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-ocean.html` | `compositions/code-snippet-apple-terminal-ocean.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-ocean"
-  data-composition-src="compositions/code-snippet-apple-terminal-ocean.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-ocean" data-composition-src="compositions/code-snippet-apple-terminal-ocean.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Ocean profile — #224FBE blue background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index e8441e6c5..ae3d33417 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -1,31 +1,25 @@
 ---
-title: "Apple Terminal Pro"
-description: "Apple Terminal Pro profile with black background, grey text and lime green cursor, per-character typing animation."
+title: "Code Snippet - Apple Terminal Pro"
+description: "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Pro
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Pro profile — pure black background with grey `#BBBBBB` text and a distinctive `#88FF67` lime cursor. Hacker aesthetic with per-character typing animation.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-pro
+```text
+Add the Code Snippet - Apple Terminal Pro block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-pro
 ```
 
 ## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-pro.html` | `compositions/code-snippet-apple-terminal-pro.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-pro"
-  data-composition-src="compositions/code-snippet-apple-terminal-pro.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-pro" data-composition-src="compositions/code-snippet-apple-terminal-pro.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Pro profile — black background, #BBBBBB grey text, #88FF67 lime cursor
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
index c740c6e29..6a977cdac 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -1,31 +1,25 @@
 ---
-title: "Apple Terminal Red Sands"
-description: "Apple Terminal Red Sands profile with deep red background and sandy text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Red Sands"
+description: "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Red Sands
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7B140E` background with warm sandy `#FFE1B9` text. A bold, dramatic look with per-character typing animation.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-red-sands
+```text
+Add the Code Snippet - Apple Terminal Red Sands block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-red-sands
 ```
 
 ## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-red-sands.html` | `compositions/code-snippet-apple-terminal-red-sands.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-red-sands"
-  data-composition-src="compositions/code-snippet-apple-terminal-red-sands.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-red-sands" data-composition-src="compositions/code-snippet-apple-terminal-red-sands.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Red Sands profile — #7B140E red background with #FFE1B9 sandy text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
index 810f2f670..55709927f 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -1,31 +1,25 @@
 ---
-title: "Apple Terminal Silver Aerogel"
-description: "Apple Terminal Silver Aerogel profile with dark grey background and white text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Silver Aerogel"
+description: "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Silver Aerogel
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `#3D3D3D` background with clean white text. A professional neutral look with per-character typing animation.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-silver-aerogel
+```text
+Add the Code Snippet - Apple Terminal Silver Aerogel block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-silver-aerogel
 ```
 
 ## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-silver-aerogel.html` | `compositions/code-snippet-apple-terminal-silver-aerogel.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-silver-aerogel"
-  data-composition-src="compositions/code-snippet-apple-terminal-silver-aerogel.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-silver-aerogel" data-composition-src="compositions/code-snippet-apple-terminal-silver-aerogel.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Silver Aerogel profile — #3D3D3D dark grey background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
index 30b81485c..ebc9150d6 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -1,31 +1,25 @@
 ---
-title: "Apple Terminal Solid Colors"
-description: "Apple Terminal Solid Colors profile with deep purple background and white text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Solid Colors"
+description: "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Solid Colors
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
-macOS Terminal.app window in the built-in Solid Colors profile — vivid deep purple `#4C0099` background with white text. Eye-catching and vibrant, with per-character typing animation.
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" autoPlay muted loop playsInline />
 
-`code` `developer` `showcase` `terminal` `apple`
+## Add it to a project
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png" autoPlay muted loop playsInline />
+### Ask your agent
 
-
-## Install
-
-<CodeGroup>
-
-```bash Terminal
-npx hyperframes add code-snippet-apple-terminal-solid-colors
+```text
+Add the Code Snippet - Apple Terminal Solid Colors block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
+```bash
+npx hyperframes add code-snippet-apple-terminal-solid-colors
 ```
 
 ## Details
@@ -36,33 +30,24 @@ npx hyperframes add apple-terminal
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-apple-terminal-solid-colors.html` | `compositions/code-snippet-apple-terminal-solid-colors.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-solid-colors"
-  data-composition-src="compositions/code-snippet-apple-terminal-solid-colors.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-solid-colors" data-composition-src="compositions/code-snippet-apple-terminal-solid-colors.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Faithful recreation of macOS Terminal.app Solid Colors profile — #4C0099 deep purple background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index cd86c9756..ae7fae709 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Dark 2026"
-description: "The newest VS Code dark theme with refined token scopes and updated palette."
+title: "Code Snippet - Dark 2026"
+description: "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Dark 2026
-
-VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-dark-2026
+```text
+Add the Code Snippet - Dark 2026 block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-dark-2026
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-dark-2026.html` | `compositions/code-snippet-dark-2026.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-dark-2026"
-  data-composition-src="compositions/code-snippet-dark-2026.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-dark-2026" data-composition-src="compositions/code-snippet-dark-2026.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index 8cb547804..3c579a397 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Dark Modern"
-description: "The default dark theme — clean and contemporary with comfortable contrast."
+title: "Code Snippet - Dark Modern"
+description: "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Dark Modern
-
-VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-dark-modern
+```text
+Add the Code Snippet - Dark Modern block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-dark-modern
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-dark-modern.html` | `compositions/code-snippet-dark-modern.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-dark-modern"
-  data-composition-src="compositions/code-snippet-dark-modern.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-dark-modern" data-composition-src="compositions/code-snippet-dark-modern.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-dark-plus.mdx b/docs/catalog/blocks/code-snippet-dark-plus.mdx
index defe289c1..5216159ec 100644
--- a/docs/catalog/blocks/code-snippet-dark-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-plus.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Dark+"
-description: "Classic dark theme with enhanced syntax highlighting for popular languages."
+title: "Code Snippet - Dark+"
+description: "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Dark+
-
-VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-dark-plus
+```text
+Add the Code Snippet - Dark+ block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-dark-plus
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-dark-plus.html` | `compositions/code-snippet-dark-plus.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-dark-plus"
-  data-composition-src="compositions/code-snippet-dark-plus.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-dark-plus" data-composition-src="compositions/code-snippet-dark-plus.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
index 547a86961..20c924d12 100644
--- a/docs/catalog/blocks/code-snippet-flight.mdx
+++ b/docs/catalog/blocks/code-snippet-flight.mdx
@@ -3,23 +3,24 @@ title: "Code Snippet Flight"
 description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
 ---
 
-# Code Snippet Flight
-
-Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.
-
 `code` `code-animation` `flight` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-flight
+```text
+Add the Code Snippet Flight block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-snippet-flight
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-snippet-flight
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-flight.html` | `compositions/code-snippet-flight.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-snippet-flight" data-composition-src="compositions/code-snippet-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
index 43bfada32..fa9212bd3 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
@@ -1,30 +1,25 @@
 ---
-title: "High Contrast Light"
-description: "Maximum contrast light theme for accessibility."
+title: "Code Snippet - High Contrast Light"
+description: "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# High Contrast Light
-
-VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-high-contrast-light
+```text
+Add the Code Snippet - High Contrast Light block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-high-contrast-light
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-high-contrast-light.html` | `compositions/code-snippet-high-contrast-light.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-high-contrast-light"
-  data-composition-src="compositions/code-snippet-high-contrast-light.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-high-contrast-light" data-composition-src="compositions/code-snippet-high-contrast-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-high-contrast.mdx b/docs/catalog/blocks/code-snippet-high-contrast.mdx
index 9daa00450..6c5724f97 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast.mdx
@@ -1,30 +1,25 @@
 ---
-title: "High Contrast"
-description: "Maximum contrast dark theme for accessibility."
+title: "Code Snippet - High Contrast"
+description: "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# High Contrast
-
-VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-high-contrast
+```text
+Add the Code Snippet - High Contrast block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-high-contrast
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-high-contrast.html` | `compositions/code-snippet-high-contrast.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-high-contrast"
-  data-composition-src="compositions/code-snippet-high-contrast.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-high-contrast" data-composition-src="compositions/code-snippet-high-contrast.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-light-2026.mdx b/docs/catalog/blocks/code-snippet-light-2026.mdx
index 62265a255..e9eb473d2 100644
--- a/docs/catalog/blocks/code-snippet-light-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-light-2026.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Light 2026"
-description: "The newest VS Code light theme with refined token scopes and updated palette."
+title: "Code Snippet - Light 2026"
+description: "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Light 2026
-
-VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-light-2026
+```text
+Add the Code Snippet - Light 2026 block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-light-2026
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-light-2026.html` | `compositions/code-snippet-light-2026.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-light-2026"
-  data-composition-src="compositions/code-snippet-light-2026.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-light-2026" data-composition-src="compositions/code-snippet-light-2026.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-light-modern.mdx b/docs/catalog/blocks/code-snippet-light-modern.mdx
index 65a53d6e6..735283f37 100644
--- a/docs/catalog/blocks/code-snippet-light-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-light-modern.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Light Modern"
-description: "The default light theme — a fresh, modern take on the classic VS light experience."
+title: "Code Snippet - Light Modern"
+description: "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Light Modern
-
-VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-light-modern
+```text
+Add the Code Snippet - Light Modern block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-light-modern
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-light-modern.html` | `compositions/code-snippet-light-modern.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-light-modern"
-  data-composition-src="compositions/code-snippet-light-modern.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-light-modern" data-composition-src="compositions/code-snippet-light-modern.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-light-plus.mdx b/docs/catalog/blocks/code-snippet-light-plus.mdx
index f351c45a9..f8fe05189 100644
--- a/docs/catalog/blocks/code-snippet-light-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-light-plus.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Light+"
-description: "Classic light theme with enhanced syntax highlighting for popular languages."
+title: "Code Snippet - Light+"
+description: "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Light+
-
-VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-light-plus
+```text
+Add the Code Snippet - Light+ block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-light-plus
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-light-plus.html` | `compositions/code-snippet-light-plus.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-light-plus"
-  data-composition-src="compositions/code-snippet-light-plus.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-light-plus" data-composition-src="compositions/code-snippet-light-plus.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-monokai.mdx b/docs/catalog/blocks/code-snippet-monokai.mdx
index a1511f0f3..68fb16b7f 100644
--- a/docs/catalog/blocks/code-snippet-monokai.mdx
+++ b/docs/catalog/blocks/code-snippet-monokai.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Monokai"
-description: "The iconic warm-toned dark theme beloved by developers worldwide."
+title: "Code Snippet - Monokai"
+description: "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Monokai
-
-VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-monokai
+```text
+Add the Code Snippet - Monokai block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-monokai
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-monokai.html` | `compositions/code-snippet-monokai.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-monokai"
-  data-composition-src="compositions/code-snippet-monokai.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-monokai" data-composition-src="compositions/code-snippet-monokai.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-solarized-light.mdx b/docs/catalog/blocks/code-snippet-solarized-light.mdx
index 914b784b6..8a140c3cb 100644
--- a/docs/catalog/blocks/code-snippet-solarized-light.mdx
+++ b/docs/catalog/blocks/code-snippet-solarized-light.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Solarized Light"
-description: "Ethan Schoonover's precision-engineered light color scheme."
+title: "Code Snippet - Solarized Light"
+description: "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Solarized Light
-
-VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-solarized-light
+```text
+Add the Code Snippet - Solarized Light block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-solarized-light
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-solarized-light.html` | `compositions/code-snippet-solarized-light.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-solarized-light"
-  data-composition-src="compositions/code-snippet-solarized-light.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-solarized-light" data-composition-src="compositions/code-snippet-solarized-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
index 494c2f853..c36c3b9f2 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Visual Studio Dark"
-description: "The traditional Visual Studio dark color scheme."
+title: "Code Snippet - Visual Studio Dark"
+description: "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Visual Studio Dark
-
-VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-visual-studio-dark
+```text
+Add the Code Snippet - Visual Studio Dark block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-visual-studio-dark
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-visual-studio-dark.html` | `compositions/code-snippet-visual-studio-dark.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-visual-studio-dark"
-  data-composition-src="compositions/code-snippet-visual-studio-dark.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-visual-studio-dark" data-composition-src="compositions/code-snippet-visual-studio-dark.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
index 7f9060917..1fadf21a2 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
@@ -1,30 +1,25 @@
 ---
-title: "Visual Studio Light"
-description: "The traditional Visual Studio light color scheme."
+title: "Code Snippet - Visual Studio Light"
+description: "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-# Visual Studio Light
-
-VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
-
 `code` `developer` `showcase` `vscode`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-snippet-visual-studio-light
+```text
+Add the Code Snippet - Visual Studio Light block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
+```bash
+npx hyperframes add code-snippet-visual-studio-light
 ```
 
 ## Details
@@ -35,33 +30,25 @@ npx hyperframes add code
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-snippet-visual-studio-light.html` | `compositions/code-snippet-visual-studio-light.html` | hyperframes:composition |
 | `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
-<div
-  data-composition-id="code-snippet-visual-studio-light"
-  data-composition-src="compositions/code-snippet-visual-studio-light.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-visual-studio-light" data-composition-src="compositions/code-snippet-visual-studio-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
 
-## Features
+## Related topics
 
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
index d706d6b7d..a7c43b83d 100644
--- a/docs/catalog/blocks/code-typing.mdx
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -3,23 +3,24 @@ title: "Code Typing"
 description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
 ---
 
-# Code Typing
-
-Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
-
 `code` `code-animation` `typing` `developer`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add code-typing
+```text
+Add the Code Typing block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add code-typing
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add code-typing
 | Dimensions | 1920×1080 |
 | Duration | 5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `code-typing.html` | `compositions/code-typing.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="code-typing" data-composition-src="compositions/code-typing.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index ab7ee688e..346ebc2e1 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -3,23 +3,24 @@ title: "Cross Warp Morph"
 description: "Shader transition with cross-warped morphing"
 ---
 
-# Cross Warp Morph
-
-Shader transition with cross-warped morphing
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add cross-warp-morph
+```text
+Add the Cross Warp Morph block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add cross-warp-morph
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add cross-warp-morph
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `cross-warp-morph.html` | `compositions/cross-warp-morph.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="cross-warp-morph" data-composition-src="compositions/cross-warp-morph.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index 9e5804770..427cc7c5f 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -3,23 +3,24 @@ title: "Data Chart"
 description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
 ---
 
-# Data Chart
-
-Animated bar + line chart with staggered reveal, NYT-style typography, and value labels
-
 `data` `chart` `statistics`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add data-chart
+```text
+Add the Data Chart block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add data-chart
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add data-chart
 | Dimensions | 1920×1080 |
 | Duration | 15s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `data-chart.html` | `compositions/data-chart.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="data-chart" data-composition-src="compositions/data-chart.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index 18b9a5bb1..3bd87774e 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -3,23 +3,24 @@ title: "Domain Warp Dissolve"
 description: "Shader transition with fractal noise domain warping"
 ---
 
-# Domain Warp Dissolve
-
-Shader transition with fractal noise domain warping
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add domain-warp-dissolve
+```text
+Add the Domain Warp Dissolve block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add domain-warp-dissolve
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add domain-warp-dissolve
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `domain-warp-dissolve.html` | `compositions/domain-warp-dissolve.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="domain-warp-dissolve" data-composition-src="compositions/domain-warp-dissolve.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
index 3626f1083..db4d5a2a6 100644
--- a/docs/catalog/blocks/editorial-flash-overlay.mdx
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -3,23 +3,24 @@ title: "Editorial Flash Overlay"
 description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
 ---
 
-# Editorial Flash Overlay
-
-Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal
-
 `flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add editorial-flash-overlay
+```text
+Add the Editorial Flash Overlay block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add editorial-flash-overlay
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add editorial-flash-overlay
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `editorial-flash-overlay.html` | `compositions/editorial-flash-overlay.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="editorial-flash-overlay" data-composition-src="compositions/editorial-flash-overlay.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index e57d89f8e..f85df513e 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -3,23 +3,24 @@ title: "Flash Through White"
 description: "Shader transition with white flash crossfade"
 ---
 
-# Flash Through White
-
-Shader transition with white flash crossfade
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add flash-through-white
+```text
+Add the Flash Through White block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add flash-through-white
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add flash-through-white
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `flash-through-white.html` | `compositions/flash-through-white.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="flash-through-white" data-composition-src="compositions/flash-through-white.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index b6102cca9..eb128fe3d 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -3,23 +3,24 @@ title: "Flowchart Vertical"
 description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
 ---
 
-# Flowchart Vertical
-
-Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
-
 `diagram` `flowchart` `interactive` `portrait`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add flowchart-vertical
+```text
+Add the Flowchart Vertical block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add flowchart-vertical
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add flowchart-vertical
 | Dimensions | 1440×2560 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="flowchart-vertical" data-composition-src="compositions/flowchart-vertical.html" data-start="0" data-duration="12" data-track-index="1" data-width="1440" data-height="2560"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 690c255c2..0dbb6f7a8 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -3,23 +3,24 @@ title: "Flowchart"
 description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
 ---
 
-# Flowchart
-
-Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
-
 `diagram` `flowchart` `interactive`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add flowchart
+```text
+Add the Flowchart block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add flowchart
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add flowchart
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `flowchart.html` | `compositions/flowchart.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="flowchart" data-composition-src="compositions/flowchart.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
index 2dc72e472..2acd7eb4d 100644
--- a/docs/catalog/blocks/freeze-frame-dressing.mdx
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -3,23 +3,24 @@ title: "Freeze-Frame Dressing"
 description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
 ---
 
-# Freeze-Frame Dressing
-
-Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject
-
 `freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add freeze-frame-dressing
+```text
+Add the Freeze-Frame Dressing block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add freeze-frame-dressing
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add freeze-frame-dressing
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `freeze-frame-dressing.html` | `compositions/freeze-frame-dressing.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="freeze-frame-dressing" data-composition-src="compositions/freeze-frame-dressing.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index c56d507d2..67cdf5307 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -3,23 +3,24 @@ title: "Glitch"
 description: "Shader transition with digital glitch artifacts"
 ---
 
-# Glitch
-
-Shader transition with digital glitch artifacts
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add glitch
+```text
+Add the Glitch block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add glitch
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add glitch
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `glitch.html` | `compositions/glitch.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="glitch" data-composition-src="compositions/glitch.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index dd6510335..322025425 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -3,23 +3,24 @@ title: "Gravitational Lens"
 description: "Shader transition with gravitational lensing distortion"
 ---
 
-# Gravitational Lens
-
-Shader transition with gravitational lensing distortion
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add gravitational-lens
+```text
+Add the Gravitational Lens block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add gravitational-lens
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add gravitational-lens
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `gravitational-lens.html` | `compositions/gravitational-lens.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="gravitational-lens" data-composition-src="compositions/gravitational-lens.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
index ba9eb32c7..65f265d95 100644
--- a/docs/catalog/blocks/hw-frame.mdx
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -3,23 +3,24 @@ title: "Sketched Frame"
 description: "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)"
 ---
 
-# Sketched Frame
-
-Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)
-
 `handwritten` `frame` `media`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-frame
+```text
+Add the Sketched Frame block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-frame
+```
 
 ## Details
 
@@ -29,17 +30,25 @@ npx hyperframes add hw-frame
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-frame.html` | `compositions/hw-frame.html` | hyperframes:composition |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="hw-frame" data-composition-src="compositions/hw-frame.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
index 30e7ef1cd..eb9ddb14f 100644
--- a/docs/catalog/blocks/hw-path-text.mdx
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -3,23 +3,24 @@ title: "Text Along a Path"
 description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
 ---
 
-# Text Along a Path
-
-Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input
-
 `handwritten` `typography` `path` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-path-text
+```text
+Add the Text Along a Path block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-path-text
+```
 
 ## Details
 
@@ -29,17 +30,25 @@ npx hyperframes add hw-path-text
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-path-text.html` | `compositions/hw-path-text.html` | hyperframes:composition |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="hw-path-text" data-composition-src="compositions/hw-path-text.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
index 73fa2e80f..75e801e73 100644
--- a/docs/catalog/blocks/hw-pipeline.mdx
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -3,23 +3,24 @@ title: "Hand-Drawn Flowchart"
 description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
 ---
 
-# Hand-Drawn Flowchart
-
-Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list
-
 `handwritten` `diagram` `data-viz` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-pipeline
+```text
+Add the Hand-Drawn Flowchart block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-pipeline
+```
 
 ## Details
 
@@ -29,17 +30,25 @@ npx hyperframes add hw-pipeline
 | Dimensions | 1920×1080 |
 | Duration | 7s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-pipeline.html` | `compositions/hw-pipeline.html` | hyperframes:composition |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="hw-pipeline" data-composition-src="compositions/hw-pipeline.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
index cc49439c7..943055e58 100644
--- a/docs/catalog/blocks/hw-scribble-transition.mdx
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -3,23 +3,24 @@ title: "Scribble Transition"
 description: "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears"
 ---
 
-# Scribble Transition
-
-Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears
-
 `handwritten` `transition` `wipe`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-scribble-transition
+```text
+Add the Scribble Transition block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-scribble-transition
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add hw-scribble-transition
 | Dimensions | 1920×1080 |
 | Duration | 2.2s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-scribble-transition.html` | `compositions/hw-scribble-transition.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="hw-scribble-transition" data-composition-src="compositions/hw-scribble-transition.html" data-start="0" data-duration="2.2" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
index 361068f8f..c08c39b79 100644
--- a/docs/catalog/blocks/hw-text-cloud.mdx
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -3,23 +3,24 @@ title: "Speech Bubble"
 description: "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils"
 ---
 
-# Speech Bubble
-
-Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils
-
 `handwritten` `speech-bubble` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-text-cloud
+```text
+Add the Speech Bubble block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-text-cloud
+```
 
 ## Details
 
@@ -29,17 +30,25 @@ npx hyperframes add hw-text-cloud
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-text-cloud.html` | `compositions/hw-text-cloud.html` | hyperframes:composition |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="hw-text-cloud" data-composition-src="compositions/hw-text-cloud.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
index bf6fd9325..9c26f47f0 100644
--- a/docs/catalog/blocks/hw-title.mdx
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -3,23 +3,24 @@ title: "Handwritten Title"
 description: "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
 ---
 
-# Handwritten Title
-
-Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils
-
 `handwritten` `typography` `title-card` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-title
+```text
+Add the Handwritten Title block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-title
+```
 
 ## Details
 
@@ -29,17 +30,25 @@ npx hyperframes add hw-title
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-title.html` | `compositions/hw-title.html` | hyperframes:composition |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="hw-title" data-composition-src="compositions/hw-title.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index c74b2b832..58abe9c56 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -3,23 +3,24 @@ title: "Instagram Follow"
 description: "Animated Instagram follow overlay with profile card and follow button"
 ---
 
-# Instagram Follow
-
-Animated Instagram follow overlay with profile card and follow button
-
 `social` `overlay` `instagram`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add instagram-follow
+```text
+Add the Instagram Follow block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add instagram-follow
+```
 
 ## Details
 
@@ -29,17 +30,25 @@ npx hyperframes add instagram-follow
 | Dimensions | 1080×1920 |
 | Duration | 4.5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `instagram-follow.html` | `compositions/instagram-follow.html` | hyperframes:composition |
 | `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="instagram-follow" data-composition-src="compositions/instagram-follow.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1080" data-height="1920"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index 56a5979e7..0bdfe3edc 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -3,10 +3,6 @@ title: "iOS 26 Liquid Glass Home Screen"
 description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
 ---
 
-# iOS 26 Liquid Glass Home Screen
-
-3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.
-
 `liquid-glass-html-in-canvas` `webgpu` `3d` `iphone` `ios26` `notifications` `gltf` `html-in-canvas`
 
 <Warning>
@@ -15,15 +11,20 @@ description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add ios26-liquid-glass
+```text
+Add the iOS 26 Liquid Glass Home Screen block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add ios26-liquid-glass
+```
 
 ## Details
 
@@ -33,18 +34,52 @@ npx hyperframes add ios26-liquid-glass
 | Dimensions | 1920×1080 |
 | Duration | 15s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
 | `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
 | `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
+| `assets/icons/weather.jpg` | `assets/icons/weather.jpg` | hyperframes:asset |
+| `assets/icons/stocks.jpg` | `assets/icons/stocks.jpg` | hyperframes:asset |
+| `assets/icons/find-my.jpg` | `assets/icons/find-my.jpg` | hyperframes:asset |
+| `assets/icons/home.jpg` | `assets/icons/home.jpg` | hyperframes:asset |
+| `assets/icons/books.jpg` | `assets/icons/books.jpg` | hyperframes:asset |
+| `assets/icons/itunes-store.jpg` | `assets/icons/itunes-store.jpg` | hyperframes:asset |
+| `assets/icons/fitness.jpg` | `assets/icons/fitness.jpg` | hyperframes:asset |
+| `assets/icons/watch.jpg` | `assets/icons/watch.jpg` | hyperframes:asset |
+| `assets/icons/contacts.jpg` | `assets/icons/contacts.jpg` | hyperframes:asset |
+| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
+| `assets/icons/translate.jpg` | `assets/icons/translate.jpg` | hyperframes:asset |
+| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
+| `assets/icons/chatgpt.jpg` | `assets/icons/chatgpt.jpg` | hyperframes:asset |
+| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
+| `assets/icons/instagram.jpg` | `assets/icons/instagram.jpg` | hyperframes:asset |
+| `assets/icons/x.jpg` | `assets/icons/x.jpg` | hyperframes:asset |
+| `assets/icons/proton-mail.jpg` | `assets/icons/proton-mail.jpg` | hyperframes:asset |
+| `assets/icons/gmail.jpg` | `assets/icons/gmail.jpg` | hyperframes:asset |
+| `assets/icons/revolut.jpg` | `assets/icons/revolut.jpg` | hyperframes:asset |
+| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
+| `assets/icons/phone.jpg` | `assets/icons/phone.jpg` | hyperframes:asset |
+| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
+| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
+| `assets/icons/whatsapp.jpg` | `assets/icons/whatsapp.jpg` | hyperframes:asset |
+| `assets/icons/notify-messages.jpg` | `assets/icons/notify-messages.jpg` | hyperframes:asset |
+| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="ios26-liquid-glass" data-composition-src="compositions/ios26-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index 57ec50798..2220b42b9 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -3,23 +3,24 @@ title: "Light Leak"
 description: "Shader transition with cinematic light leak overlay"
 ---
 
-# Light Leak
-
-Shader transition with cinematic light leak overlay
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add light-leak
+```text
+Add the Light Leak block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add light-leak
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add light-leak
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `light-leak.html` | `compositions/light-leak.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="light-leak" data-composition-src="compositions/light-leak.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/liquid-glass-context-menu.mdx b/docs/catalog/blocks/liquid-glass-context-menu.mdx
index 1258b58f6..98339d71b 100644
--- a/docs/catalog/blocks/liquid-glass-context-menu.mdx
+++ b/docs/catalog/blocks/liquid-glass-context-menu.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass Context Menu"
 description: "Frosted glass context menu panel drifting over an aurora shader background"
 ---
 
-# Liquid Glass Context Menu
-
-Frosted glass context menu panel drifting over an aurora shader background
-
 `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
 
 <Warning>
@@ -15,15 +11,20 @@ Frosted glass context menu panel drifting over an aurora shader background
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add liquid-glass-context-menu
+```text
+Add the Liquid Glass Context Menu block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add liquid-glass-context-menu
+```
 
 ## Details
 
@@ -33,16 +34,25 @@ npx hyperframes add liquid-glass-context-menu
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-context-menu.html` | `compositions/liquid-glass-context-menu.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="liquid-glass-context-menu" data-composition-src="compositions/liquid-glass-context-menu.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/liquid-glass-media-controls.mdx b/docs/catalog/blocks/liquid-glass-media-controls.mdx
index fd1c1b532..cdd934861 100644
--- a/docs/catalog/blocks/liquid-glass-media-controls.mdx
+++ b/docs/catalog/blocks/liquid-glass-media-controls.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass Media Controls"
 description: "Frosted glass media control panels spreading over an aurora shader background"
 ---
 
-# Liquid Glass Media Controls
-
-Frosted glass media control panels spreading over an aurora shader background
-
 `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
 
 <Warning>
@@ -15,15 +11,20 @@ Frosted glass media control panels spreading over an aurora shader background
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add liquid-glass-media-controls
+```text
+Add the Liquid Glass Media Controls block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add liquid-glass-media-controls
+```
 
 ## Details
 
@@ -33,16 +34,25 @@ npx hyperframes add liquid-glass-media-controls
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-media-controls.html` | `compositions/liquid-glass-media-controls.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="liquid-glass-media-controls" data-composition-src="compositions/liquid-glass-media-controls.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index d29109501..8c092dfac 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass Notification"
 description: "Frosted glass notification cards floating over an aurora shader background"
 ---
 
-# Liquid Glass Notification
-
-Frosted glass notification cards floating over an aurora shader background
-
 `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
 
 <Warning>
@@ -15,15 +11,20 @@ Frosted glass notification cards floating over an aurora shader background
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add liquid-glass-notification
+```text
+Add the Liquid Glass Notification block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add liquid-glass-notification
+```
 
 ## Details
 
@@ -33,16 +34,26 @@ npx hyperframes add liquid-glass-notification
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
+| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="liquid-glass-notification" data-composition-src="compositions/liquid-glass-notification.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index 19d7ccc10..58fafbfc3 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass Widgets"
 description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
 ---
 
-# Liquid Glass Widgets
-
-Frosted glass stat cards, showcase panel and pill chips over an aurora shader background
-
 `html-in-canvas` `liquid-glass-html-in-canvas` `webgpu`
 
 <Warning>
@@ -15,15 +11,20 @@ Frosted glass stat cards, showcase panel and pill chips over an aurora shader ba
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add liquid-glass-widgets
+```text
+Add the Liquid Glass Widgets block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add liquid-glass-widgets
+```
 
 ## Details
 
@@ -33,16 +34,26 @@ npx hyperframes add liquid-glass-widgets
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-widgets.html` | `compositions/liquid-glass-widgets.html` | hyperframes:composition |
+| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="liquid-glass-widgets" data-composition-src="compositions/liquid-glass-widgets.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index 3cf9abe00..676958ee8 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -3,23 +3,24 @@ title: "Logo Outro"
 description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
 ---
 
-# Logo Outro
-
-Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill
-
 `branding` `outro` `logo`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add logo-outro
+```text
+Add the Logo Outro block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add logo-outro
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add logo-outro
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `logo-outro.html` | `compositions/logo-outro.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="logo-outro" data-composition-src="compositions/logo-outro.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
index 1d08c4067..42bc83ecf 100644
--- a/docs/catalog/blocks/lower-third-bild.mdx
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — BILD Style"
 description: "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
 ---
 
-# Lower Third — BILD Style
-
-News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.
-
 `broadcast` `lower-third` `news` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lower-third-bild
+```text
+Add the Lower Third — BILD Style block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lower-third-bild
+```
 
 ## Details
 
@@ -29,7 +30,7 @@ npx hyperframes add lower-third-bild
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
@@ -37,10 +38,18 @@ npx hyperframes add lower-third-bild
 | `assets/fonts/BarlowCondensed-Bold.woff2` | `compositions/assets/fonts/BarlowCondensed-Bold.woff2` | hyperframes:asset |
 | `assets/fonts/BarlowCondensed-ExtraBold.woff2` | `compositions/assets/fonts/BarlowCondensed-ExtraBold.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lower-third-bild" data-composition-src="compositions/lower-third-bild.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-accent-underline.mdx b/docs/catalog/blocks/lt-accent-underline.mdx
index 1a90e8797..59a4111b2 100644
--- a/docs/catalog/blocks/lt-accent-underline.mdx
+++ b/docs/catalog/blocks/lt-accent-underline.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Accent Underline"
 description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
 ---
 
-# Lower Third — Accent Underline
-
-Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility
-
 `lower-third` `overlay` `podcast` `interview` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-accent-underline
+```text
+Add the Lower Third — Accent Underline block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-accent-underline
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-accent-underline
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-accent-underline.html` | `compositions/lt-accent-underline.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-accent-underline" data-composition-src="compositions/lt-accent-underline.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-bold-block.mdx b/docs/catalog/blocks/lt-bold-block.mdx
index 73e66db6b..dfa9623c4 100644
--- a/docs/catalog/blocks/lt-bold-block.mdx
+++ b/docs/catalog/blocks/lt-bold-block.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Bold Block"
 description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
 ---
 
-# Lower Third — Bold Block
-
-High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops
-
 `lower-third` `overlay` `podcast` `interview` `bold`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-bold-block
+```text
+Add the Lower Third — Bold Block block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-bold-block
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-bold-block
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-bold-block.html` | `compositions/lt-bold-block.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-bold-block" data-composition-src="compositions/lt-bold-block.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-clean-bar.mdx b/docs/catalog/blocks/lt-clean-bar.mdx
index 9ab0df1e9..59129b4a7 100644
--- a/docs/catalog/blocks/lt-clean-bar.mdx
+++ b/docs/catalog/blocks/lt-clean-bar.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Clean Bar"
 description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
 ---
 
-# Lower Third — Clean Bar
-
-Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance
-
 `lower-third` `overlay` `podcast` `interview`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-clean-bar
+```text
+Add the Lower Third — Clean Bar block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-clean-bar
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-clean-bar
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-clean-bar.html` | `compositions/lt-clean-bar.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-clean-bar" data-composition-src="compositions/lt-clean-bar.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-color-block.mdx b/docs/catalog/blocks/lt-color-block.mdx
index 570556d4b..8f2a845bd 100644
--- a/docs/catalog/blocks/lt-color-block.mdx
+++ b/docs/catalog/blocks/lt-color-block.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Color Block"
 description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
 ---
 
-# Lower Third — Color Block
-
-High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role
-
 `lower-third` `overlay` `podcast` `interview` `bold`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-color-block
+```text
+Add the Lower Third — Color Block block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-color-block
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-color-block
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-color-block.html` | `compositions/lt-color-block.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-color-block" data-composition-src="compositions/lt-color-block.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-dark-card.mdx b/docs/catalog/blocks/lt-dark-card.mdx
index 7c26fba24..6bc382841 100644
--- a/docs/catalog/blocks/lt-dark-card.mdx
+++ b/docs/catalog/blocks/lt-dark-card.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Dark Card"
 description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
 ---
 
-# Lower Third — Dark Card
-
-Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance
-
 `lower-third` `overlay` `podcast` `interview` `dark`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-dark-card
+```text
+Add the Lower Third — Dark Card block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-dark-card
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-dark-card
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-dark-card.html` | `compositions/lt-dark-card.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-dark-card" data-composition-src="compositions/lt-dark-card.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-kicker-name.mdx b/docs/catalog/blocks/lt-kicker-name.mdx
index 6b1688444..a6af604c4 100644
--- a/docs/catalog/blocks/lt-kicker-name.mdx
+++ b/docs/catalog/blocks/lt-kicker-name.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Kicker Name"
 description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
 ---
 
-# Lower Third — Kicker Name
-
-Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage
-
 `lower-third` `overlay` `podcast` `interview` `bold`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-kicker-name
+```text
+Add the Lower Third — Kicker Name block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-kicker-name
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-kicker-name
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-kicker-name.html` | `compositions/lt-kicker-name.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-kicker-name" data-composition-src="compositions/lt-kicker-name.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-mask-reveal.mdx b/docs/catalog/blocks/lt-mask-reveal.mdx
index bf1c581f8..abf98daa1 100644
--- a/docs/catalog/blocks/lt-mask-reveal.mdx
+++ b/docs/catalog/blocks/lt-mask-reveal.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Mask Reveal"
 description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
 ---
 
-# Lower Third — Mask Reveal
-
-Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage
-
 `lower-third` `overlay` `podcast` `interview` `bold`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-mask-reveal
+```text
+Add the Lower Third — Mask Reveal block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-mask-reveal
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-mask-reveal
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-mask-reveal.html` | `compositions/lt-mask-reveal.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-mask-reveal" data-composition-src="compositions/lt-mask-reveal.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-side-rule.mdx b/docs/catalog/blocks/lt-side-rule.mdx
index 01cd94954..5a775128e 100644
--- a/docs/catalog/blocks/lt-side-rule.mdx
+++ b/docs/catalog/blocks/lt-side-rule.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Side Rule"
 description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
 ---
 
-# Lower Third — Side Rule
-
-Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage
-
 `lower-third` `overlay` `podcast` `interview` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-side-rule
+```text
+Add the Lower Third — Side Rule block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-side-rule
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-side-rule
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-side-rule.html` | `compositions/lt-side-rule.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-side-rule" data-composition-src="compositions/lt-side-rule.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-soft-pill.mdx b/docs/catalog/blocks/lt-soft-pill.mdx
index dce100400..406c9f8da 100644
--- a/docs/catalog/blocks/lt-soft-pill.mdx
+++ b/docs/catalog/blocks/lt-soft-pill.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Soft Pill"
 description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
 ---
 
-# Lower Third — Soft Pill
-
-Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance
-
 `lower-third` `overlay` `podcast` `interview` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-soft-pill
+```text
+Add the Lower Third — Soft Pill block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-soft-pill
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-soft-pill
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-soft-pill.html` | `compositions/lt-soft-pill.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-soft-pill" data-composition-src="compositions/lt-soft-pill.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/lt-stack-bars.mdx b/docs/catalog/blocks/lt-stack-bars.mdx
index a21d250da..21a4b48b5 100644
--- a/docs/catalog/blocks/lt-stack-bars.mdx
+++ b/docs/catalog/blocks/lt-stack-bars.mdx
@@ -3,23 +3,24 @@ title: "Lower Third — Stack Bars"
 description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
 ---
 
-# Lower Third — Stack Bars
-
-Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right
-
 `lower-third` `overlay` `podcast` `interview` `bold`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add lt-stack-bars
+```text
+Add the Lower Third — Stack Bars block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add lt-stack-bars
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add lt-stack-bars
 | Dimensions | 1920×1080 |
 | Duration | 4.8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `lt-stack-bars.html` | `compositions/lt-stack-bars.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="lt-stack-bars" data-composition-src="compositions/lt-stack-bars.html" data-start="0" data-duration="4.8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index 3e5409f0f..58508174f 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -3,23 +3,24 @@ title: "macOS Notification"
 description: "Animated macOS-style notification banner with app icon and message"
 ---
 
-# macOS Notification
-
-Animated macOS-style notification banner with app icon and message
-
 `social` `overlay` `notification`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add macos-notification
+```text
+Add the macOS Notification block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add macos-notification
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add macos-notification
 | Dimensions | 1920×1080 |
 | Duration | 5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `macos-notification.html` | `compositions/macos-notification.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="macos-notification" data-composition-src="compositions/macos-notification.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index e878221c2..51f4b3453 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -3,10 +3,6 @@ title: "macOS Tahoe Liquid Glass Desktop"
 description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
 ---
 
-# macOS Tahoe Liquid Glass Desktop
-
-3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.
-
 `html-in-canvas` `3d` `macos` `tahoe` `gltf`
 
 <Warning>
@@ -15,15 +11,20 @@ description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finde
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add macos-tahoe-liquid-glass
+```text
+Add the macOS Tahoe Liquid Glass Desktop block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add macos-tahoe-liquid-glass
+```
 
 ## Details
 
@@ -33,18 +34,42 @@ npx hyperframes add macos-tahoe-liquid-glass
 | Dimensions | 1920×1080 |
 | Duration | 15s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `macos-tahoe-liquid-glass.html` | `compositions/macos-tahoe-liquid-glass.html` | hyperframes:composition |
 | `models/macbook.glb` | `models/macbook.glb` | hyperframes:asset |
-| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
+| `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | hyperframes:asset |
+| `assets/icons/finder.png` | `assets/icons/finder.png` | hyperframes:asset |
+| `assets/icons/safari.jpg` | `assets/icons/safari.jpg` | hyperframes:asset |
+| `assets/icons/mail.jpg` | `assets/icons/mail.jpg` | hyperframes:asset |
+| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
+| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
+| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
+| `assets/icons/toast-messages.jpg` | `assets/icons/toast-messages.jpg` | hyperframes:asset |
+| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
+| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
+| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
+| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
+| `assets/icons/dock-finder.png` | `assets/icons/dock-finder.png` | hyperframes:asset |
+| `assets/icons/dock-safari.jpg` | `assets/icons/dock-safari.jpg` | hyperframes:asset |
+| `assets/icons/dock-mail.jpg` | `assets/icons/dock-mail.jpg` | hyperframes:asset |
+| `assets/icons/dock-photos.jpg` | `assets/icons/dock-photos.jpg` | hyperframes:asset |
+| `assets/icons/dock-music.jpg` | `assets/icons/dock-music.jpg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="macos-tahoe-liquid-glass" data-composition-src="compositions/macos-tahoe-liquid-glass.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
index ebd3e4129..101459f7f 100644
--- a/docs/catalog/blocks/mk-background.mdx
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -3,23 +3,24 @@ title: "Minimal Gradient Background"
 description: "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode"
 ---
 
-# Minimal Gradient Background
-
-Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode
-
 `background` `gradient` `minimal` `professional` `presentation`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-background
+```text
+Add the Minimal Gradient Background block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-background
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add mk-background
 | Dimensions | 1920×1080 |
 | Duration | 10s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-background.html` | `compositions/mk-background.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="mk-background" data-composition-src="compositions/mk-background.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
index 42a47419d..cd007cdcb 100644
--- a/docs/catalog/blocks/mk-callout-highlight.mdx
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -3,23 +3,24 @@ title: "Word-Sweep Highlight"
 description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
 ---
 
-# Word-Sweep Highlight
-
-A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover
-
 `typography` `karaoke` `captions` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-callout-highlight
+```text
+Add the Word-Sweep Highlight block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-callout-highlight
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add mk-callout-highlight
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-callout-highlight.html` | `compositions/mk-callout-highlight.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="mk-callout-highlight" data-composition-src="compositions/mk-callout-highlight.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
index 170069210..2e53f6585 100644
--- a/docs/catalog/blocks/mk-clone-wall-transition.mdx
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -3,23 +3,24 @@ title: "Text Clone Wall Transition"
 description: "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
 ---
 
-# Text Clone Wall Transition
-
-Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered
-
 `transition` `typography` `wipe`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-clone-wall-transition
+```text
+Add the Text Clone Wall Transition block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-clone-wall-transition
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add mk-clone-wall-transition
 | Dimensions | 1920×1080 |
 | Duration | 2.4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-clone-wall-transition.html` | `compositions/mk-clone-wall-transition.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="mk-clone-wall-transition" data-composition-src="compositions/mk-clone-wall-transition.html" data-start="0" data-duration="2.4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
index a8813964f..0ce436deb 100644
--- a/docs/catalog/blocks/mk-line-graph.mdx
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -3,23 +3,24 @@ title: "Minimal Line Graph"
 description: "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend"
 ---
 
-# Minimal Line Graph
-
-One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend
-
 `data-viz` `chart` `graph` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-line-graph
+```text
+Add the Minimal Line Graph block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-line-graph
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add mk-line-graph
 | Dimensions | 1920×1080 |
 | Duration | 7s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-line-graph.html` | `compositions/mk-line-graph.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="mk-line-graph" data-composition-src="compositions/mk-line-graph.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
index 9148e41b9..a743072f2 100644
--- a/docs/catalog/blocks/mk-placeholder-grid.mdx
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -3,23 +3,24 @@ title: "Rounded Media Grid"
 description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
 ---
 
-# Rounded Media Grid
-
-N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle
-
 `placeholder` `media` `grid` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-placeholder-grid
+```text
+Add the Rounded Media Grid block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-placeholder-grid
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add mk-placeholder-grid
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-placeholder-grid.html` | `compositions/mk-placeholder-grid.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="mk-placeholder-grid" data-composition-src="compositions/mk-placeholder-grid.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
index 46ff095a5..ac7bc07a6 100644
--- a/docs/catalog/blocks/mk-progress-stat.mdx
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -3,23 +3,24 @@ title: "Count-Up Stat Card"
 description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
 ---
 
-# Count-Up Stat Card
-
-Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes
-
 `data-viz` `stat` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-progress-stat
+```text
+Add the Count-Up Stat Card block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-progress-stat
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add mk-progress-stat
 | Dimensions | 1920×1080 |
 | Duration | 7s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-progress-stat.html` | `compositions/mk-progress-stat.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="mk-progress-stat" data-composition-src="compositions/mk-progress-stat.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
index f6c64bc37..e5624a085 100644
--- a/docs/catalog/blocks/mk-specs-list.mdx
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -3,23 +3,24 @@ title: "Specs Checklist"
 description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
 ---
 
-# Specs Checklist
-
-Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes
-
 `data-viz` `list` `minimal` `professional`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-specs-list
+```text
+Add the Specs Checklist block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-specs-list
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add mk-specs-list
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-specs-list.html` | `compositions/mk-specs-list.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="mk-specs-list" data-composition-src="compositions/mk-specs-list.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/news-ticker.mdx b/docs/catalog/blocks/news-ticker.mdx
index 33e97da50..96ff4493c 100644
--- a/docs/catalog/blocks/news-ticker.mdx
+++ b/docs/catalog/blocks/news-ticker.mdx
@@ -3,23 +3,24 @@ title: "News Ticker"
 description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
 ---
 
-# News Ticker
-
-Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.
-
 `lower-third` `overlay` `news` `ticker`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add news-ticker
+```text
+Add the News Ticker block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add news-ticker
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add news-ticker
 | Dimensions | 1920×1080 |
 | Duration | 7s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `news-ticker.html` | `compositions/news-ticker.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="news-ticker" data-composition-src="compositions/news-ticker.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/north-korea-locked-down.mdx b/docs/catalog/blocks/north-korea-locked-down.mdx
index 55262c7e6..2145aa075 100644
--- a/docs/catalog/blocks/north-korea-locked-down.mdx
+++ b/docs/catalog/blocks/north-korea-locked-down.mdx
@@ -3,10 +3,6 @@ title: "North Korea Locked Down"
 description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
 ---
 
-# North Korea Locked Down
-
-Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.
-
 `showcase` `map` `annotation` `youtube` `kinetic`
 
 Created by [Stronkter](https://x.com/Stronkter).
@@ -19,15 +15,20 @@ use 📷HyperFrames by HeyGen and Image Gen  if you need it for assets or like p
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add north-korea-locked-down
+```text
+Add the North Korea Locked Down block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add north-korea-locked-down
+```
 
 ## Details
 
@@ -37,17 +38,25 @@ npx hyperframes add north-korea-locked-down
 | Dimensions | 1920×1080 |
 | Duration | 7s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `north-korea-locked-down.html` | `compositions/north-korea-locked-down.html` | hyperframes:composition |
 | `assets/korea-map.png` | `assets/korea-map.png` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="north-korea-locked-down" data-composition-src="compositions/north-korea-locked-down.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/nyc-paris-flight.mdx b/docs/catalog/blocks/nyc-paris-flight.mdx
index f384e7623..b26fcec17 100644
--- a/docs/catalog/blocks/nyc-paris-flight.mdx
+++ b/docs/catalog/blocks/nyc-paris-flight.mdx
@@ -3,10 +3,6 @@ title: "NYC Paris Flight"
 description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
 ---
 
-# NYC Paris Flight
-
-Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.
-
 `showcase` `travel` `map` `youtube` `sfx`
 
 Created by [Stronkter](https://x.com/Stronkter).
@@ -19,15 +15,20 @@ Created by [Stronkter](https://x.com/Stronkter).
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add nyc-paris-flight
+```text
+Add the NYC Paris Flight block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add nyc-paris-flight
+```
 
 ## Details
 
@@ -37,7 +38,7 @@ npx hyperframes add nyc-paris-flight
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
@@ -45,10 +46,18 @@ npx hyperframes add nyc-paris-flight
 | `assets/map-nyc-paris.png` | `assets/map-nyc-paris.png` | hyperframes:asset |
 | `assets/sfx-mix.wav` | `assets/sfx-mix.wav` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="nyc-paris-flight" data-composition-src="compositions/nyc-paris-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
index 2613b2296..2bf876eec 100644
--- a/docs/catalog/blocks/organic-light-leak-overlay.mdx
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -3,23 +3,24 @@ title: "Organic Light Leak Overlay"
 description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
 ---
 
-# Organic Light Leak Overlay
-
-Finite CSS light-leak overlay for memory beats and motivated transitions
-
 `light-leak` `film` `memory` `transition` `overlay` `media-treatment-overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add organic-light-leak-overlay
+```text
+Add the Organic Light Leak Overlay block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add organic-light-leak-overlay
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add organic-light-leak-overlay
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `organic-light-leak-overlay.html` | `compositions/organic-light-leak-overlay.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="organic-light-leak-overlay" data-composition-src="compositions/organic-light-leak-overlay.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index 1f4c7bc7f..9fbd55815 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -3,23 +3,24 @@ title: "Reddit Post Card"
 description: "Animated Reddit post card overlay with upvotes and comments"
 ---
 
-# Reddit Post Card
-
-Animated Reddit post card overlay with upvotes and comments
-
 `social` `overlay` `reddit`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add reddit-post
+```text
+Add the Reddit Post Card block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add reddit-post
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add reddit-post
 | Dimensions | 1920×1080 |
 | Duration | 5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `reddit-post.html` | `compositions/reddit-post.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="reddit-post" data-composition-src="compositions/reddit-post.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index c7fc61c5b..4246e3f33 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -3,23 +3,24 @@ title: "Ridged Burn"
 description: "Shader transition with ridged turbulence burn effect"
 ---
 
-# Ridged Burn
-
-Shader transition with ridged turbulence burn effect
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add ridged-burn
+```text
+Add the Ridged Burn block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add ridged-burn
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add ridged-burn
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `ridged-burn.html` | `compositions/ridged-burn.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="ridged-burn" data-composition-src="compositions/ridged-burn.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index 09acb6cb0..a6fd37982 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -3,23 +3,24 @@ title: "Ripple Waves"
 description: "Shader transition with concentric ripple wave distortion"
 ---
 
-# Ripple Waves
-
-Shader transition with concentric ripple wave distortion
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add ripple-waves
+```text
+Add the Ripple Waves block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add ripple-waves
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add ripple-waves
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `ripple-waves.html` | `compositions/ripple-waves.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="ripple-waves" data-composition-src="compositions/ripple-waves.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index 01fbd5175..18da36e53 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -3,23 +3,24 @@ title: "SDF Iris"
 description: "Shader transition with signed distance field iris reveal"
 ---
 
-# SDF Iris
-
-Shader transition with signed distance field iris reveal
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add sdf-iris
+```text
+Add the SDF Iris block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add sdf-iris
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add sdf-iris
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `sdf-iris.html` | `compositions/sdf-iris.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="sdf-iris" data-composition-src="compositions/sdf-iris.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/spain-map.mdx b/docs/catalog/blocks/spain-map.mdx
index afbc8f367..743397926 100644
--- a/docs/catalog/blocks/spain-map.mdx
+++ b/docs/catalog/blocks/spain-map.mdx
@@ -3,23 +3,24 @@ title: "Spain Map"
 description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
 ---
 
-# Spain Map
-
-Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection
-
 `data` `map` `geography` `spain` `europe` `choropleth`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add spain-map
+```text
+Add the Spain Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add spain-map
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add spain-map
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `spain-map.html` | `compositions/spain-map.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="spain-map" data-composition-src="compositions/spain-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index 9dcef7fe8..196a6c236 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -3,23 +3,24 @@ title: "Spotify Now Playing"
 description: "Animated Spotify now-playing card with album art and progress bar"
 ---
 
-# Spotify Now Playing
-
-Animated Spotify now-playing card with album art and progress bar
-
 `social` `overlay` `spotify`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add spotify-card
+```text
+Add the Spotify Now Playing block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add spotify-card
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add spotify-card
 | Dimensions | 1080×1920 |
 | Duration | 5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `spotify-card.html` | `compositions/spotify-card.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="spotify-card" data-composition-src="compositions/spotify-card.html" data-start="0" data-duration="5" data-track-index="1" data-width="1080" data-height="1920"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index 622e07d8b..984686419 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -3,23 +3,24 @@ title: "Swirl Vortex"
 description: "Shader transition with swirling vortex distortion"
 ---
 
-# Swirl Vortex
-
-Shader transition with swirling vortex distortion
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add swirl-vortex
+```text
+Add the Swirl Vortex block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add swirl-vortex
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add swirl-vortex
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `swirl-vortex.html` | `compositions/swirl-vortex.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="swirl-vortex" data-composition-src="compositions/swirl-vortex.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index ffa8d5132..a478d2cda 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -3,23 +3,24 @@ title: "Thermal Distortion"
 description: "Shader transition with heat haze thermal distortion"
 ---
 
-# Thermal Distortion
-
-Shader transition with heat haze thermal distortion
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add thermal-distortion
+```text
+Add the Thermal Distortion block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add thermal-distortion
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add thermal-distortion
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `thermal-distortion.html` | `compositions/thermal-distortion.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="thermal-distortion" data-composition-src="compositions/thermal-distortion.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index e68a78734..510cf9c1d 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -3,23 +3,24 @@ title: "TikTok Follow"
 description: "Animated TikTok follow overlay with profile card and follow button"
 ---
 
-# TikTok Follow
-
-Animated TikTok follow overlay with profile card and follow button
-
 `social` `overlay` `tiktok`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add tiktok-follow
+```text
+Add the TikTok Follow block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add tiktok-follow
+```
 
 ## Details
 
@@ -29,17 +30,25 @@ npx hyperframes add tiktok-follow
 | Dimensions | 1080×1920 |
 | Duration | 4.5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `tiktok-follow.html` | `compositions/tiktok-follow.html` | hyperframes:composition |
 | `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="tiktok-follow" data-composition-src="compositions/tiktok-follow.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1080" data-height="1920"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index 67b015bfa..886764508 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -3,23 +3,24 @@ title: "3D Transitions"
 description: "Showcase of 3D perspective flip and rotate transitions"
 ---
 
-# 3D Transitions
-
-Showcase of 3D perspective flip and rotate transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-3d
+```text
+Add the 3D Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-3d
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-3d
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-3d.html` | `compositions/transitions-3d.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-3d" data-composition-src="compositions/transitions-3d.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index d09dd1d89..4ade0819a 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -3,23 +3,24 @@ title: "Blur Transitions"
 description: "Showcase of blur-based transitions between scenes"
 ---
 
-# Blur Transitions
-
-Showcase of blur-based transitions between scenes
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-blur
+```text
+Add the Blur Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-blur
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-blur
 | Dimensions | 1920×1080 |
 | Duration | 20s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-blur.html` | `compositions/transitions-blur.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-blur" data-composition-src="compositions/transitions-blur.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index e22448ced..f53ef285a 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -3,23 +3,24 @@ title: "Cover Transitions"
 description: "Showcase of cover/uncover slide transitions"
 ---
 
-# Cover Transitions
-
-Showcase of cover/uncover slide transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-cover
+```text
+Add the Cover Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-cover
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-cover
 | Dimensions | 1920×1080 |
 | Duration | 21s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-cover.html` | `compositions/transitions-cover.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-cover" data-composition-src="compositions/transitions-cover.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index e3598f8ab..12e7bc6b1 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -3,23 +3,24 @@ title: "Destruction Transitions"
 description: "Showcase of destructive break-apart transitions"
 ---
 
-# Destruction Transitions
-
-Showcase of destructive break-apart transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-destruction
+```text
+Add the Destruction Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-destruction
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-destruction
 | Dimensions | 1920×1080 |
 | Duration | 14s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-destruction.html` | `compositions/transitions-destruction.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-destruction" data-composition-src="compositions/transitions-destruction.html" data-start="0" data-duration="14" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index f49f24e38..023f8a5c7 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -3,23 +3,24 @@ title: "Dissolve Transitions"
 description: "Showcase of dissolve and fade transitions"
 ---
 
-# Dissolve Transitions
-
-Showcase of dissolve and fade transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-dissolve
+```text
+Add the Dissolve Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-dissolve
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-dissolve
 | Dimensions | 1920×1080 |
 | Duration | 24s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-dissolve.html` | `compositions/transitions-dissolve.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-dissolve" data-composition-src="compositions/transitions-dissolve.html" data-start="0" data-duration="24" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index 9d57d74ef..a32e29bf3 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -3,23 +3,24 @@ title: "Distortion Transitions"
 description: "Showcase of warp and distortion transitions"
 ---
 
-# Distortion Transitions
-
-Showcase of warp and distortion transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-distortion
+```text
+Add the Distortion Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-distortion
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-distortion
 | Dimensions | 1920×1080 |
 | Duration | 21s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-distortion.html` | `compositions/transitions-distortion.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-distortion" data-composition-src="compositions/transitions-distortion.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index 4cb164ecf..6056825c6 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -3,23 +3,24 @@ title: "Grid Transitions"
 description: "Showcase of grid-based tile transitions"
 ---
 
-# Grid Transitions
-
-Showcase of grid-based tile transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-grid
+```text
+Add the Grid Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-grid
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-grid
 | Dimensions | 1920×1080 |
 | Duration | 11s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-grid.html` | `compositions/transitions-grid.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-grid" data-composition-src="compositions/transitions-grid.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index 74b2ea1aa..7f16fd994 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -3,23 +3,24 @@ title: "Light Transitions"
 description: "Showcase of light-based glow and flash transitions"
 ---
 
-# Light Transitions
-
-Showcase of light-based glow and flash transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-light
+```text
+Add the Light Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-light
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-light
 | Dimensions | 1920×1080 |
 | Duration | 21s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-light.html` | `compositions/transitions-light.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-light" data-composition-src="compositions/transitions-light.html" data-start="0" data-duration="21" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index 0553b381c..b71df6a60 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -3,23 +3,24 @@ title: "Mechanical Transitions"
 description: "Showcase of mechanical shutter and iris transitions"
 ---
 
-# Mechanical Transitions
-
-Showcase of mechanical shutter and iris transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-mechanical
+```text
+Add the Mechanical Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-mechanical
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-mechanical
 | Dimensions | 1920×1080 |
 | Duration | 15s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-mechanical.html` | `compositions/transitions-mechanical.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-mechanical" data-composition-src="compositions/transitions-mechanical.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index bd7f44179..a1f871fae 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -3,23 +3,24 @@ title: "Other Transitions"
 description: "Showcase of miscellaneous creative transitions"
 ---
 
-# Other Transitions
-
-Showcase of miscellaneous creative transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-other
+```text
+Add the Other Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-other
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-other
 | Dimensions | 1920×1080 |
 | Duration | 20s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-other.html` | `compositions/transitions-other.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-other" data-composition-src="compositions/transitions-other.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index aabd0fd57..6bc7bb593 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -3,23 +3,24 @@ title: "Push Transitions"
 description: "Showcase of push and slide transitions"
 ---
 
-# Push Transitions
-
-Showcase of push and slide transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-push
+```text
+Add the Push Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-push
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-push
 | Dimensions | 1920×1080 |
 | Duration | 24s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-push.html` | `compositions/transitions-push.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-push" data-composition-src="compositions/transitions-push.html" data-start="0" data-duration="24" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index 3bde01c61..c307b81c6 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -3,23 +3,24 @@ title: "Radial Transitions"
 description: "Showcase of radial wipe and reveal transitions"
 ---
 
-# Radial Transitions
-
-Showcase of radial wipe and reveal transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-radial
+```text
+Add the Radial Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-radial
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-radial
 | Dimensions | 1920×1080 |
 | Duration | 20s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-radial.html` | `compositions/transitions-radial.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-radial" data-composition-src="compositions/transitions-radial.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index 080035ba0..646ca6efc 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -3,23 +3,24 @@ title: "Scale Transitions"
 description: "Showcase of scale and zoom transitions"
 ---
 
-# Scale Transitions
-
-Showcase of scale and zoom transitions
-
 `transition` `showcase`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add transitions-scale
+```text
+Add the Scale Transitions block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add transitions-scale
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add transitions-scale
 | Dimensions | 1920×1080 |
 | Duration | 15s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `transitions-scale.html` | `compositions/transitions-scale.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="transitions-scale" data-composition-src="compositions/transitions-scale.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index 4b981de53..2f878ee6e 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -3,23 +3,24 @@ title: "3D UI Reveal"
 description: "Perspective 3D reveal animation for UI elements"
 ---
 
-# 3D UI Reveal
-
-Perspective 3D reveal animation for UI elements
-
 `showcase` `3d` `reveal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add ui-3d-reveal
+```text
+Add the 3D UI Reveal block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add ui-3d-reveal
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add ui-3d-reveal
 | Dimensions | 1920×1080 |
 | Duration | 13s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `ui-3d-reveal.html` | `compositions/ui-3d-reveal.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="ui-3d-reveal" data-composition-src="compositions/ui-3d-reveal.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/us-map-bubble.mdx b/docs/catalog/blocks/us-map-bubble.mdx
index 65bbf9001..19a930729 100644
--- a/docs/catalog/blocks/us-map-bubble.mdx
+++ b/docs/catalog/blocks/us-map-bubble.mdx
@@ -3,23 +3,24 @@ title: "US Bubble Map"
 description: "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map"
 ---
 
-# US Bubble Map
-
-Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map
-
 `data` `map` `geography` `usa` `bubble` `cities`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add us-map-bubble
+```text
+Add the US Bubble Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add us-map-bubble
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add us-map-bubble
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `us-map-bubble.html` | `compositions/us-map-bubble.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="us-map-bubble" data-composition-src="compositions/us-map-bubble.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/us-map-flow.mdx b/docs/catalog/blocks/us-map-flow.mdx
index c63057fae..2e0a67df4 100644
--- a/docs/catalog/blocks/us-map-flow.mdx
+++ b/docs/catalog/blocks/us-map-flow.mdx
@@ -3,23 +3,24 @@ title: "US Flow Map"
 description: "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization"
 ---
 
-# US Flow Map
-
-Animated connection arcs between US cities over a base map — composable origin-destination flow visualization
-
 `data` `map` `geography` `usa` `flow` `connections` `arcs`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add us-map-flow
+```text
+Add the US Flow Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add us-map-flow
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add us-map-flow
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `us-map-flow.html` | `compositions/us-map-flow.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="us-map-flow" data-composition-src="compositions/us-map-flow.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/us-map-hex.mdx b/docs/catalog/blocks/us-map-hex.mdx
index 8736304a7..59d35ec7f 100644
--- a/docs/catalog/blocks/us-map-hex.mdx
+++ b/docs/catalog/blocks/us-map-hex.mdx
@@ -3,23 +3,24 @@ title: "US Hex Grid Map"
 description: "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label"
 ---
 
-# US Hex Grid Map
-
-Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label
-
 `data` `map` `geography` `usa` `hexgrid` `tilegrid`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add us-map-hex
+```text
+Add the US Hex Grid Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add us-map-hex
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add us-map-hex
 | Dimensions | 1920×1080 |
 | Duration | 10s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `us-map-hex.html` | `compositions/us-map-hex.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="us-map-hex" data-composition-src="compositions/us-map-hex.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/us-map.mdx b/docs/catalog/blocks/us-map.mdx
index 8508ce0c0..f55c9390b 100644
--- a/docs/catalog/blocks/us-map.mdx
+++ b/docs/catalog/blocks/us-map.mdx
@@ -3,23 +3,24 @@ title: "US Map"
 description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP"
 ---
 
-# US Map
-
-Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP
-
 `data` `map` `geography` `usa` `choropleth`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add us-map
+```text
+Add the US Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add us-map
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add us-map
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `us-map.html` | `compositions/us-map.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="us-map" data-composition-src="compositions/us-map.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index d08a8445d..c639feef5 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -3,10 +3,6 @@ title: "iPhone & MacBook 3D Showcase"
 description: "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable."
 ---
 
-# iPhone & MacBook 3D Showcase
-
-Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.
-
 `html-in-canvas` `3d` `device` `iphone` `macbook` `gltf`
 
 <Warning>
@@ -15,15 +11,20 @@ Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas scre
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vfx-iphone-device
+```text
+Add the iPhone & MacBook 3D Showcase block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-iphone-device
+```
 
 ## Details
 
@@ -33,7 +34,7 @@ npx hyperframes add vfx-iphone-device
 | Dimensions | 1920×1080 |
 | Duration | 15s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
@@ -43,10 +44,18 @@ npx hyperframes add vfx-iphone-device
 | `models/hyperframes-mobile.png` | `models/hyperframes-mobile.png` | asset |
 | `models/hyperframes-desktop.png` | `models/hyperframes-desktop.png` | asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="vfx-iphone-device" data-composition-src="compositions/vfx-iphone-device.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index 67bc9c01e..04a85c81a 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -3,10 +3,6 @@ title: "Liquid Background"
 description: "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics."
 ---
 
-# Liquid Background
-
-Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.
-
 `html-in-canvas` `liquid` `webgl` `displacement` `background`
 
 <Warning>
@@ -15,15 +11,20 @@ Organic liquid simulation with vertex displacement on a subdivided plane. HTML c
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vfx-liquid-background
+```text
+Add the Liquid Background block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-liquid-background
+```
 
 ## Details
 
@@ -33,16 +34,24 @@ npx hyperframes add vfx-liquid-background
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `vfx-liquid-background.html` | `compositions/vfx-liquid-background.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="vfx-liquid-background" data-composition-src="compositions/vfx-liquid-background.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index 76b667086..b1f2642ac 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -3,10 +3,6 @@ title: "Liquid Glass"
 description: "VFX composition block"
 ---
 
-# Liquid Glass
-
-VFX composition block
-
 `html-in-canvas` `webgl`
 
 <Warning>
@@ -15,15 +11,20 @@ VFX composition block
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vfx-liquid-glass
+```text
+Add the Liquid Glass block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-liquid-glass
+```
 
 ## Details
 
@@ -33,16 +34,24 @@ npx hyperframes add vfx-liquid-glass
 | Dimensions | 1920×1080 |
 | Duration | 20s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `vfx-liquid-glass.html` | `compositions/vfx-liquid-glass.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="vfx-liquid-glass" data-composition-src="compositions/vfx-liquid-glass.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index 2eb6046ff..e10a13ef7 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -3,10 +3,6 @@ title: "Magnetic"
 description: "VFX composition block"
 ---
 
-# Magnetic
-
-VFX composition block
-
 `html-in-canvas` `webgl`
 
 <Warning>
@@ -15,15 +11,20 @@ VFX composition block
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vfx-magnetic
+```text
+Add the Magnetic block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-magnetic
+```
 
 ## Details
 
@@ -33,16 +34,24 @@ npx hyperframes add vfx-magnetic
 | Dimensions | 1920×1080 |
 | Duration | 15s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `vfx-magnetic.html` | `compositions/vfx-magnetic.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="vfx-magnetic" data-composition-src="compositions/vfx-magnetic.html" data-start="0" data-duration="15" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index a060a613e..e016e6b9a 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -3,10 +3,6 @@ title: "Portal"
 description: "VFX composition block"
 ---
 
-# Portal
-
-VFX composition block
-
 `html-in-canvas` `webgl`
 
 <Warning>
@@ -15,15 +11,20 @@ VFX composition block
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vfx-portal
+```text
+Add the Portal block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-portal
+```
 
 ## Details
 
@@ -33,16 +34,24 @@ npx hyperframes add vfx-portal
 | Dimensions | 1920×1080 |
 | Duration | 10s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `vfx-portal.html` | `compositions/vfx-portal.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="vfx-portal" data-composition-src="compositions/vfx-portal.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index bb659c8aa..a11422be6 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -3,10 +3,6 @@ title: "Shatter"
 description: "VFX composition block"
 ---
 
-# Shatter
-
-VFX composition block
-
 `html-in-canvas` `webgl`
 
 <Warning>
@@ -15,15 +11,20 @@ VFX composition block
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vfx-shatter
+```text
+Add the Shatter block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-shatter
+```
 
 ## Details
 
@@ -33,16 +34,24 @@ npx hyperframes add vfx-shatter
 | Dimensions | 1920×1080 |
 | Duration | 12s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `vfx-shatter.html` | `compositions/vfx-shatter.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="vfx-shatter" data-composition-src="compositions/vfx-shatter.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index 2f8b4d2d8..19804a7aa 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -3,10 +3,6 @@ title: "VFX Text Cursor"
 description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges."
 ---
 
-# VFX Text Cursor
-
-Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.
-
 `html-in-canvas` `text` `shader` `cursor` `chromatic`
 
 <Warning>
@@ -15,15 +11,20 @@ Dramatic text reveal with cursor glow, chromatic shadow rays, and directional li
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vfx-text-cursor
+```text
+Add the VFX Text Cursor block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vfx-text-cursor
+```
 
 ## Details
 
@@ -33,16 +34,24 @@ npx hyperframes add vfx-text-cursor
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `vfx-text-cursor.html` | `compositions/vfx-text-cursor.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="vfx-text-cursor" data-composition-src="compositions/vfx-text-cursor.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/vpn-youtube-spot.mdx b/docs/catalog/blocks/vpn-youtube-spot.mdx
index d2d044b9e..a180fa80f 100644
--- a/docs/catalog/blocks/vpn-youtube-spot.mdx
+++ b/docs/catalog/blocks/vpn-youtube-spot.mdx
@@ -3,10 +3,6 @@ title: "VPN YouTube Spot"
 description: "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects."
 ---
 
-# VPN YouTube Spot
-
-Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.
-
 `app` `showcase` `youtube` `sfx`
 
 Created by [Stronkter](https://x.com/Stronkter).
@@ -19,15 +15,20 @@ HyperFrames by HeyGen make me a 7s video with Apple-style bold font and styling:
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vpn-youtube-spot
+```text
+Add the VPN YouTube Spot block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vpn-youtube-spot
+```
 
 ## Details
 
@@ -37,17 +38,25 @@ npx hyperframes add vpn-youtube-spot
 | Dimensions | 1920×1080 |
 | Duration | 7s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `vpn-youtube-spot.html` | `compositions/vpn-youtube-spot.html` | hyperframes:composition |
 | `assets/vpn-sfx.wav` | `assets/vpn-sfx.wav` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="vpn-youtube-spot" data-composition-src="compositions/vpn-youtube-spot.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index c0f6dba95..bcb831ab8 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -3,23 +3,24 @@ title: "Whip Pan"
 description: "Shader transition simulating a fast camera whip pan"
 ---
 
-# Whip Pan
-
-Shader transition simulating a fast camera whip pan
-
 `transition` `shader`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add whip-pan
+```text
+Add the Whip Pan block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add whip-pan
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add whip-pan
 | Dimensions | 1920×1080 |
 | Duration | 4s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `whip-pan.html` | `compositions/whip-pan.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="whip-pan" data-composition-src="compositions/whip-pan.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/world-map.mdx b/docs/catalog/blocks/world-map.mdx
index b1a41ccaa..4a28426c2 100644
--- a/docs/catalog/blocks/world-map.mdx
+++ b/docs/catalog/blocks/world-map.mdx
@@ -3,23 +3,24 @@ title: "World Map"
 description: "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection"
 ---
 
-# World Map
-
-Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection
-
 `data` `map` `geography` `world` `choropleth`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add world-map
+```text
+Add the World Map block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add world-map
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add world-map
 | Dimensions | 1920×1080 |
 | Duration | 14s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `world-map.html` | `compositions/world-map.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="world-map" data-composition-src="compositions/world-map.html" data-start="0" data-duration="14" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index dfd0c8b08..cc5da347f 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -3,23 +3,24 @@ title: "X Post Card"
 description: "Animated X/Twitter post card overlay with engagement metrics"
 ---
 
-# X Post Card
-
-Animated X/Twitter post card overlay with engagement metrics
-
 `social` `overlay` `twitter`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add x-post
+```text
+Add the X Post Card block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add x-post
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add x-post
 | Dimensions | 1920×1080 |
 | Duration | 5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `x-post.html` | `compositions/x-post.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="x-post" data-composition-src="compositions/x-post.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
index 116281e49..f529fc4e1 100644
--- a/docs/catalog/blocks/yt-comment-card.mdx
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -3,23 +3,24 @@ title: "Comment Cards"
 description: "Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips"
 ---
 
-# Comment Cards
-
-Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips
-
 `social` `comments` `creator` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-comment-card
+```text
+Add the Comment Cards block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-comment-card
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add yt-comment-card
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-comment-card.html` | `compositions/yt-comment-card.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="yt-comment-card" data-composition-src="compositions/yt-comment-card.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
index 270cc28b5..fd5ace98d 100644
--- a/docs/catalog/blocks/yt-lcd-background.mdx
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -3,23 +3,24 @@ title: "Scanline Board Background"
 description: "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title"
 ---
 
-# Scanline Board Background
-
-Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title
-
 `background` `texture` `creator`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-lcd-background
+```text
+Add the Scanline Board Background block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-lcd-background
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add yt-lcd-background
 | Dimensions | 1920×1080 |
 | Duration | 10s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-lcd-background.html` | `compositions/yt-lcd-background.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="yt-lcd-background" data-composition-src="compositions/yt-lcd-background.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
index 7d7a51de9..ab26fc32d 100644
--- a/docs/catalog/blocks/yt-logo-intro.mdx
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -3,23 +3,24 @@ title: "Logo Intro Sequence"
 description: "Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion"
 ---
 
-# Logo Intro Sequence
-
-Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion
-
 `logo` `intro` `creator`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-logo-intro
+```text
+Add the Logo Intro Sequence block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-logo-intro
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add yt-logo-intro
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-logo-intro.html` | `compositions/yt-logo-intro.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="yt-logo-intro" data-composition-src="compositions/yt-logo-intro.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index e0843d632..4b017f5c2 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -3,23 +3,24 @@ title: "YouTube Lower Third"
 description: "Animated YouTube subscribe lower third with avatar and channel info"
 ---
 
-# YouTube Lower Third
-
-Animated YouTube subscribe lower third with avatar and channel info
-
 `social` `overlay` `youtube`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-lower-third
+```text
+Add the YouTube Lower Third block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-lower-third
+```
 
 ## Details
 
@@ -29,17 +30,25 @@ npx hyperframes add yt-lower-third
 | Dimensions | 1920×1080 |
 | Duration | 4.5s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-lower-third.html` | `compositions/yt-lower-third.html` | hyperframes:composition |
 | `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="yt-lower-third" data-composition-src="compositions/yt-lower-third.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
index 6de55589a..a1c07d0d7 100644
--- a/docs/catalog/blocks/yt-prism-title.mdx
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -3,23 +3,24 @@ title: "Chromatic Fringe Title"
 description: "Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift"
 ---
 
-# Chromatic Fringe Title
-
-Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift
-
 `typography` `title-card` `creator`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-prism-title
+```text
+Add the Chromatic Fringe Title block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-prism-title
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add yt-prism-title
 | Dimensions | 1920×1080 |
 | Duration | 6s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-prism-title.html` | `compositions/yt-prism-title.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="yt-prism-title" data-composition-src="compositions/yt-prism-title.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
index 36c5e0f7d..7f79dd6a1 100644
--- a/docs/catalog/blocks/yt-vertical-fill.mdx
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -3,23 +3,24 @@ title: "Vertical Media Filler"
 description: "Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)"
 ---
 
-# Vertical Media Filler
-
-Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)
-
 `placeholder` `vertical` `media`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-vertical-fill
+```text
+Add the Vertical Media Filler block from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-vertical-fill
+```
 
 ## Details
 
@@ -29,16 +30,24 @@ npx hyperframes add yt-vertical-fill
 | Dimensions | 1920×1080 |
 | Duration | 8s |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-vertical-fill.html` | `compositions/yt-vertical-fill.html` | hyperframes:composition |
 
-## Usage
+## Use it
 
-After installing, add the block to your host composition:
+Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.
+
+**Wiring it by hand.** The installed block can be added to a host composition with:
 
 ```html
 <div data-composition-id="yt-vertical-fill" data-composition-src="compositions/yt-vertical-fill.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-blend-difference.mdx b/docs/catalog/components/caption-blend-difference.mdx
index e53931737..e0ded3089 100644
--- a/docs/catalog/components/caption-blend-difference.mdx
+++ b/docs/catalog/components/caption-blend-difference.mdx
@@ -3,23 +3,24 @@ title: "Blend Difference"
 description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
 ---
 
-# Blend Difference
-
-Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background
-
-`text` `effect` `blend-mode` `contrast` `inversion`
+`text` `text-effect` `effect` `blend-mode` `contrast` `inversion`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-blend-difference
+```text
+Add the Blend Difference component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-blend-difference
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-blend-difference
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-blend-difference.html` | `compositions/components/caption-blend-difference.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-blend-difference.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-blend-difference.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index 9816574f0..2b88a2285 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -3,23 +3,24 @@ title: "Clip Wipe"
 description: "Left-to-right clip-path wipe reveal per word"
 ---
 
-# Clip Wipe
-
-Left-to-right clip-path wipe reveal per word
-
 `captions` `caption-style` `wipe` `clip-path` `reveal`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-clip-wipe
+```text
+Add the Clip Wipe component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-clip-wipe
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-clip-wipe
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-clip-wipe.html` | `compositions/components/caption-clip-wipe.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-clip-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-clip-wipe.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index 35b3e17ff..2fe9be5a9 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -3,23 +3,24 @@ title: "Editorial Emphasis"
 description: "Dual-font system with dramatic size contrast for emphasis words"
 ---
 
-# Editorial Emphasis
-
-Dual-font system with dramatic size contrast for emphasis words
-
 `captions` `caption-style` `editorial` `typography` `emphasis`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-editorial-emphasis
+```text
+Add the Editorial Emphasis component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-editorial-emphasis
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-editorial-emphasis
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-editorial-emphasis.html` | `compositions/components/caption-editorial-emphasis.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-editorial-emphasis.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-editorial-emphasis.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index a1914f97c..36e0a5136 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -3,23 +3,24 @@ title: "Emoji Pop"
 description: "Emoji integration with stroked text and horizontal squeeze entrance"
 ---
 
-# Emoji Pop
-
-Emoji integration with stroked text and horizontal squeeze entrance
-
 `captions` `caption-style` `emoji` `social`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-emoji-pop
+```text
+Add the Emoji Pop component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-emoji-pop
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-emoji-pop
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-emoji-pop.html` | `compositions/components/caption-emoji-pop.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-emoji-pop.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-emoji-pop.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index a1344b546..c236e0c6a 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -3,23 +3,24 @@ title: "Glitch RGB"
 description: "RGB chromatic aberration with CRT scanline overlay"
 ---
 
-# Glitch RGB
-
-RGB chromatic aberration with CRT scanline overlay
-
 `captions` `caption-style` `glitch` `cyber` `tech`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-glitch-rgb
+```text
+Add the Glitch RGB component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-glitch-rgb
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-glitch-rgb
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-glitch-rgb.html` | `compositions/components/caption-glitch-rgb.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-glitch-rgb.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-glitch-rgb.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index a81eea83b..b991f2f3b 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -3,23 +3,24 @@ title: "Gradient Fill"
 description: "Gradient-clipped text with elastic bounce entrance"
 ---
 
-# Gradient Fill
-
-Gradient-clipped text with elastic bounce entrance
-
 `captions` `caption-style` `gradient` `colorful`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-gradient-fill
+```text
+Add the Gradient Fill component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-gradient-fill
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-gradient-fill
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-gradient-fill.html` | `compositions/components/caption-gradient-fill.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-gradient-fill.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-gradient-fill.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
index 5937f0962..3aa89acf9 100644
--- a/docs/catalog/components/caption-highlight.mdx
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -3,23 +3,24 @@ title: "Highlight"
 description: "Red background sweep behind each active word, TikTok-style"
 ---
 
-# Highlight
-
-Red background sweep behind each active word, TikTok-style
-
 `captions` `caption-style` `highlight` `social` `tiktok`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-highlight/preview-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-highlight
+```text
+Add the Highlight component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-highlight
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-highlight
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-highlight.html` | `compositions/components/caption-highlight.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-highlight.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index ec24d38d3..4551ca526 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -3,23 +3,24 @@ title: "Kinetic Slam"
 description: "Full-screen single-word display with alternating entrance directions"
 ---
 
-# Kinetic Slam
-
-Full-screen single-word display with alternating entrance directions
-
 `captions` `caption-style` `kinetic` `typography` `slam`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-kinetic-slam
+```text
+Add the Kinetic Slam component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-kinetic-slam
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-kinetic-slam
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-kinetic-slam.html` | `compositions/components/caption-kinetic-slam.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-kinetic-slam.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-kinetic-slam.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index dcc363a8a..09b84d85b 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -3,23 +3,24 @@ title: "Matrix Decode"
 description: "Character scramble animation before text reveal"
 ---
 
-# Matrix Decode
-
-Character scramble animation before text reveal
-
 `captions` `caption-style` `matrix` `scramble` `decode`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-matrix-decode
+```text
+Add the Matrix Decode component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-matrix-decode
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-matrix-decode
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-matrix-decode.html` | `compositions/components/caption-matrix-decode.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-matrix-decode.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-matrix-decode.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index 4a921810f..f13fe9838 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -3,23 +3,24 @@ title: "Neon Accent"
 description: "Multi-color neon glow accents with wiggle drift animation"
 ---
 
-# Neon Accent
-
-Multi-color neon glow accents with wiggle drift animation
-
 `captions` `caption-style` `neon` `glow` `accent`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-neon-accent
+```text
+Add the Neon Accent component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-neon-accent
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-neon-accent
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-neon-accent.html` | `compositions/components/caption-neon-accent.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-neon-accent.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-neon-accent.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index d2cb58a04..fda30b00e 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -3,23 +3,24 @@ title: "Neon Glow"
 description: "Cyan and magenta neon glow with keyword accent colors"
 ---
 
-# Neon Glow
-
-Cyan and magenta neon glow with keyword accent colors
-
 `captions` `caption-style` `neon` `glow` `gaming`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-neon-glow
+```text
+Add the Neon Glow component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-neon-glow
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-neon-glow
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-neon-glow.html` | `compositions/components/caption-neon-glow.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-neon-glow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-neon-glow.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index 72eda7492..4d8f7e4aa 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -3,23 +3,24 @@ title: "Parallax Layers"
 description: "Behind-subject 3D text layering with vertical stretch effect"
 ---
 
-# Parallax Layers
-
-Behind-subject 3D text layering with vertical stretch effect
-
 `captions` `caption-style` `parallax` `3d` `depth`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-parallax-layers
+```text
+Add the Parallax Layers component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-parallax-layers
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-parallax-layers
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-parallax-layers.html` | `compositions/components/caption-parallax-layers.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index d4f304dde..9d510dfe7 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -3,23 +3,24 @@ title: "Particle Burst"
 description: "Keyword words trigger colored particle explosions"
 ---
 
-# Particle Burst
-
-Keyword words trigger colored particle explosions
-
 `captions` `caption-style` `particles` `burst` `effects`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-particle-burst
+```text
+Add the Particle Burst component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-particle-burst
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-particle-burst
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-particle-burst.html` | `compositions/components/caption-particle-burst.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-particle-burst.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-particle-burst.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index e16845939..bf33f2bdc 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -3,23 +3,24 @@ title: "Pill Karaoke"
 description: "Pill-shaped container with per-word karaoke color highlight"
 ---
 
-# Pill Karaoke
-
-Pill-shaped container with per-word karaoke color highlight
-
 `captions` `caption-style` `karaoke` `pill`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-pill-karaoke
+```text
+Add the Pill Karaoke component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-pill-karaoke
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-pill-karaoke
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-pill-karaoke.html` | `compositions/components/caption-pill-karaoke.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-pill-karaoke.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-pill-karaoke.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-texture.mdx b/docs/catalog/components/caption-texture.mdx
index a8ab0e71e..d3f1199ca 100644
--- a/docs/catalog/components/caption-texture.mdx
+++ b/docs/catalog/components/caption-texture.mdx
@@ -3,23 +3,24 @@ title: "Texture"
 description: "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable"
 ---
 
-# Texture
-
-Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable
-
 `captions` `caption-style` `texture` `mask`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-texture
+```text
+Add the Texture component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-texture
+```
 
 ## Details
 
@@ -27,7 +28,7 @@ npx hyperframes add caption-texture
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
@@ -39,6 +40,14 @@ npx hyperframes add caption-texture
 | `concrete-042-a.png` | `compositions/components/concrete-042-a.png` | hyperframes:asset |
 | `rock-058.png` | `compositions/components/rock-058.png` | hyperframes:asset |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-texture.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-texture.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index f32439c52..bbff555fc 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -3,23 +3,24 @@ title: "Weight Shift"
 description: "Elegant font-weight transition between caption lines"
 ---
 
-# Weight Shift
-
-Elegant font-weight transition between caption lines
-
 `captions` `caption-style` `minimal` `typography`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add caption-weight-shift
+```text
+Add the Weight Shift component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add caption-weight-shift
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add caption-weight-shift
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-weight-shift.html` | `compositions/components/caption-weight-shift.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/caption-weight-shift.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/caption-weight-shift.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index fbd793696..a4ac17d50 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -3,23 +3,24 @@ title: "Grain Overlay"
 description: "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition"
 ---
 
-# Grain Overlay
-
-Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition
-
 `texture` `grain` `overlay` `film`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add grain-overlay
+```text
+Add the Grain Overlay component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add grain-overlay
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add grain-overlay
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `grain-overlay.html` | `compositions/components/grain-overlay.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/grain-overlay.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/grain-overlay.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index c9a72d678..2ce38abcc 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -3,23 +3,24 @@ title: "Grid Pixelate Wipe"
 description: "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes"
 ---
 
-# Grid Pixelate Wipe
-
-Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes
-
 `transition` `wipe` `grid` `pixelate`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add grid-pixelate-wipe
+```text
+Add the Grid Pixelate Wipe component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add grid-pixelate-wipe
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add grid-pixelate-wipe
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `grid-pixelate-wipe.html` | `compositions/components/grid-pixelate-wipe.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/grid-pixelate-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/grid-pixelate-wipe.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
index f339af19d..083e643a5 100644
--- a/docs/catalog/components/hw-arrow.mdx
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -3,23 +3,24 @@ title: "Hand-Drawn Arrow"
 description: "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen"
 ---
 
-# Hand-Drawn Arrow
-
-Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen
-
 `handwritten` `annotation` `arrow` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-arrow
+```text
+Add the Hand-Drawn Arrow component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-arrow
+```
 
 ## Details
 
@@ -27,13 +28,21 @@ npx hyperframes add hw-arrow
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-arrow.html` | `compositions/components/hw-arrow.html` | hyperframes:snippet |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-Open `compositions/components/hw-arrow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-arrow.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
index 3d2ef16c4..c184d513d 100644
--- a/docs/catalog/components/hw-boil.mdx
+++ b/docs/catalog/components/hw-boil.mdx
@@ -3,23 +3,24 @@ title: "Hand-Drawn Boil"
 description: "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator"
 ---
 
-# Hand-Drawn Boil
-
-Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator
-
 `handwritten` `effect` `annotation`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-boil
+```text
+Add the Hand-Drawn Boil component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-boil
+```
 
 ## Details
 
@@ -27,13 +28,21 @@ npx hyperframes add hw-boil
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-boil.html` | `compositions/components/hw-boil.html` | hyperframes:snippet |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-Open `compositions/components/hw-boil.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-boil.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
index d605f85b0..ed8cdf1f8 100644
--- a/docs/catalog/components/hw-box-label.mdx
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -3,23 +3,24 @@ title: "Hand-Drawn Box Label"
 description: "Wobbled rounded rectangle draws around a region with a handwritten label above or centered"
 ---
 
-# Hand-Drawn Box Label
-
-Wobbled rounded rectangle draws around a region with a handwritten label above or centered
-
 `handwritten` `annotation` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-box-label
+```text
+Add the Hand-Drawn Box Label component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-box-label
+```
 
 ## Details
 
@@ -27,13 +28,21 @@ npx hyperframes add hw-box-label
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-box-label.html` | `compositions/components/hw-box-label.html` | hyperframes:snippet |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-Open `compositions/components/hw-box-label.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-box-label.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
index cdf20139c..95cb3b42c 100644
--- a/docs/catalog/components/hw-callout-circle.mdx
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -3,23 +3,24 @@ title: "Scribble Callout Circle"
 description: "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label"
 ---
 
-# Scribble Callout Circle
-
-Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label
-
 `handwritten` `annotation` `callout` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-callout-circle
+```text
+Add the Scribble Callout Circle component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-callout-circle
+```
 
 ## Details
 
@@ -27,13 +28,21 @@ npx hyperframes add hw-callout-circle
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-callout-circle.html` | `compositions/components/hw-callout-circle.html` | hyperframes:snippet |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-Open `compositions/components/hw-callout-circle.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-callout-circle.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
index 18dbb7eea..f2cbad2ea 100644
--- a/docs/catalog/components/hw-underline.mdx
+++ b/docs/catalog/components/hw-underline.mdx
@@ -3,23 +3,24 @@ title: "Squiggle Marks"
 description: "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on"
 ---
 
-# Squiggle Marks
-
-Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on
-
 `handwritten` `annotation` `text-treatment`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add hw-underline
+```text
+Add the Squiggle Marks component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add hw-underline
+```
 
 ## Details
 
@@ -27,13 +28,21 @@ npx hyperframes add hw-underline
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `hw-underline.html` | `compositions/components/hw-underline.html` | hyperframes:snippet |
 | `assets/fonts/Caveat-700-latin.woff2` | `assets/fonts/Caveat-700-latin.woff2` | hyperframes:asset |
 
-## Usage
+## Use it
 
-Open `compositions/components/hw-underline.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/hw-underline.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
index 1d71cb0d1..f2d32b2ff 100644
--- a/docs/catalog/components/mk-emphasis-type.mdx
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -3,23 +3,24 @@ title: "Background Emphasis Type"
 description: "Oversized low-contrast background word drifting slowly behind the subject — typography as texture"
 ---
 
-# Background Emphasis Type
-
-Oversized low-contrast background word drifting slowly behind the subject — typography as texture
-
 `typography` `text-treatment` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-emphasis-type
+```text
+Add the Background Emphasis Type component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-emphasis-type
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add mk-emphasis-type
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-emphasis-type.html` | `compositions/components/mk-emphasis-type.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/mk-emphasis-type.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/mk-emphasis-type.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
index 57add45ae..711bd2aab 100644
--- a/docs/catalog/components/mk-usage-arc.mdx
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -3,23 +3,24 @@ title: "Hairline Arc Gauge"
 description: "Thin circular gauge that draws on while its percentage counts up; one helper call drives both"
 ---
 
-# Hairline Arc Gauge
-
-Thin circular gauge that draws on while its percentage counts up; one helper call drives both
-
 `data-viz` `gauge` `minimal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add mk-usage-arc
+```text
+Add the Hairline Arc Gauge component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add mk-usage-arc
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add mk-usage-arc
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `mk-usage-arc.html` | `compositions/components/mk-usage-arc.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/mk-usage-arc.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/mk-usage-arc.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 660a3bb89..8979d996b 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -3,23 +3,24 @@ title: "Morph Text"
 description: "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect"
 ---
 
-# Morph Text
-
-Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect
-
 `text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add morph-text
+```text
+Add the Morph Text component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add morph-text
+```
 
 ## Details
 
@@ -27,14 +28,20 @@ npx hyperframes add morph-text
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `morph-text.html` | `compositions/components/morph-text.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/morph-text.html` and paste its contents into your composition.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
 
-Edit the `<ol id="morph-words">` list to change the statements that cycle through. Each `<li>` accepts `data-font` (CSS font-family) and `data-color` (hex) attributes. Adjust `data-morph-speed` (seconds per transition) and `data-morph-pause` (hold time) on the root element.
+**Wiring it by hand.** Open `compositions/components/morph-text.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index 3257f64b6..446155f47 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -1,25 +1,26 @@
 ---
 title: "Motion Blur"
-description: "Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed"
+description: "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed"
 ---
 
-# Motion Blur
-
-Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed.
-
 `effect` `motion-blur` `velocity` `animation` `physics`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add motion-blur
+```text
+Add the Motion Blur component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add motion-blur
+```
 
 ## Details
 
@@ -27,44 +28,20 @@ npx hyperframes add motion-blur
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `motion-blur.html` | `compositions/components/motion-blur.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Paste the snippet into your composition, then call `attachMotionBlur()` after your GSAP tweens and before registering `window.__timelines`.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
 
-```html
-<!-- Extend the timeline to data-duration before calling attachMotionBlur -->
-tl.set(document.body, {}, DATA_DURATION);
+**Wiring it by hand.** Open `compositions/components/motion-blur.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
 
-attachMotionBlur("#my-box", tl, {
-  axis: "x",      // "x" | "y" | "both"
-  blurMax: 40,    // max blur radius in px (default 20)
-});
+## Related topics
 
-window.__timelines = window.__timelines || {};
-window.__timelines["my-composition"] = tl;
-```
-
-## How it works
-
-Each target element gets its own SVG filter. On every timeline seek, `attachMotionBlur` samples the element's GSAP `x`/`y` position, computes velocity, and drives three SVG filter primitives:
-
-1. **Ghost copies** — three faded, blurred copies of the element placed behind it at increasing offsets proportional to speed. Inherently one-sided: no forward blur.
-2. **Top blur** — a small symmetric Gaussian at the current position so the element looks in-motion rather than crisp on top of the trail.
-
-Blur scales linearly with velocity up to `blurMax`. Both the ghost trail and top blur clear automatically when the element decelerates to rest.
-
-## Options
-
-| Option | Default | Description |
-| --- | --- | --- |
-| `axis` | `"both"` | Motion axis — `"x"`, `"y"`, or `"both"` |
-| `blurScale` | `0.008` | Blur per px/s of velocity |
-| `blurMax` | `20` | Max blur radius on the motion axis (px) |
-| `stretchScale` | `0.0002` | scaleX/Y added per px/s (requires `stretchMax > 0`) |
-| `stretchMax` | `0` | Max stretch above 1.0 — disabled by default |
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/parallax-unzoom.mdx b/docs/catalog/components/parallax-unzoom.mdx
index 9e08e9e95..20da1e050 100644
--- a/docs/catalog/components/parallax-unzoom.mdx
+++ b/docs/catalog/components/parallax-unzoom.mdx
@@ -3,23 +3,24 @@ title: "Parallax Unzoom"
 description: "Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)"
 ---
 
-# Parallax Unzoom
-
-Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)
-
 `transition` `reveal` `unzoom` `parallax` `grid` `hero`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add parallax-unzoom
+```text
+Add the Parallax Unzoom component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add parallax-unzoom
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add parallax-unzoom
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `parallax-unzoom.html` | `compositions/components/parallax-unzoom.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/parallax-unzoom.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/parallax-unzoom.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/parallax-zoom.mdx b/docs/catalog/components/parallax-zoom.mdx
index fdd48e378..023f85733 100644
--- a/docs/catalog/components/parallax-zoom.mdx
+++ b/docs/catalog/components/parallax-zoom.mdx
@@ -3,23 +3,24 @@ title: "Parallax Zoom"
 description: "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition"
 ---
 
-# Parallax Zoom
-
-Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition
-
 `transition` `zoom` `parallax` `grid` `hero`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add parallax-zoom
+```text
+Add the Parallax Zoom component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add parallax-zoom
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add parallax-zoom
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `parallax-zoom.html` | `compositions/components/parallax-zoom.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/parallax-zoom.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/parallax-zoom.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index 0738ccb27..24afc874e 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -3,23 +3,24 @@ title: "Shimmer Sweep"
 description: "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals"
 ---
 
-# Shimmer Sweep
-
-Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals
-
 `text` `shimmer` `highlight` `effect`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add shimmer-sweep
+```text
+Add the Shimmer Sweep component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add shimmer-sweep
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add shimmer-sweep
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `shimmer-sweep.html` | `compositions/components/shimmer-sweep.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/shimmer-sweep.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/shimmer-sweep.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/texture-mask-text.mdx b/docs/catalog/components/texture-mask-text.mdx
index 7f0309097..7d676eaf2 100644
--- a/docs/catalog/components/texture-mask-text.mdx
+++ b/docs/catalog/components/texture-mask-text.mdx
@@ -1,8 +1,9 @@
 ---
 title: "Texture Mask Text"
+description: "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps"
 ---
 
-`text` `texture` `mask` `effect`
+`text` `text-effect` `effect` `texture` `mask`
 
 <div className="hf-texture-preview-panel">
   <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/brick.png')" }}>
@@ -31,15 +32,20 @@ title: "Texture Mask Text"
   </div>
 </div>
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add texture-mask-text
+```text
+Add the Texture Mask Text component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add texture-mask-text
+```
 
 ## Details
 
@@ -482,6 +488,12 @@ window.__timelines["my-composition"] = tl;
   </div>
 </div>
 
-## Usage
+## Use it
 
 After `npx hyperframes add texture-mask-text`, the installed snippet lives at `compositions/components/texture-mask-text/texture-mask-text.html` inside your current HyperFrames project. Open that file and paste the real `<style>` element near the bottom into your composition once; it defines `hf-texture-text` and every `hf-texture-*` class used by the examples above. Keep the installed texture PNGs in `assets/texture-mask-text/masks/`; the CSS references them with project-root URLs.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/vignette.mdx b/docs/catalog/components/vignette.mdx
index 2a0d500a6..a97c9973b 100644
--- a/docs/catalog/components/vignette.mdx
+++ b/docs/catalog/components/vignette.mdx
@@ -3,23 +3,24 @@ title: "Vignette"
 description: "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center"
 ---
 
-# Vignette
-
-Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center
-
 `vignette` `overlay` `cinematic` `effect`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add vignette
+```text
+Add the Vignette component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add vignette
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add vignette
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `vignette.html` | `compositions/components/vignette.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/vignette.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/vignette.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/yt-camera-move.mdx b/docs/catalog/components/yt-camera-move.mdx
index a30f55903..219e35f06 100644
--- a/docs/catalog/components/yt-camera-move.mdx
+++ b/docs/catalog/components/yt-camera-move.mdx
@@ -3,23 +3,24 @@ title: "Camera Punch-In"
 description: "Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay"
 ---
 
-# Camera Punch-In
-
-Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay
-
 `camera` `zoom` `effect` `creator`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-camera-move
+```text
+Add the Camera Punch-In component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-camera-move
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add yt-camera-move
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-camera-move.html` | `compositions/components/yt-camera-move.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/yt-camera-move.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/yt-camera-move.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/yt-circle-pointer.mdx b/docs/catalog/components/yt-circle-pointer.mdx
index 6a3f92c49..195ad8ec4 100644
--- a/docs/catalog/components/yt-circle-pointer.mdx
+++ b/docs/catalog/components/yt-circle-pointer.mdx
@@ -3,23 +3,24 @@ title: "Pointer Circle + Countdown"
 description: "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick"
 ---
 
-# Pointer Circle + Countdown
-
-Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick
-
 `annotation` `countdown` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-circle-pointer
+```text
+Add the Pointer Circle + Countdown component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-circle-pointer
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add yt-circle-pointer
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-circle-pointer.html` | `compositions/components/yt-circle-pointer.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/yt-circle-pointer.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/yt-circle-pointer.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/yt-feather-highlight.mdx b/docs/catalog/components/yt-feather-highlight.mdx
index e32eef454..555972004 100644
--- a/docs/catalog/components/yt-feather-highlight.mdx
+++ b/docs/catalog/components/yt-feather-highlight.mdx
@@ -3,23 +3,24 @@ title: "Feathered Spotlight"
 description: "Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets"
 ---
 
-# Feathered Spotlight
-
-Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets
-
 `highlight` `spotlight` `effect` `overlay`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-feather-highlight
+```text
+Add the Feathered Spotlight component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-feather-highlight
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add yt-feather-highlight
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-feather-highlight.html` | `compositions/components/yt-feather-highlight.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/yt-feather-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/yt-feather-highlight.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/catalog/components/yt-screen-warp.mdx b/docs/catalog/components/yt-screen-warp.mdx
index 0a17de38c..95535a27c 100644
--- a/docs/catalog/components/yt-screen-warp.mdx
+++ b/docs/catalog/components/yt-screen-warp.mdx
@@ -3,23 +3,24 @@ title: "On-Screen Display Effect"
 description: "Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display"
 ---
 
-# On-Screen Display Effect
-
-Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display
-
 `effect` `overlay` `texture`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.png" autoPlay muted loop playsInline />
 
-## Install
+## Add it to a project
 
-<CodeGroup>
+### Ask your agent
 
-```bash Terminal
-npx hyperframes add yt-screen-warp
+```text
+Add the On-Screen Display Effect component from the HyperFrames Catalog to this project.
+Replace the demo content with mine and match the existing design and timing.
 ```
 
-</CodeGroup>
+### Install from the terminal
+
+```bash
+npx hyperframes add yt-screen-warp
+```
 
 ## Details
 
@@ -27,12 +28,20 @@ npx hyperframes add yt-screen-warp
 | --- | --- |
 | Type | Component |
 
-## Files
+**Installed files**
 
 | File | Target | Type |
 | --- | --- | --- |
 | `yt-screen-warp.html` | `compositions/components/yt-screen-warp.html` | hyperframes:snippet |
 
-## Usage
+## Use it
 
-Open `compositions/components/yt-screen-warp.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
+Ask your agent to apply the component to the intended element and preserve the project’s existing timing.
+
+**Wiring it by hand.** Open `compositions/components/yt-screen-warp.html` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.
+
+## Related topics
+
+- [Browse the complete Catalog](/catalog)
+- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
+- [Build a richer composition](/go-further)
diff --git a/docs/docs.json b/docs/docs.json
index 5f1d944fe..78f936d86 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -309,7 +309,6 @@
           {
             "group": "Social Overlays",
             "pages": [
-              "catalog/blocks/editorial-flash-overlay",
               "catalog/blocks/freeze-frame-dressing",
               "catalog/blocks/instagram-follow",
               "catalog/blocks/macos-notification",
@@ -341,24 +340,27 @@
           {
             "group": "Transitions",
             "pages": [
+              "catalog/blocks/beat-freeze-cut",
               "catalog/blocks/chromatic-radial-split",
               "catalog/blocks/cinematic-zoom",
               "catalog/blocks/cross-warp-morph",
               "catalog/blocks/domain-warp-dissolve",
+              "catalog/blocks/editorial-flash-overlay",
               "catalog/blocks/flash-through-white",
               "catalog/blocks/glitch",
               "catalog/blocks/gravitational-lens",
+              "catalog/components/grid-pixelate-wipe",
+              "catalog/blocks/hw-scribble-transition",
               "catalog/blocks/light-leak",
+              "catalog/blocks/mk-clone-wall-transition",
+              "catalog/blocks/organic-light-leak-overlay",
+              "catalog/components/parallax-unzoom",
+              "catalog/components/parallax-zoom",
               "catalog/blocks/ridged-burn",
               "catalog/blocks/ripple-waves",
               "catalog/blocks/sdf-iris",
               "catalog/blocks/swirl-vortex",
               "catalog/blocks/thermal-distortion",
-              "catalog/blocks/whip-pan",
-              "catalog/blocks/beat-freeze-cut",
-              "catalog/blocks/hw-scribble-transition",
-              "catalog/blocks/mk-clone-wall-transition",
-              "catalog/blocks/organic-light-leak-overlay",
               "catalog/blocks/transitions-3d",
               "catalog/blocks/transitions-blur",
               "catalog/blocks/transitions-cover",
@@ -371,7 +373,8 @@
               "catalog/blocks/transitions-other",
               "catalog/blocks/transitions-push",
               "catalog/blocks/transitions-radial",
-              "catalog/blocks/transitions-scale"
+              "catalog/blocks/transitions-scale",
+              "catalog/blocks/whip-pan"
             ]
           },
           {
@@ -439,7 +442,6 @@
             "pages": [
               "catalog/components/caption-blend-difference",
               "catalog/components/grain-overlay",
-              "catalog/components/grid-pixelate-wipe",
               "catalog/components/hw-arrow",
               "catalog/components/hw-boil",
               "catalog/components/hw-box-label",
@@ -449,8 +451,6 @@
               "catalog/components/mk-usage-arc",
               "catalog/components/morph-text",
               "catalog/components/motion-blur",
-              "catalog/components/parallax-unzoom",
-              "catalog/components/parallax-zoom",
               "catalog/components/shimmer-sweep",
               "catalog/components/texture-mask-text",
               "catalog/components/vignette",
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 4789619fb..8255b52d5 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -448,8 +448,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-basic",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-basic"
   },
   {
     "name": "code-snippet-apple-terminal-clear-dark",
@@ -464,8 +463,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-dark",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-dark"
   },
   {
     "name": "code-snippet-apple-terminal-clear-light",
@@ -480,8 +478,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-light",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-light"
   },
   {
     "name": "code-snippet-apple-terminal-grass",
@@ -496,8 +493,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-grass",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-grass"
   },
   {
     "name": "code-snippet-apple-terminal-homebrew",
@@ -512,8 +508,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-homebrew",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-homebrew"
   },
   {
     "name": "code-snippet-apple-terminal-man-page",
@@ -528,8 +523,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-man-page",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-man-page"
   },
   {
     "name": "code-snippet-apple-terminal-novel",
@@ -544,8 +538,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-novel",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-novel"
   },
   {
     "name": "code-snippet-apple-terminal-ocean",
@@ -560,8 +553,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-ocean",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-ocean"
   },
   {
     "name": "code-snippet-apple-terminal-pro",
@@ -576,8 +568,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-pro",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-pro"
   },
   {
     "name": "code-snippet-apple-terminal-red-sands",
@@ -592,8 +583,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-red-sands",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-red-sands"
   },
   {
     "name": "code-snippet-apple-terminal-silver-aerogel",
@@ -608,8 +598,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-silver-aerogel"
   },
   {
     "name": "code-snippet-apple-terminal-solid-colors",
@@ -624,8 +613,7 @@
       "apple",
       "apple-terminal"
     ],
-    "href": "/catalog/blocks/code-snippet-apple-terminal-solid-colors",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png"
+    "href": "/catalog/blocks/code-snippet-apple-terminal-solid-colors"
   },
   {
     "name": "code-snippet-dark-2026",
@@ -1569,8 +1557,7 @@
       "kinetic",
       "animation"
     ],
-    "href": "/catalog/components/morph-text",
-    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.png"
+    "href": "/catalog/components/morph-text"
   },
   {
     "name": "motion-blur",
diff --git a/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json b/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
index f8b623ee6..f2ac6c776 100644
--- a/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json b/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
index 5f5e66377..1f0d99d78 100644
--- a/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json b/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
index 0605c1adb..c637a2e9f 100644
--- a/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json b/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
index 646d956fe..8405e8c7f 100644
--- a/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json b/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
index baa4f3576..26f5dd29a 100644
--- a/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json b/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
index 2eb8a610e..9cf388979 100644
--- a/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json b/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
index bd423554b..a2ca68cff 100644
--- a/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json b/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
index d10791a32..6b8282e9c 100644
--- a/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json b/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
index 2dae41cc3..d5a9a94a8 100644
--- a/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json b/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
index d3f08fb27..06440ed0c 100644
--- a/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
index c42a2797e..39155d876 100644
--- a/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4"
   }
 }
diff --git a/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json b/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json
index b9c41e2f8..93a4e88be 100644
--- a/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json
+++ b/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json
@@ -18,7 +18,6 @@
     }
   ],
   "preview": {
-    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4",
-    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png"
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4"
   }
 }
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 7c3cee04b..454563311 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -304,7 +304,8 @@ function generateTexturePreview(manifest: RegistryItem, textureGroups: TextureGr
   return lines;
 }
 
-function catalogPreviewFor(kind: ItemKind, manifest: RegistryItem): string {
+function catalogPreviewFor(kind: ItemKind, manifest: RegistryItem): string | undefined {
+  if (manifest.preview) return manifest.preview.poster;
   const dir = typeDir(kind);
   return `${catalogImageBase}/${dir}/${manifest.name}.png`;
 }
@@ -320,16 +321,13 @@ function generateItemMdx(kind: ItemKind, manifest: RegistryItem): string {
   const source = manifest as RegistryItem & SourceMetadata;
   const textureGroups = textureGroupsFor(manifest);
 
-  const lines: string[] = ["---", `title: ${yamlString(manifest.title)}`];
-  if (textureGroups.length === 0) {
-    lines.push(`description: ${yamlString(manifest.description)}`);
-  }
+  const lines: string[] = [
+    "---",
+    `title: ${yamlString(manifest.title)}`,
+    `description: ${yamlString(manifest.description)}`,
+  ];
   lines.push("---", "");
 
-  if (textureGroups.length === 0) {
-    lines.push(`# ${manifest.title}`, "", manifest.description, "");
-  }
-
   if (tagBadges) {
     lines.push(tagBadges, "");
   }
@@ -355,33 +353,41 @@ function generateItemMdx(kind: ItemKind, manifest: RegistryItem): string {
   if (textureGroups.length > 0) {
     lines.push(...generateTexturePreview(manifest, textureGroups));
   } else {
-    // Preview video with poster — muted loop, no autoPlay (matches examples page).
     const previewPath = `${catalogImageBase}/${typeDir(kind)}/${manifest.name}`;
+    const previewVideo = manifest.preview?.video ?? `${previewPath}.mp4`;
+    const previewPoster = manifest.preview ? manifest.preview.poster : `${previewPath}.png`;
+    const posterAttribute = previewPoster ? ` poster="${previewPoster}"` : "";
     lines.push(
-      `<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="${previewPath}.mp4" poster="${previewPath}.png" autoPlay muted loop playsInline />`,
+      `<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="${previewVideo}"${posterAttribute} autoPlay muted loop playsInline />`,
       "",
     );
   }
 
-  // Install command
+  // Keep both paths visible. The agent path leads for the general audience;
+  // the terminal remains available without hiding it behind a control.
   lines.push(
-    "## Install",
+    "## Add it to a project",
     "",
-    "<CodeGroup>",
+    "### Ask your agent",
     "",
-    "```bash Terminal",
+    "```text",
+    `Add the ${manifest.title} ${kind} from the HyperFrames Catalog to this project.`,
+    "Replace the demo content with mine and match the existing design and timing.",
+    "```",
+    "",
+    "### Install from the terminal",
+    "",
+    "```bash",
     installCmd,
     "```",
     "",
-    "</CodeGroup>",
-    "",
   );
 
-  // Details
+  // Registry metadata, visible. It is short — three rows and a file list — so
+  // hiding it behind a click bought nothing and cost Cmd+F and printing.
+  lines.push("## Details", "");
   if (kind === "block" && manifest.dimensions && manifest.duration) {
     lines.push(
-      "## Details",
-      "",
       `| Property | Value |`,
       `| --- | --- |`,
       `| Type | ${typeLabel(kind)} |`,
@@ -390,30 +396,22 @@ function generateItemMdx(kind: ItemKind, manifest: RegistryItem): string {
       "",
     );
   } else {
-    lines.push(
-      "## Details",
-      "",
-      `| Property | Value |`,
-      `| --- | --- |`,
-      `| Type | ${typeLabel(kind)} |`,
-      "",
-    );
-  }
-
-  if (textureGroups.length > 0) {
-    lines.push(...generateTextureAgentUsage(manifest, textureGroups));
-    lines.push(...generateTextureAnimationExample(manifest, textureGroups));
-    lines.push(...generateTextureExamples(manifest, textureGroups));
+    lines.push(`| Property | Value |`, `| --- | --- |`, `| Type | ${typeLabel(kind)} |`, "");
   }
 
   // Files
   if (textureGroups.length === 0) {
-    lines.push("## Files", "", "| File | Target | Type |", "| --- | --- | --- |");
+    lines.push("**Installed files**", "", "| File | Target | Type |", "| --- | --- | --- |");
     for (const f of manifest.files) {
       lines.push(`| \`${f.path}\` | \`${f.target}\` | ${f.type} |`);
     }
     lines.push("");
   }
+  if (textureGroups.length > 0) {
+    lines.push(...generateTextureAgentUsage(manifest, textureGroups));
+    lines.push(...generateTextureAnimationExample(manifest, textureGroups));
+    lines.push(...generateTextureExamples(manifest, textureGroups));
+  }
 
   // Usage hint — find the primary file by type, not array position.
   const primaryFile =
@@ -426,9 +424,11 @@ function generateItemMdx(kind: ItemKind, manifest: RegistryItem): string {
     const w = manifest.dimensions.width;
     const h = manifest.dimensions.height;
     lines.push(
-      "## Usage",
+      "## Use it",
       "",
-      "After installing, add the block to your host composition:",
+      "Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.",
+      "",
+      "**Wiring it by hand.** The installed block can be added to a host composition with:",
       "",
       "```html",
       `<div data-composition-id="${manifest.name}" data-composition-src="${primaryTarget}" data-start="0" data-duration="${manifest.duration}" data-track-index="1" data-width="${w}" data-height="${h}"></div>`,
@@ -438,16 +438,18 @@ function generateItemMdx(kind: ItemKind, manifest: RegistryItem): string {
   } else {
     if (textureGroups.length > 0) {
       lines.push(
-        "## Usage",
+        "## Use it",
         "",
         `After \`${installCmd}\`, the installed snippet lives at \`${primaryTarget}\` inside your current HyperFrames project. Open that file and paste the real \`<style>\` element near the bottom into your composition once; it defines \`hf-texture-text\` and every \`hf-texture-*\` class used by the examples above. Keep the installed texture PNGs in \`assets/${manifest.name}/masks/\`; the CSS references them with project-root URLs.`,
         "",
       );
     } else {
       lines.push(
-        "## Usage",
+        "## Use it",
         "",
-        `Open \`${primaryTarget}\` and paste its contents into your composition. See the comment header in the file for detailed instructions.`,
+        "Ask your agent to apply the component to the intended element and preserve the project’s existing timing.",
+        "",
+        `**Wiring it by hand.** Open \`${primaryTarget}\` and paste its contents into your composition. The comment header in that file contains any item-specific instructions.`,
         "",
       );
     }
@@ -458,6 +460,15 @@ function generateItemMdx(kind: ItemKind, manifest: RegistryItem): string {
     lines.push(`<Tip>Related skill: \`/${manifest.relatedSkill}\`</Tip>`, "");
   }
 
+  lines.push(
+    "## Related topics",
+    "",
+    "- [Browse the complete Catalog](/catalog)",
+    "- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)",
+    "- [Build a richer composition](/go-further)",
+    "",
+  );
+
   return lines.join("\n");
 }
 
@@ -521,38 +532,49 @@ function main(): void {
   const GROUP_ORDER: Record<string, number> = {
     "Code Animations": 0,
     Captions: 1,
-    "HTML-in-Canvas": 2,
+    "Interface & VFX": 2,
     "Social Overlays": 3,
     "Lower Thirds": 4,
-    "Shader Transitions": 5,
-    "CSS Transitions": 6,
-    Showcases: 7,
-    Data: 8,
-    Effects: 9,
-    Blocks: 10,
+    Transitions: 5,
+    "Code Themes": 6,
+    "Complete Scenes": 7,
+    "Data & Diagrams": 8,
+    "Effects & Annotations": 9,
+    "Titles & Layouts": 10,
   };
 
   // fallow-ignore-next-line complexity
   function groupForItem(entry: CatalogEntry): string {
     const tags = entry.tags;
     // Two-tag combos for specific grouping
-    if (tags.includes("transition") && tags.includes("shader")) return "Shader Transitions";
-    if (tags.includes("transition") && tags.includes("showcase")) return "CSS Transitions";
+    if (tags.includes("transition")) return "Transitions";
     if (tags.includes("captions")) return "Captions";
-    if (tags.includes("html-in-canvas")) return "HTML-in-Canvas";
+    if (tags.includes("html-in-canvas")) return "Interface & VFX";
     // Code animations (morph, flight, diff, …) — keyed on the code-animation tag so
     // they group separately from the static code-snippet themes.
     if (tags.includes("code-animation")) return "Code Animations";
     // Single-tag mapping
     if (tags.includes("lower-third")) return "Lower Thirds";
     if (tags.includes("social")) return "Social Overlays";
-    if (tags.includes("transition"))
-      return entry.type === "component" ? "Effects" : "CSS Transitions";
-    if (tags.includes("showcase") || tags.includes("3d")) return "Showcases";
-    if (tags.includes("data") || tags.includes("chart") || tags.includes("ascii")) return "Data";
-    if (entry.type === "component") return "Effects";
+    if (entry.name.startsWith("code-snippet-")) return "Code Themes";
+    if (tags.includes("showcase") || tags.includes("3d")) return "Complete Scenes";
+    if (
+      tags.includes("data") ||
+      tags.includes("chart") ||
+      tags.includes("ascii") ||
+      [
+        "flowchart",
+        "flowchart-vertical",
+        "hw-pipeline",
+        "hw-text-cloud",
+        "mk-progress-stat",
+        "mk-specs-list",
+      ].includes(entry.name)
+    )
+      return "Data & Diagrams";
+    if (entry.type === "component") return "Effects & Annotations";
     // Remaining blocks
-    return "Blocks";
+    return "Titles & Layouts";
   }
 
   const groupMap = new Map<string, string[]>();
@@ -569,19 +591,51 @@ function main(): void {
     .map(([group, pages]) => ({ group, pages }));
 
   if (catalogGroups.length > 0) {
-    // Replace or insert the Catalog tab
+    // Update the existing Catalog tab in place. Rebuilding the object dropped
+    // everything except the groups — the tab lost its `icon` — and removing it
+    // before re-inserting moved it, because the anchor tab it looked for
+    // ("Documentation") no longer exists and the fallback index put Catalog
+    // ahead of Studio. Only `groups` is generated; every other property and the
+    // tab's position belong to whoever curates docs.json.
     const existingIdx = tabs.findIndex((t) => t.tab === "Catalog");
-    const catalogTab = { tab: "Catalog", groups: catalogGroups };
-    // Remove existing Catalog tab if present, then insert at position 1
-    // (after Documentation, before Packages).
+    let navigationChanged = false;
     if (existingIdx >= 0) {
-      tabs.splice(existingIdx, 1);
+      const existingGroups = Array.isArray(tabs[existingIdx].groups)
+        ? tabs[existingIdx].groups
+        : [];
+      const isGeneratedCatalogGroup = (group: { pages?: unknown }): boolean => {
+        if (!Array.isArray(group.pages)) return true;
+        return group.pages.some(
+          (page) =>
+            typeof page === "string" &&
+            (page.startsWith("catalog/blocks/") || page.startsWith("catalog/components/")),
+        );
+      };
+      const generatedGroups = existingGroups.filter(isGeneratedCatalogGroup);
+      if (JSON.stringify(generatedGroups) !== JSON.stringify(catalogGroups)) {
+        const manualGroups = existingGroups.filter((group) => !isGeneratedCatalogGroup(group));
+        tabs[existingIdx] = {
+          ...tabs[existingIdx],
+          groups: [...manualGroups, ...catalogGroups],
+        };
+        navigationChanged = true;
+      }
+    } else {
+      const anchorIdx = tabs.findIndex((t) => t.tab === "Guides" || t.tab === "Documentation");
+      tabs.splice(anchorIdx >= 0 ? anchorIdx + 1 : 1, 0, {
+        tab: "Catalog",
+        icon: "grid-2",
+        groups: catalogGroups,
+      });
+      navigationChanged = true;
+    }
+    if (navigationChanged) {
+      writeFileSync(docsJsonPath, JSON.stringify(docsJson, null, 2) + "\n", "utf-8");
     }
-    const docsIdx = tabs.findIndex((t) => t.tab === "Documentation");
-    tabs.splice(docsIdx >= 0 ? docsIdx + 1 : 1, 0, catalogTab);
-    writeFileSync(docsJsonPath, JSON.stringify(docsJson, null, 2) + "\n", "utf-8");
     const totalPages = catalogGroups.reduce((n, g) => n + g.pages.length, 0);
-    console.log(`  ✓ docs.json updated with ${catalogGroups.length} groups, ${totalPages} pages`);
+    console.log(
+      `  ✓ docs.json ${navigationChanged ? "updated" : "already current"} with ${catalogGroups.length} groups, ${totalPages} pages`,
+    );
   }
 
   console.log("\nDone.");
diff --git a/scripts/generate-catalog-previews.ts b/scripts/generate-catalog-previews.ts
index d4fecf2d9..b2bdecfab 100644
--- a/scripts/generate-catalog-previews.ts
+++ b/scripts/generate-catalog-previews.ts
@@ -131,6 +131,24 @@ async function prepareProjectDir(item: CatalogItem): Promise<string> {
   mkdirSync(tmpDir, { recursive: true });
   cpSync(item.sourceDir, tmpDir, { recursive: true });
 
+  // Preview the item in the same layout users get after installation. Some
+  // components reference assets by their registry target path rather than by
+  // the flat source path stored beside the manifest.
+  const registryItemPath = join(tmpDir, "registry-item.json");
+  if (existsSync(registryItemPath)) {
+    const manifest = JSON.parse(readFileSync(registryItemPath, "utf-8")) as {
+      files?: { path?: string; target?: string }[];
+    };
+    for (const file of manifest.files ?? []) {
+      if (!file.path || !file.target) continue;
+      const sourcePath = join(tmpDir, file.path);
+      const targetPath = join(tmpDir, file.target);
+      if (!existsSync(sourcePath) || sourcePath === targetPath) continue;
+      mkdirSync(dirname(targetPath), { recursive: true });
+      cpSync(sourcePath, targetPath);
+    }
+  }
+
   // The HyperFrames producer navigates to index.html at the project root.
   // Blocks and component demos are standalone HTML files, not index.html.
   // If the entry file is a standalone HTML (has its own timeline registration),