diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
new file mode 100644
index 0000000000..7a7b8e97bf
--- /dev/null
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add beat-freeze-cut
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `beat-freeze-cut.html` | `compositions/beat-freeze-cut.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
new file mode 100644
index 0000000000..27231e816e
--- /dev/null
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add camcorder-hud
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `camcorder-hud.html` | `compositions/camcorder-hud.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
new file mode 100644
index 0000000000..3626f1083a
--- /dev/null
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add editorial-flash-overlay
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `editorial-flash-overlay.html` | `compositions/editorial-flash-overlay.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
new file mode 100644
index 0000000000..2dc72e4722
--- /dev/null
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add freeze-frame-dressing
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `freeze-frame-dressing.html` | `compositions/freeze-frame-dressing.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
new file mode 100644
index 0000000000..ba9eb32c7d
--- /dev/null
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -0,0 +1,45 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-frame
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## 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
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
new file mode 100644
index 0000000000..30e7ef1cde
--- /dev/null
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -0,0 +1,45 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-path-text
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## 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
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
new file mode 100644
index 0000000000..73fa2e80fd
--- /dev/null
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -0,0 +1,45 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-pipeline
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## 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
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
new file mode 100644
index 0000000000..cc49439c7b
--- /dev/null
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-scribble-transition
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 2.2s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `hw-scribble-transition.html` | `compositions/hw-scribble-transition.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
new file mode 100644
index 0000000000..361068f8f2
--- /dev/null
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -0,0 +1,45 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-text-cloud
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## 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
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
new file mode 100644
index 0000000000..bf6fd9325b
--- /dev/null
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -0,0 +1,45 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-title
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## 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
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
new file mode 100644
index 0000000000..ebd3e4129c
--- /dev/null
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-background
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 10s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-background.html` | `compositions/mk-background.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
new file mode 100644
index 0000000000..42a47419d2
--- /dev/null
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-callout-highlight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-callout-highlight.html` | `compositions/mk-callout-highlight.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
new file mode 100644
index 0000000000..1700692105
--- /dev/null
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-clone-wall-transition
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 2.4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-clone-wall-transition.html` | `compositions/mk-clone-wall-transition.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
new file mode 100644
index 0000000000..a8813964f3
--- /dev/null
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-line-graph
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-line-graph.html` | `compositions/mk-line-graph.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
new file mode 100644
index 0000000000..9148e41b98
--- /dev/null
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-placeholder-grid
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-placeholder-grid.html` | `compositions/mk-placeholder-grid.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
new file mode 100644
index 0000000000..46ff095a55
--- /dev/null
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-progress-stat
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-progress-stat.html` | `compositions/mk-progress-stat.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
new file mode 100644
index 0000000000..f6c64bc37e
--- /dev/null
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-specs-list
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-specs-list.html` | `compositions/mk-specs-list.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
new file mode 100644
index 0000000000..2613b2296b
--- /dev/null
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add organic-light-leak-overlay
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `organic-light-leak-overlay.html` | `compositions/organic-light-leak-overlay.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
new file mode 100644
index 0000000000..116281e491
--- /dev/null
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-comment-card
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-comment-card.html` | `compositions/yt-comment-card.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
new file mode 100644
index 0000000000..270cc28b50
--- /dev/null
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-lcd-background
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 10s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-lcd-background.html` | `compositions/yt-lcd-background.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
new file mode 100644
index 0000000000..7d7a51de9a
--- /dev/null
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-logo-intro
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-logo-intro.html` | `compositions/yt-logo-intro.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
new file mode 100644
index 0000000000..6de55589a6
--- /dev/null
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-prism-title
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-prism-title.html` | `compositions/yt-prism-title.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
new file mode 100644
index 0000000000..36c5e0f7df
--- /dev/null
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -0,0 +1,44 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-vertical-fill
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-vertical-fill.html` | `compositions/yt-vertical-fill.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```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>
+```
diff --git a/docs/catalog/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
new file mode 100644
index 0000000000..f339af19d5
--- /dev/null
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -0,0 +1,39 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-arrow
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## 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
+
+Open `compositions/components/hw-arrow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
new file mode 100644
index 0000000000..3d2ef16c47
--- /dev/null
+++ b/docs/catalog/components/hw-boil.mdx
@@ -0,0 +1,39 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-boil
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## 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
+
+Open `compositions/components/hw-boil.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
new file mode 100644
index 0000000000..d605f85b0f
--- /dev/null
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -0,0 +1,39 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-box-label
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## 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
+
+Open `compositions/components/hw-box-label.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
new file mode 100644
index 0000000000..cdf20139c7
--- /dev/null
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -0,0 +1,39 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-callout-circle
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## 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
+
+Open `compositions/components/hw-callout-circle.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
new file mode 100644
index 0000000000..18dbb7eea9
--- /dev/null
+++ b/docs/catalog/components/hw-underline.mdx
@@ -0,0 +1,39 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hw-underline
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## 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
+
+Open `compositions/components/hw-underline.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
new file mode 100644
index 0000000000..1d71cb0d1b
--- /dev/null
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -0,0 +1,38 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-emphasis-type
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-emphasis-type.html` | `compositions/components/mk-emphasis-type.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/mk-emphasis-type.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
new file mode 100644
index 0000000000..57add45ae2
--- /dev/null
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -0,0 +1,38 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-usage-arc
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-usage-arc.html` | `compositions/components/mk-usage-arc.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/mk-usage-arc.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/yt-camera-move.mdx b/docs/catalog/components/yt-camera-move.mdx
new file mode 100644
index 0000000000..a30f559030
--- /dev/null
+++ b/docs/catalog/components/yt-camera-move.mdx
@@ -0,0 +1,38 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-camera-move
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-camera-move.html` | `compositions/components/yt-camera-move.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/yt-camera-move.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/yt-circle-pointer.mdx b/docs/catalog/components/yt-circle-pointer.mdx
new file mode 100644
index 0000000000..6a3f92c49e
--- /dev/null
+++ b/docs/catalog/components/yt-circle-pointer.mdx
@@ -0,0 +1,38 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-circle-pointer
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-circle-pointer.html` | `compositions/components/yt-circle-pointer.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/yt-circle-pointer.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/yt-feather-highlight.mdx b/docs/catalog/components/yt-feather-highlight.mdx
new file mode 100644
index 0000000000..e32eef4544
--- /dev/null
+++ b/docs/catalog/components/yt-feather-highlight.mdx
@@ -0,0 +1,38 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-feather-highlight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-feather-highlight.html` | `compositions/components/yt-feather-highlight.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/yt-feather-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/yt-screen-warp.mdx b/docs/catalog/components/yt-screen-warp.mdx
new file mode 100644
index 0000000000..0a17de38c1
--- /dev/null
+++ b/docs/catalog/components/yt-screen-warp.mdx
@@ -0,0 +1,38 @@
+---
+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
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-screen-warp
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-screen-warp.html` | `compositions/components/yt-screen-warp.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/yt-screen-warp.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/docs.json b/docs/docs.json
index 585f85826b..98d71a8e91 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -200,14 +200,14 @@
             "group": "Code Animations",
             "pages": [
               "catalog/blocks/code-3d-extrude",
-              "catalog/blocks/code-shader-dissolve",
-              "catalog/blocks/code-particle-assemble",
-              "catalog/blocks/code-morph",
-              "catalog/blocks/code-snippet-flight",
-              "catalog/blocks/code-typing",
               "catalog/blocks/code-diff",
               "catalog/blocks/code-highlight",
-              "catalog/blocks/code-scroll"
+              "catalog/blocks/code-morph",
+              "catalog/blocks/code-particle-assemble",
+              "catalog/blocks/code-scroll",
+              "catalog/blocks/code-shader-dissolve",
+              "catalog/blocks/code-snippet-flight",
+              "catalog/blocks/code-typing"
             ]
           },
           {
@@ -227,7 +227,8 @@
               "catalog/components/caption-particle-burst",
               "catalog/components/caption-pill-karaoke",
               "catalog/components/caption-texture",
-              "catalog/components/caption-weight-shift"
+              "catalog/components/caption-weight-shift",
+              "catalog/blocks/mk-callout-highlight"
             ]
           },
           {
@@ -251,12 +252,15 @@
           {
             "group": "Social Overlays",
             "pages": [
+              "catalog/blocks/editorial-flash-overlay",
+              "catalog/blocks/freeze-frame-dressing",
               "catalog/blocks/instagram-follow",
               "catalog/blocks/macos-notification",
               "catalog/blocks/reddit-post",
               "catalog/blocks/spotify-card",
               "catalog/blocks/tiktok-follow",
               "catalog/blocks/x-post",
+              "catalog/blocks/yt-comment-card",
               "catalog/blocks/yt-lower-third"
             ]
           },
@@ -299,6 +303,10 @@
           {
             "group": "CSS Transitions",
             "pages": [
+              "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",
@@ -320,6 +328,30 @@
               "catalog/blocks/app-showcase",
               "catalog/blocks/apple-money-count",
               "catalog/blocks/blue-sweater-intro-video",
+              "catalog/blocks/code-snippet-apple-terminal-basic",
+              "catalog/blocks/code-snippet-apple-terminal-clear-dark",
+              "catalog/blocks/code-snippet-apple-terminal-clear-light",
+              "catalog/blocks/code-snippet-apple-terminal-grass",
+              "catalog/blocks/code-snippet-apple-terminal-homebrew",
+              "catalog/blocks/code-snippet-apple-terminal-man-page",
+              "catalog/blocks/code-snippet-apple-terminal-novel",
+              "catalog/blocks/code-snippet-apple-terminal-ocean",
+              "catalog/blocks/code-snippet-apple-terminal-pro",
+              "catalog/blocks/code-snippet-apple-terminal-red-sands",
+              "catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
+              "catalog/blocks/code-snippet-apple-terminal-solid-colors",
+              "catalog/blocks/code-snippet-dark-2026",
+              "catalog/blocks/code-snippet-dark-modern",
+              "catalog/blocks/code-snippet-dark-plus",
+              "catalog/blocks/code-snippet-high-contrast",
+              "catalog/blocks/code-snippet-high-contrast-light",
+              "catalog/blocks/code-snippet-light-2026",
+              "catalog/blocks/code-snippet-light-modern",
+              "catalog/blocks/code-snippet-light-plus",
+              "catalog/blocks/code-snippet-monokai",
+              "catalog/blocks/code-snippet-solarized-light",
+              "catalog/blocks/code-snippet-visual-studio-dark",
+              "catalog/blocks/code-snippet-visual-studio-light",
               "catalog/blocks/north-korea-locked-down",
               "catalog/blocks/nyc-paris-flight",
               "catalog/blocks/ui-3d-reveal",
@@ -330,6 +362,7 @@
             "group": "Data",
             "pages": [
               "catalog/blocks/data-chart",
+              "catalog/blocks/mk-line-graph",
               "catalog/blocks/spain-map",
               "catalog/blocks/us-map",
               "catalog/blocks/us-map-bubble",
@@ -341,57 +374,49 @@
           {
             "group": "Effects",
             "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",
+              "catalog/components/hw-callout-circle",
+              "catalog/components/hw-underline",
+              "catalog/components/mk-emphasis-type",
+              "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/vignette"
-            ]
-          },
-          {
-            "group": "Text Effects",
-            "pages": [
-              "catalog/components/caption-blend-difference",
-              "catalog/components/morph-text",
-              "catalog/components/texture-mask-text"
+              "catalog/components/texture-mask-text",
+              "catalog/components/vignette",
+              "catalog/components/yt-camera-move",
+              "catalog/components/yt-circle-pointer",
+              "catalog/components/yt-feather-highlight",
+              "catalog/components/yt-screen-warp"
             ]
           },
           {
             "group": "Blocks",
             "pages": [
+              "catalog/blocks/camcorder-hud",
               "catalog/blocks/flowchart",
               "catalog/blocks/flowchart-vertical",
-              "catalog/blocks/logo-outro"
-            ]
-          },
-          {
-            "group": "Code Snippets",
-            "pages": [
-              "catalog/blocks/code-snippet-apple-terminal-basic",
-              "catalog/blocks/code-snippet-apple-terminal-clear-dark",
-              "catalog/blocks/code-snippet-apple-terminal-clear-light",
-              "catalog/blocks/code-snippet-apple-terminal-grass",
-              "catalog/blocks/code-snippet-apple-terminal-homebrew",
-              "catalog/blocks/code-snippet-apple-terminal-man-page",
-              "catalog/blocks/code-snippet-apple-terminal-novel",
-              "catalog/blocks/code-snippet-apple-terminal-ocean",
-              "catalog/blocks/code-snippet-apple-terminal-pro",
-              "catalog/blocks/code-snippet-apple-terminal-red-sands",
-              "catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
-              "catalog/blocks/code-snippet-apple-terminal-solid-colors",
-              "catalog/blocks/code-snippet-dark-2026",
-              "catalog/blocks/code-snippet-dark-modern",
-              "catalog/blocks/code-snippet-dark-plus",
-              "catalog/blocks/code-snippet-high-contrast",
-              "catalog/blocks/code-snippet-high-contrast-light",
-              "catalog/blocks/code-snippet-light-2026",
-              "catalog/blocks/code-snippet-light-modern",
-              "catalog/blocks/code-snippet-light-plus",
-              "catalog/blocks/code-snippet-monokai",
-              "catalog/blocks/code-snippet-solarized-light",
-              "catalog/blocks/code-snippet-visual-studio-dark",
-              "catalog/blocks/code-snippet-visual-studio-light"
+              "catalog/blocks/hw-frame",
+              "catalog/blocks/hw-path-text",
+              "catalog/blocks/hw-pipeline",
+              "catalog/blocks/hw-text-cloud",
+              "catalog/blocks/hw-title",
+              "catalog/blocks/logo-outro",
+              "catalog/blocks/mk-background",
+              "catalog/blocks/mk-placeholder-grid",
+              "catalog/blocks/mk-progress-stat",
+              "catalog/blocks/mk-specs-list",
+              "catalog/blocks/yt-lcd-background",
+              "catalog/blocks/yt-logo-intro",
+              "catalog/blocks/yt-prism-title",
+              "catalog/blocks/yt-vertical-fill"
             ]
           }
         ]
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 7541bf9ead..4789619fbb 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -1,1371 +1,2353 @@
 [
-    {
-        "name": "app-showcase",
-        "type": "block",
-        "title": "App Showcase",
-        "description": "Fitness app product showcase with three floating smartphone screens",
-        "tags": [
-            "showcase",
-            "app",
-            "3d"
-        ],
-        "href": "/catalog/blocks/app-showcase",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
-    },
-    {
-        "name": "apple-money-count",
-        "type": "block",
-        "title": "Apple Money Count",
-        "description": "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.",
-        "tags": [
-            "showcase",
-            "finance",
-            "kinetic",
-            "youtube",
-            "sfx"
-        ],
-        "href": "/catalog/blocks/apple-money-count",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
-    },
-    {
-        "name": "blue-sweater-intro-video",
-        "type": "block",
-        "title": "Blue Sweater Intro Video",
-        "description": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
-        "tags": [
-            "showcase",
-            "ai",
-            "creator",
-            "sfx"
-        ],
-        "href": "/catalog/blocks/blue-sweater-intro-video",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
-    },
-    {
-        "name": "caption-blend-difference",
-        "type": "component",
-        "title": "Blend Difference",
-        "description": "Auto-inverting text using mix-blend-mode: difference \u2014 flips between white and black per-pixel against the background",
-        "tags": [
-            "text",
-            "effect",
-            "blend-mode",
-            "contrast",
-            "inversion"
-        ],
-        "href": "/catalog/components/caption-blend-difference",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png"
-    },
-    {
-        "name": "caption-clip-wipe",
-        "type": "component",
-        "title": "Clip Wipe",
-        "description": "Left-to-right clip-path wipe reveal per word",
-        "tags": [
-            "captions",
-            "caption-style",
-            "wipe",
-            "clip-path",
-            "reveal"
-        ],
-        "href": "/catalog/components/caption-clip-wipe",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png"
-    },
-    {
-        "name": "caption-editorial-emphasis",
-        "type": "component",
-        "title": "Editorial Emphasis",
-        "description": "Dual-font system with dramatic size contrast for emphasis words",
-        "tags": [
-            "captions",
-            "caption-style",
-            "editorial",
-            "typography",
-            "emphasis"
-        ],
-        "href": "/catalog/components/caption-editorial-emphasis",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png"
-    },
-    {
-        "name": "caption-emoji-pop",
-        "type": "component",
-        "title": "Emoji Pop",
-        "description": "Emoji integration with stroked text and horizontal squeeze entrance",
-        "tags": [
-            "captions",
-            "caption-style",
-            "emoji",
-            "social"
-        ],
-        "href": "/catalog/components/caption-emoji-pop",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png"
-    },
-    {
-        "name": "caption-glitch-rgb",
-        "type": "component",
-        "title": "Glitch RGB",
-        "description": "RGB chromatic aberration with CRT scanline overlay",
-        "tags": [
-            "captions",
-            "caption-style",
-            "glitch",
-            "cyber",
-            "tech"
-        ],
-        "href": "/catalog/components/caption-glitch-rgb",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png"
-    },
-    {
-        "name": "caption-gradient-fill",
-        "type": "component",
-        "title": "Gradient Fill",
-        "description": "Gradient-clipped text with elastic bounce entrance",
-        "tags": [
-            "captions",
-            "caption-style",
-            "gradient",
-            "colorful"
-        ],
-        "href": "/catalog/components/caption-gradient-fill",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
-    },
-    {
-        "name": "caption-highlight",
-        "type": "component",
-        "title": "Highlight",
-        "description": "Red background sweep behind each active word, TikTok-style",
-        "tags": [
-            "captions",
-            "caption-style",
-            "highlight",
-            "social",
-            "tiktok"
-        ],
-        "href": "/catalog/components/caption-highlight",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png"
-    },
-    {
-        "name": "caption-kinetic-slam",
-        "type": "component",
-        "title": "Kinetic Slam",
-        "description": "Full-screen single-word display with alternating entrance directions",
-        "tags": [
-            "captions",
-            "caption-style",
-            "kinetic",
-            "typography",
-            "slam"
-        ],
-        "href": "/catalog/components/caption-kinetic-slam",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png"
-    },
-    {
-        "name": "caption-matrix-decode",
-        "type": "component",
-        "title": "Matrix Decode",
-        "description": "Character scramble animation before text reveal",
-        "tags": [
-            "captions",
-            "caption-style",
-            "matrix",
-            "scramble",
-            "decode"
-        ],
-        "href": "/catalog/components/caption-matrix-decode",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png"
-    },
-    {
-        "name": "caption-neon-accent",
-        "type": "component",
-        "title": "Neon Accent",
-        "description": "Multi-color neon glow accents with wiggle drift animation",
-        "tags": [
-            "captions",
-            "caption-style",
-            "neon",
-            "glow",
-            "accent"
-        ],
-        "href": "/catalog/components/caption-neon-accent",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png"
-    },
-    {
-        "name": "caption-neon-glow",
-        "type": "component",
-        "title": "Neon Glow",
-        "description": "Cyan and magenta neon glow with keyword accent colors",
-        "tags": [
-            "captions",
-            "caption-style",
-            "neon",
-            "glow",
-            "gaming"
-        ],
-        "href": "/catalog/components/caption-neon-glow",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png"
-    },
-    {
-        "name": "caption-parallax-layers",
-        "type": "component",
-        "title": "Parallax Layers",
-        "description": "Behind-subject 3D text layering with vertical stretch effect",
-        "tags": [
-            "captions",
-            "caption-style",
-            "parallax",
-            "3d",
-            "depth"
-        ],
-        "href": "/catalog/components/caption-parallax-layers",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png"
-    },
-    {
-        "name": "caption-particle-burst",
-        "type": "component",
-        "title": "Particle Burst",
-        "description": "Keyword words trigger colored particle explosions",
-        "tags": [
-            "captions",
-            "caption-style",
-            "particles",
-            "burst",
-            "effects"
-        ],
-        "href": "/catalog/components/caption-particle-burst",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png"
-    },
-    {
-        "name": "caption-pill-karaoke",
-        "type": "component",
-        "title": "Pill Karaoke",
-        "description": "Pill-shaped container with per-word karaoke color highlight",
-        "tags": [
-            "captions",
-            "caption-style",
-            "karaoke",
-            "pill"
-        ],
-        "href": "/catalog/components/caption-pill-karaoke",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
-    },
-    {
-        "name": "caption-texture",
-        "type": "component",
-        "title": "Texture",
-        "description": "Flowing texture mask over large uppercase text \u2014 ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
-        "tags": [
-            "captions",
-            "caption-style",
-            "texture",
-            "mask"
-        ],
-        "href": "/catalog/components/caption-texture",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png"
-    },
-    {
-        "name": "caption-weight-shift",
-        "type": "component",
-        "title": "Weight Shift",
-        "description": "Elegant font-weight transition between caption lines",
-        "tags": [
-            "captions",
-            "caption-style",
-            "minimal",
-            "typography"
-        ],
-        "href": "/catalog/components/caption-weight-shift",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png"
-    },
-    {
-        "name": "chromatic-radial-split",
-        "type": "block",
-        "title": "Chromatic Radial Split",
-        "description": "Shader transition with chromatic aberration radial split",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/chromatic-radial-split",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
-    },
-    {
-        "name": "cinematic-zoom",
-        "type": "block",
-        "title": "Cinematic Zoom",
-        "description": "Shader transition with dramatic zoom blur",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/cinematic-zoom",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
-    },
-    {
-        "name": "cross-warp-morph",
-        "type": "block",
-        "title": "Cross Warp Morph",
-        "description": "Shader transition with cross-warped morphing",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/cross-warp-morph",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
-    },
-    {
-        "name": "data-chart",
-        "type": "block",
-        "title": "Data Chart",
-        "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
-        "tags": [
-            "data",
-            "chart",
-            "statistics"
-        ],
-        "href": "/catalog/blocks/data-chart",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
-    },
-    {
-        "name": "domain-warp-dissolve",
-        "type": "block",
-        "title": "Domain Warp Dissolve",
-        "description": "Shader transition with fractal noise domain warping",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/domain-warp-dissolve",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
-    },
-    {
-        "name": "flash-through-white",
-        "type": "block",
-        "title": "Flash Through White",
-        "description": "Shader transition with white flash crossfade",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/flash-through-white",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
-    },
-    {
-        "name": "flowchart",
-        "type": "block",
-        "title": "Flowchart",
-        "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
-        "tags": [
-            "diagram",
-            "flowchart",
-            "interactive"
-        ],
-        "href": "/catalog/blocks/flowchart",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
-    },
-    {
-        "name": "flowchart-vertical",
-        "type": "block",
-        "title": "Flowchart Vertical",
-        "description": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
-        "tags": [
-            "diagram",
-            "flowchart",
-            "interactive",
-            "portrait"
-        ],
-        "href": "/catalog/blocks/flowchart-vertical",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png"
-    },
-    {
-        "name": "glitch",
-        "type": "block",
-        "title": "Glitch",
-        "description": "Shader transition with digital glitch artifacts",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/glitch",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
-    },
-    {
-        "name": "grain-overlay",
-        "type": "component",
-        "title": "Grain Overlay",
-        "description": "Animated film grain texture overlay using CSS keyframes \u2014 adds warmth and analog character to any composition",
-        "tags": [
-            "texture",
-            "grain",
-            "overlay",
-            "film"
-        ],
-        "href": "/catalog/components/grain-overlay",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png"
-    },
-    {
-        "name": "gravitational-lens",
-        "type": "block",
-        "title": "Gravitational Lens",
-        "description": "Shader transition with gravitational lensing distortion",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/gravitational-lens",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
-    },
-    {
-        "name": "grid-pixelate-wipe",
-        "type": "component",
-        "title": "Grid Pixelate Wipe",
-        "description": "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing \u2014 use between scenes",
-        "tags": [
-            "transition",
-            "wipe",
-            "grid",
-            "pixelate"
-        ],
-        "href": "/catalog/components/grid-pixelate-wipe",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
-    },
-    {
-        "name": "motion-blur",
-        "type": "component",
-        "title": "Motion Blur",
-        "description": "Velocity-driven motion blur \u2014 samples element position each frame and scales CSS blur + horizontal stretch proportionally to speed",
-        "tags": [
-            "effect",
-            "motion-blur",
-            "velocity",
-            "animation",
-            "physics"
-        ],
-        "href": "/catalog/components/motion-blur",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png"
-    },
-    {
-        "name": "instagram-follow",
-        "type": "block",
-        "title": "Instagram Follow",
-        "description": "Animated Instagram follow overlay with profile card and follow button",
-        "tags": [
-            "social",
-            "overlay",
-            "instagram"
-        ],
-        "href": "/catalog/blocks/instagram-follow",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
-    },
-    {
-        "name": "ios26-liquid-glass",
-        "type": "block",
-        "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.",
-        "tags": [
-            "liquid-glass-html-in-canvas",
-            "webgpu",
-            "3d",
-            "iphone",
-            "ios26",
-            "notifications",
-            "gltf",
-            "html-in-canvas"
-        ],
-        "href": "/catalog/blocks/ios26-liquid-glass",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png"
-    },
-    {
-        "name": "light-leak",
-        "type": "block",
-        "title": "Light Leak",
-        "description": "Shader transition with cinematic light leak overlay",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/light-leak",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
-    },
-    {
-        "name": "liquid-glass-context-menu",
-        "type": "block",
-        "title": "Liquid Glass Context Menu",
-        "description": "Frosted glass context menu panel drifting over an aurora shader background",
-        "tags": [
-            "html-in-canvas",
-            "liquid-glass-html-in-canvas",
-            "webgpu"
-        ],
-        "href": "/catalog/blocks/liquid-glass-context-menu",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png"
-    },
-    {
-        "name": "liquid-glass-media-controls",
-        "type": "block",
-        "title": "Liquid Glass Media Controls",
-        "description": "Frosted glass media control panels spreading over an aurora shader background",
-        "tags": [
-            "html-in-canvas",
-            "liquid-glass-html-in-canvas",
-            "webgpu"
-        ],
-        "href": "/catalog/blocks/liquid-glass-media-controls",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png"
-    },
-    {
-        "name": "liquid-glass-notification",
-        "type": "block",
-        "title": "Liquid Glass Notification",
-        "description": "Frosted glass notification cards floating over an aurora shader background",
-        "tags": [
-            "html-in-canvas",
-            "liquid-glass-html-in-canvas",
-            "webgpu"
-        ],
-        "href": "/catalog/blocks/liquid-glass-notification",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png"
-    },
-    {
-        "name": "liquid-glass-widgets",
-        "type": "block",
-        "title": "Liquid Glass Widgets",
-        "description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
-        "tags": [
-            "html-in-canvas",
-            "liquid-glass-html-in-canvas",
-            "webgpu"
-        ],
-        "href": "/catalog/blocks/liquid-glass-widgets",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png"
-    },
-    {
-        "name": "logo-outro",
-        "type": "block",
-        "title": "Logo Outro",
-        "description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
-        "tags": [
-            "branding",
-            "outro",
-            "logo"
-        ],
-        "href": "/catalog/blocks/logo-outro",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
-    },
-    {
-        "name": "lower-third-bild",
-        "type": "block",
-        "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.",
-        "tags": [
-            "broadcast",
-            "lower-third",
-            "news",
-            "overlay"
-        ],
-        "href": "/catalog/blocks/lower-third-bild",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png"
-    },
-    {
-        "name": "lt-accent-underline",
-        "type": "block",
-        "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",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "minimal"
-        ],
-        "href": "/catalog/blocks/lt-accent-underline",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png"
-    },
-    {
-        "name": "lt-bold-block",
-        "type": "block",
-        "title": "Lower Third — Bold Block",
-        "description": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-bold-block",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png"
-    },
-    {
-        "name": "lt-clean-bar",
-        "type": "block",
-        "title": "Lower Third — Clean Bar",
-        "description": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview"
-        ],
-        "href": "/catalog/blocks/lt-clean-bar",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png"
-    },
-    {
-        "name": "lt-color-block",
-        "type": "block",
-        "title": "Lower Third — Color Block",
-        "description": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-color-block",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png"
-    },
-    {
-        "name": "lt-dark-card",
-        "type": "block",
-        "title": "Lower Third — Dark Card",
-        "description": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "dark"
-        ],
-        "href": "/catalog/blocks/lt-dark-card",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png"
-    },
-    {
-        "name": "lt-kicker-name",
-        "type": "block",
-        "title": "Lower Third — Kicker Name",
-        "description": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-kicker-name",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png"
-    },
-    {
-        "name": "lt-mask-reveal",
-        "type": "block",
-        "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",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-mask-reveal",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png"
-    },
-    {
-        "name": "lt-side-rule",
-        "type": "block",
-        "title": "Lower Third — Side Rule",
-        "description": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "minimal"
-        ],
-        "href": "/catalog/blocks/lt-side-rule",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png"
-    },
-    {
-        "name": "lt-soft-pill",
-        "type": "block",
-        "title": "Lower Third — Soft Pill",
-        "description": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "minimal"
-        ],
-        "href": "/catalog/blocks/lt-soft-pill",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png"
-    },
-    {
-        "name": "lt-stack-bars",
-        "type": "block",
-        "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",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-stack-bars",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png"
-    },
-    {
-        "name": "macos-notification",
-        "type": "block",
-        "title": "macOS Notification",
-        "description": "Animated macOS-style notification banner with app icon and message",
-        "tags": [
-            "social",
-            "overlay",
-            "notification"
-        ],
-        "href": "/catalog/blocks/macos-notification",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
-    },
-    {
-        "name": "macos-tahoe-liquid-glass",
-        "type": "block",
-        "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.",
-        "tags": [
-            "html-in-canvas",
-            "3d",
-            "macos",
-            "tahoe",
-            "gltf"
-        ],
-        "href": "/catalog/blocks/macos-tahoe-liquid-glass",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
-    },
-    {
-        "name": "news-ticker",
-        "type": "block",
-        "title": "News Ticker",
-        "description": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "news",
-            "ticker"
-        ],
-        "href": "/catalog/blocks/news-ticker",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png"
-    },
-    {
-        "name": "north-korea-locked-down",
-        "type": "block",
-        "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.",
-        "tags": [
-            "showcase",
-            "map",
-            "annotation",
-            "youtube",
-            "kinetic"
-        ],
-        "href": "/catalog/blocks/north-korea-locked-down",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
-    },
-    {
-        "name": "nyc-paris-flight",
-        "type": "block",
-        "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.",
-        "tags": [
-            "showcase",
-            "travel",
-            "map",
-            "youtube",
-            "sfx"
-        ],
-        "href": "/catalog/blocks/nyc-paris-flight",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
-    },
-    {
-        "name": "parallax-unzoom",
-        "type": "component",
-        "title": "Parallax Unzoom",
-        "description": "Reveal transition \u2014 focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)",
-        "tags": [
-            "transition",
-            "reveal",
-            "unzoom",
-            "parallax",
-            "grid",
-            "hero"
-        ],
-        "href": "/catalog/components/parallax-unzoom",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png"
-    },
-    {
-        "name": "parallax-zoom",
-        "type": "component",
-        "title": "Parallax Zoom",
-        "description": "Center card scales up to fill the frame while siblings parallax outward \u2014 inspired by the eBay Playbook hero transition",
-        "tags": [
-            "transition",
-            "zoom",
-            "parallax",
-            "grid",
-            "hero"
-        ],
-        "href": "/catalog/components/parallax-zoom",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png"
-    },
-    {
-        "name": "reddit-post",
-        "type": "block",
-        "title": "Reddit Post Card",
-        "description": "Animated Reddit post card overlay with upvotes and comments",
-        "tags": [
-            "social",
-            "overlay",
-            "reddit"
-        ],
-        "href": "/catalog/blocks/reddit-post",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
-    },
-    {
-        "name": "ridged-burn",
-        "type": "block",
-        "title": "Ridged Burn",
-        "description": "Shader transition with ridged turbulence burn effect",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/ridged-burn",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
-    },
-    {
-        "name": "ripple-waves",
-        "type": "block",
-        "title": "Ripple Waves",
-        "description": "Shader transition with concentric ripple wave distortion",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/ripple-waves",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
-    },
-    {
-        "name": "sdf-iris",
-        "type": "block",
-        "title": "SDF Iris",
-        "description": "Shader transition with signed distance field iris reveal",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/sdf-iris",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
-    },
-    {
-        "name": "shimmer-sweep",
-        "type": "component",
-        "title": "Shimmer Sweep",
-        "description": "Animated light sweep across text or elements using a CSS gradient mask \u2014 ideal for AI accents and premium reveals",
-        "tags": [
-            "text",
-            "shimmer",
-            "highlight",
-            "effect"
-        ],
-        "href": "/catalog/components/shimmer-sweep",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
-    },
-    {
-        "name": "spain-map",
-        "type": "block",
-        "title": "Spain Map",
-        "description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend \u2014 D3 conic conformal projection",
-        "tags": [
-            "data",
-            "map",
-            "geography",
-            "spain",
-            "europe",
-            "choropleth"
-        ],
-        "href": "/catalog/blocks/spain-map",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png"
-    },
-    {
-        "name": "spotify-card",
-        "type": "block",
-        "title": "Spotify Now Playing",
-        "description": "Animated Spotify now-playing card with album art and progress bar",
-        "tags": [
-            "social",
-            "overlay",
-            "spotify"
-        ],
-        "href": "/catalog/blocks/spotify-card",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
-    },
-    {
-        "name": "swirl-vortex",
-        "type": "block",
-        "title": "Swirl Vortex",
-        "description": "Shader transition with swirling vortex distortion",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/swirl-vortex",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
-    },
-    {
-        "name": "texture-mask-text",
-        "type": "component",
-        "title": "Texture Mask Text",
-        "description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
-        "tags": [
-            "text",
-            "texture",
-            "mask",
-            "effect"
-        ],
-        "href": "/catalog/components/texture-mask-text",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png"
-    },
-    {
-        "name": "thermal-distortion",
-        "type": "block",
-        "title": "Thermal Distortion",
-        "description": "Shader transition with heat haze thermal distortion",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/thermal-distortion",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
-    },
-    {
-        "name": "tiktok-follow",
-        "type": "block",
-        "title": "TikTok Follow",
-        "description": "Animated TikTok follow overlay with profile card and follow button",
-        "tags": [
-            "social",
-            "overlay",
-            "tiktok"
-        ],
-        "href": "/catalog/blocks/tiktok-follow",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
-    },
-    {
-        "name": "transitions-3d",
-        "type": "block",
-        "title": "3D Transitions",
-        "description": "Showcase of 3D perspective flip and rotate transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-3d",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
-    },
-    {
-        "name": "transitions-blur",
-        "type": "block",
-        "title": "Blur Transitions",
-        "description": "Showcase of blur-based transitions between scenes",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-blur",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
-    },
-    {
-        "name": "transitions-cover",
-        "type": "block",
-        "title": "Cover Transitions",
-        "description": "Showcase of cover/uncover slide transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-cover",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
-    },
-    {
-        "name": "transitions-destruction",
-        "type": "block",
-        "title": "Destruction Transitions",
-        "description": "Showcase of destructive break-apart transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-destruction",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
-    },
-    {
-        "name": "transitions-dissolve",
-        "type": "block",
-        "title": "Dissolve Transitions",
-        "description": "Showcase of dissolve and fade transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-dissolve",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
-    },
-    {
-        "name": "transitions-distortion",
-        "type": "block",
-        "title": "Distortion Transitions",
-        "description": "Showcase of warp and distortion transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-distortion",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
-    },
-    {
-        "name": "transitions-grid",
-        "type": "block",
-        "title": "Grid Transitions",
-        "description": "Showcase of grid-based tile transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-grid",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
-    },
-    {
-        "name": "transitions-light",
-        "type": "block",
-        "title": "Light Transitions",
-        "description": "Showcase of light-based glow and flash transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-light",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
-    },
-    {
-        "name": "transitions-mechanical",
-        "type": "block",
-        "title": "Mechanical Transitions",
-        "description": "Showcase of mechanical shutter and iris transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-mechanical",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
-    },
-    {
-        "name": "transitions-other",
-        "type": "block",
-        "title": "Other Transitions",
-        "description": "Showcase of miscellaneous creative transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-other",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
-    },
-    {
-        "name": "transitions-push",
-        "type": "block",
-        "title": "Push Transitions",
-        "description": "Showcase of push and slide transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-push",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
-    },
-    {
-        "name": "transitions-radial",
-        "type": "block",
-        "title": "Radial Transitions",
-        "description": "Showcase of radial wipe and reveal transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-radial",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
-    },
-    {
-        "name": "transitions-scale",
-        "type": "block",
-        "title": "Scale Transitions",
-        "description": "Showcase of scale and zoom transitions",
-        "tags": [
-            "transition",
-            "showcase"
-        ],
-        "href": "/catalog/blocks/transitions-scale",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
-    },
-    {
-        "name": "ui-3d-reveal",
-        "type": "block",
-        "title": "3D UI Reveal",
-        "description": "Perspective 3D reveal animation for UI elements",
-        "tags": [
-            "showcase",
-            "3d",
-            "reveal"
-        ],
-        "href": "/catalog/blocks/ui-3d-reveal",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
-    },
-    {
-        "name": "us-map",
-        "type": "block",
-        "title": "US Map",
-        "description": "Animated US choropleth map with staggered state reveals, value labels, and gradient legend \u2014 pure inline SVG with GSAP",
-        "tags": [
-            "data",
-            "map",
-            "geography",
-            "usa",
-            "choropleth"
-        ],
-        "href": "/catalog/blocks/us-map",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png"
-    },
-    {
-        "name": "us-map-bubble",
-        "type": "block",
-        "title": "US Bubble Map",
-        "description": "Animated US bubble map with proportional city markers, value callouts, and connection lines \u2014 composable with us-map",
-        "tags": [
-            "data",
-            "map",
-            "geography",
-            "usa",
-            "bubble",
-            "cities"
-        ],
-        "href": "/catalog/blocks/us-map-bubble",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png"
-    },
-    {
-        "name": "us-map-flow",
-        "type": "block",
-        "title": "US Flow Map",
-        "description": "Animated connection arcs between US cities over a base map \u2014 composable origin-destination flow visualization",
-        "tags": [
-            "data",
-            "map",
-            "geography",
-            "usa",
-            "flow",
-            "connections",
-            "arcs"
-        ],
-        "href": "/catalog/blocks/us-map-flow",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png"
-    },
-    {
-        "name": "us-map-hex",
-        "type": "block",
-        "title": "US Hex Grid Map",
-        "description": "Animated hexagonal tile grid map \u2014 each state as an equal-weight hex with data fill and abbreviation label",
-        "tags": [
-            "data",
-            "map",
-            "geography",
-            "usa",
-            "hexgrid",
-            "tilegrid"
-        ],
-        "href": "/catalog/blocks/us-map-hex",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png"
-    },
-    {
-        "name": "vfx-iphone-device",
-        "type": "block",
-        "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\u00b0 turntable.",
-        "tags": [
-            "html-in-canvas",
-            "3d",
-            "device",
-            "iphone",
-            "macbook",
-            "gltf"
-        ],
-        "href": "/catalog/blocks/vfx-iphone-device",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png"
-    },
-    {
-        "name": "vfx-liquid-background",
-        "type": "block",
-        "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.",
-        "tags": [
-            "html-in-canvas",
-            "liquid",
-            "webgl",
-            "displacement",
-            "background"
-        ],
-        "href": "/catalog/blocks/vfx-liquid-background",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
-    },
-    {
-        "name": "vfx-liquid-glass",
-        "type": "block",
-        "title": "Liquid Glass",
-        "description": "VFX composition block",
-        "tags": [
-            "html-in-canvas",
-            "webgl"
-        ],
-        "href": "/catalog/blocks/vfx-liquid-glass",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png"
-    },
-    {
-        "name": "vfx-magnetic",
-        "type": "block",
-        "title": "Magnetic",
-        "description": "VFX composition block",
-        "tags": [
-            "html-in-canvas",
-            "webgl"
-        ],
-        "href": "/catalog/blocks/vfx-magnetic",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png"
-    },
-    {
-        "name": "vfx-portal",
-        "type": "block",
-        "title": "Portal",
-        "description": "VFX composition block",
-        "tags": [
-            "html-in-canvas",
-            "webgl"
-        ],
-        "href": "/catalog/blocks/vfx-portal",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png"
-    },
-    {
-        "name": "vfx-shatter",
-        "type": "block",
-        "title": "Shatter",
-        "description": "VFX composition block",
-        "tags": [
-            "html-in-canvas",
-            "webgl"
-        ],
-        "href": "/catalog/blocks/vfx-shatter",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png"
-    },
-    {
-        "name": "vfx-text-cursor",
-        "type": "block",
-        "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.",
-        "tags": [
-            "html-in-canvas",
-            "text",
-            "shader",
-            "cursor",
-            "chromatic"
-        ],
-        "href": "/catalog/blocks/vfx-text-cursor",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
-    },
-    {
-        "name": "vignette",
-        "type": "component",
-        "title": "Vignette",
-        "description": "Cinematic radial vignette overlay using a pure-CSS gradient \u2014 darkens the edges to pull focus toward the center",
-        "tags": [
-            "vignette",
-            "overlay",
-            "cinematic",
-            "effect"
-        ],
-        "href": "/catalog/components/vignette",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png"
-    },
-    {
-        "name": "vpn-youtube-spot",
-        "type": "block",
-        "title": "VPN YouTube Spot",
-        "description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
-        "tags": [
-            "app",
-            "showcase",
-            "youtube",
-            "sfx"
-        ],
-        "href": "/catalog/blocks/vpn-youtube-spot",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
-    },
-    {
-        "name": "whip-pan",
-        "type": "block",
-        "title": "Whip Pan",
-        "description": "Shader transition simulating a fast camera whip pan",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/whip-pan",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
-    },
-    {
-        "name": "world-map",
-        "type": "block",
-        "title": "World Map",
-        "description": "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset \u2014 D3 Natural Earth projection",
-        "tags": [
-            "data",
-            "map",
-            "geography",
-            "world",
-            "choropleth"
-        ],
-        "href": "/catalog/blocks/world-map",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png"
-    },
-    {
-        "name": "x-post",
-        "type": "block",
-        "title": "X Post Card",
-        "description": "Animated X/Twitter post card overlay with engagement metrics",
-        "tags": [
-            "social",
-            "overlay",
-            "twitter"
-        ],
-        "href": "/catalog/blocks/x-post",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
-    },
-    {
-        "name": "yt-lower-third",
-        "type": "block",
-        "title": "YouTube Lower Third",
-        "description": "Animated YouTube subscribe lower third with avatar and channel info",
-        "tags": [
-            "social",
-            "overlay",
-            "youtube"
-        ],
-        "href": "/catalog/blocks/yt-lower-third",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
-    }
+  {
+    "name": "app-showcase",
+    "type": "block",
+    "title": "App Showcase",
+    "description": "Fitness app product showcase with three floating smartphone screens",
+    "tags": [
+      "showcase",
+      "app",
+      "3d"
+    ],
+    "href": "/catalog/blocks/app-showcase",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
+  },
+  {
+    "name": "apple-money-count",
+    "type": "block",
+    "title": "Apple Money Count",
+    "description": "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.",
+    "tags": [
+      "showcase",
+      "finance",
+      "kinetic",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/apple-money-count",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
+  },
+  {
+    "name": "beat-freeze-cut",
+    "type": "block",
+    "title": "Beat Freeze Cut",
+    "description": "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.",
+    "tags": [
+      "transition",
+      "music",
+      "beat-driven",
+      "freeze-frame"
+    ],
+    "href": "/catalog/blocks/beat-freeze-cut",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png"
+  },
+  {
+    "name": "blue-sweater-intro-video",
+    "type": "block",
+    "title": "Blue Sweater Intro Video",
+    "description": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
+    "tags": [
+      "showcase",
+      "ai",
+      "creator",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/blue-sweater-intro-video",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
+  },
+  {
+    "name": "camcorder-hud",
+    "type": "block",
+    "title": "Camcorder HUD",
+    "description": "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments",
+    "tags": [
+      "camcorder",
+      "camera",
+      "recording",
+      "hud",
+      "overlay",
+      "creator",
+      "media-treatment-overlay"
+    ],
+    "href": "/catalog/blocks/camcorder-hud",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png"
+  },
+  {
+    "name": "caption-blend-difference",
+    "type": "component",
+    "title": "Blend Difference",
+    "description": "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background",
+    "tags": [
+      "text",
+      "text-effect",
+      "effect",
+      "blend-mode",
+      "contrast",
+      "inversion"
+    ],
+    "href": "/catalog/components/caption-blend-difference",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png"
+  },
+  {
+    "name": "caption-clip-wipe",
+    "type": "component",
+    "title": "Clip Wipe",
+    "description": "Left-to-right clip-path wipe reveal per word",
+    "tags": [
+      "captions",
+      "caption-style",
+      "wipe",
+      "clip-path",
+      "reveal"
+    ],
+    "href": "/catalog/components/caption-clip-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png"
+  },
+  {
+    "name": "caption-editorial-emphasis",
+    "type": "component",
+    "title": "Editorial Emphasis",
+    "description": "Dual-font system with dramatic size contrast for emphasis words",
+    "tags": [
+      "captions",
+      "caption-style",
+      "editorial",
+      "typography",
+      "emphasis"
+    ],
+    "href": "/catalog/components/caption-editorial-emphasis",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png"
+  },
+  {
+    "name": "caption-emoji-pop",
+    "type": "component",
+    "title": "Emoji Pop",
+    "description": "Emoji integration with stroked text and horizontal squeeze entrance",
+    "tags": [
+      "captions",
+      "caption-style",
+      "emoji",
+      "social"
+    ],
+    "href": "/catalog/components/caption-emoji-pop",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png"
+  },
+  {
+    "name": "caption-glitch-rgb",
+    "type": "component",
+    "title": "Glitch RGB",
+    "description": "RGB chromatic aberration with CRT scanline overlay",
+    "tags": [
+      "captions",
+      "caption-style",
+      "glitch",
+      "cyber",
+      "tech"
+    ],
+    "href": "/catalog/components/caption-glitch-rgb",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png"
+  },
+  {
+    "name": "caption-gradient-fill",
+    "type": "component",
+    "title": "Gradient Fill",
+    "description": "Gradient-clipped text with elastic bounce entrance",
+    "tags": [
+      "captions",
+      "caption-style",
+      "gradient",
+      "colorful"
+    ],
+    "href": "/catalog/components/caption-gradient-fill",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
+  },
+  {
+    "name": "caption-highlight",
+    "type": "component",
+    "title": "Highlight",
+    "description": "Red background sweep behind each active word, TikTok-style",
+    "tags": [
+      "captions",
+      "caption-style",
+      "highlight",
+      "social",
+      "tiktok"
+    ],
+    "href": "/catalog/components/caption-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png"
+  },
+  {
+    "name": "caption-kinetic-slam",
+    "type": "component",
+    "title": "Kinetic Slam",
+    "description": "Full-screen single-word display with alternating entrance directions",
+    "tags": [
+      "captions",
+      "caption-style",
+      "kinetic",
+      "typography",
+      "slam"
+    ],
+    "href": "/catalog/components/caption-kinetic-slam",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png"
+  },
+  {
+    "name": "caption-matrix-decode",
+    "type": "component",
+    "title": "Matrix Decode",
+    "description": "Character scramble animation before text reveal",
+    "tags": [
+      "captions",
+      "caption-style",
+      "matrix",
+      "scramble",
+      "decode"
+    ],
+    "href": "/catalog/components/caption-matrix-decode",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png"
+  },
+  {
+    "name": "caption-neon-accent",
+    "type": "component",
+    "title": "Neon Accent",
+    "description": "Multi-color neon glow accents with wiggle drift animation",
+    "tags": [
+      "captions",
+      "caption-style",
+      "neon",
+      "glow",
+      "accent"
+    ],
+    "href": "/catalog/components/caption-neon-accent",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png"
+  },
+  {
+    "name": "caption-neon-glow",
+    "type": "component",
+    "title": "Neon Glow",
+    "description": "Cyan and magenta neon glow with keyword accent colors",
+    "tags": [
+      "captions",
+      "caption-style",
+      "neon",
+      "glow",
+      "gaming"
+    ],
+    "href": "/catalog/components/caption-neon-glow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png"
+  },
+  {
+    "name": "caption-parallax-layers",
+    "type": "component",
+    "title": "Parallax Layers",
+    "description": "Behind-subject 3D text layering with vertical stretch effect",
+    "tags": [
+      "captions",
+      "caption-style",
+      "parallax",
+      "3d",
+      "depth"
+    ],
+    "href": "/catalog/components/caption-parallax-layers",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png"
+  },
+  {
+    "name": "caption-particle-burst",
+    "type": "component",
+    "title": "Particle Burst",
+    "description": "Keyword words trigger colored particle explosions",
+    "tags": [
+      "captions",
+      "caption-style",
+      "particles",
+      "burst",
+      "effects"
+    ],
+    "href": "/catalog/components/caption-particle-burst",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png"
+  },
+  {
+    "name": "caption-pill-karaoke",
+    "type": "component",
+    "title": "Pill Karaoke",
+    "description": "Pill-shaped container with per-word karaoke color highlight",
+    "tags": [
+      "captions",
+      "caption-style",
+      "karaoke",
+      "pill"
+    ],
+    "href": "/catalog/components/caption-pill-karaoke",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
+  },
+  {
+    "name": "caption-texture",
+    "type": "component",
+    "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",
+    "tags": [
+      "captions",
+      "caption-style",
+      "texture",
+      "mask"
+    ],
+    "href": "/catalog/components/caption-texture",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png"
+  },
+  {
+    "name": "caption-weight-shift",
+    "type": "component",
+    "title": "Weight Shift",
+    "description": "Elegant font-weight transition between caption lines",
+    "tags": [
+      "captions",
+      "caption-style",
+      "minimal",
+      "typography"
+    ],
+    "href": "/catalog/components/caption-weight-shift",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png"
+  },
+  {
+    "name": "chromatic-radial-split",
+    "type": "block",
+    "title": "Chromatic Radial Split",
+    "description": "Shader transition with chromatic aberration radial split",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/chromatic-radial-split",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
+  },
+  {
+    "name": "cinematic-zoom",
+    "type": "block",
+    "title": "Cinematic Zoom",
+    "description": "Shader transition with dramatic zoom blur",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/cinematic-zoom",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
+  },
+  {
+    "name": "code-3d-extrude",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "code-animation",
+      "3d",
+      "webgl",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-3d-extrude",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png"
+  },
+  {
+    "name": "code-diff",
+    "type": "block",
+    "title": "Code Diff",
+    "description": "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.",
+    "tags": [
+      "code",
+      "code-animation",
+      "diff",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-diff",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png"
+  },
+  {
+    "name": "code-highlight",
+    "type": "block",
+    "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).",
+    "tags": [
+      "code",
+      "code-animation",
+      "highlight",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png"
+  },
+  {
+    "name": "code-morph",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "code-animation",
+      "morph",
+      "refactor",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-morph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png"
+  },
+  {
+    "name": "code-particle-assemble",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "code-animation",
+      "particles",
+      "gpu",
+      "webgl",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-particle-assemble",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png"
+  },
+  {
+    "name": "code-scroll",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "code-animation",
+      "scroll",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-scroll",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png"
+  },
+  {
+    "name": "code-shader-dissolve",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "code-animation",
+      "shader",
+      "webgl",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-shader-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-basic",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Basic",
+    "description": "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-clear-dark",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-clear-light",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-grass",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Grass",
+    "description": "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-homebrew",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-man-page",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-novel",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-ocean",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-pro",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-red-sands",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-silver-aerogel",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-apple-terminal-solid-colors",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "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"
+  },
+  {
+    "name": "code-snippet-dark-2026",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-dark-2026",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png"
+  },
+  {
+    "name": "code-snippet-dark-modern",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-dark-modern",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png"
+  },
+  {
+    "name": "code-snippet-dark-plus",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-dark-plus",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png"
+  },
+  {
+    "name": "code-snippet-flight",
+    "type": "block",
+    "title": "Code Snippet Flight",
+    "description": "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.",
+    "tags": [
+      "code",
+      "code-animation",
+      "flight",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-snippet-flight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png"
+  },
+  {
+    "name": "code-snippet-high-contrast",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-high-contrast",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png"
+  },
+  {
+    "name": "code-snippet-high-contrast-light",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-high-contrast-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png"
+  },
+  {
+    "name": "code-snippet-light-2026",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-light-2026",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png"
+  },
+  {
+    "name": "code-snippet-light-modern",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-light-modern",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png"
+  },
+  {
+    "name": "code-snippet-light-plus",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-light-plus",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png"
+  },
+  {
+    "name": "code-snippet-monokai",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-monokai",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png"
+  },
+  {
+    "name": "code-snippet-solarized-light",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-solarized-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png"
+  },
+  {
+    "name": "code-snippet-visual-studio-dark",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-visual-studio-dark",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png"
+  },
+  {
+    "name": "code-snippet-visual-studio-light",
+    "type": "block",
+    "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.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-visual-studio-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png"
+  },
+  {
+    "name": "code-typing",
+    "type": "block",
+    "title": "Code Typing",
+    "description": "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.",
+    "tags": [
+      "code",
+      "code-animation",
+      "typing",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-typing",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png"
+  },
+  {
+    "name": "cross-warp-morph",
+    "type": "block",
+    "title": "Cross Warp Morph",
+    "description": "Shader transition with cross-warped morphing",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/cross-warp-morph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
+  },
+  {
+    "name": "data-chart",
+    "type": "block",
+    "title": "Data Chart",
+    "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
+    "tags": [
+      "data",
+      "chart",
+      "statistics"
+    ],
+    "href": "/catalog/blocks/data-chart",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
+  },
+  {
+    "name": "domain-warp-dissolve",
+    "type": "block",
+    "title": "Domain Warp Dissolve",
+    "description": "Shader transition with fractal noise domain warping",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/domain-warp-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
+  },
+  {
+    "name": "editorial-flash-overlay",
+    "type": "block",
+    "title": "Editorial Flash Overlay",
+    "description": "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal",
+    "tags": [
+      "flash",
+      "editorial",
+      "social",
+      "light",
+      "transition",
+      "overlay",
+      "media-treatment-overlay"
+    ],
+    "href": "/catalog/blocks/editorial-flash-overlay",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png"
+  },
+  {
+    "name": "flash-through-white",
+    "type": "block",
+    "title": "Flash Through White",
+    "description": "Shader transition with white flash crossfade",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/flash-through-white",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
+  },
+  {
+    "name": "flowchart",
+    "type": "block",
+    "title": "Flowchart",
+    "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+    "tags": [
+      "diagram",
+      "flowchart",
+      "interactive"
+    ],
+    "href": "/catalog/blocks/flowchart",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
+  },
+  {
+    "name": "flowchart-vertical",
+    "type": "block",
+    "title": "Flowchart Vertical",
+    "description": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+    "tags": [
+      "diagram",
+      "flowchart",
+      "interactive",
+      "portrait"
+    ],
+    "href": "/catalog/blocks/flowchart-vertical",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png"
+  },
+  {
+    "name": "freeze-frame-dressing",
+    "type": "block",
+    "title": "Freeze-Frame Dressing",
+    "description": "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject",
+    "tags": [
+      "freeze-frame",
+      "cutout",
+      "scrapbook",
+      "paper",
+      "social",
+      "overlay",
+      "media-treatment-overlay"
+    ],
+    "href": "/catalog/blocks/freeze-frame-dressing",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png"
+  },
+  {
+    "name": "glitch",
+    "type": "block",
+    "title": "Glitch",
+    "description": "Shader transition with digital glitch artifacts",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/glitch",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
+  },
+  {
+    "name": "grain-overlay",
+    "type": "component",
+    "title": "Grain Overlay",
+    "description": "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition",
+    "tags": [
+      "texture",
+      "grain",
+      "overlay",
+      "film"
+    ],
+    "href": "/catalog/components/grain-overlay",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png"
+  },
+  {
+    "name": "gravitational-lens",
+    "type": "block",
+    "title": "Gravitational Lens",
+    "description": "Shader transition with gravitational lensing distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/gravitational-lens",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
+  },
+  {
+    "name": "grid-pixelate-wipe",
+    "type": "component",
+    "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",
+    "tags": [
+      "transition",
+      "wipe",
+      "grid",
+      "pixelate"
+    ],
+    "href": "/catalog/components/grid-pixelate-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
+  },
+  {
+    "name": "hw-arrow",
+    "type": "component",
+    "title": "Hand-Drawn Arrow",
+    "description": "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen",
+    "tags": [
+      "handwritten",
+      "annotation",
+      "arrow",
+      "overlay"
+    ],
+    "href": "/catalog/components/hw-arrow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.png"
+  },
+  {
+    "name": "hw-boil",
+    "type": "component",
+    "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",
+    "tags": [
+      "handwritten",
+      "effect",
+      "annotation"
+    ],
+    "href": "/catalog/components/hw-boil",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.png"
+  },
+  {
+    "name": "hw-box-label",
+    "type": "component",
+    "title": "Hand-Drawn Box Label",
+    "description": "Wobbled rounded rectangle draws around a region with a handwritten label above or centered",
+    "tags": [
+      "handwritten",
+      "annotation",
+      "overlay"
+    ],
+    "href": "/catalog/components/hw-box-label",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.png"
+  },
+  {
+    "name": "hw-callout-circle",
+    "type": "component",
+    "title": "Scribble Callout Circle",
+    "description": "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label",
+    "tags": [
+      "handwritten",
+      "annotation",
+      "callout",
+      "overlay"
+    ],
+    "href": "/catalog/components/hw-callout-circle",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.png"
+  },
+  {
+    "name": "hw-frame",
+    "type": "block",
+    "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)",
+    "tags": [
+      "handwritten",
+      "frame",
+      "media"
+    ],
+    "href": "/catalog/blocks/hw-frame",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png"
+  },
+  {
+    "name": "hw-path-text",
+    "type": "block",
+    "title": "Text Along a Path",
+    "description": "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input",
+    "tags": [
+      "handwritten",
+      "typography",
+      "path",
+      "overlay"
+    ],
+    "href": "/catalog/blocks/hw-path-text",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png"
+  },
+  {
+    "name": "hw-pipeline",
+    "type": "block",
+    "title": "Hand-Drawn Flowchart",
+    "description": "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list",
+    "tags": [
+      "handwritten",
+      "diagram",
+      "data-viz",
+      "overlay"
+    ],
+    "href": "/catalog/blocks/hw-pipeline",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png"
+  },
+  {
+    "name": "hw-scribble-transition",
+    "type": "block",
+    "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",
+    "tags": [
+      "handwritten",
+      "transition",
+      "wipe"
+    ],
+    "href": "/catalog/blocks/hw-scribble-transition",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png"
+  },
+  {
+    "name": "hw-text-cloud",
+    "type": "block",
+    "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",
+    "tags": [
+      "handwritten",
+      "speech-bubble",
+      "overlay"
+    ],
+    "href": "/catalog/blocks/hw-text-cloud",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png"
+  },
+  {
+    "name": "hw-title",
+    "type": "block",
+    "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",
+    "tags": [
+      "handwritten",
+      "typography",
+      "title-card",
+      "overlay"
+    ],
+    "href": "/catalog/blocks/hw-title",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png"
+  },
+  {
+    "name": "hw-underline",
+    "type": "component",
+    "title": "Squiggle Marks",
+    "description": "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on",
+    "tags": [
+      "handwritten",
+      "annotation",
+      "text-treatment"
+    ],
+    "href": "/catalog/components/hw-underline",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.png"
+  },
+  {
+    "name": "instagram-follow",
+    "type": "block",
+    "title": "Instagram Follow",
+    "description": "Animated Instagram follow overlay with profile card and follow button",
+    "tags": [
+      "social",
+      "overlay",
+      "instagram"
+    ],
+    "href": "/catalog/blocks/instagram-follow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
+  },
+  {
+    "name": "ios26-liquid-glass",
+    "type": "block",
+    "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.",
+    "tags": [
+      "liquid-glass-html-in-canvas",
+      "webgpu",
+      "3d",
+      "iphone",
+      "ios26",
+      "notifications",
+      "gltf",
+      "html-in-canvas"
+    ],
+    "href": "/catalog/blocks/ios26-liquid-glass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png"
+  },
+  {
+    "name": "light-leak",
+    "type": "block",
+    "title": "Light Leak",
+    "description": "Shader transition with cinematic light leak overlay",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/light-leak",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
+  },
+  {
+    "name": "liquid-glass-context-menu",
+    "type": "block",
+    "title": "Liquid Glass Context Menu",
+    "description": "Frosted glass context menu panel drifting over an aurora shader background",
+    "tags": [
+      "html-in-canvas",
+      "liquid-glass-html-in-canvas",
+      "webgpu"
+    ],
+    "href": "/catalog/blocks/liquid-glass-context-menu",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png"
+  },
+  {
+    "name": "liquid-glass-media-controls",
+    "type": "block",
+    "title": "Liquid Glass Media Controls",
+    "description": "Frosted glass media control panels spreading over an aurora shader background",
+    "tags": [
+      "html-in-canvas",
+      "liquid-glass-html-in-canvas",
+      "webgpu"
+    ],
+    "href": "/catalog/blocks/liquid-glass-media-controls",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png"
+  },
+  {
+    "name": "liquid-glass-notification",
+    "type": "block",
+    "title": "Liquid Glass Notification",
+    "description": "Frosted glass notification cards floating over an aurora shader background",
+    "tags": [
+      "html-in-canvas",
+      "liquid-glass-html-in-canvas",
+      "webgpu"
+    ],
+    "href": "/catalog/blocks/liquid-glass-notification",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png"
+  },
+  {
+    "name": "liquid-glass-widgets",
+    "type": "block",
+    "title": "Liquid Glass Widgets",
+    "description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
+    "tags": [
+      "html-in-canvas",
+      "liquid-glass-html-in-canvas",
+      "webgpu"
+    ],
+    "href": "/catalog/blocks/liquid-glass-widgets",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png"
+  },
+  {
+    "name": "logo-outro",
+    "type": "block",
+    "title": "Logo Outro",
+    "description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
+    "tags": [
+      "branding",
+      "outro",
+      "logo"
+    ],
+    "href": "/catalog/blocks/logo-outro",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
+  },
+  {
+    "name": "lower-third-bild",
+    "type": "block",
+    "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.",
+    "tags": [
+      "broadcast",
+      "lower-third",
+      "news",
+      "overlay"
+    ],
+    "href": "/catalog/blocks/lower-third-bild",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png"
+  },
+  {
+    "name": "lt-accent-underline",
+    "type": "block",
+    "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",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/lt-accent-underline",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png"
+  },
+  {
+    "name": "lt-bold-block",
+    "type": "block",
+    "title": "Lower Third — Bold Block",
+    "description": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-bold-block",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png"
+  },
+  {
+    "name": "lt-clean-bar",
+    "type": "block",
+    "title": "Lower Third — Clean Bar",
+    "description": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview"
+    ],
+    "href": "/catalog/blocks/lt-clean-bar",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png"
+  },
+  {
+    "name": "lt-color-block",
+    "type": "block",
+    "title": "Lower Third — Color Block",
+    "description": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-color-block",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png"
+  },
+  {
+    "name": "lt-dark-card",
+    "type": "block",
+    "title": "Lower Third — Dark Card",
+    "description": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "dark"
+    ],
+    "href": "/catalog/blocks/lt-dark-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png"
+  },
+  {
+    "name": "lt-kicker-name",
+    "type": "block",
+    "title": "Lower Third — Kicker Name",
+    "description": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-kicker-name",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png"
+  },
+  {
+    "name": "lt-mask-reveal",
+    "type": "block",
+    "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",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-mask-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png"
+  },
+  {
+    "name": "lt-side-rule",
+    "type": "block",
+    "title": "Lower Third — Side Rule",
+    "description": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/lt-side-rule",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png"
+  },
+  {
+    "name": "lt-soft-pill",
+    "type": "block",
+    "title": "Lower Third — Soft Pill",
+    "description": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/lt-soft-pill",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png"
+  },
+  {
+    "name": "lt-stack-bars",
+    "type": "block",
+    "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",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-stack-bars",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png"
+  },
+  {
+    "name": "macos-notification",
+    "type": "block",
+    "title": "macOS Notification",
+    "description": "Animated macOS-style notification banner with app icon and message",
+    "tags": [
+      "social",
+      "overlay",
+      "notification"
+    ],
+    "href": "/catalog/blocks/macos-notification",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
+  },
+  {
+    "name": "macos-tahoe-liquid-glass",
+    "type": "block",
+    "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.",
+    "tags": [
+      "html-in-canvas",
+      "3d",
+      "macos",
+      "tahoe",
+      "gltf"
+    ],
+    "href": "/catalog/blocks/macos-tahoe-liquid-glass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
+  },
+  {
+    "name": "mk-background",
+    "type": "block",
+    "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",
+    "tags": [
+      "background",
+      "gradient",
+      "minimal",
+      "professional",
+      "presentation"
+    ],
+    "href": "/catalog/blocks/mk-background",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png"
+  },
+  {
+    "name": "mk-callout-highlight",
+    "type": "block",
+    "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",
+    "tags": [
+      "typography",
+      "karaoke",
+      "captions",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/mk-callout-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png"
+  },
+  {
+    "name": "mk-clone-wall-transition",
+    "type": "block",
+    "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",
+    "tags": [
+      "transition",
+      "typography",
+      "wipe"
+    ],
+    "href": "/catalog/blocks/mk-clone-wall-transition",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png"
+  },
+  {
+    "name": "mk-emphasis-type",
+    "type": "component",
+    "title": "Background Emphasis Type",
+    "description": "Oversized low-contrast background word drifting slowly behind the subject — typography as texture",
+    "tags": [
+      "typography",
+      "text-treatment",
+      "minimal"
+    ],
+    "href": "/catalog/components/mk-emphasis-type",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.png"
+  },
+  {
+    "name": "mk-line-graph",
+    "type": "block",
+    "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",
+    "tags": [
+      "data-viz",
+      "chart",
+      "graph",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/mk-line-graph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png"
+  },
+  {
+    "name": "mk-placeholder-grid",
+    "type": "block",
+    "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",
+    "tags": [
+      "placeholder",
+      "media",
+      "grid",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/mk-placeholder-grid",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png"
+  },
+  {
+    "name": "mk-progress-stat",
+    "type": "block",
+    "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",
+    "tags": [
+      "data-viz",
+      "stat",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/mk-progress-stat",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png"
+  },
+  {
+    "name": "mk-specs-list",
+    "type": "block",
+    "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",
+    "tags": [
+      "data-viz",
+      "list",
+      "minimal",
+      "professional"
+    ],
+    "href": "/catalog/blocks/mk-specs-list",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png"
+  },
+  {
+    "name": "mk-usage-arc",
+    "type": "component",
+    "title": "Hairline Arc Gauge",
+    "description": "Thin circular gauge that draws on while its percentage counts up; one helper call drives both",
+    "tags": [
+      "data-viz",
+      "gauge",
+      "minimal"
+    ],
+    "href": "/catalog/components/mk-usage-arc",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png"
+  },
+  {
+    "name": "morph-text",
+    "type": "component",
+    "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",
+    "tags": [
+      "text",
+      "text-effect",
+      "typography",
+      "morph",
+      "gooey",
+      "kinetic",
+      "animation"
+    ],
+    "href": "/catalog/components/morph-text",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.png"
+  },
+  {
+    "name": "motion-blur",
+    "type": "component",
+    "title": "Motion Blur",
+    "description": "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed",
+    "tags": [
+      "effect",
+      "motion-blur",
+      "velocity",
+      "animation",
+      "physics"
+    ],
+    "href": "/catalog/components/motion-blur",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png"
+  },
+  {
+    "name": "news-ticker",
+    "type": "block",
+    "title": "News Ticker",
+    "description": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "news",
+      "ticker"
+    ],
+    "href": "/catalog/blocks/news-ticker",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png"
+  },
+  {
+    "name": "north-korea-locked-down",
+    "type": "block",
+    "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.",
+    "tags": [
+      "showcase",
+      "map",
+      "annotation",
+      "youtube",
+      "kinetic"
+    ],
+    "href": "/catalog/blocks/north-korea-locked-down",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
+  },
+  {
+    "name": "nyc-paris-flight",
+    "type": "block",
+    "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.",
+    "tags": [
+      "showcase",
+      "travel",
+      "map",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/nyc-paris-flight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
+  },
+  {
+    "name": "organic-light-leak-overlay",
+    "type": "block",
+    "title": "Organic Light Leak Overlay",
+    "description": "Finite CSS light-leak overlay for memory beats and motivated transitions",
+    "tags": [
+      "light-leak",
+      "film",
+      "memory",
+      "transition",
+      "overlay",
+      "media-treatment-overlay"
+    ],
+    "href": "/catalog/blocks/organic-light-leak-overlay",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png"
+  },
+  {
+    "name": "parallax-unzoom",
+    "type": "component",
+    "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)",
+    "tags": [
+      "transition",
+      "reveal",
+      "unzoom",
+      "parallax",
+      "grid",
+      "hero"
+    ],
+    "href": "/catalog/components/parallax-unzoom",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png"
+  },
+  {
+    "name": "parallax-zoom",
+    "type": "component",
+    "title": "Parallax Zoom",
+    "description": "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition",
+    "tags": [
+      "transition",
+      "zoom",
+      "parallax",
+      "grid",
+      "hero"
+    ],
+    "href": "/catalog/components/parallax-zoom",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png"
+  },
+  {
+    "name": "reddit-post",
+    "type": "block",
+    "title": "Reddit Post Card",
+    "description": "Animated Reddit post card overlay with upvotes and comments",
+    "tags": [
+      "social",
+      "overlay",
+      "reddit"
+    ],
+    "href": "/catalog/blocks/reddit-post",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
+  },
+  {
+    "name": "ridged-burn",
+    "type": "block",
+    "title": "Ridged Burn",
+    "description": "Shader transition with ridged turbulence burn effect",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/ridged-burn",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
+  },
+  {
+    "name": "ripple-waves",
+    "type": "block",
+    "title": "Ripple Waves",
+    "description": "Shader transition with concentric ripple wave distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/ripple-waves",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
+  },
+  {
+    "name": "sdf-iris",
+    "type": "block",
+    "title": "SDF Iris",
+    "description": "Shader transition with signed distance field iris reveal",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/sdf-iris",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
+  },
+  {
+    "name": "shimmer-sweep",
+    "type": "component",
+    "title": "Shimmer Sweep",
+    "description": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
+    "tags": [
+      "text",
+      "shimmer",
+      "highlight",
+      "effect"
+    ],
+    "href": "/catalog/components/shimmer-sweep",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
+  },
+  {
+    "name": "spain-map",
+    "type": "block",
+    "title": "Spain Map",
+    "description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "spain",
+      "europe",
+      "choropleth"
+    ],
+    "href": "/catalog/blocks/spain-map",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png"
+  },
+  {
+    "name": "spotify-card",
+    "type": "block",
+    "title": "Spotify Now Playing",
+    "description": "Animated Spotify now-playing card with album art and progress bar",
+    "tags": [
+      "social",
+      "overlay",
+      "spotify"
+    ],
+    "href": "/catalog/blocks/spotify-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
+  },
+  {
+    "name": "swirl-vortex",
+    "type": "block",
+    "title": "Swirl Vortex",
+    "description": "Shader transition with swirling vortex distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/swirl-vortex",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
+  },
+  {
+    "name": "texture-mask-text",
+    "type": "component",
+    "title": "Texture Mask Text",
+    "description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
+    "tags": [
+      "text",
+      "text-effect",
+      "effect",
+      "texture",
+      "mask"
+    ],
+    "href": "/catalog/components/texture-mask-text",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png"
+  },
+  {
+    "name": "thermal-distortion",
+    "type": "block",
+    "title": "Thermal Distortion",
+    "description": "Shader transition with heat haze thermal distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/thermal-distortion",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
+  },
+  {
+    "name": "tiktok-follow",
+    "type": "block",
+    "title": "TikTok Follow",
+    "description": "Animated TikTok follow overlay with profile card and follow button",
+    "tags": [
+      "social",
+      "overlay",
+      "tiktok"
+    ],
+    "href": "/catalog/blocks/tiktok-follow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
+  },
+  {
+    "name": "transitions-3d",
+    "type": "block",
+    "title": "3D Transitions",
+    "description": "Showcase of 3D perspective flip and rotate transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-3d",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
+  },
+  {
+    "name": "transitions-blur",
+    "type": "block",
+    "title": "Blur Transitions",
+    "description": "Showcase of blur-based transitions between scenes",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-blur",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
+  },
+  {
+    "name": "transitions-cover",
+    "type": "block",
+    "title": "Cover Transitions",
+    "description": "Showcase of cover/uncover slide transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-cover",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
+  },
+  {
+    "name": "transitions-destruction",
+    "type": "block",
+    "title": "Destruction Transitions",
+    "description": "Showcase of destructive break-apart transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-destruction",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
+  },
+  {
+    "name": "transitions-dissolve",
+    "type": "block",
+    "title": "Dissolve Transitions",
+    "description": "Showcase of dissolve and fade transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
+  },
+  {
+    "name": "transitions-distortion",
+    "type": "block",
+    "title": "Distortion Transitions",
+    "description": "Showcase of warp and distortion transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-distortion",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
+  },
+  {
+    "name": "transitions-grid",
+    "type": "block",
+    "title": "Grid Transitions",
+    "description": "Showcase of grid-based tile transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-grid",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
+  },
+  {
+    "name": "transitions-light",
+    "type": "block",
+    "title": "Light Transitions",
+    "description": "Showcase of light-based glow and flash transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
+  },
+  {
+    "name": "transitions-mechanical",
+    "type": "block",
+    "title": "Mechanical Transitions",
+    "description": "Showcase of mechanical shutter and iris transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-mechanical",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
+  },
+  {
+    "name": "transitions-other",
+    "type": "block",
+    "title": "Other Transitions",
+    "description": "Showcase of miscellaneous creative transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-other",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
+  },
+  {
+    "name": "transitions-push",
+    "type": "block",
+    "title": "Push Transitions",
+    "description": "Showcase of push and slide transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-push",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
+  },
+  {
+    "name": "transitions-radial",
+    "type": "block",
+    "title": "Radial Transitions",
+    "description": "Showcase of radial wipe and reveal transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-radial",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
+  },
+  {
+    "name": "transitions-scale",
+    "type": "block",
+    "title": "Scale Transitions",
+    "description": "Showcase of scale and zoom transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-scale",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
+  },
+  {
+    "name": "ui-3d-reveal",
+    "type": "block",
+    "title": "3D UI Reveal",
+    "description": "Perspective 3D reveal animation for UI elements",
+    "tags": [
+      "showcase",
+      "3d",
+      "reveal"
+    ],
+    "href": "/catalog/blocks/ui-3d-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
+  },
+  {
+    "name": "us-map",
+    "type": "block",
+    "title": "US Map",
+    "description": "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "usa",
+      "choropleth"
+    ],
+    "href": "/catalog/blocks/us-map",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png"
+  },
+  {
+    "name": "us-map-bubble",
+    "type": "block",
+    "title": "US Bubble Map",
+    "description": "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "usa",
+      "bubble",
+      "cities"
+    ],
+    "href": "/catalog/blocks/us-map-bubble",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png"
+  },
+  {
+    "name": "us-map-flow",
+    "type": "block",
+    "title": "US Flow Map",
+    "description": "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "usa",
+      "flow",
+      "connections",
+      "arcs"
+    ],
+    "href": "/catalog/blocks/us-map-flow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png"
+  },
+  {
+    "name": "us-map-hex",
+    "type": "block",
+    "title": "US Hex Grid Map",
+    "description": "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "usa",
+      "hexgrid",
+      "tilegrid"
+    ],
+    "href": "/catalog/blocks/us-map-hex",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png"
+  },
+  {
+    "name": "vfx-iphone-device",
+    "type": "block",
+    "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.",
+    "tags": [
+      "html-in-canvas",
+      "3d",
+      "device",
+      "iphone",
+      "macbook",
+      "gltf"
+    ],
+    "href": "/catalog/blocks/vfx-iphone-device",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png"
+  },
+  {
+    "name": "vfx-liquid-background",
+    "type": "block",
+    "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.",
+    "tags": [
+      "html-in-canvas",
+      "liquid",
+      "webgl",
+      "displacement",
+      "background"
+    ],
+    "href": "/catalog/blocks/vfx-liquid-background",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
+  },
+  {
+    "name": "vfx-liquid-glass",
+    "type": "block",
+    "title": "Liquid Glass",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-liquid-glass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png"
+  },
+  {
+    "name": "vfx-magnetic",
+    "type": "block",
+    "title": "Magnetic",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-magnetic",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png"
+  },
+  {
+    "name": "vfx-portal",
+    "type": "block",
+    "title": "Portal",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-portal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png"
+  },
+  {
+    "name": "vfx-shatter",
+    "type": "block",
+    "title": "Shatter",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-shatter",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png"
+  },
+  {
+    "name": "vfx-text-cursor",
+    "type": "block",
+    "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.",
+    "tags": [
+      "html-in-canvas",
+      "text",
+      "shader",
+      "cursor",
+      "chromatic"
+    ],
+    "href": "/catalog/blocks/vfx-text-cursor",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
+  },
+  {
+    "name": "vignette",
+    "type": "component",
+    "title": "Vignette",
+    "description": "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center",
+    "tags": [
+      "vignette",
+      "overlay",
+      "cinematic",
+      "effect"
+    ],
+    "href": "/catalog/components/vignette",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png"
+  },
+  {
+    "name": "vpn-youtube-spot",
+    "type": "block",
+    "title": "VPN YouTube Spot",
+    "description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
+    "tags": [
+      "app",
+      "showcase",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/vpn-youtube-spot",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
+  },
+  {
+    "name": "whip-pan",
+    "type": "block",
+    "title": "Whip Pan",
+    "description": "Shader transition simulating a fast camera whip pan",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/whip-pan",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
+  },
+  {
+    "name": "world-map",
+    "type": "block",
+    "title": "World Map",
+    "description": "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "world",
+      "choropleth"
+    ],
+    "href": "/catalog/blocks/world-map",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png"
+  },
+  {
+    "name": "x-post",
+    "type": "block",
+    "title": "X Post Card",
+    "description": "Animated X/Twitter post card overlay with engagement metrics",
+    "tags": [
+      "social",
+      "overlay",
+      "twitter"
+    ],
+    "href": "/catalog/blocks/x-post",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
+  },
+  {
+    "name": "yt-camera-move",
+    "type": "component",
+    "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",
+    "tags": [
+      "camera",
+      "zoom",
+      "effect",
+      "creator"
+    ],
+    "href": "/catalog/components/yt-camera-move",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.png"
+  },
+  {
+    "name": "yt-circle-pointer",
+    "type": "component",
+    "title": "Pointer Circle + Countdown",
+    "description": "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick",
+    "tags": [
+      "annotation",
+      "countdown",
+      "overlay"
+    ],
+    "href": "/catalog/components/yt-circle-pointer",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.png"
+  },
+  {
+    "name": "yt-comment-card",
+    "type": "block",
+    "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",
+    "tags": [
+      "social",
+      "comments",
+      "creator",
+      "overlay"
+    ],
+    "href": "/catalog/blocks/yt-comment-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.png"
+  },
+  {
+    "name": "yt-feather-highlight",
+    "type": "component",
+    "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",
+    "tags": [
+      "highlight",
+      "spotlight",
+      "effect",
+      "overlay"
+    ],
+    "href": "/catalog/components/yt-feather-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.png"
+  },
+  {
+    "name": "yt-lcd-background",
+    "type": "block",
+    "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",
+    "tags": [
+      "background",
+      "texture",
+      "creator"
+    ],
+    "href": "/catalog/blocks/yt-lcd-background",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png"
+  },
+  {
+    "name": "yt-logo-intro",
+    "type": "block",
+    "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",
+    "tags": [
+      "logo",
+      "intro",
+      "creator"
+    ],
+    "href": "/catalog/blocks/yt-logo-intro",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.png"
+  },
+  {
+    "name": "yt-lower-third",
+    "type": "block",
+    "title": "YouTube Lower Third",
+    "description": "Animated YouTube subscribe lower third with avatar and channel info",
+    "tags": [
+      "social",
+      "overlay",
+      "youtube"
+    ],
+    "href": "/catalog/blocks/yt-lower-third",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
+  },
+  {
+    "name": "yt-prism-title",
+    "type": "block",
+    "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",
+    "tags": [
+      "typography",
+      "title-card",
+      "creator"
+    ],
+    "href": "/catalog/blocks/yt-prism-title",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.png"
+  },
+  {
+    "name": "yt-screen-warp",
+    "type": "component",
+    "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",
+    "tags": [
+      "effect",
+      "overlay",
+      "texture"
+    ],
+    "href": "/catalog/components/yt-screen-warp",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.png"
+  },
+  {
+    "name": "yt-vertical-fill",
+    "type": "block",
+    "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)",
+    "tags": [
+      "placeholder",
+      "vertical",
+      "media"
+    ],
+    "href": "/catalog/blocks/yt-vertical-fill",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png"
+  }
 ]
diff --git a/registry/blocks/beat-freeze-cut/beat-freeze-cut.html b/registry/blocks/beat-freeze-cut/beat-freeze-cut.html
new file mode 100644
index 0000000000..5e13b6badf
--- /dev/null
+++ b/registry/blocks/beat-freeze-cut/beat-freeze-cut.html
@@ -0,0 +1,879 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Beat Freeze Cut</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0b0d10;
+      }
+
+      /*
+        EDIT / STUDIO PARAMS
+        ────────────────────
+        Studio color params (CSS custom properties on the root):
+          --bg-color       default #0B0D10
+          --accent-color   default #00E5C7
+
+        Numeric / string params (beat times, labels, intensity) are NOT in the
+        formal registry params schema today (only color keys are used by
+        existing blocks). Edit the CONFIG object in the script below instead.
+      */
+
+      #bfc-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        --bg-color: #0b0d10;
+        --accent-color: #00e5c7;
+        --bfc-ink: #f4f6f8;
+        --bfc-muted: #a0a8b0;
+        --bfc-panel: #14181f;
+        --bfc-panel-2: #1a2029;
+        --bfc-line: rgba(255, 255, 255, 0.08);
+        font-family:
+          "Inter",
+          system-ui,
+          -apple-system,
+          sans-serif;
+        color: var(--bfc-ink);
+      }
+
+      #bfc-bg {
+        position: absolute;
+        inset: 0;
+        background:
+          radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 229, 199, 0.07) 0%, transparent 55%),
+          radial-gradient(
+            ellipse 50% 40% at 80% 80%,
+            rgba(255, 255, 255, 0.03) 0%,
+            transparent 50%
+          ),
+          var(--bg-color);
+      }
+
+      #bfc-grid {
+        position: absolute;
+        inset: 0;
+        opacity: 0.22;
+        background-image:
+          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+        background-size: 80px 80px;
+        mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
+        pointer-events: none;
+      }
+
+      #bfc-stage {
+        position: absolute;
+        inset: 0;
+        transform-origin: 50% 48%;
+        will-change: transform, filter;
+      }
+
+      #bfc-shot-a,
+      #bfc-shot-b {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+      }
+
+      #bfc-shot-b {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      /* ── Shot A: single product card hero ── */
+      #bfc-a-crop {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-a-card {
+        position: relative;
+        width: 680px;
+        height: 720px;
+        border-radius: 36px;
+        background:
+          linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
+          linear-gradient(180deg, var(--bfc-panel-2) 0%, var(--bfc-panel) 100%);
+        border: 1px solid var(--bfc-line);
+        box-shadow:
+          0 40px 120px rgba(0, 0, 0, 0.55),
+          0 0 0 1px rgba(0, 229, 199, 0.08),
+          inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        overflow: hidden;
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-a-card-glow {
+        position: absolute;
+        left: 50%;
+        top: 28%;
+        width: 420px;
+        height: 420px;
+        margin-left: -210px;
+        margin-top: -210px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(0, 229, 199, 0.28) 0%, transparent 68%);
+        opacity: 0.85;
+        pointer-events: none;
+      }
+
+      #bfc-a-wave {
+        position: absolute;
+        left: 64px;
+        right: 64px;
+        top: 120px;
+        height: 220px;
+      }
+
+      #bfc-a-wave svg {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      #bfc-a-wave-path {
+        fill: none;
+        stroke: var(--accent-color);
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        opacity: 0.95;
+      }
+
+      #bfc-a-wave-fill {
+        fill: var(--accent-color);
+        opacity: 0.12;
+      }
+
+      #bfc-a-bars {
+        position: absolute;
+        left: 80px;
+        right: 80px;
+        bottom: 160px;
+        height: 96px;
+        display: flex;
+        align-items: flex-end;
+        gap: 10px;
+      }
+
+      .bfc-bar {
+        flex: 1;
+        border-radius: 6px 6px 2px 2px;
+        background: linear-gradient(180deg, var(--accent-color) 0%, rgba(0, 229, 199, 0.25) 100%);
+        transform-origin: 50% 100%;
+        height: 40%;
+      }
+
+      #bfc-a-meta {
+        position: absolute;
+        left: 64px;
+        right: 64px;
+        bottom: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      #bfc-a-kicker {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+      }
+
+      #bfc-a-pill {
+        font-size: 15px;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #04120f;
+        background: var(--accent-color);
+        padding: 8px 16px;
+        border-radius: 999px;
+      }
+
+      /* ── Shot B: split layout, higher info density ── */
+      #bfc-b-layout {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        grid-template-columns: 1.05fr 0.95fr;
+        gap: 48px;
+        padding: 100px 110px;
+        align-items: center;
+      }
+
+      #bfc-b-left {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+        transform-origin: 0% 50%;
+      }
+
+      #bfc-b-eyebrow {
+        font-size: 20px;
+        font-weight: 700;
+        letter-spacing: 0.22em;
+        text-transform: uppercase;
+        color: var(--accent-color);
+      }
+
+      #bfc-b-title {
+        font-size: 128px;
+        font-weight: 900;
+        line-height: 0.92;
+        letter-spacing: -0.04em;
+        text-transform: uppercase;
+        color: var(--bfc-ink);
+      }
+
+      #bfc-b-sub {
+        font-size: 28px;
+        font-weight: 500;
+        color: var(--bfc-muted);
+        max-width: 520px;
+        line-height: 1.35;
+      }
+
+      #bfc-b-right {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+      }
+
+      .bfc-b-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 24px;
+        padding: 28px 32px;
+        border-radius: 20px;
+        background: linear-gradient(135deg, var(--bfc-panel-2), var(--bfc-panel));
+        border: 1px solid var(--bfc-line);
+        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+      }
+
+      .bfc-b-card-label {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+      }
+
+      .bfc-b-card-value {
+        font-size: 42px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: var(--bfc-ink);
+      }
+
+      .bfc-b-card-value.accent {
+        color: var(--accent-color);
+      }
+
+      #bfc-b-accent-bar {
+        width: 120px;
+        height: 6px;
+        border-radius: 999px;
+        background: var(--accent-color);
+        opacity: 0.9;
+      }
+
+      /* ── Intro / transient typography ── */
+      #bfc-intro {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 72px;
+        display: flex;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 20;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-intro-label {
+        font-size: 18px;
+        font-weight: 700;
+        letter-spacing: 0.28em;
+        text-transform: uppercase;
+        color: var(--bfc-muted);
+        padding: 10px 18px;
+        border: 1px solid var(--bfc-line);
+        border-radius: 999px;
+        background: rgba(11, 13, 16, 0.55);
+        backdrop-filter: blur(8px);
+      }
+
+      #bfc-hit-type {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 30;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-hit-type-text {
+        font-size: 160px;
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        text-transform: uppercase;
+        color: var(--bfc-ink);
+        text-shadow:
+          0 0 40px rgba(0, 229, 199, 0.35),
+          0 8px 40px rgba(0, 0, 0, 0.55);
+        -webkit-text-stroke: 2px rgba(0, 0, 0, 0.35);
+        paint-order: stroke fill;
+      }
+
+      /* ── Freeze frame treatment ── */
+      #bfc-freeze {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 25;
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      #bfc-freeze-outline {
+        position: absolute;
+        inset: 48px;
+        border: 3px solid var(--accent-color);
+        border-radius: 8px;
+        box-shadow:
+          0 0 0 1px rgba(0, 229, 199, 0.25),
+          inset 0 0 0 1px rgba(0, 229, 199, 0.15),
+          0 0 48px rgba(0, 229, 199, 0.2);
+        opacity: 0;
+      }
+
+      #bfc-freeze-flash {
+        position: absolute;
+        inset: 0;
+        background: #ffffff;
+        opacity: 0;
+        mix-blend-mode: screen;
+      }
+
+      #bfc-freeze-contour {
+        position: absolute;
+        inset: 0;
+        background:
+          linear-gradient(90deg, transparent 0%, rgba(0, 229, 199, 0.08) 48%, transparent 52%),
+          radial-gradient(ellipse 40% 55% at 50% 48%, transparent 40%, rgba(0, 229, 199, 0.18) 100%);
+        opacity: 0;
+        mix-blend-mode: screen;
+      }
+
+      #bfc-freeze-badge {
+        position: absolute;
+        top: 80px;
+        right: 96px;
+        font-size: 16px;
+        font-weight: 800;
+        letter-spacing: 0.2em;
+        text-transform: uppercase;
+        color: #04120f;
+        background: var(--accent-color);
+        padding: 10px 18px;
+        border-radius: 6px;
+        opacity: 0;
+      }
+
+      /* ── Hard-cut connector (directional stretch / blur) ── */
+      #bfc-cut {
+        position: absolute;
+        inset: -8% -20%;
+        pointer-events: none;
+        z-index: 40;
+        opacity: 0;
+        visibility: hidden;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          rgba(0, 229, 199, 0.12) 35%,
+          rgba(255, 255, 255, 0.55) 50%,
+          rgba(0, 229, 199, 0.12) 65%,
+          transparent 100%
+        );
+        filter: blur(18px);
+        transform-origin: 50% 50%;
+      }
+
+      #bfc-vignette {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 15;
+        background: radial-gradient(
+          ellipse 75% 70% at 50% 50%,
+          transparent 45%,
+          rgba(0, 0, 0, 0.55) 100%
+        );
+        opacity: 0.85;
+      }
+
+      #bfc-driver {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="bfc-root"
+      data-composition-id="beat-freeze-cut"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="bfc-bg" aria-hidden="true"></div>
+      <div id="bfc-grid" aria-hidden="true"></div>
+
+      <div id="bfc-stage">
+        <!-- Shot A -->
+        <div id="bfc-shot-a">
+          <div id="bfc-a-crop" data-layout-allow-overflow>
+            <div id="bfc-a-card" data-layout-allow-overflow>
+              <div id="bfc-a-card-glow" aria-hidden="true"></div>
+              <div id="bfc-a-wave" aria-hidden="true">
+                <svg viewBox="0 0 592 220" preserveAspectRatio="none">
+                  <path
+                    id="bfc-a-wave-fill"
+                    d="M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80 L592,220 L0,220 Z"
+                  />
+                  <path
+                    id="bfc-a-wave-path"
+                    d="M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80"
+                  />
+                </svg>
+              </div>
+              <div id="bfc-a-bars" aria-hidden="true">
+                <div class="bfc-bar" id="bfc-bar-0" style="height: 34%"></div>
+                <div class="bfc-bar" id="bfc-bar-1" style="height: 58%"></div>
+                <div class="bfc-bar" id="bfc-bar-2" style="height: 42%"></div>
+                <div class="bfc-bar" id="bfc-bar-3" style="height: 78%"></div>
+                <div class="bfc-bar" id="bfc-bar-4" style="height: 52%"></div>
+                <div class="bfc-bar" id="bfc-bar-5" style="height: 88%"></div>
+                <div class="bfc-bar" id="bfc-bar-6" style="height: 46%"></div>
+                <div class="bfc-bar" id="bfc-bar-7" style="height: 64%"></div>
+                <div class="bfc-bar" id="bfc-bar-8" style="height: 36%"></div>
+                <div class="bfc-bar" id="bfc-bar-9" style="height: 72%"></div>
+                <div class="bfc-bar" id="bfc-bar-10" style="height: 48%"></div>
+                <div class="bfc-bar" id="bfc-bar-11" style="height: 92%"></div>
+              </div>
+              <div id="bfc-a-meta">
+                <span id="bfc-a-kicker">MUSIC PROMO</span>
+                <span id="bfc-a-pill">LIVE</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Shot B -->
+        <div id="bfc-shot-b">
+          <div id="bfc-b-layout">
+            <div id="bfc-b-left">
+              <div id="bfc-b-eyebrow">Next shot</div>
+              <div id="bfc-b-title">HARD<br />CUT</div>
+              <div id="bfc-b-accent-bar" aria-hidden="true"></div>
+              <div id="bfc-b-sub">
+                Beat-locked freeze, then cut. Built for music-led promos and montages.
+              </div>
+            </div>
+            <div id="bfc-b-right">
+              <div class="bfc-b-card" id="bfc-b-card-0">
+                <span class="bfc-b-card-label">Ramp</span>
+                <span class="bfc-b-card-value accent">1.35→2.2</span>
+              </div>
+              <div class="bfc-b-card" id="bfc-b-card-1">
+                <span class="bfc-b-card-label">Freeze</span>
+                <span class="bfc-b-card-value">0.8s</span>
+              </div>
+              <div class="bfc-b-card" id="bfc-b-card-2">
+                <span class="bfc-b-card-label">Cut</span>
+                <span class="bfc-b-card-value accent">3.00</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="bfc-vignette" aria-hidden="true"></div>
+
+      <div id="bfc-intro" aria-hidden="true">
+        <span id="bfc-intro-label">ON THE BEAT</span>
+      </div>
+
+      <div id="bfc-hit-type" aria-hidden="true">
+        <span id="bfc-hit-type-text">DROP</span>
+      </div>
+
+      <div id="bfc-freeze" aria-hidden="true">
+        <div id="bfc-freeze-flash"></div>
+        <div id="bfc-freeze-contour"></div>
+        <div id="bfc-freeze-outline"></div>
+        <div id="bfc-freeze-badge">FREEZE</div>
+      </div>
+
+      <div id="bfc-cut" aria-hidden="true"></div>
+
+      <div id="bfc-driver" class="clip" data-start="0" data-duration="6" data-track-index="0"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ── EDIT ME (not Studio params — see HTML comment) ──────────────
+        var CONFIG = {
+          primaryLabel: "DROP",
+          secondaryLabel: "ON THE BEAT",
+          beat1: 0.7,
+          beat2: 2.2,
+          freezeTime: 2.2,
+          intensity: 1.0,
+        };
+        // ────────────────────────────────────────────────────────────────
+
+        var DURATION = 6;
+        var intensity = Math.max(0.6, Math.min(1.4, Number(CONFIG.intensity) || 1));
+        var beat1 = Number(CONFIG.beat1) || 0.7;
+        var beat2 = Number(CONFIG.beat2) || 2.2;
+        var freezeAt = Number(CONFIG.freezeTime) || beat2;
+        var cutAt = 3.0;
+        var beat3 = 4.7;
+        var holdAt = 5.2;
+
+        var root = document.getElementById("bfc-root");
+        var stage = document.getElementById("bfc-stage");
+        var shotA = document.getElementById("bfc-shot-a");
+        var shotB = document.getElementById("bfc-shot-b");
+        var aCrop = document.getElementById("bfc-a-crop");
+        var aCard = document.getElementById("bfc-a-card");
+        var intro = document.getElementById("bfc-intro");
+        var introLabel = document.getElementById("bfc-intro-label");
+        var hitType = document.getElementById("bfc-hit-type");
+        var hitText = document.getElementById("bfc-hit-type-text");
+        var freeze = document.getElementById("bfc-freeze");
+        var freezeOutline = document.getElementById("bfc-freeze-outline");
+        var freezeFlash = document.getElementById("bfc-freeze-flash");
+        var freezeContour = document.getElementById("bfc-freeze-contour");
+        var freezeBadge = document.getElementById("bfc-freeze-badge");
+        var cutFx = document.getElementById("bfc-cut");
+        var bLeft = document.getElementById("bfc-b-left");
+        var bCards = [
+          document.getElementById("bfc-b-card-0"),
+          document.getElementById("bfc-b-card-1"),
+          document.getElementById("bfc-b-card-2"),
+        ];
+        var bars = [];
+        for (var bi = 0; bi < 12; bi++) {
+          bars.push(document.getElementById("bfc-bar-" + bi));
+        }
+
+        // Apply editable labels
+        if (hitText) hitText.textContent = CONFIG.primaryLabel || "DROP";
+        if (introLabel) introLabel.textContent = CONFIG.secondaryLabel || "ON THE BEAT";
+
+        // Accent color from CSS var → freeze/glow that use hardcoded rgba fallbacks
+        // stay coherent because stroke/fill already use var(--accent-color).
+
+        var tl = gsap.timeline({ paused: true });
+
+        // Initial states (no CSS transform conflicts on animated props)
+        gsap.set(stage, { scale: 1, x: 0, y: 0, filter: "blur(0px) brightness(1)" });
+        gsap.set(aCrop, { scale: 1, x: 0, y: 0 });
+        // Card visible at t=0 so catalog snapshots are never a black frame
+        gsap.set(aCard, { scale: 0.9, y: 20, opacity: 1 });
+        gsap.set(shotA, { opacity: 1, visibility: "visible" });
+        gsap.set(shotB, { opacity: 0, visibility: "hidden" });
+        gsap.set(intro, { opacity: 0, visibility: "hidden", y: -12 });
+        gsap.set(hitType, { opacity: 0, visibility: "hidden", scale: 1.15 });
+        gsap.set(freeze, { opacity: 0, visibility: "hidden" });
+        gsap.set([freezeOutline, freezeFlash, freezeContour, freezeBadge], { opacity: 0 });
+        gsap.set(cutFx, { opacity: 0, visibility: "hidden", scaleX: 0.4, x: -200 });
+        gsap.set(bLeft, { opacity: 0, x: -48 });
+        gsap.set(bCards, { opacity: 0, x: 40 });
+        gsap.set(bars, { scaleY: 0.55 });
+
+        // Full duration anchor (seek-safe length)
+        tl.to({}, { duration: DURATION, ease: "none" }, 0);
+
+        // ── 0.00–0.70: intro push-in + secondary type ──
+        tl.to(aCard, { scale: 1, y: 0, duration: 0.55, ease: "power3.out" }, 0);
+        tl.to(stage, { scale: 1 + 0.04 * intensity, duration: 0.7, ease: "power1.out" }, 0);
+        tl.to(bars, { scaleY: 1, duration: 0.5, ease: "power2.out", stagger: 0.02 }, 0.12);
+        tl.set(intro, { visibility: "visible" }, 0.12);
+        tl.to(intro, { opacity: 1, y: 0, duration: 0.28, ease: "power2.out" }, 0.12);
+        tl.to(intro, { opacity: 0, y: -8, duration: 0.18, ease: "power2.in" }, 0.52);
+        tl.set(intro, { visibility: "hidden", opacity: 0 }, 0.7);
+
+        // ── 0.70–1.35: beat 1 — hard reframe ──
+        tl.to(
+          aCrop,
+          {
+            scale: 1 + 0.18 * intensity,
+            x: -80 * intensity,
+            y: 24 * intensity,
+            duration: 0.22,
+            ease: "power4.out",
+          },
+          beat1,
+        );
+        tl.to(
+          stage,
+          {
+            scale: 1.08 * intensity > 1.2 ? 1.2 : 1 + 0.08 * intensity,
+            duration: 0.28,
+            ease: "expo.out",
+          },
+          beat1,
+        );
+        tl.to(
+          bars,
+          {
+            scaleY: function (i) {
+              // Deterministic bar pattern (no Math.random)
+              var pattern = [0.55, 1.15, 0.7, 1.35, 0.9, 1.4, 0.65, 1.1, 0.5, 1.25, 0.8, 1.45];
+              return pattern[i % pattern.length];
+            },
+            duration: 0.18,
+            ease: "power3.out",
+            stagger: 0.01,
+          },
+          beat1,
+        );
+
+        // ── 1.35–2.20: speed ramp into freeze ──
+        var rampStart = 1.35;
+        var rampDur = Math.max(0.2, freezeAt - rampStart);
+        tl.to(
+          aCrop,
+          {
+            scale: 1.28 * (0.9 + 0.1 * intensity),
+            x: 28 * intensity,
+            y: -12 * intensity,
+            duration: rampDur,
+            ease: "power3.in",
+          },
+          rampStart,
+        );
+        tl.to(
+          stage,
+          {
+            scale: 1.12,
+            filter: "blur(0px) brightness(1.08)",
+            duration: rampDur,
+            ease: "power2.in",
+          },
+          rampStart,
+        );
+        tl.to(
+          bars,
+          {
+            scaleY: 1.55,
+            duration: rampDur * 0.85,
+            ease: "power2.in",
+            stagger: { each: 0.012, from: "center" },
+          },
+          rampStart,
+        );
+
+        // ── 2.20–3.00: freeze hit (snap-on for seek/snapshot stability) ──
+        tl.set(freeze, { visibility: "visible", opacity: 1 }, freezeAt);
+        tl.set(freezeOutline, { opacity: 1 }, freezeAt);
+        tl.set(freezeContour, { opacity: 0.85 }, freezeAt);
+        tl.set(freezeBadge, { opacity: 1 }, freezeAt);
+        tl.set(hitType, { visibility: "visible", opacity: 1, scale: 1 }, freezeAt);
+        // Hold crop/stage where ramp ended
+        tl.to(aCrop, { duration: 0.01, ease: "none" }, freezeAt);
+        tl.to(
+          stage,
+          {
+            scale: 1.12,
+            filter: "blur(0px) brightness(1.15)",
+            duration: 0.05,
+            ease: "power4.out",
+          },
+          freezeAt,
+        );
+        // Single exposure flash (not a strobe sequence)
+        tl.fromTo(
+          freezeFlash,
+          { opacity: 0.55 * intensity },
+          { opacity: 0, duration: 0.28, ease: "power2.out" },
+          freezeAt,
+        );
+        tl.to(
+          hitType,
+          { opacity: 0, scale: 0.96, duration: 0.2, ease: "power2.in" },
+          freezeAt + 0.55,
+        );
+        tl.set(hitType, { visibility: "hidden", opacity: 0 }, freezeAt + 0.78);
+        // Soft settle of freeze dressing before cut
+        tl.to(
+          [freezeOutline, freezeContour, freezeBadge],
+          { opacity: 0.75, duration: 0.35, ease: "sine.out" },
+          freezeAt + 0.35,
+        );
+
+        // ── 3.00–3.35: hard cut connector ──
+        tl.set(cutFx, { visibility: "visible" }, cutAt);
+        tl.fromTo(
+          cutFx,
+          { opacity: 0, scaleX: 0.35, x: -280 },
+          {
+            opacity: 0.95,
+            scaleX: 1.6,
+            x: 120,
+            duration: 0.12,
+            ease: "power4.in",
+          },
+          cutAt,
+        );
+        tl.to(
+          stage,
+          {
+            filter: "blur(14px) brightness(1.35)",
+            scaleX: 1.35,
+            scaleY: 0.92,
+            duration: 0.12,
+            ease: "power3.in",
+          },
+          cutAt,
+        );
+        // Switch shots mid-cut — shot B content lands immediately (no black gap)
+        var switchAt = cutAt + 0.14;
+        tl.set(shotA, { opacity: 0, visibility: "hidden" }, switchAt);
+        tl.set(shotB, { opacity: 1, visibility: "visible" }, switchAt);
+        tl.set(hitType, { opacity: 0, visibility: "hidden" }, switchAt);
+        tl.set(
+          [freeze, freezeOutline, freezeFlash, freezeContour, freezeBadge],
+          { opacity: 0, visibility: "hidden" },
+          switchAt,
+        );
+        tl.set(freeze, { visibility: "hidden" }, switchAt);
+        // Shot B content visible on switch (offset settles after)
+        tl.set(bLeft, { opacity: 1, x: -24 }, switchAt);
+        tl.set(bCards, { opacity: 1, x: 24 }, switchAt);
+        tl.to(
+          stage,
+          {
+            filter: "blur(0px) brightness(1)",
+            scale: 1,
+            scaleX: 1,
+            scaleY: 1,
+            x: 0,
+            y: 0,
+            duration: 0.18,
+            ease: "power3.out",
+          },
+          switchAt,
+        );
+        tl.to(cutFx, { opacity: 0, x: 360, duration: 0.16, ease: "power2.out" }, cutAt + 0.16);
+        tl.set(cutFx, { visibility: "hidden", opacity: 0 }, cutAt + 0.34);
+
+        // ── after switch: shot B settle (no scale overlap with recover) ──
+        tl.to(bLeft, { x: 0, duration: 0.4, ease: "power3.out" }, switchAt);
+        tl.to(
+          bCards,
+          {
+            x: 0,
+            duration: 0.38,
+            ease: "power3.out",
+            stagger: 0.06,
+          },
+          switchAt + 0.04,
+        );
+        tl.to(stage, { scale: 1.02, duration: 1.17, ease: "sine.out" }, switchAt + 0.18);
+
+        // ── 4.70–5.20: final beat punch-in ──
+        tl.to(
+          stage,
+          {
+            scale: 1.08 * (0.9 + 0.1 * intensity),
+            duration: 0.14,
+            ease: "power4.out",
+          },
+          beat3,
+        );
+        tl.to(
+          bCards[1],
+          {
+            scale: 1.04,
+            duration: 0.12,
+            ease: "power3.out",
+          },
+          beat3,
+        );
+        tl.to(
+          bCards[1],
+          {
+            scale: 1,
+            duration: 0.22,
+            ease: "power2.out",
+          },
+          beat3 + 0.14,
+        );
+        // Micro freeze feel: brief hold of scale
+        tl.to(
+          stage,
+          { scale: 1.08 * (0.9 + 0.1 * intensity), duration: 0.2, ease: "none" },
+          beat3 + 0.14,
+        );
+
+        // ── 5.20–6.00: hold readable end card (≥0.8s) ──
+        tl.to(stage, { scale: 1.03, duration: 0.35, ease: "power2.out" }, holdAt);
+        // Ensure transient layers stay dead through end
+        tl.set(intro, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(hitType, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(freeze, { opacity: 0, visibility: "hidden" }, holdAt);
+        tl.set(cutFx, { opacity: 0, visibility: "hidden" }, holdAt);
+
+        window.__timelines["beat-freeze-cut"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/beat-freeze-cut/registry-item.json b/registry/blocks/beat-freeze-cut/registry-item.json
new file mode 100644
index 0000000000..5a4b6e09df
--- /dev/null
+++ b/registry/blocks/beat-freeze-cut/registry-item.json
@@ -0,0 +1,34 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "beat-freeze-cut",
+  "type": "hyperframes:block",
+  "title": "Beat Freeze Cut",
+  "description": "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.",
+  "tags": ["transition", "music", "beat-driven", "freeze-frame"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "files": [
+    {
+      "path": "beat-freeze-cut.html",
+      "target": "compositions/beat-freeze-cut.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "params": [
+    {
+      "key": "--bg-color",
+      "label": "Background",
+      "type": "color",
+      "default": "#0B0D10"
+    },
+    {
+      "key": "--accent-color",
+      "label": "Accent",
+      "type": "color",
+      "default": "#00E5C7"
+    }
+  ]
+}
diff --git a/registry/blocks/hw-frame/assets/fonts/Caveat-700-latin.woff2 b/registry/blocks/hw-frame/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/blocks/hw-frame/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/blocks/hw-frame/hw-frame.html b/registry/blocks/hw-frame/hw-frame.html
new file mode 100644
index 0000000000..8bfb70a440
--- /dev/null
+++ b/registry/blocks/hw-frame/hw-frame.html
@@ -0,0 +1,302 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-fr-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-accent-warm: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1b1a1e;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-fr-media {
+        position: absolute;
+        overflow: hidden;
+        border-radius: 10px;
+      }
+      #hw-fr-media img,
+      #hw-fr-media .hw-fr-fill {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .hw-fr-fill {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 110px;
+        color: rgba(244, 242, 236, 0.9);
+        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);
+      }
+      #hw-fr-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-fr-svg path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-fr-border {
+        stroke: var(--hw-ink);
+        stroke-width: 7;
+      }
+      .hw-fr-doodle {
+        stroke: var(--hw-accent-warm);
+        stroke-width: 5;
+      }
+      #hw-fr-caption {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-weight: 700;
+        font-size: 58px;
+        color: var(--hw-ink);
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-fr-root"
+      data-composition-id="hw-frame"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-fr-media"></div>
+      <svg id="hw-fr-svg" viewBox="0 0 1920 1080"><path id="hw-fr-border"></path></svg>
+      <div id="hw-fr-caption"></div>
+      <div
+        id="hw-fr-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A sketched frame: content inside a hand-drawn border with
+           corner doodles + optional caption. IMAGES ONLY inside this block
+           (learning: the runtime never seeks media elements inside
+           sub-compositions) — for live footage keep the media element in
+           the HOST root positioned over the documented media slot below;
+           layering two framed clips = instant PiP. */
+        var CONFIG = {
+          src: null, // IMAGE path; null -> stand-in gradient (demo)
+          slot: { x: 480, y: 180, w: 960, h: 620 }, // the media window (documented for host-side footage)
+          caption: "our trip!",
+          doodles: true, // corner sparks
+          tilt: -1.2, // deg — the whole framed unit sits slightly rotated
+          seed: 14,
+          boil: { enabled: true, amp: 1.6, rot: 0.35, frameDrop: 3 },
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+
+        var S = CONFIG.slot;
+        var media = document.getElementById("hw-fr-media");
+        media.style.left = S.x + "px";
+        media.style.top = S.y + "px";
+        media.style.width = S.w + "px";
+        media.style.height = S.h + "px";
+        if (CONFIG.src) {
+          var img = document.createElement("img");
+          img.src = CONFIG.src;
+          media.appendChild(img);
+        } else {
+          var d = document.createElement("div");
+          d.className = "hw-fr-fill";
+          d.textContent = "photo";
+          media.appendChild(d);
+        }
+
+        /* border drawn slightly outside the slot */
+        var NS = "http://www.w3.org/2000/svg";
+        var border = document.getElementById("hw-fr-border");
+        var m = 16;
+        border.setAttribute("d", window.hwWobbleRect(S.w + m * 2, S.h + m * 2, 18, CONFIG.seed, 5));
+        border.setAttribute("transform", "translate(" + (S.x - m) + " " + (S.y - m) + ")");
+
+        /* corner doodles: little three-spark bursts */
+        var svg = document.getElementById("hw-fr-svg");
+        var doodles = [];
+        if (CONFIG.doodles) {
+          [
+            [S.x - 40, S.y - 34],
+            [S.x + S.w + 40, S.y - 26],
+            [S.x + S.w + 36, S.y + S.h + 30],
+          ].forEach(function (pt, i) {
+            var p = document.createElementNS(NS, "path");
+            p.setAttribute("class", "hw-fr-doodle");
+            p.setAttribute("id", "hw-fr-doodle-" + i);
+            var dd = "";
+            for (var k = 0; k < 3; k++) {
+              var a = -0.6 - k * 0.5 + window.hwHash(i * 9 + k, CONFIG.seed) * 0.2;
+              var l = 26 + window.hwHash(i * 9 + k + 4, CONFIG.seed) * 8;
+              dd +=
+                "M " +
+                pt[0] +
+                " " +
+                pt[1] +
+                " l " +
+                (Math.cos(a) * l).toFixed(1) +
+                " " +
+                (Math.sin(a) * l).toFixed(1) +
+                " ";
+            }
+            p.setAttribute("d", dd);
+            svg.appendChild(p);
+            doodles.push(p);
+          });
+        }
+
+        var caption = document.getElementById("hw-fr-caption");
+        caption.textContent = CONFIG.caption || "";
+        caption.style.top = S.y + S.h + 42 + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(media, { opacity: 0, scale: 0.96 });
+          tl.to(media, { opacity: 1, scale: 1, duration: IN * 1.4, ease: "power2.out" }, IN * 0.8);
+        }
+        var blen = border.getTotalLength();
+        gsap.set(border, { strokeDasharray: blen, strokeDashoffset: blen });
+        tl.to(border, { strokeDashoffset: 0, duration: 0.9, ease: "power2.inOut" }, 0.2);
+        doodles.forEach(function (p, i) {
+          var l = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: l, strokeDashoffset: l });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.3, ease: "power2.out" }, 1.1 + i * 0.12);
+        });
+        if (CONFIG.caption) tl.to(caption, { opacity: 1, duration: 0.4, ease: "power2.out" }, 1.4);
+
+        /* whole framed unit tilts + boils together */
+        var unit = [media, svg, caption];
+        gsap.set(unit, { rotation: CONFIG.tilt, transformOrigin: "50% 50%" });
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, unit, {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+            baseRot: CONFIG.tilt,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(unit, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-fr-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-frame"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-frame/registry-item.json b/registry/blocks/hw-frame/registry-item.json
new file mode 100644
index 0000000000..ae3303f2b4
--- /dev/null
+++ b/registry/blocks/hw-frame/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-frame",
+  "type": "hyperframes:block",
+  "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)",
+  "tags": ["handwritten", "frame", "media"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "hw-frame.html",
+      "target": "compositions/hw-frame.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/hw-path-text/assets/fonts/Caveat-700-latin.woff2 b/registry/blocks/hw-path-text/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/blocks/hw-path-text/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/blocks/hw-path-text/demo.html b/registry/blocks/hw-path-text/demo.html
new file mode 100644
index 0000000000..3dc31619d8
--- /dev/null
+++ b/registry/blocks/hw-path-text/demo.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-path-text.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-path-text.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      #hw-pt-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pt-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      /* The textPath carrier is geometry only — without fill:none it inherits
+         SVG's default black fill and renders as a solid blob under the text. */
+      #hw-pt-path {
+        fill: none;
+      }
+      #hw-pt-guide {
+        fill: none;
+        stroke: rgba(244, 242, 236, 0.22);
+        stroke-width: 3;
+        stroke-dasharray: 2 14;
+        stroke-linecap: round;
+      }
+      #hw-pt-svg text {
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        fill: var(--hw-ink);
+      }
+      #hw-pt-svg tspan {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pt-root"
+      data-composition-id="hw-path-text"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pt-svg" viewBox="0 0 1920 1080">
+        <path id="hw-pt-path" d=""></path>
+        <path id="hw-pt-guide" d=""></path>
+        <text id="hw-pt-text" font-size="92">
+          <textPath id="hw-pt-tp" href="#hw-pt-path" startOffset="4%"></textPath>
+        </text>
+      </svg>
+      <div
+        id="hw-pt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwriting along any path — custom path text, natively via
+           SVG textPath (no Fusion overlay). CONFIG.d is the whole design. */
+        var CONFIG = {
+          text: "come on this wild journey with me...",
+          d: "M 220 700 C 520 480, 900 820, 1230 560 S 1700 380, 1780 420",
+          fontSize: 92,
+          showGuide: true, // faint dotted guide under the writing
+          typeCharDelay: 0.05,
+          seed: 12,
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        document.getElementById("hw-pt-path").setAttribute("d", CONFIG.d);
+        if (CONFIG.showGuide) document.getElementById("hw-pt-guide").setAttribute("d", CONFIG.d);
+        document.getElementById("hw-pt-text").setAttribute("font-size", CONFIG.fontSize);
+
+        /* per-char tspans along the path */
+        var NS = "http://www.w3.org/2000/svg";
+        var tp = document.getElementById("hw-pt-tp");
+        Array.from(CONFIG.text).forEach(function (ch) {
+          var t = document.createElementNS(NS, "tspan");
+          t.textContent = ch;
+          tp.appendChild(t);
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* guide draws first, then the handwriting types along it */
+        var guide = document.getElementById("hw-pt-guide");
+        if (CONFIG.showGuide) {
+          var glen = guide.getTotalLength();
+          gsap.set(guide, { strokeDasharray: "2 14", strokeDashoffset: glen });
+          tl.to(guide, { strokeDashoffset: 0, duration: 0.9, ease: "power2.inOut" }, 0.2);
+        }
+        var chars = tp.querySelectorAll("tspan");
+        var delay = Math.min(CONFIG.typeCharDelay, 2.6 / Math.max(1, chars.length));
+        tl.to(chars, { opacity: 1, duration: 0.03, stagger: delay, ease: "none" }, 0.7);
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-pt-svg", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to("#hw-pt-svg", { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pt-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-path-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-path-text/hw-path-text.html b/registry/blocks/hw-path-text/hw-path-text.html
new file mode 100644
index 0000000000..fa10379cd9
--- /dev/null
+++ b/registry/blocks/hw-path-text/hw-path-text.html
@@ -0,0 +1,193 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-pt-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pt-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      /* The textPath carrier is geometry only — without fill:none it inherits
+         SVG's default black fill and renders as a solid blob under the text. */
+      #hw-pt-path {
+        fill: none;
+      }
+      #hw-pt-guide {
+        fill: none;
+        stroke: rgba(244, 242, 236, 0.22);
+        stroke-width: 3;
+        stroke-dasharray: 2 14;
+        stroke-linecap: round;
+      }
+      #hw-pt-svg text {
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        fill: var(--hw-ink);
+      }
+      #hw-pt-svg tspan {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pt-root"
+      data-composition-id="hw-path-text"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pt-svg" viewBox="0 0 1920 1080">
+        <path id="hw-pt-path" d=""></path>
+        <path id="hw-pt-guide" d=""></path>
+        <text id="hw-pt-text" font-size="92">
+          <textPath id="hw-pt-tp" href="#hw-pt-path" startOffset="4%"></textPath>
+        </text>
+      </svg>
+      <div
+        id="hw-pt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwriting along any path — custom path text, natively via
+           SVG textPath (no Fusion overlay). CONFIG.d is the whole design. */
+        var CONFIG = {
+          text: "come on this wild journey with me...",
+          d: "M 220 700 C 520 480, 900 820, 1230 560 S 1700 380, 1780 420",
+          fontSize: 92,
+          showGuide: true, // faint dotted guide under the writing
+          typeCharDelay: 0.05,
+          seed: 12,
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        document.getElementById("hw-pt-path").setAttribute("d", CONFIG.d);
+        if (CONFIG.showGuide) document.getElementById("hw-pt-guide").setAttribute("d", CONFIG.d);
+        document.getElementById("hw-pt-text").setAttribute("font-size", CONFIG.fontSize);
+
+        /* per-char tspans along the path */
+        var NS = "http://www.w3.org/2000/svg";
+        var tp = document.getElementById("hw-pt-tp");
+        Array.from(CONFIG.text).forEach(function (ch) {
+          var t = document.createElementNS(NS, "tspan");
+          t.textContent = ch;
+          tp.appendChild(t);
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* guide draws first, then the handwriting types along it */
+        var guide = document.getElementById("hw-pt-guide");
+        if (CONFIG.showGuide) {
+          var glen = guide.getTotalLength();
+          gsap.set(guide, { strokeDasharray: "2 14", strokeDashoffset: glen });
+          tl.to(guide, { strokeDashoffset: 0, duration: 0.9, ease: "power2.inOut" }, 0.2);
+        }
+        var chars = tp.querySelectorAll("tspan");
+        var delay = Math.min(CONFIG.typeCharDelay, 2.6 / Math.max(1, chars.length));
+        tl.to(chars, { opacity: 1, duration: 0.03, stagger: delay, ease: "none" }, 0.7);
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-pt-svg", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to("#hw-pt-svg", { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pt-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-path-text"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-path-text/registry-item.json b/registry/blocks/hw-path-text/registry-item.json
new file mode 100644
index 0000000000..d2a0db5c73
--- /dev/null
+++ b/registry/blocks/hw-path-text/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-path-text",
+  "type": "hyperframes:block",
+  "title": "Text Along a Path",
+  "description": "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input",
+  "tags": ["handwritten", "typography", "path", "overlay"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "files": [
+    {
+      "path": "hw-path-text.html",
+      "target": "compositions/hw-path-text.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/hw-pipeline/assets/fonts/Caveat-700-latin.woff2 b/registry/blocks/hw-pipeline/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/blocks/hw-pipeline/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/blocks/hw-pipeline/demo.html b/registry/blocks/hw-pipeline/demo.html
new file mode 100644
index 0000000000..41555efcc8
--- /dev/null
+++ b/registry/blocks/hw-pipeline/demo.html
@@ -0,0 +1,320 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-pipeline.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-pipeline.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      #hw-pl-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The
+           previous #6d6dff read as a default UI blue against the family's ink. */
+        --hw-accent: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or boards */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pl-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-pl-svg path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-pl-box {
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+      }
+      .hw-pl-conn {
+        stroke: var(--hw-accent);
+        stroke-width: 5;
+      }
+      .hw-pl-label {
+        position: absolute;
+        text-align: center;
+        font-weight: 700;
+        color: var(--hw-ink);
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pl-root"
+      data-composition-id="hw-pipeline"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pl-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="hw-pl-labels"></div>
+      <div
+        id="hw-pl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A flowchart "pipeline": wobbled boxes joined by curved
+           connectors, drawing on in sequence, all boiling. */
+        var CONFIG = {
+          nodes: [{ label: "Idea" }, { label: "Record" }, { label: "Shine!" }],
+          boxW: 320,
+          boxH: 170,
+          gap: 190, // px between boxes
+          y: 455, // top of the row; x centers automatically
+          fontSize: 56,
+          seed: 11,
+          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.getElementById("hw-pl-svg");
+        var labels = document.getElementById("hw-pl-labels");
+        var n = CONFIG.nodes.length;
+        var totalW = n * CONFIG.boxW + (n - 1) * CONFIG.gap;
+        var x0 = (1920 - totalW) / 2;
+
+        var boxes = [],
+          conns = [],
+          labelEls = [];
+        CONFIG.nodes.forEach(function (node, i) {
+          var bx = x0 + i * (CONFIG.boxW + CONFIG.gap);
+          /* outer g owns the translate (GSAP transforms REPLACE the SVG
+             transform attribute — never boil the element that carries it);
+             inner g is the boil target */
+          var gOuter = document.createElementNS(NS, "g");
+          gOuter.setAttribute("transform", "translate(" + bx + " " + CONFIG.y + ")");
+          var g = document.createElementNS(NS, "g");
+          g.setAttribute("id", "hw-pl-box-g-" + i);
+          gOuter.appendChild(g);
+          var p = document.createElementNS(NS, "path");
+          p.setAttribute("class", "hw-pl-box");
+          p.setAttribute("id", "hw-pl-box-" + i);
+          p.setAttribute("d", window.hwWobbleRect(CONFIG.boxW, CONFIG.boxH, 24, CONFIG.seed + i));
+          g.appendChild(p);
+          svg.appendChild(gOuter);
+          boxes.push(p);
+
+          var label = document.createElement("div");
+          label.className = "hw-pl-label";
+          label.id = "hw-pl-label-" + i;
+          label.textContent = node.label;
+          label.style.left = bx + "px";
+          label.style.top = CONFIG.y + CONFIG.boxH / 2 - CONFIG.fontSize * 0.62 + "px";
+          label.style.width = CONFIG.boxW + "px";
+          label.style.fontSize = CONFIG.fontSize + "px";
+          labels.appendChild(label);
+          labelEls.push(label);
+
+          if (i < n - 1) {
+            var cx = bx + CONFIG.boxW,
+              cy = CONFIG.y + CONFIG.boxH / 2;
+            var ex = cx + CONFIG.gap,
+              ey = cy;
+            var c = document.createElementNS(NS, "path");
+            c.setAttribute("class", "hw-pl-conn");
+            c.setAttribute("id", "hw-pl-conn-" + i);
+            var sx = cx + 10,
+              tx = ex - 10;
+            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,
+              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;
+            /* Barbs follow the curve's incoming tangent. A quadratic's tangent
+               at its end is (end - control); barbs fixed to horizontal left the
+               head detached from a curve that arrives descending. Symmetric
+               length and angle, so it reads as one arrowhead. */
+            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;
+            var BARB = 26,
+              SPREAD = 0.42;
+            var b1x = tx + BARB * Math.cos(ang - SPREAD),
+              b1y = ey + BARB * Math.sin(ang - SPREAD);
+            var b2x = tx + BARB * Math.cos(ang + SPREAD),
+              b2y = ey + BARB * Math.sin(ang + SPREAD);
+            c.setAttribute(
+              "d",
+              "M " +
+                sx +
+                " " +
+                cy +
+                " Q " +
+                qx +
+                " " +
+                qy +
+                " " +
+                tx +
+                " " +
+                ey +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b2x +
+                " " +
+                b2y,
+            );
+            svg.appendChild(c);
+            conns.push(c);
+          }
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* sequence: box draws -> label -> connector -> next box... */
+        var t = 0.3;
+        CONFIG.nodes.forEach(function (_, i) {
+          var p = boxes[i];
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.65, ease: "power2.inOut" }, t);
+          tl.to(labelEls[i], { opacity: 1, duration: 0.35, ease: "power2.out" }, t + 0.45);
+          t += 0.7;
+          if (i < conns.length) {
+            var c = conns[i];
+            var cl = c.getTotalLength();
+            gsap.set(c, { strokeDasharray: cl, strokeDashoffset: cl });
+            tl.to(c, { strokeDashoffset: 0, duration: 0.45, ease: "power2.inOut" }, t);
+            t += 0.5;
+          }
+        });
+
+        if (CONFIG.boil.enabled) {
+          var targets = boxes.map(function (_, i) {
+            return "#hw-pl-box-g-" + i;
+          });
+          window.hwBoil(tl, targets.concat([".hw-pl-conn", ".hw-pl-label"]), {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pl-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-pipeline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-pipeline/hw-pipeline.html b/registry/blocks/hw-pipeline/hw-pipeline.html
new file mode 100644
index 0000000000..376e443940
--- /dev/null
+++ b/registry/blocks/hw-pipeline/hw-pipeline.html
@@ -0,0 +1,317 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-pl-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The
+           previous #6d6dff read as a default UI blue against the family's ink. */
+        --hw-accent: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or boards */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-pl-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-pl-svg path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-pl-box {
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+      }
+      .hw-pl-conn {
+        stroke: var(--hw-accent);
+        stroke-width: 5;
+      }
+      .hw-pl-label {
+        position: absolute;
+        text-align: center;
+        font-weight: 700;
+        color: var(--hw-ink);
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-pl-root"
+      data-composition-id="hw-pipeline"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-pl-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="hw-pl-labels"></div>
+      <div
+        id="hw-pl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A flowchart "pipeline": wobbled boxes joined by curved
+           connectors, drawing on in sequence, all boiling. */
+        var CONFIG = {
+          nodes: [{ label: "Idea" }, { label: "Record" }, { label: "Shine!" }],
+          boxW: 320,
+          boxH: 170,
+          gap: 190, // px between boxes
+          y: 455, // top of the row; x centers automatically
+          fontSize: 56,
+          seed: 11,
+          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.getElementById("hw-pl-svg");
+        var labels = document.getElementById("hw-pl-labels");
+        var n = CONFIG.nodes.length;
+        var totalW = n * CONFIG.boxW + (n - 1) * CONFIG.gap;
+        var x0 = (1920 - totalW) / 2;
+
+        var boxes = [],
+          conns = [],
+          labelEls = [];
+        CONFIG.nodes.forEach(function (node, i) {
+          var bx = x0 + i * (CONFIG.boxW + CONFIG.gap);
+          /* outer g owns the translate (GSAP transforms REPLACE the SVG
+             transform attribute — never boil the element that carries it);
+             inner g is the boil target */
+          var gOuter = document.createElementNS(NS, "g");
+          gOuter.setAttribute("transform", "translate(" + bx + " " + CONFIG.y + ")");
+          var g = document.createElementNS(NS, "g");
+          g.setAttribute("id", "hw-pl-box-g-" + i);
+          gOuter.appendChild(g);
+          var p = document.createElementNS(NS, "path");
+          p.setAttribute("class", "hw-pl-box");
+          p.setAttribute("id", "hw-pl-box-" + i);
+          p.setAttribute("d", window.hwWobbleRect(CONFIG.boxW, CONFIG.boxH, 24, CONFIG.seed + i));
+          g.appendChild(p);
+          svg.appendChild(gOuter);
+          boxes.push(p);
+
+          var label = document.createElement("div");
+          label.className = "hw-pl-label";
+          label.id = "hw-pl-label-" + i;
+          label.textContent = node.label;
+          label.style.left = bx + "px";
+          label.style.top = CONFIG.y + CONFIG.boxH / 2 - CONFIG.fontSize * 0.62 + "px";
+          label.style.width = CONFIG.boxW + "px";
+          label.style.fontSize = CONFIG.fontSize + "px";
+          labels.appendChild(label);
+          labelEls.push(label);
+
+          if (i < n - 1) {
+            var cx = bx + CONFIG.boxW,
+              cy = CONFIG.y + CONFIG.boxH / 2;
+            var ex = cx + CONFIG.gap,
+              ey = cy;
+            var c = document.createElementNS(NS, "path");
+            c.setAttribute("class", "hw-pl-conn");
+            c.setAttribute("id", "hw-pl-conn-" + i);
+            var sx = cx + 10,
+              tx = ex - 10;
+            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,
+              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;
+            /* Barbs follow the curve's incoming tangent. A quadratic's tangent
+               at its end is (end - control); barbs fixed to horizontal left the
+               head detached from a curve that arrives descending. Symmetric
+               length and angle, so it reads as one arrowhead. */
+            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;
+            var BARB = 26,
+              SPREAD = 0.42;
+            var b1x = tx + BARB * Math.cos(ang - SPREAD),
+              b1y = ey + BARB * Math.sin(ang - SPREAD);
+            var b2x = tx + BARB * Math.cos(ang + SPREAD),
+              b2y = ey + BARB * Math.sin(ang + SPREAD);
+            c.setAttribute(
+              "d",
+              "M " +
+                sx +
+                " " +
+                cy +
+                " Q " +
+                qx +
+                " " +
+                qy +
+                " " +
+                tx +
+                " " +
+                ey +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
+                " " +
+                ey +
+                " L " +
+                b2x +
+                " " +
+                b2y,
+            );
+            svg.appendChild(c);
+            conns.push(c);
+          }
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* sequence: box draws -> label -> connector -> next box... */
+        var t = 0.3;
+        CONFIG.nodes.forEach(function (_, i) {
+          var p = boxes[i];
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.65, ease: "power2.inOut" }, t);
+          tl.to(labelEls[i], { opacity: 1, duration: 0.35, ease: "power2.out" }, t + 0.45);
+          t += 0.7;
+          if (i < conns.length) {
+            var c = conns[i];
+            var cl = c.getTotalLength();
+            gsap.set(c, { strokeDasharray: cl, strokeDashoffset: cl });
+            tl.to(c, { strokeDashoffset: 0, duration: 0.45, ease: "power2.inOut" }, t);
+            t += 0.5;
+          }
+        });
+
+        if (CONFIG.boil.enabled) {
+          var targets = boxes.map(function (_, i) {
+            return "#hw-pl-box-g-" + i;
+          });
+          window.hwBoil(tl, targets.concat([".hw-pl-conn", ".hw-pl-label"]), {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-pl-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-pipeline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-pipeline/registry-item.json b/registry/blocks/hw-pipeline/registry-item.json
new file mode 100644
index 0000000000..56cf716be8
--- /dev/null
+++ b/registry/blocks/hw-pipeline/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-pipeline",
+  "type": "hyperframes:block",
+  "title": "Hand-Drawn Flowchart",
+  "description": "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list",
+  "tags": ["handwritten", "diagram", "data-viz", "overlay"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 7,
+  "files": [
+    {
+      "path": "hw-pipeline.html",
+      "target": "compositions/hw-pipeline.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/hw-scribble-transition/hw-scribble-transition.html b/registry/blocks/hw-scribble-transition/hw-scribble-transition.html
new file mode 100644
index 0000000000..6cf993833f
--- /dev/null
+++ b/registry/blocks/hw-scribble-transition/hw-scribble-transition.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-st-root {
+        /* Warm marker accent, consistent with the rest of the hw family.
+           Override per use via CONFIG.color. */
+        --hw-accent: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      #hw-st-svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #hw-st-svg path {
+        fill: none;
+        stroke: var(--hw-accent);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      /* solid backstop that guarantees full coverage at the midpoint */
+      #hw-st-solid {
+        position: absolute;
+        inset: 0;
+        background: var(--hw-accent);
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-st-root"
+      data-composition-id="hw-scribble-transition"
+      data-start="0"
+      data-duration="2.2"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="hw-st-svg" viewBox="0 0 1920 1080" data-layout-allow-overflow></svg>
+      <div id="hw-st-solid"></div>
+      <div
+        id="hw-st-drv"
+        class="clip"
+        data-start="0"
+        data-duration="2.2"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Overlay-transition (the mk-clone-wall model): fat scribble strokes
+           sweep across and cover the frame, a solid backstop guarantees full
+           coverage at the midpoint (the host hard-cuts beneath, ~0.9-1.4s
+           local), then everything clears. Place spanning the host's cut. */
+        var CONFIG = {
+          color: null, // css color; null = --hw-accent (warm marker)
+          bands: 7, // horizontal scribble bands
+          strokeScale: 1.0,
+          seed: 17,
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 2.2;
+
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+
+        var root = document.getElementById("hw-st-root");
+        if (CONFIG.color) root.style.setProperty("--hw-accent", CONFIG.color);
+        var NS = "http://www.w3.org/2000/svg";
+        var svg = document.getElementById("hw-st-svg");
+
+        /* fat zigzag bands, each covering a horizontal slice edge-to-edge */
+        var bandH = H / CONFIG.bands;
+        var paths = [];
+        for (var b = 0; b < CONFIG.bands; b++) {
+          var y0 = b * bandH + bandH / 2;
+          var d = "M -80 " + (y0 + window.hwHash(b * 17, CONFIG.seed) * 20).toFixed(1);
+          var zigs = 7;
+          for (var i = 1; i <= zigs; i++) {
+            var x = (W + 160) * (i / zigs) - 80;
+            var y =
+              y0 + (i % 2 ? -1 : 1) * bandH * 0.32 + window.hwHash(b * 17 + i, CONFIG.seed) * 16;
+            d += " L " + x.toFixed(1) + " " + y.toFixed(1);
+          }
+          var p = document.createElementNS(NS, "path");
+          p.setAttribute("d", d);
+          p.setAttribute("stroke-width", Math.ceil(bandH * 0.85 * CONFIG.strokeScale));
+          p.setAttribute("id", "hw-st-band-" + b);
+          svg.appendChild(p);
+          paths.push(p);
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* 0-0.85: bands scribble on (staggered, alternating direction) */
+        paths.forEach(function (p, i) {
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: i % 2 ? -len : len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.55, ease: "power2.in" }, 0.04 * i);
+        });
+        /* 0.8: solid backstop snaps in beneath the finished scribble — full
+           coverage guaranteed 0.85-1.35 (the host's cut window) */
+        tl.to("#hw-st-solid", { opacity: 1, duration: 0.12, ease: "none" }, 0.8);
+
+        /* 1.35-1.95: clear — bands scribble off the other way, backstop lifts */
+        tl.to("#hw-st-solid", { opacity: 0, duration: 0.15, ease: "none" }, 1.42);
+        paths.forEach(function (p, i) {
+          var len = p.getTotalLength();
+          tl.to(
+            p,
+            { strokeDashoffset: i % 2 ? len : -len, duration: 0.5, ease: "power2.out" },
+            1.42 + 0.035 * i,
+          );
+        });
+
+        /* hard kill the moment the last band clears (learning: kill roots
+           when the final fade completes, not at DUR) */
+        tl.set(root, { visibility: "hidden" }, 2.17);
+
+        window.__timelines["hw-scribble-transition"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-scribble-transition/registry-item.json b/registry/blocks/hw-scribble-transition/registry-item.json
new file mode 100644
index 0000000000..4a19671328
--- /dev/null
+++ b/registry/blocks/hw-scribble-transition/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-scribble-transition",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["handwritten", "transition", "wipe"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 2.2,
+  "files": [
+    {
+      "path": "hw-scribble-transition.html",
+      "target": "compositions/hw-scribble-transition.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/hw-text-cloud/assets/fonts/Caveat-700-latin.woff2 b/registry/blocks/hw-text-cloud/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/blocks/hw-text-cloud/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/blocks/hw-text-cloud/hw-text-cloud.html b/registry/blocks/hw-text-cloud/hw-text-cloud.html
new file mode 100644
index 0000000000..88db90f00b
--- /dev/null
+++ b/registry/blocks/hw-text-cloud/hw-text-cloud.html
@@ -0,0 +1,285 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-tc-root {
+        /* ---- hw tokens ---- */
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-ink-dark: #26241f;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-tc-wrap {
+        position: absolute;
+        pointer-events: none;
+      }
+      #hw-tc-wrap svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      #hw-tc-fill {
+        fill: var(--hw-ink);
+        opacity: 0;
+      }
+      #hw-tc-stroke {
+        fill: none;
+        stroke: var(--hw-ink-dark);
+        stroke-width: 4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-tc-text {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-weight: 700;
+        color: var(--hw-ink-dark);
+        line-height: 1.05;
+      }
+      #hw-tc-text .ch {
+        opacity: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-tc-root"
+      data-composition-id="hw-text-cloud"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-tc-wrap">
+        <svg id="hw-tc-svg">
+          <path id="hw-tc-fill"></path>
+          <path id="hw-tc-stroke"></path>
+        </svg>
+        <div id="hw-tc-text"></div>
+      </div>
+      <div
+        id="hw-tc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Speech bubble with a movable tip (pointable at any subject): wobbled
+           cloud, draw-on outline, paper fill, per-char handwritten text. */
+        var CONFIG = {
+          text: "what are you looking at?",
+          x: 620, // wrapper left
+          y: 180, // wrapper top
+          w: 560,
+          h: 300,
+          fontSize: 58,
+          tip: { side: "bottom-left", len: 90 }, // "bottom-left"|"bottom-right"
+          seed: 6,
+          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },
+          typeCharDelay: 0.03,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        /* wobbled cloud with a tail tip */
+        function cloudPath(W, H, tip, seed) {
+          var cx = W / 2,
+            cy = H / 2 - 14,
+            rx = W / 2 - 12,
+            ry = H / 2 - 34;
+          var N = 16,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 11 + 3, seed) * 0.06;
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          d += "Z";
+          /* tail */
+          var left = tip.side !== "bottom-right";
+          var bx = cx + (left ? -rx * 0.45 : rx * 0.45),
+            by = cy + ry * 0.92;
+          var tx = bx + (left ? -tip.len * 0.5 : tip.len * 0.5),
+            ty = by + tip.len;
+          d +=
+            " M " +
+            (bx - 26).toFixed(1) +
+            " " +
+            (by - 6).toFixed(1) +
+            " Q " +
+            (bx - 8 + window.hwHash(31, seed) * 6).toFixed(1) +
+            " " +
+            ((by + ty) / 2).toFixed(1) +
+            " " +
+            tx.toFixed(1) +
+            " " +
+            ty.toFixed(1) +
+            " Q " +
+            (bx + 18).toFixed(1) +
+            " " +
+            ((by + ty) / 2).toFixed(1) +
+            " " +
+            (bx + 30).toFixed(1) +
+            " " +
+            (by - 2).toFixed(1);
+          return d;
+        }
+
+        var wrap = document.getElementById("hw-tc-wrap");
+        wrap.style.left = CONFIG.x + "px";
+        wrap.style.top = CONFIG.y + "px";
+        wrap.style.width = CONFIG.w + "px";
+        wrap.style.height = CONFIG.h + "px";
+        var svg = document.getElementById("hw-tc-svg");
+        svg.setAttribute("viewBox", "0 0 " + CONFIG.w + " " + CONFIG.h);
+        var d = cloudPath(CONFIG.w, CONFIG.h, CONFIG.tip, CONFIG.seed);
+        document.getElementById("hw-tc-fill").setAttribute("d", d);
+        document.getElementById("hw-tc-stroke").setAttribute("d", d);
+
+        var text = document.getElementById("hw-tc-text");
+        text.style.left = CONFIG.w * 0.12 + "px";
+        text.style.top = CONFIG.h * 0.1 + "px";
+        text.style.width = CONFIG.w * 0.76 + "px";
+        text.style.height = CONFIG.h * 0.62 + "px";
+        text.style.fontSize = CONFIG.fontSize + "px";
+        var inner = document.createElement("div");
+        Array.from(CONFIG.text).forEach(function (ch) {
+          var s = document.createElement("span");
+          s.className = "ch";
+          s.textContent = ch;
+          inner.appendChild(s);
+        });
+        text.appendChild(inner);
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* draw outline, fade fill, type text */
+        var stroke = document.getElementById("hw-tc-stroke");
+        var len = stroke.getTotalLength();
+        gsap.set(stroke, { strokeDasharray: len, strokeDashoffset: len });
+        var t0 = CONFIG.animationIn ? 0.3 : 0;
+        if (CONFIG.animationIn) {
+          tl.to(stroke, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, t0);
+          tl.to("#hw-tc-fill", { opacity: 0.94, duration: 0.4, ease: "power2.out" }, t0 + 0.55);
+        } else {
+          gsap.set(stroke, { strokeDashoffset: 0 });
+          gsap.set("#hw-tc-fill", { opacity: 0.94 });
+        }
+        var chars = text.querySelectorAll(".ch");
+        var delay = Math.min(CONFIG.typeCharDelay, 1.8 / Math.max(1, chars.length));
+        tl.to(chars, { opacity: 1, duration: 0.02, stagger: delay, ease: "none" }, t0 + 0.9);
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-tc-wrap", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(wrap, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-tc-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-text-cloud"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-text-cloud/registry-item.json b/registry/blocks/hw-text-cloud/registry-item.json
new file mode 100644
index 0000000000..ecd31b7824
--- /dev/null
+++ b/registry/blocks/hw-text-cloud/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-text-cloud",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["handwritten", "speech-bubble", "overlay"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "files": [
+    {
+      "path": "hw-text-cloud.html",
+      "target": "compositions/hw-text-cloud.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/hw-title/assets/fonts/Caveat-700-latin.woff2 b/registry/blocks/hw-title/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/blocks/hw-title/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/blocks/hw-title/demo.html b/registry/blocks/hw-title/demo.html
new file mode 100644
index 0000000000..9a0cfa0234
--- /dev/null
+++ b/registry/blocks/hw-title/demo.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-title.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-title.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      #hw-t-root {
+        /* ---- hw tokens ---- */
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-ink-dark: #26241f;
+        --hw-accent-warm: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or a board */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-t-wrap {
+        position: absolute;
+        pointer-events: none;
+      }
+      #hw-t-line {
+        font-weight: 700;
+        line-height: 1.1;
+        white-space: nowrap;
+        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+      }
+      #hw-t-line .w {
+        display: inline;
+      }
+      #hw-t-under {
+        overflow: visible;
+        display: block;
+      }
+      #hw-t-under path {
+        fill: none;
+        stroke: var(--hw-accent-warm);
+        stroke-width: 7;
+        stroke-linecap: round;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-t-root"
+      data-composition-id="hw-title"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-t-wrap">
+        <div id="hw-t-line"></div>
+        <svg id="hw-t-under" width="10" height="34"><path id="hw-t-under-path"></path></svg>
+      </div>
+      <div
+        id="hw-t-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwritten title with the highlight-sweep scalar (the shared
+           mk-callout-highlight mechanic) + squiggle underline + the boil.
+           Demonstrates the dispatcher composing sweep + boil on one
+           timeline (learning: one onUpdate — everything through hwOnUpdate). */
+        var CONFIG = {
+          text: "shine like the star you are",
+          fontSize: 120,
+          scheme: "chalk", // "chalk" (white, over footage) | "ink" (dark, boards)
+          sweep: { enabled: true, start: 0.8, end: 3.2 },
+          underline: { enabled: true, wobble: 6 },
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          seed: 8,
+          x: null, // null = centered
+          y: null,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        var FULL = CONFIG.scheme === "ink" ? "#26241f" : "#f4f2ec";
+        var FAINT = CONFIG.scheme === "ink" ? "rgba(38,36,31,0.3)" : "rgba(244,242,236,0.32)";
+
+        var wrap = document.getElementById("hw-t-wrap");
+        var line = document.getElementById("hw-t-line");
+        line.style.fontSize = CONFIG.fontSize + "px";
+
+        /* word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) line.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.className = "w";
+          span.textContent = w;
+          span.style.color = CONFIG.sweep.enabled ? FAINT : FULL;
+          line.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* measure + position; build squiggle underline to match width */
+        var rect = line.getBoundingClientRect();
+        wrap.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        wrap.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
+
+        var underPath = document.getElementById("hw-t-under-path");
+        if (CONFIG.underline.enabled) {
+          var uw = Math.round(rect.width);
+          var svg = document.getElementById("hw-t-under");
+          svg.setAttribute("width", uw);
+          svg.setAttribute("viewBox", "0 0 " + uw + " 34");
+          var segs = Math.max(6, Math.round(uw / 90));
+          var d = "M 2 " + (16 + window.hwHash(0, CONFIG.seed) * 4).toFixed(1);
+          for (var i = 1; i <= segs; i++) {
+            var x = (uw / segs) * i;
+            var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
+            var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
+            var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
+            d +=
+              " Q " +
+              cxp.toFixed(1) +
+              " " +
+              cyp.toFixed(1) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              y.toFixed(1);
+          }
+          underPath.setAttribute("d", d);
+        } else {
+          document.getElementById("hw-t-under").style.display = "none";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(wrap, { opacity: 0 });
+          tl.to(wrap, { opacity: 1, duration: IN, ease: "power2.out" }, 0.1);
+        }
+
+        /* the sweep scalar — registered through the dispatcher so it
+           coexists with the boil on the same timeline */
+        if (CONFIG.sweep.enabled) {
+          var mix = gsap.utils.interpolate(FAINT, FULL);
+          var st = { p: 0 };
+          window.hwOnUpdate(tl, function () {
+            var k = st.p * wordEls.length;
+            for (var i = 0; i < wordEls.length; i++) {
+              var f = Math.max(0, Math.min(1, k - i));
+              wordEls[i].style.color = mix(f);
+            }
+          });
+          tl.to(
+            st,
+            { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+            CONFIG.sweep.start,
+          );
+        }
+
+        /* underline draws as the sweep lands */
+        if (CONFIG.underline.enabled) {
+          var len = underPath.getTotalLength();
+          gsap.set(underPath, { strokeDasharray: len, strokeDashoffset: len });
+          var uAt = CONFIG.sweep.enabled ? CONFIG.sweep.end - 0.2 : 0.8;
+          tl.to(underPath, { strokeDashoffset: 0, duration: 0.7, ease: "power2.inOut" }, uAt);
+        }
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-t-wrap", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(wrap, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-t-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-title"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-title/hw-title.html b/registry/blocks/hw-title/hw-title.html
new file mode 100644
index 0000000000..9dd74677f5
--- /dev/null
+++ b/registry/blocks/hw-title/hw-title.html
@@ -0,0 +1,257 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #hw-t-root {
+        /* ---- hw tokens ---- */
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-ink-dark: #26241f;
+        --hw-accent-warm: #ffb020;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or a board */
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-t-wrap {
+        position: absolute;
+        pointer-events: none;
+      }
+      #hw-t-line {
+        font-weight: 700;
+        line-height: 1.1;
+        white-space: nowrap;
+        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
+      }
+      #hw-t-line .w {
+        display: inline;
+      }
+      #hw-t-under {
+        overflow: visible;
+        display: block;
+      }
+      #hw-t-under path {
+        fill: none;
+        stroke: var(--hw-accent-warm);
+        stroke-width: 7;
+        stroke-linecap: round;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="hw-t-root"
+      data-composition-id="hw-title"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-t-wrap">
+        <div id="hw-t-line"></div>
+        <svg id="hw-t-under" width="10" height="34"><path id="hw-t-under-path"></path></svg>
+      </div>
+      <div
+        id="hw-t-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Handwritten title with the highlight-sweep scalar (the shared
+           mk-callout-highlight mechanic) + squiggle underline + the boil.
+           Demonstrates the dispatcher composing sweep + boil on one
+           timeline (learning: one onUpdate — everything through hwOnUpdate). */
+        var CONFIG = {
+          text: "shine like the star you are",
+          fontSize: 120,
+          scheme: "chalk", // "chalk" (white, over footage) | "ink" (dark, boards)
+          sweep: { enabled: true, start: 0.8, end: 3.2 },
+          underline: { enabled: true, wobble: 6 },
+          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },
+          seed: 8,
+          x: null, // null = centered
+          y: null,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        /* hw family runtime */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        var FULL = CONFIG.scheme === "ink" ? "#26241f" : "#f4f2ec";
+        var FAINT = CONFIG.scheme === "ink" ? "rgba(38,36,31,0.3)" : "rgba(244,242,236,0.32)";
+
+        var wrap = document.getElementById("hw-t-wrap");
+        var line = document.getElementById("hw-t-line");
+        line.style.fontSize = CONFIG.fontSize + "px";
+
+        /* word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) line.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.className = "w";
+          span.textContent = w;
+          span.style.color = CONFIG.sweep.enabled ? FAINT : FULL;
+          line.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* measure + position; build squiggle underline to match width */
+        var rect = line.getBoundingClientRect();
+        wrap.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        wrap.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + "px";
+
+        var underPath = document.getElementById("hw-t-under-path");
+        if (CONFIG.underline.enabled) {
+          var uw = Math.round(rect.width);
+          var svg = document.getElementById("hw-t-under");
+          svg.setAttribute("width", uw);
+          svg.setAttribute("viewBox", "0 0 " + uw + " 34");
+          var segs = Math.max(6, Math.round(uw / 90));
+          var d = "M 2 " + (16 + window.hwHash(0, CONFIG.seed) * 4).toFixed(1);
+          for (var i = 1; i <= segs; i++) {
+            var x = (uw / segs) * i;
+            var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;
+            var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;
+            var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);
+            d +=
+              " Q " +
+              cxp.toFixed(1) +
+              " " +
+              cyp.toFixed(1) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              y.toFixed(1);
+          }
+          underPath.setAttribute("d", d);
+        } else {
+          document.getElementById("hw-t-under").style.display = "none";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(wrap, { opacity: 0 });
+          tl.to(wrap, { opacity: 1, duration: IN, ease: "power2.out" }, 0.1);
+        }
+
+        /* the sweep scalar — registered through the dispatcher so it
+           coexists with the boil on the same timeline */
+        if (CONFIG.sweep.enabled) {
+          var mix = gsap.utils.interpolate(FAINT, FULL);
+          var st = { p: 0 };
+          window.hwOnUpdate(tl, function () {
+            var k = st.p * wordEls.length;
+            for (var i = 0; i < wordEls.length; i++) {
+              var f = Math.max(0, Math.min(1, k - i));
+              wordEls[i].style.color = mix(f);
+            }
+          });
+          tl.to(
+            st,
+            { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+            CONFIG.sweep.start,
+          );
+        }
+
+        /* underline draws as the sweep lands */
+        if (CONFIG.underline.enabled) {
+          var len = underPath.getTotalLength();
+          gsap.set(underPath, { strokeDasharray: len, strokeDashoffset: len });
+          var uAt = CONFIG.sweep.enabled ? CONFIG.sweep.end - 0.2 : 0.8;
+          tl.to(underPath, { strokeDashoffset: 0, duration: 0.7, ease: "power2.inOut" }, uAt);
+        }
+
+        if (CONFIG.boil.enabled) {
+          window.hwBoil(tl, "#hw-t-wrap", {
+            amp: CONFIG.boil.amp,
+            rot: CONFIG.boil.rot,
+            frameDrop: CONFIG.boil.frameDrop,
+            seed: CONFIG.seed,
+          });
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(wrap, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set("#hw-t-root", { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["hw-title"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/hw-title/registry-item.json b/registry/blocks/hw-title/registry-item.json
new file mode 100644
index 0000000000..147987c725
--- /dev/null
+++ b/registry/blocks/hw-title/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-title",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["handwritten", "typography", "title-card", "overlay"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "files": [
+    {
+      "path": "hw-title.html",
+      "target": "compositions/hw-title.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/mk-background/mk-background.html b/registry/blocks/mk-background/mk-background.html
new file mode 100644
index 0000000000..82e7759adb
--- /dev/null
+++ b/registry/blocks/mk-background/mk-background.html
@@ -0,0 +1,232 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-bg-root {
+        /* ---- mk tokens: override these in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-stage: #f5f5f7;
+        --mk-base: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-stage-dark: #000000;
+        --mk-base-dark: #0a0a0c;
+        --mk-blob-1-dark: #7d5cff;
+        --mk-blob-2-dark: #2d1b69;
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--mk-stage);
+      }
+      #mk-bg-root.mk-dark {
+        background: var(--mk-stage-dark);
+      }
+      /* The "Bar" — an animatable rounded-rect mask. Full-bleed by default,
+         animatable down to a floating card over the stage. */
+      #mk-bg-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        border-radius: 0;
+        background: var(--mk-base);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-dark #mk-bg-card {
+        background: var(--mk-base-dark);
+      }
+      /* Soft radial blobs — the procedural "mesh gradient". Two oversized
+         radial gradients with a long falloff, drifting slowly. */
+      .mk-bg-blob {
+        position: absolute;
+        border-radius: 50%;
+        will-change: transform;
+      }
+      #mk-bg-blob1 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-1) 0%,
+          rgba(255, 255, 255, 0) 72%
+        );
+      }
+      #mk-bg-blob2 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-2) 0%,
+          rgba(255, 255, 255, 0) 72%
+        );
+      }
+      .mk-dark #mk-bg-blob1 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-1-dark) 0%,
+          rgba(0, 0, 0, 0) 72%
+        );
+      }
+      .mk-dark #mk-bg-blob2 {
+        background: radial-gradient(
+          circle closest-side,
+          var(--mk-blob-2-dark) 0%,
+          rgba(0, 0, 0, 0) 72%
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-bg-root"
+      data-composition-id="mk-background"
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-bg-card">
+        <div id="mk-bg-blob1" class="mk-bg-blob" data-layout-allow-overflow></div>
+        <div id="mk-bg-blob2" class="mk-bg-blob" data-layout-allow-overflow></div>
+      </div>
+      <div
+        id="mk-bg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          animationIn: true, // fade/settle entrance
+          animationOut: true, // fade exit
+          drift: true, // ambient blob motion
+          // Soft BG blobs: center as fraction of canvas, radius in px
+          blob1: { x: 0.28, y: 0.32, r: 950, opacity: 0.85 },
+          blob2: { x: 0.74, y: 0.66, r: 1100, opacity: 0.8 },
+          // Bar mask (rounded-rect card). demo:true plays full-bleed -> card -> full-bleed
+          bar: {
+            demo: true, // full-bleed -> rounded card -> full-bleed showcase
+            x: 240,
+            y: 140,
+            width: 1440,
+            height: 800,
+            roundness: 40,
+          },
+          // Content opacity + frost only matter with footage beneath the block
+          contentOpacity: 1,
+          frostBlur: 0, // px; e.g. 24 for the frosted-card look over footage
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 10;
+
+        var root = document.getElementById("mk-bg-root");
+        var card = document.getElementById("mk-bg-card");
+        var blob1 = document.getElementById("mk-bg-blob1");
+        var blob2 = document.getElementById("mk-bg-blob2");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+
+        function placeBlob(el, b) {
+          var d = b.r * 2;
+          el.style.width = d + "px";
+          el.style.height = d + "px";
+          el.style.left = b.x * W - b.r + "px";
+          el.style.top = b.y * H - b.r + "px";
+          el.style.opacity = String(b.opacity);
+        }
+        placeBlob(blob1, CONFIG.blob1);
+        placeBlob(blob2, CONFIG.blob2);
+
+        card.style.opacity = String(CONFIG.contentOpacity);
+        if (CONFIG.frostBlur > 0) {
+          card.style.backdropFilter = "blur(" + CONFIG.frostBlur + "px) saturate(1.4)";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance — fade + blobs settle (power3, no bounce) */
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: 0.7, ease: "power2.out" }, 0);
+          tl.from([blob1, blob2], { scale: 1.14, duration: 1.2, ease: "power3.out" }, 0);
+        }
+
+        /* ambient drift — slow sine yoyo, seek-safe timeline tweens */
+        if (CONFIG.drift) {
+          tl.to(
+            blob1,
+            { x: 70, y: 42, duration: 2.35, ease: "sine.inOut", yoyo: true, repeat: 3 },
+            0.3,
+          );
+          tl.to(
+            blob2,
+            { x: -84, y: -36, duration: 2.35, ease: "sine.inOut", yoyo: true, repeat: 3 },
+            0.3,
+          );
+        }
+
+        /* bar-mask demo: full-bleed -> rounded card over the stage -> full-bleed */
+        if (CONFIG.bar.demo) {
+          tl.to(
+            card,
+            {
+              top: CONFIG.bar.y,
+              left: CONFIG.bar.x,
+              width: CONFIG.bar.width,
+              height: CONFIG.bar.height,
+              borderRadius: CONFIG.bar.roundness,
+              duration: 1.1,
+              ease: "power3.inOut",
+            },
+            3.8,
+          );
+          tl.to(
+            card,
+            {
+              top: 0,
+              left: 0,
+              width: W,
+              height: H,
+              borderRadius: 0,
+              duration: 1.0,
+              ease: "power3.inOut",
+            },
+            7.6,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: 0.4, ease: "power2.in" }, DUR - 0.45);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-background"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-background/registry-item.json b/registry/blocks/mk-background/registry-item.json
new file mode 100644
index 0000000000..facdcd67b7
--- /dev/null
+++ b/registry/blocks/mk-background/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-background",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["background", "gradient", "minimal", "professional", "presentation"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 10,
+  "files": [
+    {
+      "path": "mk-background.html",
+      "target": "compositions/mk-background.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/mk-callout-highlight/mk-callout-highlight.html b/registry/blocks/mk-callout-highlight/mk-callout-highlight.html
new file mode 100644
index 0000000000..f1176a4629
--- /dev/null
+++ b/registry/blocks/mk-callout-highlight/mk-callout-highlight.html
@@ -0,0 +1,156 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ch-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        /* faint = transient pre-sweep tier (tweens up to full ink) — distinct from the family --mk-ink-dim */
+        --mk-ink-faint: #bcbcc2;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-faint-dark: rgba(245, 245, 247, 0.32);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-ch-box {
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 500;
+        letter-spacing: -0.015em;
+      }
+      .mk-ch-word {
+        display: inline;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ch-root"
+      data-composition-id="mk-callout-highlight"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-ch-box" data-layout-allow-occlusion></div>
+      <div
+        id="mk-ch-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           The mechanic: one scalar (highlight progress 0..1) sweeps word-by-word
+           emphasis across the sentence — a "highlight amount"
+           slider. Tween the scalar over the speaker's sentence to follow speech. */
+        var CONFIG = {
+          scheme: "light", // "light" (ink on light bg) | "dark" (white on footage)
+          text: "Functionality was our goal from the very beginning",
+          fontSize: 60,
+          lineHeight: 1.3,
+          maxWidth: 700, // px; sentence wraps inside this
+          x: 1030, // box left edge; null = centered horizontally
+          y: null, // box top edge; null = centered vertically
+          align: "left",
+          sweep: { start: 1.2, end: 6.2 }, // block-local seconds, linear
+          animationIn: true, // fade/rise entrance before the sweep
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        var root = document.getElementById("mk-ch-root");
+        var box = document.getElementById("mk-ch-box");
+
+        var FULL = CONFIG.scheme === "dark" ? "#f5f5f7" : "#1d1d1f";
+        var FAINT = CONFIG.scheme === "dark" ? "rgba(245,245,247,0.32)" : "#bcbcc2";
+
+        box.style.fontSize = CONFIG.fontSize + "px";
+        box.style.lineHeight = String(CONFIG.lineHeight);
+        box.style.maxWidth = CONFIG.maxWidth + "px";
+        box.style.textAlign = CONFIG.align;
+
+        /* build word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) box.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.id = "mk-ch-w-" + i;
+          span.className = "mk-ch-word";
+          span.textContent = w;
+          span.style.color = FAINT;
+          box.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* position (measure after building) */
+        var rect = box.getBoundingClientRect();
+        box.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        box.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        /* state proxy: GSAP animates st.p, render derives every word color from it */
+        var st = { p: 0 };
+        var mix = gsap.utils.interpolate(FAINT, FULL);
+        function render() {
+          var k = st.p * wordEls.length;
+          for (var i = 0; i < wordEls.length; i++) {
+            var f = Math.max(0, Math.min(1, k - i));
+            wordEls[i].style.color = mix(f);
+          }
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(box, { opacity: 0, y: 24 });
+          tl.to(box, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
+        }
+
+        /* the highlight sweep — one scalar, linear so it tracks speech evenly.
+           To follow a real voiceover, replace with several tweens between
+           per-phrase progress values (keyframes on the slider). */
+        tl.to(
+          st,
+          { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" },
+          CONFIG.sweep.start,
+        );
+
+        if (CONFIG.animationOut) {
+          tl.to(box, { opacity: 0, y: -16, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        tl.eventCallback("onUpdate", render);
+        render();
+
+        window.__timelines["mk-callout-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-callout-highlight/registry-item.json b/registry/blocks/mk-callout-highlight/registry-item.json
new file mode 100644
index 0000000000..9d4d2452a1
--- /dev/null
+++ b/registry/blocks/mk-callout-highlight/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-callout-highlight",
+  "type": "hyperframes:block",
+  "title": "Word-Sweep Highlight",
+  "description": "A sentence whose word-by-word emphasis is driven by a single scalar \u2014 tween it to sync the highlight with a voiceover",
+  "tags": ["typography", "karaoke", "captions", "minimal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "mk-callout-highlight.html",
+      "target": "compositions/mk-callout-highlight.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html b/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
new file mode 100644
index 0000000000..507b62bdfc
--- /dev/null
+++ b/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-cw-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-paper: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      /* the wall: paper sheet + tiled word rows + inversion layer, exits as one */
+      #mk-cw-wall {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-paper);
+        /* no overflow:hidden — the composition root clips; isolation keeps the
+           difference blend scoped to the wall's own tiles */
+        isolation: isolate;
+      }
+      .mk-cw-row {
+        position: absolute;
+        white-space: nowrap;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        line-height: 1;
+      }
+      .mk-cw-tile {
+        display: inline-block;
+      }
+      /* inversion sweep — a paper-colored rect in difference blend:
+         a paper-colored rect XORs the wall, flipping paper<->ink as it arrives */
+      #mk-cw-invert {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-paper);
+        mix-blend-mode: difference;
+      }
+      /* the outgoing frame shrinking to a rounded card mid-transition */
+      #mk-cw-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        border-radius: 0;
+        overflow: hidden;
+        background: linear-gradient(
+          120deg,
+          #fdfbfd 0%,
+          var(--mk-blob-1) 38%,
+          var(--mk-blob-2) 100%
+        );
+        box-shadow: var(--mk-shadow);
+        transform-origin: 50% 50%;
+      }
+      #mk-cw-card img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-cw-root"
+      data-composition-id="mk-clone-wall-transition"
+      data-start="0"
+      data-duration="2.4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-cw-wall" data-layout-allow-overflow>
+        <div id="mk-cw-tiles" data-layout-allow-overflow></div>
+        <div id="mk-cw-invert" data-layout-allow-overflow></div>
+      </div>
+      <div id="mk-cw-card" data-layout-allow-overflow></div>
+      <div
+        id="mk-cw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="2.4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           Overlay-transition model: place this block spanning the host's cut
+           point (e.g. start 0.9s before the cut). The wall fully covers the
+           frame from ~0.6s to ~1.9s local — hard-cut the content beneath
+           anywhere in that window. */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          word: "HyperFrames", // the cloned word
+          fontSize: 240, // px — the tiled text size
+          spreadX: 90, // px gap between tiles (tile spread X)
+          spreadY: 60, // px gap between rows (Spread Y)
+          brickOffset: true, // alternate rows offset by half a tile
+          card: {
+            enabled: true, // outgoing-frame card. In real use set src to a
+            src: null, //     still of the outgoing clip; null = family gradient
+          },
+          driftX: -46, // slow wall drift during the hold
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 2.4;
+
+        var root = document.getElementById("mk-cw-root");
+        var wall = document.getElementById("mk-cw-wall");
+        var tilesBox = document.getElementById("mk-cw-tiles");
+        var invert = document.getElementById("mk-cw-invert");
+        var card = document.getElementById("mk-cw-card");
+
+        /* build the tile wall — rows of repeated words, brick-offset */
+        var rowH = CONFIG.fontSize + CONFIG.spreadY;
+        var rows = Math.ceil(H / rowH) + 1;
+        /* rough tile width estimate to fill each row past both edges */
+        var tileW = CONFIG.word.length * CONFIG.fontSize * 0.58 + CONFIG.spreadX;
+        var perRow = Math.ceil(W / tileW) + 2;
+        for (var r = 0; r < rows; r++) {
+          var row = document.createElement("div");
+          row.id = "mk-cw-row-" + r;
+          row.className = "mk-cw-row";
+          /* rows intentionally run past the canvas and sit beneath the card */
+          row.setAttribute("data-layout-allow-overflow", "");
+          row.setAttribute("data-layout-allow-occlusion", "");
+          row.style.fontSize = CONFIG.fontSize + "px";
+          row.style.top = r * rowH - CONFIG.fontSize * 0.35 + "px";
+          var offset = CONFIG.brickOffset && r % 2 === 1 ? -Math.round(tileW / 2) : 0;
+          row.style.left = offset - tileW + "px";
+          for (var c = 0; c < perRow + 1; c++) {
+            var tile = document.createElement("span");
+            tile.className = "mk-cw-tile";
+            tile.textContent = CONFIG.word;
+            tile.style.marginRight = CONFIG.spreadX + "px";
+            row.appendChild(tile);
+          }
+          tilesBox.appendChild(row);
+        }
+
+        if (CONFIG.card.enabled && CONFIG.card.src) {
+          var img = document.createElement("img");
+          img.src = CONFIG.card.src;
+          card.appendChild(img);
+        }
+        if (!CONFIG.card.enabled) card.style.display = "none";
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* The wall sits in place from t=0, fully hidden beneath the
+           full-bleed card — the card's shrink IS the wall's reveal. */
+
+        /* 0.2–0.95  outgoing frame shrinks to a rounded card on the wall */
+        if (CONFIG.card.enabled) {
+          tl.to(
+            card,
+            {
+              top: 330,
+              left: 640,
+              width: 640,
+              height: 420,
+              borderRadius: 40,
+              duration: 0.75,
+              ease: "power3.inOut",
+            },
+            0.2,
+          );
+          /* 1.35–1.75  card is put away */
+          tl.to(card, { scale: 0.6, opacity: 0, duration: 0.4, ease: "power2.in" }, 1.35);
+        }
+
+        /* slow drift keeps the wall alive during the hold */
+        tl.to(tilesBox, { x: CONFIG.driftX, duration: 1.8, ease: "sine.inOut" }, 0.3);
+
+        /* 0.85–1.5  inversion sweeps in and STAYS — wall flips ink<->paper */
+        gsap.set(invert, { x: -W });
+        tl.to(invert, { x: 0, duration: 0.65, ease: "power3.inOut" }, 0.85);
+
+        /* 1.9–2.35  the inverted wall fades off, revealing the cut beneath */
+        tl.to(wall, { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.9);
+
+        /* hard kills — wall and card die the moment their fades complete */
+        if (CONFIG.card.enabled) tl.set(card, { visibility: "hidden" }, 1.76);
+        tl.set(root, { visibility: "hidden" }, 2.36);
+
+        window.__timelines["mk-clone-wall-transition"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-clone-wall-transition/registry-item.json b/registry/blocks/mk-clone-wall-transition/registry-item.json
new file mode 100644
index 0000000000..b72a1df882
--- /dev/null
+++ b/registry/blocks/mk-clone-wall-transition/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-clone-wall-transition",
+  "type": "hyperframes:block",
+  "title": "Text Clone Wall Transition",
+  "description": "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears \u2014 hard-cut the content beneath while covered",
+  "tags": ["transition", "typography", "wipe"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 2.4,
+  "files": [
+    {
+      "path": "mk-clone-wall-transition.html",
+      "target": "compositions/mk-clone-wall-transition.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/mk-line-graph/mk-line-graph.html b/registry/blocks/mk-line-graph/mk-line-graph.html
new file mode 100644
index 0000000000..6ff9487b3b
--- /dev/null
+++ b/registry/blocks/mk-line-graph/mk-line-graph.html
@@ -0,0 +1,292 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-lg-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-paper: #ffffff;
+        --mk-blob-2: #45d6c8;
+        --mk-axis: rgba(29, 29, 31, 0.22);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+        font-family: var(--mk-font);
+      }
+      #mk-lg-svg {
+        position: absolute;
+        inset: 0;
+      }
+      .mk-lg-line {
+        fill: none;
+        stroke-width: 5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .mk-lg-dot {
+        stroke-width: 4;
+        fill: var(--mk-paper);
+      }
+      .mk-lg-axis {
+        stroke: var(--mk-axis);
+        stroke-width: 2;
+      }
+      .mk-lg-value {
+        position: absolute;
+        font-weight: 600;
+        font-size: 30px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+        /* Horizontal centring only. The label's vertical offset is baked into
+           `top` instead of a CSS translate, because the entrance tween animates
+           `y` and GSAP rewrites this transform, dropping any vertical shift. */
+        transform: translate(-50%, 0);
+        line-height: 38px;
+        white-space: nowrap;
+      }
+      .mk-lg-xlabel {
+        position: absolute;
+        font-weight: 400;
+        font-size: 26px;
+        color: var(--mk-ink-dim);
+        transform: translateX(-50%);
+        white-space: nowrap;
+      }
+      .mk-lg-legend {
+        position: absolute;
+        display: flex;
+        gap: 40px;
+      }
+      .mk-lg-legend-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-weight: 500;
+        font-size: 30px;
+        color: var(--mk-ink-dim);
+      }
+      .mk-lg-legend-dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-lg-root"
+      data-composition-id="mk-line-graph"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="mk-lg-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="mk-lg-labels"></div>
+      <div
+        id="mk-lg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A minimal presentation line graph: 1–2 series draw on, dots pop, value labels
+           ride their points, axes dimmer than labels (clear hierarchy). */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          series: [
+            { name: "Renders", color: null /* accent */, values: [12, 26, 22, 38, 44, 58] },
+            { name: "Projects", color: null /* blob-2 */, values: [8, 14, 18, 16, 28, 36] },
+          ],
+          xLabels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+          showValues: true,
+          area: { x: 160, y: 240, w: 980, h: 500 }, // plot rectangle
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        var NS = "http://www.w3.org/2000/svg";
+        var root = document.getElementById("mk-lg-root");
+        var svg = document.getElementById("mk-lg-svg");
+        var labels = document.getElementById("mk-lg-labels");
+        var A = CONFIG.area;
+
+        var accent = getComputedStyle(root).getPropertyValue("--mk-accent").trim();
+        var blob2 = getComputedStyle(root).getPropertyValue("--mk-blob-2").trim();
+        if (CONFIG.series[1] && !CONFIG.series[1].color) CONFIG.series[1].color = blob2;
+
+        /* scale: 0..max(all values)*1.15 into the plot rect */
+        var max = 0;
+        CONFIG.series.forEach(function (s) {
+          s.values.forEach(function (v) {
+            if (v > max) max = v;
+          });
+        });
+        max *= 1.15;
+        var n = CONFIG.series[0].values.length;
+        function px(i) {
+          return A.x + (i / (n - 1)) * A.w;
+        }
+        function py(v) {
+          return A.y + A.h - (v / max) * A.h;
+        }
+
+        /* baseline axis */
+        var axis = document.createElementNS(NS, "line");
+        axis.setAttribute("class", "mk-lg-axis");
+        axis.setAttribute("x1", A.x - 20);
+        axis.setAttribute("y1", A.y + A.h);
+        axis.setAttribute("x2", A.x + A.w + 20);
+        axis.setAttribute("y2", A.y + A.h);
+        axis.id = "mk-lg-axis";
+        svg.appendChild(axis);
+
+        /* series paths, dots, value labels */
+        var paths = [],
+          dots = [],
+          vals = [];
+        CONFIG.series.forEach(function (s, si) {
+          var color = s.color || accent;
+          var d = s.values
+            .map(function (v, i) {
+              return (i === 0 ? "M" : "L") + px(i) + " " + py(v);
+            })
+            .join(" ");
+          var path = document.createElementNS(NS, "path");
+          path.setAttribute("class", "mk-lg-line");
+          path.setAttribute("d", d);
+          path.setAttribute("stroke", color);
+          path.id = "mk-lg-path-" + si;
+          svg.appendChild(path);
+          paths.push(path);
+
+          s.values.forEach(function (v, i) {
+            var dot = document.createElementNS(NS, "circle");
+            dot.setAttribute("class", "mk-lg-dot");
+            dot.setAttribute("cx", px(i));
+            dot.setAttribute("cy", py(v));
+            dot.setAttribute("r", 9);
+            dot.setAttribute("stroke", color);
+            dot.id = "mk-lg-dot-" + si + "-" + i;
+            svg.appendChild(dot);
+            dots.push({ el: dot, si: si, i: i });
+
+            if (CONFIG.showValues) {
+              var val = document.createElement("div");
+              /* Series after the first label downward. With every series
+                 labelling upward the numbers collide wherever the lines run
+                 close together. GAP clears the dot radius plus line stroke. */
+              var below = si > 0;
+              var GAP = 22;
+              val.className = "mk-lg-value";
+              val.id = "mk-lg-val-" + si + "-" + i;
+              val.textContent = v;
+              val.style.left = px(i) + "px";
+              val.style.top = py(v) + (below ? GAP : -(GAP + 38)) + "px";
+              labels.appendChild(val);
+              vals.push({ el: val, si: si, i: i });
+            }
+          });
+        });
+
+        /* x labels + legend */
+        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {
+          var xl = document.createElement("div");
+          xl.className = "mk-lg-xlabel";
+          xl.id = "mk-lg-xl-" + i;
+          xl.textContent = t;
+          xl.style.left = px(i) + "px";
+          xl.style.top = A.y + A.h + 24 + "px";
+          labels.appendChild(xl);
+        });
+        var legend = document.createElement("div");
+        legend.className = "mk-lg-legend";
+        legend.id = "mk-lg-legend";
+        legend.style.left = A.x + "px";
+        legend.style.top = A.y + A.h + 90 + "px";
+        CONFIG.series.forEach(function (s) {
+          var item = document.createElement("div");
+          item.className = "mk-lg-legend-item";
+          var dot = document.createElement("span");
+          dot.className = "mk-lg-legend-dot";
+          dot.style.background = s.color || accent;
+          item.appendChild(dot);
+          item.appendChild(document.createTextNode(s.name));
+          legend.appendChild(item);
+        });
+        labels.appendChild(legend);
+
+        var tl = gsap.timeline({ paused: true });
+        var DRAW = 1.3;
+
+        /* entrance: axis + x labels settle first */
+        gsap.set([axis, legend], { opacity: 0 });
+        tl.to(axis, { opacity: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {
+          var xl = document.getElementById("mk-lg-xl-" + i);
+          gsap.set(xl, { opacity: 0, y: 10 });
+          tl.to(xl, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 0.25 + i * 0.05);
+        });
+
+        /* draw each series, dots + values riding the draw front */
+        CONFIG.series.forEach(function (s, si) {
+          var t0 = (CONFIG.animationIn ? 0.5 : 0) + si * 0.35;
+          var path = paths[si];
+          var len = path.getTotalLength();
+          gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(path, { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" }, t0);
+
+          s.values.forEach(function (v, i) {
+            var dot = document.getElementById("mk-lg-dot-" + si + "-" + i);
+            var td = t0 + (i / (n - 1)) * DRAW * 0.92;
+            gsap.set(dot, { scale: 0, transformOrigin: "50% 50%" });
+            tl.to(dot, { scale: 1, duration: 0.35, ease: "back.out(1.2)" }, td);
+            if (CONFIG.showValues) {
+              var val = document.getElementById("mk-lg-val-" + si + "-" + i);
+              gsap.set(val, { opacity: 0, y: 8 });
+              tl.to(val, { opacity: 1, y: 0, duration: 0.35, ease: "power2.out" }, td + 0.06);
+            }
+          });
+        });
+
+        tl.to(legend, { opacity: 1, duration: 0.5, ease: "power2.out" }, 2.3);
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-line-graph"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-line-graph/registry-item.json b/registry/blocks/mk-line-graph/registry-item.json
new file mode 100644
index 0000000000..fa86a35915
--- /dev/null
+++ b/registry/blocks/mk-line-graph/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-line-graph",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["data-viz", "chart", "graph", "minimal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 7,
+  "files": [
+    {
+      "path": "mk-line-graph.html",
+      "target": "compositions/mk-line-graph.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html b/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
new file mode 100644
index 0000000000..1d3292defe
--- /dev/null
+++ b/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-pg-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink-dim: #6e6e73;
+        --mk-paper: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-accent-dark: #7d5cff;
+        --mk-blob-1-soft: #ffd3ec;
+        --mk-blob-2-soft: #d9fff8;
+        --mk-accent-dark-soft: #cabdff;
+        --mk-well-warm: #ffb86b;
+        --mk-well-warm-soft: #ffe3c2;
+        --mk-well-sky: #5cb8ff;
+        --mk-well-sky-soft: #cfe9ff;
+        --mk-well-rose: #ff8f8f;
+        --mk-well-rose-soft: #ffd6d6;
+        --mk-well-num: rgba(255, 255, 255, 0.9);
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* pair with mk-background beneath for the gradient backdrop */
+      }
+      .mk-pg-cell {
+        position: absolute;
+        border-radius: var(--mk-radius-card);
+        overflow: hidden;
+        background: var(--mk-paper);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-pg-media {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      /* empty drop-zone well: soft gradient + index numeral */
+      .mk-pg-well {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .mk-pg-well-num {
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 88px;
+        letter-spacing: -0.02em;
+        color: var(--mk-well-num);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-pg-root"
+      data-composition-id="mk-placeholder-grid"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-pg-grid"></div>
+      <div
+        id="mk-pg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          layout: "1+2", // "2up" | "3up" | "4up" | "3x2" | "1+2" (hero left + two stacked)
+          margin: 120, // outer margin, px
+          gap: 40, // px between cells
+          radius: 40, // cell corner radius (rounded-edge look)
+          // One entry per cell (in layout order). src: image path, or null for a
+          // styled drop-zone well. insideScale: media scale inside the mask —
+          // an "inside scale" convention (1 = cover-fit).
+          cells: [
+            { src: null, insideScale: 1 },
+            { src: null, insideScale: 1 },
+            { src: null, insideScale: 1 },
+          ],
+          kenBurns: true, // slow media settle inside the mask
+          stagger: 0.15, // "box, box, box" entrance
+          animationIn: true,
+          animationOut: true,
+        };
+
+        /* decorative fills for empty wells (cycled) */
+        var WELL_FILLS = [
+          "linear-gradient(135deg, var(--mk-blob-1) 0%, var(--mk-blob-1-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-blob-2) 0%, var(--mk-blob-2-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-accent-dark) 0%, var(--mk-accent-dark-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-warm) 0%, var(--mk-well-warm-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-sky) 0%, var(--mk-well-sky-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-rose) 0%, var(--mk-well-rose-soft) 100%)",
+        ];
+
+        var W = 1920,
+          H = 1080,
+          DUR = 8;
+
+        function rects(layout, m, g) {
+          var iw = W - 2 * m,
+            ih = H - 2 * m;
+          function grid(cols, rows) {
+            var cw = (iw - (cols - 1) * g) / cols,
+              ch = (ih - (rows - 1) * g) / rows,
+              out = [];
+            for (var r = 0; r < rows; r++)
+              for (var c = 0; c < cols; c++)
+                out.push({ x: m + c * (cw + g), y: m + r * (ch + g), w: cw, h: ch });
+            return out;
+          }
+          if (layout === "2up") return grid(2, 1);
+          if (layout === "3up") return grid(3, 1);
+          if (layout === "4up") return grid(2, 2);
+          if (layout === "3x2") return grid(3, 2);
+          /* "1+2": hero left (58%), two stacked right */
+          var w1 = Math.round((iw - g) * 0.58),
+            w2 = iw - g - w1,
+            h2 = (ih - g) / 2;
+          return [
+            { x: m, y: m, w: w1, h: ih },
+            { x: m + w1 + g, y: m, w: w2, h: h2 },
+            { x: m + w1 + g, y: m + h2 + g, w: w2, h: h2 },
+          ];
+        }
+
+        var root = document.getElementById("mk-pg-root");
+        var grid = document.getElementById("mk-pg-grid");
+        var R = rects(CONFIG.layout, CONFIG.margin, CONFIG.gap);
+
+        var cells = [],
+          medias = [];
+        R.forEach(function (r, i) {
+          var conf = CONFIG.cells[i] || {};
+          var cell = document.createElement("div");
+          cell.id = "mk-pg-cell-" + i;
+          cell.className = "mk-pg-cell";
+          cell.style.left = r.x + "px";
+          cell.style.top = r.y + "px";
+          cell.style.width = r.w + "px";
+          cell.style.height = r.h + "px";
+          cell.style.borderRadius = CONFIG.radius + "px";
+
+          var inner;
+          if (conf.src) {
+            inner = document.createElement("img");
+            inner.className = "mk-pg-media";
+            inner.src = conf.src;
+          } else {
+            inner = document.createElement("div");
+            inner.className = "mk-pg-well";
+            inner.style.background = WELL_FILLS[i % WELL_FILLS.length];
+            var num = document.createElement("span");
+            num.className = "mk-pg-well-num";
+            num.textContent = String(i + 1);
+            inner.appendChild(num);
+          }
+          inner.id = "mk-pg-inner-" + i;
+          inner.setAttribute("data-layout-allow-overflow", ""); // ken-burns scales past the mask by design
+          cell.appendChild(inner);
+          grid.appendChild(cell);
+          cells.push(cell);
+          medias.push(inner);
+
+          gsap.set(inner, { scale: conf.insideScale || 1 });
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        cells.forEach(function (cell, i) {
+          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
+
+          if (CONFIG.animationIn) {
+            gsap.set(cell, { opacity: 0, scale: 0.92, y: 28 });
+            tl.to(cell, { opacity: 1, scale: 1, y: 0, duration: 0.65, ease: "power3.out" }, t0);
+          }
+
+          if (CONFIG.kenBurns) {
+            var base = (CONFIG.cells[i] && CONFIG.cells[i].insideScale) || 1;
+            tl.fromTo(
+              medias[i],
+              { scale: base * 1.06 },
+              { scale: base, duration: DUR - t0 - 0.6, ease: "sine.out" },
+              t0,
+            );
+          }
+        });
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(grid, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-placeholder-grid"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-placeholder-grid/registry-item.json b/registry/blocks/mk-placeholder-grid/registry-item.json
new file mode 100644
index 0000000000..b9f2a48e6c
--- /dev/null
+++ b/registry/blocks/mk-placeholder-grid/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-placeholder-grid",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["placeholder", "media", "grid", "minimal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "mk-placeholder-grid.html",
+      "target": "compositions/mk-placeholder-grid.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/mk-progress-stat/mk-progress-stat.html b/registry/blocks/mk-progress-stat/mk-progress-stat.html
new file mode 100644
index 0000000000..a1c0852a7e
--- /dev/null
+++ b/registry/blocks/mk-progress-stat/mk-progress-stat.html
@@ -0,0 +1,185 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ps-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-dim-dark: #a1a1a6;
+        --mk-accent: #0071e3;
+        --mk-accent-dark: #7d5cff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-ps-group {
+        position: absolute;
+        font-family: var(--mk-font);
+      }
+      #mk-ps-num {
+        font-weight: 600;
+        font-size: 190px;
+        line-height: 1;
+        letter-spacing: -0.03em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      #mk-ps-label {
+        margin-top: 10px;
+        font-weight: 500;
+        font-size: 42px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink);
+      }
+      #mk-ps-track {
+        position: relative;
+        margin-top: 28px;
+        height: 6px;
+        border-radius: 3px;
+        background: rgba(29, 29, 31, 0.1);
+        overflow: hidden;
+      }
+      #mk-ps-fill {
+        position: absolute;
+        inset: 0;
+        border-radius: 3px;
+        background: var(--mk-accent);
+        transform-origin: left center;
+      }
+      #mk-ps-caption {
+        margin-top: 22px;
+        font-weight: 400;
+        font-size: 30px;
+        color: var(--mk-ink-dim);
+      }
+      .mk-dark #mk-ps-num,
+      .mk-dark #mk-ps-label {
+        color: var(--mk-ink-dark);
+      }
+      .mk-dark #mk-ps-caption {
+        color: var(--mk-ink-dim-dark);
+      }
+      .mk-dark #mk-ps-track {
+        background: rgba(245, 245, 247, 0.18);
+      }
+      .mk-dark #mk-ps-fill {
+        background: var(--mk-accent-dark);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ps-root"
+      data-composition-id="mk-progress-stat"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-ps-group">
+        <div id="mk-ps-num">0</div>
+        <div id="mk-ps-label"></div>
+        <div id="mk-ps-track"><div id="mk-ps-fill"></div></div>
+        <div id="mk-ps-caption"></div>
+      </div>
+      <div
+        id="mk-ps-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A "22 · Goals reached" progress card: big count-up
+           numeral, label, thin accent track filling to value/max, caption. */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          value: 22,
+          suffix: "", // e.g. "%", "K"
+          label: "Goals reached",
+          caption: "Great job, we are getting closer!",
+          max: 30, // track fills to value/max
+          trackWidth: 480, // px
+          x: 1300, // group left edge; null = centered
+          y: 250, // group top edge; null = centered
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        var root = document.getElementById("mk-ps-root");
+        var group = document.getElementById("mk-ps-group");
+        var num = document.getElementById("mk-ps-num");
+        var fill = document.getElementById("mk-ps-fill");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+        document.getElementById("mk-ps-label").textContent = CONFIG.label;
+        document.getElementById("mk-ps-caption").textContent = CONFIG.caption;
+        document.getElementById("mk-ps-track").style.width = CONFIG.trackWidth + "px";
+
+        /* position (measure after filling text) */
+        var rect = group.getBoundingClientRect();
+        group.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        group.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(group, { opacity: 0, y: 28 });
+          tl.to(group, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
+        }
+
+        /* count-up + track fill on the same ease (the data-viz recipe) */
+        var st = { v: 0 };
+        tl.to(
+          st,
+          {
+            v: CONFIG.value,
+            duration: 1.6,
+            ease: "power2.out",
+            onUpdate: function () {
+              num.textContent = Math.round(st.v) + CONFIG.suffix;
+            },
+          },
+          0.5,
+        );
+        gsap.set(fill, { scaleX: 0 });
+        tl.to(fill, { scaleX: CONFIG.value / CONFIG.max, duration: 1.6, ease: "power2.out" }, 0.5);
+
+        if (CONFIG.animationOut) {
+          tl.to(group, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-progress-stat"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-progress-stat/registry-item.json b/registry/blocks/mk-progress-stat/registry-item.json
new file mode 100644
index 0000000000..14117871d3
--- /dev/null
+++ b/registry/blocks/mk-progress-stat/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-progress-stat",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["data-viz", "stat", "minimal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 7,
+  "files": [
+    {
+      "path": "mk-progress-stat.html",
+      "target": "compositions/mk-progress-stat.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/mk-specs-list/mk-specs-list.html b/registry/blocks/mk-specs-list/mk-specs-list.html
new file mode 100644
index 0000000000..b0af58c46d
--- /dev/null
+++ b/registry/blocks/mk-specs-list/mk-specs-list.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-sl-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-dim-dark: #a1a1a6;
+        --mk-accent: #0071e3;
+        --mk-accent-dark: #7d5cff;
+        --mk-hairline: 2px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-sl-scrim {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 62%);
+        opacity: 0;
+      }
+      #mk-sl-col {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+      }
+      .mk-sl-row {
+        font-family: var(--mk-font);
+        line-height: 1;
+        opacity: 0;
+      }
+      .mk-sl-text {
+        display: flex;
+        align-items: baseline;
+        gap: 18px;
+        white-space: nowrap;
+      }
+      .mk-sl-label {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.015em;
+        color: var(--mk-ink);
+      }
+      .mk-sl-value {
+        font-weight: 400;
+        font-size: 40px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink-dim);
+      }
+      .mk-sl-line {
+        position: relative;
+        margin-top: 22px;
+        height: var(--mk-hairline);
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 2px;
+        overflow: hidden;
+      }
+      .mk-sl-line-fill {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-accent);
+        transform-origin: left center;
+      }
+      /* dark scheme: white rows for use over footage (overlay look) */
+      .mk-dark .mk-sl-label {
+        color: var(--mk-ink-dark);
+      }
+      .mk-dark .mk-sl-value {
+        color: var(--mk-ink-dim-dark);
+      }
+      .mk-dark .mk-sl-line {
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .mk-dark .mk-sl-line-fill {
+        background: var(--mk-accent-dark);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-sl-root"
+      data-composition-id="mk-specs-list"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-sl-scrim"></div>
+      <div id="mk-sl-col"></div>
+      <div
+        id="mk-sl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" (ink rows) | "dark" (white rows, for footage)
+          rows: [
+            { label: "Design", value: "Minimal, clean lines" },
+            { label: "Typography", value: "Inter SemiBold" },
+            { label: "Motion", value: "Restrained, no bounce" },
+            { label: "Color", value: "Stage + one accent" },
+            { label: "Shapes", value: "Capsules & rounded cards" },
+          ],
+          underline: true, // accent sweep under each row
+          lineWidth: 660, // px
+          scrim: 0, // 0–1 left-edge dark scrim for readability over footage
+          x: 160, // column left edge
+          rowGap: 44, // px between rows
+          stagger: 0.18, // s between row entrances
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        var root = document.getElementById("mk-sl-root");
+        var col = document.getElementById("mk-sl-col");
+        var scrim = document.getElementById("mk-sl-scrim");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+        scrim.style.opacity = String(CONFIG.scrim);
+
+        /* build rows */
+        CONFIG.rows.forEach(function (r, i) {
+          var row = document.createElement("div");
+          row.id = "mk-sl-row-" + i;
+          row.className = "mk-sl-row";
+          if (i > 0) row.style.marginTop = CONFIG.rowGap + "px";
+
+          var text = document.createElement("div");
+          text.className = "mk-sl-text";
+          var label = document.createElement("span");
+          label.className = "mk-sl-label";
+          label.textContent = r.label;
+          text.appendChild(label);
+          if (r.value) {
+            var value = document.createElement("span");
+            value.className = "mk-sl-value";
+            value.textContent = r.value;
+            text.appendChild(value);
+          }
+          row.appendChild(text);
+
+          if (CONFIG.underline) {
+            var line = document.createElement("div");
+            line.className = "mk-sl-line";
+            line.style.width = CONFIG.lineWidth + "px";
+            var fill = document.createElement("div");
+            fill.id = "mk-sl-fill-" + i;
+            fill.className = "mk-sl-line-fill";
+            line.appendChild(fill);
+            row.appendChild(line);
+          }
+          col.appendChild(row);
+        });
+
+        /* center the column vertically */
+        var colH =
+          CONFIG.rows.length * (46 + 22 + (CONFIG.underline ? 2 : 0)) +
+          (CONFIG.rows.length - 1) * CONFIG.rowGap;
+        col.style.left = CONFIG.x + "px";
+        col.style.top = Math.round((1080 - colH) / 2) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        CONFIG.rows.forEach(function (r, i) {
+          var row = document.getElementById("mk-sl-row-" + i);
+          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
+
+          if (CONFIG.animationIn) {
+            gsap.set(row, { opacity: 0, x: -36 });
+            tl.to(row, { opacity: 1, x: 0, duration: 0.7, ease: "power3.out" }, t0);
+          } else {
+            gsap.set(row, { opacity: 1 });
+          }
+
+          if (CONFIG.underline) {
+            var fill = document.getElementById("mk-sl-fill-" + i);
+            gsap.set(fill, { scaleX: 0 });
+            tl.to(fill, { scaleX: 1, duration: 0.8, ease: "power2.inOut" }, t0 + 0.15);
+          }
+        });
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(col, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+          tl.to(scrim, { opacity: 0, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-specs-list"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-specs-list/registry-item.json b/registry/blocks/mk-specs-list/registry-item.json
new file mode 100644
index 0000000000..30732b4c58
--- /dev/null
+++ b/registry/blocks/mk-specs-list/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-specs-list",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["data-viz", "list", "minimal", "professional"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "mk-specs-list.html",
+      "target": "compositions/mk-specs-list.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/yt-comment-card/registry-item.json b/registry/blocks/yt-comment-card/registry-item.json
new file mode 100644
index 0000000000..09a27b09c7
--- /dev/null
+++ b/registry/blocks/yt-comment-card/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-comment-card",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["social", "comments", "creator", "overlay"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "yt-comment-card.html",
+      "target": "compositions/yt-comment-card.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/yt-comment-card/yt-comment-card.html b/registry/blocks/yt-comment-card/yt-comment-card.html
new file mode 100644
index 0000000000..4c999d5621
--- /dev/null
+++ b/registry/blocks/yt-comment-card/yt-comment-card.html
@@ -0,0 +1,318 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-cc-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dim: #5a5a5f;
+        /* overlay-scheme text over footage — distinct from the --yt-ink board tokens */
+        --yt-text: #ffffff;
+        --yt-text-dim: rgba(255, 255, 255, 0.72);
+        --yt-red: #e62e2e;
+        --yt-cyan: #35c8d9;
+        --yt-scanline-alpha: 0.04;
+        --yt-scanline-gap: 3px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or a yt-lcd board */
+        font-family: var(--yt-font);
+      }
+      /* optional full-frame LCD pass while comments are up */
+      #yt-cc-scan {
+        position: absolute;
+        inset: 0;
+        display: none;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(0, 0, 0, var(--yt-scanline-alpha)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      #yt-cc-col {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+      }
+      .yt-cc-card {
+        display: flex;
+        gap: 22px;
+        align-items: flex-start;
+      }
+      .yt-cc-avatar {
+        flex: none;
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 26px;
+        color: #ffffff;
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+      }
+      .yt-cc-avatar img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .yt-cc-meta {
+        display: flex;
+        align-items: baseline;
+        gap: 14px;
+      }
+      .yt-cc-user {
+        font-weight: 700;
+        font-size: 27px;
+      }
+      .yt-cc-time {
+        font-weight: 400;
+        font-size: 23px;
+      }
+      .yt-cc-text {
+        margin-top: 8px;
+        font-weight: 500;
+        font-size: 34px;
+        line-height: 1.35;
+        letter-spacing: -0.01em;
+        max-width: 860px;
+      }
+      .yt-cc-text .ch {
+        opacity: 0;
+      }
+      .yt-cc-row {
+        margin-top: 12px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-weight: 600;
+        font-size: 22px;
+        opacity: 0;
+      }
+      .yt-cc-row svg {
+        width: 24px;
+        stroke-width: 2.4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+      .yt-cc-reply {
+        margin-left: 18px;
+        letter-spacing: 0.1em;
+      }
+      /* scheme: overlay (white over footage, w/ shadow) vs light (ink on boards) */
+      .yt-overlay .yt-cc-user,
+      .yt-overlay .yt-cc-text {
+        color: var(--yt-text);
+        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
+      }
+      .yt-overlay .yt-cc-time,
+      .yt-overlay .yt-cc-row {
+        color: var(--yt-text-dim);
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+      }
+      .yt-overlay .yt-cc-row svg {
+        stroke: var(--yt-text-dim);
+      }
+      .yt-light .yt-cc-user,
+      .yt-light .yt-cc-text {
+        color: var(--yt-ink);
+      }
+      .yt-light .yt-cc-time,
+      .yt-light .yt-cc-row {
+        color: var(--yt-ink-dim);
+      }
+      .yt-light .yt-cc-row svg {
+        stroke: var(--yt-ink-dim);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-cc-root"
+      data-composition-id="yt-comment-card"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-cc-scan"></div>
+      <div id="yt-cc-col"></div>
+      <div
+        id="yt-cc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           Social comments typing on over footage — creator-style
+           comment cards. avatar: image path, or null -> initials chip. */
+        var CONFIG = {
+          scheme: "overlay", // "overlay" (white over footage) | "light" (ink on boards)
+          comments: [
+            {
+              avatar: null,
+              initials: "PW",
+              avatarHue: 210, // initials-chip hue when no image
+              username: "@pixelwaves",
+              time: "2 days ago",
+              text: "Your videos are the best!",
+              likes: 47,
+            },
+            {
+              avatar: null,
+              initials: "FR",
+              avatarHue: 340,
+              username: "@framerate",
+              time: "1 day ago",
+              text: "That camera move at 0:12 though 🔥",
+              likes: 12,
+            },
+          ],
+          x: 140,
+          y: null, // null = vertically centered
+          typeCharDelay: 0.024, // s per character (capped so a comment types <= 2.2s)
+          scanlines: false, // full-frame LCD pass while comments are up
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-cc-root");
+        var col = document.getElementById("yt-cc-col");
+        root.classList.add(CONFIG.scheme === "light" ? "yt-light" : "yt-overlay");
+        if (CONFIG.scanlines) document.getElementById("yt-cc-scan").style.display = "block";
+
+        var THUMB =
+          '<svg viewBox="0 0 24 24"><path d="M7 11v9M7 11l3.2-6.4a2 2 0 0 1 3.6 1.2V9h4.6a2 2 0 0 1 2 2.4l-1.2 6a2 2 0 0 1-2 1.6H7M7 11H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h3"/></svg>';
+
+        /* build cards */
+        CONFIG.comments.forEach(function (c, i) {
+          var card = document.createElement("div");
+          card.className = "yt-cc-card";
+          card.id = "yt-cc-card-" + i;
+
+          var av = document.createElement("div");
+          av.className = "yt-cc-avatar";
+          av.id = "yt-cc-av-" + i;
+          if (c.avatar) {
+            var img = document.createElement("img");
+            img.src = c.avatar;
+            av.appendChild(img);
+          } else {
+            av.textContent = c.initials || "?";
+            av.style.background =
+              "linear-gradient(135deg, hsl(" +
+              (c.avatarHue || 210) +
+              ", 62%, 52%), hsl(" +
+              ((c.avatarHue || 210) + 40) +
+              ", 62%, 42%))";
+          }
+          card.appendChild(av);
+
+          var body = document.createElement("div");
+          var meta = document.createElement("div");
+          meta.className = "yt-cc-meta";
+          meta.id = "yt-cc-meta-" + i;
+          var user = document.createElement("span");
+          user.className = "yt-cc-user";
+          user.textContent = c.username;
+          var time = document.createElement("span");
+          time.className = "yt-cc-time";
+          time.textContent = c.time || "";
+          meta.appendChild(user);
+          meta.appendChild(time);
+          body.appendChild(meta);
+
+          var text = document.createElement("div");
+          text.className = "yt-cc-text";
+          text.id = "yt-cc-text-" + i;
+          Array.from(c.text).forEach(function (ch) {
+            var span = document.createElement("span");
+            span.className = "ch";
+            span.textContent = ch;
+            text.appendChild(span);
+          });
+          body.appendChild(text);
+
+          var row = document.createElement("div");
+          row.className = "yt-cc-row";
+          row.id = "yt-cc-row-" + i;
+          row.innerHTML =
+            THUMB + "<span>" + (c.likes || 0) + '</span><span class="yt-cc-reply">REPLY</span>';
+          body.appendChild(row);
+          card.appendChild(body);
+          col.appendChild(card);
+        });
+
+        /* position (measure after building) */
+        col.style.left = CONFIG.x + "px";
+        var rect = col.getBoundingClientRect();
+        col.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* comments enter sequentially: avatar pops, meta fades, text types, row fades */
+        var t = CONFIG.animationIn ? 0.3 : 0;
+        CONFIG.comments.forEach(function (c, i) {
+          var av = "#yt-cc-av-" + i,
+            meta = "#yt-cc-meta-" + i,
+            row = "#yt-cc-row-" + i;
+          var chars = document.querySelectorAll("#yt-cc-text-" + i + " .ch");
+          var delay = Math.min(CONFIG.typeCharDelay, 2.2 / Math.max(1, chars.length));
+
+          gsap.set(av, { opacity: 0, scale: 0.5 });
+          gsap.set(meta, { opacity: 0, y: 10 });
+          tl.to(av, { opacity: 1, scale: 1, duration: 0.45, ease: "back.out(1.6)" }, t);
+          tl.to(meta, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, t + 0.12);
+          t += 0.4;
+          tl.to(chars, { opacity: 1, duration: 0.02, stagger: delay, ease: "none" }, t);
+          t += chars.length * delay + 0.15;
+          tl.to(row, { opacity: 1, duration: 0.35, ease: "power2.out" }, t);
+          t += 0.5;
+        });
+
+        /* exit + hard kill (auto-scaled out) */
+        if (CONFIG.animationOut) {
+          tl.to(col, { opacity: 0, y: -18, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-comment-card"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/yt-lcd-background/registry-item.json b/registry/blocks/yt-lcd-background/registry-item.json
new file mode 100644
index 0000000000..5bf4d40988
--- /dev/null
+++ b/registry/blocks/yt-lcd-background/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-lcd-background",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["background", "texture", "creator"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 10,
+  "files": [
+    {
+      "path": "yt-lcd-background.html",
+      "target": "compositions/yt-lcd-background.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/yt-lcd-background/yt-lcd-background.html b/registry/blocks/yt-lcd-background/yt-lcd-background.html
new file mode 100644
index 0000000000..8c283bec17
--- /dev/null
+++ b/registry/blocks/yt-lcd-background/yt-lcd-background.html
@@ -0,0 +1,306 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-lcd-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-paper: #e9e9e6;
+        --yt-paper-dark: #1c1c1e;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dark: #e8e8e4;
+        --yt-cyan: #35c8d9;
+        --yt-prism-r: #ff2a4d;
+        --yt-prism-b: #2a7fff;
+        --yt-scanline-alpha: 0.05;
+        --yt-scanline-gap: 3px;
+        --yt-grid-size: 28px;
+        --yt-grid-alpha: 0.06;
+        --yt-grain-alpha: 0.08;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-paper);
+        font-family: var(--yt-font);
+      }
+      #yt-lcd-root.yt-dark {
+        background: var(--yt-paper-dark);
+      }
+      /* the LCD surface: scanlines + optional pixel grid + static grain */
+      #yt-lcd-scan {
+        position: absolute;
+        inset: -20px;
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(0, 0, 0, var(--yt-scanline-alpha)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      .yt-dark #yt-lcd-scan {
+        background: repeating-linear-gradient(
+          0deg,
+          rgba(255, 255, 255, calc(var(--yt-scanline-alpha) * 1.4)) 0 1px,
+          transparent 1px var(--yt-scanline-gap)
+        );
+      }
+      #yt-lcd-grid {
+        position: absolute;
+        inset: 0;
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      .yt-dark #yt-lcd-grid {
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      #yt-lcd-grain {
+        position: absolute;
+        inset: 0;
+        opacity: var(--yt-grain-alpha);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
+      }
+      /* the display text: prism copies behind the main fill, optional bow */
+      #yt-lcd-bow {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 26px;
+      }
+      .yt-lcd-line {
+        position: relative;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: -0.02em;
+        white-space: nowrap;
+      }
+      .yt-lcd-copy {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-lcd-copy.r {
+        color: var(--yt-prism-r);
+      }
+      .yt-lcd-copy.b {
+        color: var(--yt-prism-b);
+      }
+      .yt-lcd-main {
+        position: relative;
+      }
+      #yt-lcd-sub {
+        font-weight: 500;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-lcd-root"
+      data-composition-id="yt-lcd-background"
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-lcd-scan" data-layout-allow-overflow></div>
+      <div id="yt-lcd-grid"></div>
+      <div id="yt-lcd-grain"></div>
+      <div id="yt-lcd-bow"></div>
+      <div
+        id="yt-lcd-drv"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark" (light/dark toggle)
+          title: "yt-lcd",
+          subtitle: "background 01",
+          fontSize: 230,
+          subSize: 34,
+          color: null, // null = scheme ink (AA). Cyan "#35c8d9" is dark-scheme only: 1.66:1 on light paper fails AA
+          blur: 2.2, // resting text blur px (blur amount)
+          prism: { enabled: true, offset: 3 }, // chromatic fringe (chromatic fringe)
+          bow: { enabled: true, deg: 7 }, // perspective bow (safe CRT-bow variant)
+          grid: { enabled: true }, // pixel grid (pixel grid)
+          scanDrift: true, // slow scanline scroll for life
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 10;
+        /* the yt- family improvement: in/out durations auto-scale to block
+           length (animations adjust to the layer length) */
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-lcd-root");
+        var bow = document.getElementById("yt-lcd-bow");
+        var grid = document.getElementById("yt-lcd-grid");
+        var scan = document.getElementById("yt-lcd-scan");
+
+        if (CONFIG.scheme === "dark") root.classList.add("yt-dark");
+        if (!CONFIG.grid.enabled) grid.style.display = "none";
+
+        var mainColor =
+          CONFIG.color || (CONFIG.scheme === "dark" ? "var(--yt-ink-dark)" : "var(--yt-ink)");
+
+        /* build a line: prism copies behind + main fill */
+        function buildLine(text, size, idBase, prismOn) {
+          var line = document.createElement("div");
+          line.className = "yt-lcd-line";
+          line.style.fontSize = size + "px";
+          ["r", "b"].forEach(function (ch) {
+            if (!CONFIG.prism.enabled || !prismOn) return;
+            var c = document.createElement("div");
+            c.className = "yt-lcd-copy " + ch;
+            c.id = idBase + "-" + ch;
+            c.textContent = text;
+            line.appendChild(c);
+          });
+          var main = document.createElement("div");
+          main.className = "yt-lcd-main";
+          main.id = idBase + "-main";
+          main.textContent = text;
+          main.style.color = mainColor;
+          line.appendChild(main);
+          return line;
+        }
+
+        var titleLine = buildLine(CONFIG.title, CONFIG.fontSize, "yt-lcd-t", true);
+        bow.appendChild(titleLine);
+        if (CONFIG.subtitle) {
+          var sub = buildLine(
+            CONFIG.subtitle,
+            CONFIG.subSize,
+            "yt-lcd-s",
+            false,
+          ); /* fringe is title-only */
+          sub.id = "yt-lcd-sub";
+          bow.appendChild(sub);
+        }
+        if (CONFIG.bow.enabled) {
+          bow.style.transform = "perspective(950px) rotateX(" + CONFIG.bow.deg + "deg)";
+        }
+
+        var O = CONFIG.prism.offset;
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance: board fades, text focuses in from heavy blur while the
+           prism fringe settles from wide to resting offset */
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+          gsap.set(bow, { opacity: 0, filter: "blur(16px)" });
+          tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: "power2.out" }, IN * 0.4);
+          tl.to(
+            bow,
+            { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.2, ease: "power2.out" },
+            IN * 0.4,
+          );
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-lcd-copy.r", { x: -O * 4, opacity: 0.5 });
+            gsap.set(".yt-lcd-copy.b", { x: O * 4, opacity: 0.5 });
+            tl.to(
+              ".yt-lcd-copy.r",
+              { x: -O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
+              IN * 0.4,
+            );
+            tl.to(
+              ".yt-lcd-copy.b",
+              { x: O, opacity: 0.85, duration: IN * 2.2, ease: "power2.out" },
+              IN * 0.4,
+            );
+          }
+        } else {
+          gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-lcd-copy.r", { x: -O, opacity: 0.85 });
+            gsap.set(".yt-lcd-copy.b", { x: O, opacity: 0.85 });
+          }
+        }
+
+        /* ambient: slow scanline drift + a breath of prism wobble */
+        if (CONFIG.scanDrift) {
+          tl.to(
+            scan,
+            {
+              y: 14,
+              duration: 3.1,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: Math.max(1, Math.floor((DUR - 1) / 3.1) - 0),
+            },
+            0.5,
+          );
+        }
+        if (CONFIG.prism.enabled) {
+          tl.to(
+            ".yt-lcd-copy.r",
+            { x: -O - 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
+            2.0,
+          );
+          tl.to(
+            ".yt-lcd-copy.b",
+            { x: O + 1.2, duration: 2.4, ease: "sine.inOut", yoyo: true, repeat: 2 },
+            2.0,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-lcd-background"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/yt-logo-intro/registry-item.json b/registry/blocks/yt-logo-intro/registry-item.json
new file mode 100644
index 0000000000..9cf0eaa885
--- /dev/null
+++ b/registry/blocks/yt-logo-intro/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-logo-intro",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["logo", "intro", "creator"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "files": [
+    {
+      "path": "yt-logo-intro.html",
+      "target": "compositions/yt-logo-intro.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/yt-logo-intro/yt-logo-intro.html b/registry/blocks/yt-logo-intro/yt-logo-intro.html
new file mode 100644
index 0000000000..102fdac5b7
--- /dev/null
+++ b/registry/blocks/yt-logo-intro/yt-logo-intro.html
@@ -0,0 +1,251 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-li-root {
+        /* ---- yt tokens ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-paper: #e9e9e6;
+        --yt-paper-dark: #1c1c1e;
+        --yt-ink: #1d1d1f;
+        --yt-ink-dark: #e8e8e4;
+        --yt-red: #e62e2e;
+        --yt-line-alpha: 0.1;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-paper);
+        font-family: var(--yt-font);
+      }
+      #yt-li-root.yt-dark {
+        background: var(--yt-paper-dark);
+      }
+      #yt-li-lines {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-li-line {
+        position: absolute;
+        left: -40px;
+        right: -40px;
+        height: 2px;
+        background: rgba(0, 0, 0, var(--yt-line-alpha));
+      }
+      .yt-dark .yt-li-line {
+        background: rgba(255, 255, 255, var(--yt-line-alpha));
+      }
+      #yt-li-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 42px;
+      }
+      #yt-li-logo {
+        width: 220px;
+        height: 220px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--yt-ink);
+        color: #ffffff;
+        font-weight: 700;
+        font-size: 92px;
+        letter-spacing: -0.03em;
+        overflow: hidden;
+      }
+      .yt-dark #yt-li-logo {
+        background: var(--yt-ink-dark);
+        color: var(--yt-paper-dark);
+      }
+      #yt-li-logo img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .yt-li-shadow #yt-li-logo,
+      .yt-li-shadow #yt-li-text {
+        filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.22));
+      }
+      #yt-li-textrow {
+        display: flex;
+        align-items: center;
+        gap: 26px;
+        min-height: 96px;
+      }
+      #yt-li-text {
+        font-weight: 700;
+        font-size: 74px;
+        letter-spacing: -0.015em;
+        color: var(--yt-ink);
+        white-space: nowrap;
+      }
+      .yt-dark #yt-li-text {
+        color: var(--yt-ink-dark);
+      }
+      #yt-li-arrow {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 84px;
+        height: 64px;
+        border-radius: 16px;
+        background: var(--yt-red);
+        opacity: 0;
+      }
+      #yt-li-arrow svg {
+        width: 38px;
+        stroke: #ffffff;
+        stroke-width: 3.2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-li-root"
+      data-composition-id="yt-logo-intro"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-li-lines"></div>
+      <div id="yt-li-center">
+        <div id="yt-li-logo"></div>
+        <div id="yt-li-textrow">
+          <div id="yt-li-text"></div>
+          <div id="yt-li-arrow">
+            <svg viewBox="0 0 24 24"><path d="M4 12h15M13 5l7 7-7 7" /></svg>
+          </div>
+        </div>
+      </div>
+      <div
+        id="yt-li-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           A logo intro: logo drops in, a kicker line, then the title
+           with an accent-red arrow. Background lines with frequency +
+           distortion (seeded offsets — no randomness). */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          logoType: "text", // "text" | "image"
+          logoText: "YT",
+          logoSrc: null,
+          kicker: "LET'S DIVE IN",
+          title: "yt-logo-intro",
+          arrow: { enabled: true },
+          lines: { enabled: true, count: 12, distort: 10 },
+          dropShadow: true,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-li-root");
+        var lines = document.getElementById("yt-li-lines");
+        var logo = document.getElementById("yt-li-logo");
+        var text = document.getElementById("yt-li-text");
+        var arrow = document.getElementById("yt-li-arrow");
+
+        if (CONFIG.scheme === "dark") root.classList.add("yt-dark");
+        if (CONFIG.dropShadow) root.classList.add("yt-li-shadow");
+
+        /* background lines: even spacing + seeded sine distortion */
+        if (CONFIG.lines.enabled) {
+          var gap = 1080 / (CONFIG.lines.count + 1);
+          for (var i = 1; i <= CONFIG.lines.count; i++) {
+            var l = document.createElement("div");
+            l.className = "yt-li-line";
+            var wobble = Math.sin(i * 2.399) * CONFIG.lines.distort;
+            l.style.top = Math.round(i * gap + wobble) + "px";
+            l.style.transform = "rotate(" + (Math.sin(i * 1.7) * 0.35).toFixed(2) + "deg)";
+            lines.appendChild(l);
+          }
+        }
+
+        if (CONFIG.logoType === "image" && CONFIG.logoSrc) {
+          var img = document.createElement("img");
+          img.src = CONFIG.logoSrc;
+          logo.appendChild(img);
+        } else {
+          logo.textContent = CONFIG.logoText;
+        }
+        if (!CONFIG.arrow.enabled) arrow.style.display = "none";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+
+        /* logo pops */
+        gsap.set(logo, { opacity: 0, scale: 0.55, y: 24 });
+        tl.to(
+          logo,
+          { opacity: 1, scale: 1, y: 0, duration: 0.55, ease: "back.out(1.5)" },
+          IN * 0.6,
+        );
+
+        /* kicker -> swap -> title + arrow */
+        gsap.set(text, { opacity: 0, y: 14 });
+        tl.set(text, { textContent: CONFIG.kicker, letterSpacing: "0.22em", fontSize: "40px" }, 0);
+        tl.to(text, { opacity: 1, y: 0, duration: 0.45, ease: "power2.out" }, IN * 0.6 + 0.45);
+        tl.to(text, { opacity: 0, y: -12, duration: 0.3, ease: "power2.in" }, 2.3);
+        tl.set(
+          text,
+          { textContent: CONFIG.title, letterSpacing: "-0.015em", fontSize: "74px", y: 14 },
+          2.62,
+        );
+        tl.to(text, { opacity: 1, y: 0, duration: 0.5, ease: "power3.out" }, 2.66);
+        gsap.set(arrow, { scale: 0.5, x: -14 });
+        tl.to(arrow, { opacity: 1, scale: 1, x: 0, duration: 0.45, ease: "back.out(1.6)" }, 2.9);
+
+        /* ambient: lines breathe */
+        tl.to(lines, { y: 8, duration: 2.2, ease: "sine.inOut", yoyo: true, repeat: 1 }, 0.8);
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-logo-intro"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/yt-prism-title/registry-item.json b/registry/blocks/yt-prism-title/registry-item.json
new file mode 100644
index 0000000000..16c20a0a0c
--- /dev/null
+++ b/registry/blocks/yt-prism-title/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-prism-title",
+  "type": "hyperframes:block",
+  "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",
+  "tags": ["typography", "title-card", "creator"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 6,
+  "files": [
+    {
+      "path": "yt-prism-title.html",
+      "target": "compositions/yt-prism-title.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/yt-prism-title/yt-prism-title.html b/registry/blocks/yt-prism-title/yt-prism-title.html
new file mode 100644
index 0000000000..fd26b6193f
--- /dev/null
+++ b/registry/blocks/yt-prism-title/yt-prism-title.html
@@ -0,0 +1,204 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-pt-root {
+        /* ---- yt tokens: override in the host to re-skin the family ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-cyan: #35c8d9;
+        --yt-prism-r: #ff2a4d;
+        --yt-prism-b: #2a7fff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage, a yt-lcd board, anything */
+        font-family: var(--yt-font);
+      }
+      #yt-pt-bow {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #yt-pt-line {
+        position: relative;
+        font-weight: 700;
+        line-height: 1;
+        letter-spacing: -0.02em;
+        white-space: nowrap;
+      }
+      .yt-pt-copy {
+        position: absolute;
+        inset: 0;
+      }
+      .yt-pt-copy.r {
+        color: var(--yt-prism-r);
+      }
+      .yt-pt-copy.b {
+        color: var(--yt-prism-b);
+      }
+      #yt-pt-main {
+        position: relative;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-pt-root"
+      data-composition-id="yt-prism-title"
+      data-start="0"
+      data-duration="6"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-pt-bow"></div>
+      <div
+        id="yt-pt-drv"
+        class="clip"
+        data-start="0"
+        data-duration="6"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           The cyan hero title with the full treatment stack, on a
+           transparent root — drop it over footage or a yt-lcd board. */
+        var CONFIG = {
+          title: "yt-prism",
+          fontSize: 260,
+          color: "#35c8d9", // bright cyan, for dark footage/boards (1.66:1 on light paper fails AA); use a darker cyan e.g. "#0f7d8a" on light boards
+          blur: 2.5, // resting blur px
+          prism: { enabled: true, offset: 4 },
+          bow: { enabled: true, deg: 6 },
+          drift: true, // slow scale breath while held
+          x: null, // null = centered
+          y: null,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 6;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-pt-root");
+        var bow = document.getElementById("yt-pt-bow");
+
+        /* build: prism copies behind the main fill */
+        var line = document.createElement("div");
+        line.id = "yt-pt-line";
+        line.style.fontSize = CONFIG.fontSize + "px";
+        ["r", "b"].forEach(function (ch) {
+          if (!CONFIG.prism.enabled) return;
+          var c = document.createElement("div");
+          c.className = "yt-pt-copy " + ch;
+          c.textContent = CONFIG.title;
+          line.appendChild(c);
+        });
+        var main = document.createElement("div");
+        main.id = "yt-pt-main";
+        main.textContent = CONFIG.title;
+        main.style.color = CONFIG.color;
+        line.appendChild(main);
+        bow.appendChild(line);
+
+        if (CONFIG.bow.enabled) {
+          bow.style.transform = "perspective(950px) rotateX(" + CONFIG.bow.deg + "deg)";
+        }
+        if (CONFIG.x !== null || CONFIG.y !== null) {
+          bow.style.justifyContent = CONFIG.x === null ? "center" : "flex-start";
+          bow.style.alignItems = CONFIG.y === null ? "center" : "flex-start";
+          if (CONFIG.x !== null) line.style.marginLeft = CONFIG.x + "px";
+          if (CONFIG.y !== null) line.style.marginTop = CONFIG.y + "px";
+        }
+
+        var O = CONFIG.prism.offset;
+        var tl = gsap.timeline({ paused: true });
+
+        /* entrance: focus in from heavy blur, prism settles wide -> resting */
+        if (CONFIG.animationIn) {
+          gsap.set(bow, { opacity: 0, filter: "blur(18px)" });
+          tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: "power2.out" }, 0.1);
+          tl.to(
+            bow,
+            { filter: "blur(" + CONFIG.blur + "px)", duration: IN * 2.4, ease: "power2.out" },
+            0.1,
+          );
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-pt-copy.r", { x: -O * 4.5, opacity: 0.45 });
+            gsap.set(".yt-pt-copy.b", { x: O * 4.5, opacity: 0.45 });
+            tl.to(
+              ".yt-pt-copy.r",
+              { x: -O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
+              0.1,
+            );
+            tl.to(
+              ".yt-pt-copy.b",
+              { x: O, opacity: 0.85, duration: IN * 2.4, ease: "power2.out" },
+              0.1,
+            );
+          }
+        } else {
+          gsap.set(bow, { filter: "blur(" + CONFIG.blur + "px)" });
+          if (CONFIG.prism.enabled) {
+            gsap.set(".yt-pt-copy.r", { x: -O, opacity: 0.85 });
+            gsap.set(".yt-pt-copy.b", { x: O, opacity: 0.85 });
+          }
+        }
+
+        /* ambient: slow scale breath + prism wobble */
+        if (CONFIG.drift) {
+          tl.to(line, { scale: 1.035, duration: DUR - 1, ease: "sine.out" }, 0.4);
+        }
+        if (CONFIG.prism.enabled) {
+          tl.to(
+            ".yt-pt-copy.r",
+            { x: -O - 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
+            1.4,
+          );
+          tl.to(
+            ".yt-pt-copy.b",
+            { x: O + 1.4, duration: 1.9, ease: "sine.inOut", yoyo: true, repeat: 1 },
+            1.4,
+          );
+        }
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(
+            bow,
+            { opacity: 0, filter: "blur(12px)", duration: OUT, ease: "power2.in" },
+            DUR - OUT - 0.05,
+          );
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-prism-title"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/yt-vertical-fill/registry-item.json b/registry/blocks/yt-vertical-fill/registry-item.json
new file mode 100644
index 0000000000..93bc7cc716
--- /dev/null
+++ b/registry/blocks/yt-vertical-fill/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-vertical-fill",
+  "type": "hyperframes:block",
+  "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)",
+  "tags": ["placeholder", "vertical", "media"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "yt-vertical-fill.html",
+      "target": "compositions/yt-vertical-fill.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/yt-vertical-fill/yt-vertical-fill.html b/registry/blocks/yt-vertical-fill/yt-vertical-fill.html
new file mode 100644
index 0000000000..8f35e23de6
--- /dev/null
+++ b/registry/blocks/yt-vertical-fill/yt-vertical-fill.html
@@ -0,0 +1,228 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #yt-vf-root {
+        /* ---- yt tokens ---- */
+        --yt-font: "Inter", -apple-system, sans-serif;
+        --yt-grid-size: 28px;
+        --yt-grid-alpha: 0.05;
+        --yt-stage: #101012;
+        --yt-scrim: rgba(8, 8, 10, 0.28);
+        --yt-cyan: #35c8d9;
+        --yt-prism-b: #2a7fff;
+        --yt-violet: #7d5cff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: var(--yt-stage);
+        font-family: var(--yt-font);
+      }
+      .yt-vf-media {
+        position: absolute;
+        overflow: hidden;
+      }
+      .yt-vf-media img,
+      .yt-vf-media .yt-vf-fill {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      #yt-vf-bg {
+        inset: -60px;
+        filter: blur(42px) brightness(0.75);
+      }
+      .yt-vf-side {
+        top: 0;
+        bottom: 0;
+        width: 656px;
+      }
+      #yt-vf-scrim {
+        position: absolute;
+        inset: 0;
+        background: var(--yt-scrim);
+      }
+      #yt-vf-grid {
+        position: absolute;
+        inset: 0;
+        background:
+          repeating-linear-gradient(
+            0deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          ),
+          repeating-linear-gradient(
+            90deg,
+            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,
+            transparent 1px var(--yt-grid-size)
+          );
+      }
+      #yt-vf-fg {
+        top: 0;
+        bottom: 0;
+        left: 656px;
+        width: 608px;
+        box-shadow: 0 0 90px rgba(0, 0, 0, 0.55);
+      }
+      /* stand-in portrait when no media is configured (self-demo) */
+      .yt-vf-fill {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 120px;
+        color: rgba(255, 255, 255, 0.9);
+        background: linear-gradient(
+          160deg,
+          var(--yt-cyan) 0%,
+          var(--yt-prism-b) 50%,
+          var(--yt-violet) 100%
+        );
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="yt-vf-root"
+      data-composition-id="yt-vertical-fill"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="yt-vf-media" id="yt-vf-bg" data-layout-allow-overflow></div>
+      <div class="yt-vf-media yt-vf-side" id="yt-vf-side-l" style="left: 0"></div>
+      <div class="yt-vf-media yt-vf-side" id="yt-vf-side-r" style="right: 0"></div>
+      <div id="yt-vf-scrim"></div>
+      <div id="yt-vf-grid"></div>
+      <div class="yt-vf-media" id="yt-vf-fg"></div>
+      <div
+        id="yt-vf-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters ----
+           Vertical media filling a 16:9 frame — three fill modes:
+           mode "scale" (big blurred copy behind), "mirror" (flanking
+           mirrored copies), "copy" (flanking straight copies).
+           IMAGES ONLY inside this block: the runtime never seeks media
+           elements inside a sub-composition (renders black). For live
+           vertical FOOTAGE, keep the media element in the HOST root
+           positioned over the fg slot (left:656px width:608px) and feed
+           this block a representative still for the fill layers. */
+        var CONFIG = {
+          src: null, // portrait IMAGE path; null -> stand-in gradient (demo)
+          mode: "scale", // "scale" | "mirror" | "copy"
+          fgContrast: 1.06,
+          fgBrightness: 1.03,
+          fgSaturation: 1.08,
+          grid: { enabled: true },
+          kenBurns: true,
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        function clamp(v, lo, hi) {
+          return Math.min(hi, Math.max(lo, v));
+        }
+        var IN = clamp(DUR * 0.08, 0.3, 0.8);
+        var OUT = clamp(DUR * 0.06, 0.25, 0.6);
+
+        var root = document.getElementById("yt-vf-root");
+        var bg = document.getElementById("yt-vf-bg");
+        var sideL = document.getElementById("yt-vf-side-l");
+        var sideR = document.getElementById("yt-vf-side-r");
+        var fg = document.getElementById("yt-vf-fg");
+        var grid = document.getElementById("yt-vf-grid");
+
+        if (!CONFIG.grid.enabled) grid.style.display = "none";
+
+        function media(id) {
+          if (!CONFIG.src) {
+            var d = document.createElement("div");
+            d.className = "yt-vf-fill";
+            d.textContent = "9:16";
+            return d;
+          }
+          var img = document.createElement("img");
+          img.src = CONFIG.src;
+          img.id = id;
+          return img;
+        }
+
+        fg.appendChild(media("yt-vf-m-fg"));
+        fg.style.filter =
+          "contrast(" +
+          CONFIG.fgContrast +
+          ") brightness(" +
+          CONFIG.fgBrightness +
+          ") saturate(" +
+          CONFIG.fgSaturation +
+          ")";
+
+        if (CONFIG.mode === "scale") {
+          bg.appendChild(media("yt-vf-m-bg"));
+          sideL.style.display = "none";
+          sideR.style.display = "none";
+        } else {
+          bg.style.display = "none";
+          sideL.appendChild(media("yt-vf-m-l"));
+          sideR.appendChild(media("yt-vf-m-r"));
+          if (CONFIG.mode === "mirror") {
+            sideL.firstChild.style.transform = "scaleX(-1)";
+            sideR.firstChild.style.transform = "scaleX(-1)";
+          }
+          sideL.style.filter = "blur(6px) brightness(0.72)";
+          sideR.style.filter = "blur(6px) brightness(0.72)";
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          tl.from(root, { opacity: 0, duration: IN, ease: "power2.out" }, 0);
+          gsap.set(fg, { y: 34, opacity: 0 });
+          tl.to(fg, { y: 0, opacity: 1, duration: IN * 1.6, ease: "power3.out" }, IN * 0.5);
+        }
+        if (CONFIG.kenBurns) {
+          tl.fromTo(
+            fg.firstChild,
+            { scale: 1.05 },
+            { scale: 1, duration: DUR - 1, ease: "sine.out" },
+            0.4,
+          );
+        }
+
+        if (CONFIG.animationOut) {
+          tl.to(root, { opacity: 0, duration: OUT, ease: "power2.in" }, DUR - OUT - 0.05);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["yt-vertical-fill"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-arrow/assets/fonts/Caveat-700-latin.woff2 b/registry/components/hw-arrow/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/components/hw-arrow/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/components/hw-arrow/demo.html b/registry/components/hw-arrow/demo.html
new file mode 100644
index 0000000000..bbe1d99861
--- /dev/null
+++ b/registry/components/hw-arrow/demo.html
@@ -0,0 +1,221 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-arrow.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-arrow.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-arrow ------------------------------------------------------
+         Hand-wobbled draw-on arrow, boiling. Position the wrapper, pick a
+         curve preset, call the helpers. Requires the hw-boil helpers
+         (hwOnUpdate / hwHash / hwBoil) in the host script. */
+      .hw-arrow {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-arrow svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-arrow path {
+        fill: none;
+        stroke: var(--hw-arrow-color, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-arrow-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-arrow.hw-soft path {
+        filter: blur(0.6px);
+      }
+      /* self-preview scene */
+      #hw-ar-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #274060 0%, #123 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 80px;
+        color: rgba(244, 242, 236, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-arrow CSS, the markup pattern,
+         and the hwArrowPath / hwArrowOn / hwArrowOff helpers (plus the
+         hw-boil helpers) into your host. Then:
+
+           document.querySelector("#hw-my-arrow path")
+             .setAttribute("d", hwArrowPath(360, 160, "swoop", 3));
+           hwArrowOn(tl, "#hw-my-arrow", 2.0);
+           hwBoil(tl, "#hw-my-arrow", { frameDrop: 3, seed: 3 });
+           hwArrowOff(tl, "#hw-my-arrow", 8.0);
+    -->
+    <div
+      id="hw-ar-root"
+      data-composition-id="hw-arrow"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-ar-scene"><span>point at things</span></div>
+      <div
+        class="hw-arrow"
+        id="hw-ar-demo"
+        style="left: 560px; top: 320px; width: 380px; height: 180px"
+      >
+        <svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
+      </div>
+      <div
+        id="hw-ar-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-arrow helpers (copy these too) ----
+        // Wobbled arrow path in a w x h box, tail at left, head at right.
+        // curve: "straight" | "gentle" | "swoop"
+        window.hwArrowPath = function (w, h, curve, seed) {
+          seed = seed || 1;
+          var bend = curve === "swoop" ? 0.55 : curve === "gentle" ? 0.28 : 0.06;
+          function wob(v, n, range) {
+            return v + window.hwHash(n, seed) * range;
+          }
+          var x0 = wob(4, 1, 3),
+            y0 = wob(h * 0.72, 2, 4),
+            x1 = wob(w - 10, 3, 4),
+            y1 = wob(h * 0.3, 4, 4);
+          var cx1 = wob(w * 0.35, 5, 10),
+            cy1 = wob(h * (0.72 + bend * 0.5), 6, 8);
+          var cx2 = wob(w * 0.7, 7, 10),
+            cy2 = wob(h * (0.3 + bend), 8, 8);
+          var ang = Math.atan2(y1 - cy2, x1 - cx2);
+          function head(da, len) {
+            var a = ang + Math.PI + da;
+            return (
+              "M " +
+              x1.toFixed(1) +
+              " " +
+              y1.toFixed(1) +
+              " l " +
+              (Math.cos(a) * len).toFixed(1) +
+              " " +
+              (Math.sin(a) * len).toFixed(1)
+            );
+          }
+          return (
+            "M " +
+            x0.toFixed(1) +
+            " " +
+            y0.toFixed(1) +
+            " C " +
+            cx1.toFixed(1) +
+            " " +
+            cy1.toFixed(1) +
+            ", " +
+            cx2.toFixed(1) +
+            " " +
+            cy2.toFixed(1) +
+            ", " +
+            x1.toFixed(1) +
+            " " +
+            y1.toFixed(1) +
+            " " +
+            head(0.5, wob(34, 9, 6)) +
+            " " +
+            head(-0.5, wob(34, 10, 6))
+          );
+        };
+        window.hwArrowOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwArrowOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .getElementById("hw-ar-demo-path")
+          .setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
+        var tl = gsap.timeline({ paused: true });
+        window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
+        window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
+        window.hwArrowOff(tl, "#hw-ar-demo", 3.4);
+        tl.set("#hw-ar-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-arrow"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-arrow/hw-arrow.html b/registry/components/hw-arrow/hw-arrow.html
new file mode 100644
index 0000000000..242a24375c
--- /dev/null
+++ b/registry/components/hw-arrow/hw-arrow.html
@@ -0,0 +1,218 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-arrow ------------------------------------------------------
+         Hand-wobbled draw-on arrow, boiling. Position the wrapper, pick a
+         curve preset, call the helpers. Requires the hw-boil helpers
+         (hwOnUpdate / hwHash / hwBoil) in the host script. */
+      .hw-arrow {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-arrow svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-arrow path {
+        fill: none;
+        stroke: var(--hw-arrow-color, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-arrow-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-arrow.hw-soft path {
+        filter: blur(0.6px);
+      }
+      /* self-preview scene */
+      #hw-ar-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #274060 0%, #123 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 80px;
+        color: rgba(244, 242, 236, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-arrow CSS, the markup pattern,
+         and the hwArrowPath / hwArrowOn / hwArrowOff helpers (plus the
+         hw-boil helpers) into your host. Then:
+
+           document.querySelector("#hw-my-arrow path")
+             .setAttribute("d", hwArrowPath(360, 160, "swoop", 3));
+           hwArrowOn(tl, "#hw-my-arrow", 2.0);
+           hwBoil(tl, "#hw-my-arrow", { frameDrop: 3, seed: 3 });
+           hwArrowOff(tl, "#hw-my-arrow", 8.0);
+    -->
+    <div
+      id="hw-ar-root"
+      data-composition-id="hw-arrow"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-ar-scene"><span>point at things</span></div>
+      <div
+        class="hw-arrow"
+        id="hw-ar-demo"
+        style="left: 560px; top: 320px; width: 380px; height: 180px"
+      >
+        <svg viewBox="0 0 380 180"><path id="hw-ar-demo-path"></path></svg>
+      </div>
+      <div
+        id="hw-ar-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-arrow helpers (copy these too) ----
+        // Wobbled arrow path in a w x h box, tail at left, head at right.
+        // curve: "straight" | "gentle" | "swoop"
+        window.hwArrowPath = function (w, h, curve, seed) {
+          seed = seed || 1;
+          var bend = curve === "swoop" ? 0.55 : curve === "gentle" ? 0.28 : 0.06;
+          function wob(v, n, range) {
+            return v + window.hwHash(n, seed) * range;
+          }
+          var x0 = wob(4, 1, 3),
+            y0 = wob(h * 0.72, 2, 4),
+            x1 = wob(w - 10, 3, 4),
+            y1 = wob(h * 0.3, 4, 4);
+          var cx1 = wob(w * 0.35, 5, 10),
+            cy1 = wob(h * (0.72 + bend * 0.5), 6, 8);
+          var cx2 = wob(w * 0.7, 7, 10),
+            cy2 = wob(h * (0.3 + bend), 8, 8);
+          var ang = Math.atan2(y1 - cy2, x1 - cx2);
+          function head(da, len) {
+            var a = ang + Math.PI + da;
+            return (
+              "M " +
+              x1.toFixed(1) +
+              " " +
+              y1.toFixed(1) +
+              " l " +
+              (Math.cos(a) * len).toFixed(1) +
+              " " +
+              (Math.sin(a) * len).toFixed(1)
+            );
+          }
+          return (
+            "M " +
+            x0.toFixed(1) +
+            " " +
+            y0.toFixed(1) +
+            " C " +
+            cx1.toFixed(1) +
+            " " +
+            cy1.toFixed(1) +
+            ", " +
+            cx2.toFixed(1) +
+            " " +
+            cy2.toFixed(1) +
+            ", " +
+            x1.toFixed(1) +
+            " " +
+            y1.toFixed(1) +
+            " " +
+            head(0.5, wob(34, 9, 6)) +
+            " " +
+            head(-0.5, wob(34, 10, 6))
+          );
+        };
+        window.hwArrowOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwArrowOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .getElementById("hw-ar-demo-path")
+          .setAttribute("d", window.hwArrowPath(380, 180, "swoop", 7));
+        var tl = gsap.timeline({ paused: true });
+        window.hwArrowOn(tl, "#hw-ar-demo", 0.4);
+        window.hwBoil(tl, "#hw-ar-demo", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });
+        window.hwArrowOff(tl, "#hw-ar-demo", 3.4);
+        tl.set("#hw-ar-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-arrow"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-arrow/registry-item.json b/registry/components/hw-arrow/registry-item.json
new file mode 100644
index 0000000000..634624ecc7
--- /dev/null
+++ b/registry/components/hw-arrow/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-arrow",
+  "type": "hyperframes:component",
+  "title": "Hand-Drawn Arrow",
+  "description": "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen",
+  "tags": ["handwritten", "annotation", "arrow", "overlay"],
+  "files": [
+    {
+      "path": "hw-arrow.html",
+      "target": "compositions/components/hw-arrow.html",
+      "type": "hyperframes:snippet"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/components/hw-boil/assets/fonts/Caveat-700-latin.woff2 b/registry/components/hw-boil/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/components/hw-boil/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/components/hw-boil/demo.html b/registry/components/hw-boil/demo.html
new file mode 100644
index 0000000000..68f5b1ba0f
--- /dev/null
+++ b/registry/components/hw-boil/demo.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-boil.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-boil.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* Caveat is NOT auto-resolved by the renderer — bundle it. Asset
+         paths are ROOT-RELATIVE (the project root is the base URL for all
+         compositions; ../ traversal is a lint error). Registry installs
+         ship the woff2 as an asset file targeting assets/fonts/. */
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-boil -----------------------------------------------------
+         The hand-drawn "boil": jitter that re-poses only every N frames
+         (quake + frame-drop style). Pose is a pure function of quantized
+         timeline time through a seeded hash — fully seek-safe, renders
+         identically on every pass over the same frame.
+
+         RULES:
+         - hwBoil owns x/y/rotation of the boiled element. Entrance/exit
+           tweens go on a WRAPPER around it, never the boiled element.
+         - One timeline has ONE onUpdate — hwOnUpdate is the dispatcher
+           that lets the boil coexist with sweep scalars etc. Register
+           every onUpdate-style render through it. */
+      #hw-boil-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-accent: #6d6dff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-boil-root svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #hw-boil-root path {
+        fill: none;
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-b-arrow {
+        stroke: var(--hw-accent);
+        stroke-width: 7;
+      }
+      .hw-b-label {
+        position: absolute;
+        font-weight: 700;
+        font-size: 84px;
+        color: var(--hw-ink);
+        white-space: nowrap;
+      }
+      .hw-b-tag {
+        position: absolute;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 500;
+        font-size: 22px;
+        letter-spacing: 0.12em;
+        color: rgba(244, 242, 236, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the hwOnUpdate / hwHash / hwBoil /
+         hwWobbleEllipse helpers into your host script, then:
+
+           hwBoil(tl, "#hw-my-annotation", { amp: 1.6, rot: 0.5, frameDrop: 3, seed: 2 });
+
+         frameDrop 3-4 = classic boil; 1 = frantic; boil: off = don't call it. -->
+    <div
+      id="hw-boil-root"
+      data-composition-id="hw-boil"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg viewBox="0 0 1920 1080">
+        <g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
+        <g id="hw-b-arrow-g">
+          <path
+            id="hw-b-arrow"
+            d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
+          ></path>
+        </g>
+      </svg>
+      <div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
+      <div class="hw-b-tag" style="left: 350px; top: 782px">FRAME DROP 3</div>
+      <div class="hw-b-tag" style="left: 700px; top: 782px">FRAME DROP 1</div>
+      <div class="hw-b-tag" style="left: 1230px; top: 700px">TEXT, AMP 1.2</div>
+      <div
+        id="hw-b-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+
+        // Dispatcher: a GSAP timeline has ONE onUpdate. Register every
+        // per-frame render (boils, sweep scalars) through this instead of
+        // setting eventCallback directly, and they all coexist.
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+
+        // Seeded hash -> [-1, 1]. Pure function of n — no Math.random().
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+
+        // The boil. Owns x/y/rotation of its targets — put entrance tweens
+        // on a wrapper. frameDrop = re-pose every N frames (3-4 classic).
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // Seeded hand-wobbled ellipse path (smooth quadratic chain).
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- self-preview (not part of the snippet you copy) ----
+        var circle = document.getElementById("hw-b-circle");
+        circle.setAttribute("d", window.hwWobbleEllipse(460, 620, 190, 130, 4, 3.2));
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* draw-on entrances (strokeDashoffset — never x/y, the boil owns those) */
+        [circle, document.getElementById("hw-b-arrow")].forEach(function (p, i) {
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, 0.3 + i * 0.35);
+        });
+        gsap.set("#hw-b-word", { opacity: 0 });
+        tl.to("#hw-b-word", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.1);
+
+        /* three boils with different characters, one dispatcher */
+        window.hwBoil(tl, "#hw-b-circle-g", { amp: 2.2, rot: 0.4, frameDrop: 3, seed: 2 });
+        window.hwBoil(tl, "#hw-b-arrow-g", { amp: 2.6, rot: 0.7, frameDrop: 1, seed: 5 });
+        window.hwBoil(tl, "#hw-b-word", { amp: 1.2, rot: 0.35, frameDrop: 3, seed: 9 });
+
+        tl.set("#hw-boil-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-boil"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-boil/hw-boil.html b/registry/components/hw-boil/hw-boil.html
new file mode 100644
index 0000000000..19eda55d3a
--- /dev/null
+++ b/registry/components/hw-boil/hw-boil.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* Caveat is NOT auto-resolved by the renderer — bundle it. Asset
+         paths are ROOT-RELATIVE (the project root is the base URL for all
+         compositions; ../ traversal is a lint error). Registry installs
+         ship the woff2 as an asset file targeting assets/fonts/. */
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-boil -----------------------------------------------------
+         The hand-drawn "boil": jitter that re-poses only every N frames
+         (quake + frame-drop style). Pose is a pure function of quantized
+         timeline time through a seeded hash — fully seek-safe, renders
+         identically on every pass over the same frame.
+
+         RULES:
+         - hwBoil owns x/y/rotation of the boiled element. Entrance/exit
+           tweens go on a WRAPPER around it, never the boiled element.
+         - One timeline has ONE onUpdate — hwOnUpdate is the dispatcher
+           that lets the boil coexist with sweep scalars etc. Register
+           every onUpdate-style render through it. */
+      #hw-boil-root {
+        --hw-font-print: "Caveat", cursive;
+        --hw-font-script: "Caveat", cursive;
+        --hw-ink: #f4f2ec;
+        --hw-accent: #6d6dff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+      }
+      #hw-boil-root svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #hw-boil-root path {
+        fill: none;
+        stroke: var(--hw-ink);
+        stroke-width: 6;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      #hw-b-arrow {
+        stroke: var(--hw-accent);
+        stroke-width: 7;
+      }
+      .hw-b-label {
+        position: absolute;
+        font-weight: 700;
+        font-size: 84px;
+        color: var(--hw-ink);
+        white-space: nowrap;
+      }
+      .hw-b-tag {
+        position: absolute;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 500;
+        font-size: 22px;
+        letter-spacing: 0.12em;
+        color: rgba(244, 242, 236, 0.45);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the hwOnUpdate / hwHash / hwBoil /
+         hwWobbleEllipse helpers into your host script, then:
+
+           hwBoil(tl, "#hw-my-annotation", { amp: 1.6, rot: 0.5, frameDrop: 3, seed: 2 });
+
+         frameDrop 3-4 = classic boil; 1 = frantic; boil: off = don't call it. -->
+    <div
+      id="hw-boil-root"
+      data-composition-id="hw-boil"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg viewBox="0 0 1920 1080">
+        <g id="hw-b-circle-g"><path id="hw-b-circle"></path></g>
+        <g id="hw-b-arrow-g">
+          <path
+            id="hw-b-arrow"
+            d="M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58"
+          ></path>
+        </g>
+      </svg>
+      <div class="hw-b-label" id="hw-b-word" style="left: 1230px; top: 560px">the boil</div>
+      <div class="hw-b-tag" style="left: 350px; top: 782px">FRAME DROP 3</div>
+      <div class="hw-b-tag" style="left: 700px; top: 782px">FRAME DROP 1</div>
+      <div class="hw-b-tag" style="left: 1230px; top: 700px">TEXT, AMP 1.2</div>
+      <div
+        id="hw-b-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+
+        // Dispatcher: a GSAP timeline has ONE onUpdate. Register every
+        // per-frame render (boils, sweep scalars) through this instead of
+        // setting eventCallback directly, and they all coexist.
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+
+        // Seeded hash -> [-1, 1]. Pure function of n — no Math.random().
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+
+        // The boil. Owns x/y/rotation of its targets — put entrance tweens
+        // on a wrapper. frameDrop = re-pose every N frames (3-4 classic).
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // Seeded hand-wobbled ellipse path (smooth quadratic chain).
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- self-preview (not part of the snippet you copy) ----
+        var circle = document.getElementById("hw-b-circle");
+        circle.setAttribute("d", window.hwWobbleEllipse(460, 620, 190, 130, 4, 3.2));
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* draw-on entrances (strokeDashoffset — never x/y, the boil owns those) */
+        [circle, document.getElementById("hw-b-arrow")].forEach(function (p, i) {
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.8, ease: "power2.inOut" }, 0.3 + i * 0.35);
+        });
+        gsap.set("#hw-b-word", { opacity: 0 });
+        tl.to("#hw-b-word", { opacity: 1, duration: 0.5, ease: "power2.out" }, 1.1);
+
+        /* three boils with different characters, one dispatcher */
+        window.hwBoil(tl, "#hw-b-circle-g", { amp: 2.2, rot: 0.4, frameDrop: 3, seed: 2 });
+        window.hwBoil(tl, "#hw-b-arrow-g", { amp: 2.6, rot: 0.7, frameDrop: 1, seed: 5 });
+        window.hwBoil(tl, "#hw-b-word", { amp: 1.2, rot: 0.35, frameDrop: 3, seed: 9 });
+
+        tl.set("#hw-boil-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-boil"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-boil/registry-item.json b/registry/components/hw-boil/registry-item.json
new file mode 100644
index 0000000000..175d4390e7
--- /dev/null
+++ b/registry/components/hw-boil/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-boil",
+  "type": "hyperframes:component",
+  "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",
+  "tags": ["handwritten", "effect", "annotation"],
+  "files": [
+    {
+      "path": "hw-boil.html",
+      "target": "compositions/components/hw-boil.html",
+      "type": "hyperframes:snippet"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/components/hw-box-label/assets/fonts/Caveat-700-latin.woff2 b/registry/components/hw-box-label/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/components/hw-box-label/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/components/hw-box-label/demo.html b/registry/components/hw-box-label/demo.html
new file mode 100644
index 0000000000..aff39a9f0f
--- /dev/null
+++ b/registry/components/hw-box-label/demo.html
@@ -0,0 +1,217 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-box-label.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-box-label.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-box-label ----------------------------------------------------
+         Rounded hand-drawn box + marker label (map-label style annotations).
+         Requires the hw-boil helpers in the host. */
+      .hw-box {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-box svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-box path {
+        fill: none;
+        stroke: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-box-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-box .hw-bx-label {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 52px;
+        color: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+      /* self-preview scene */
+      #hw-bx-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(140deg, #4a3560 0%, #1c1423 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-box CSS + markup pattern, the
+         hwWobbleRect / hwBoxBuild / hwBoxOn / hwBoxOff helpers, AND the
+         hw-boil helpers. Size the wrapper over your target, then:
+
+           hwBoxBuild("#hw-my-box", { seed: 3, label: "Europe", labelPos: "above" });
+           hwBoxOn(tl, "#hw-my-box", 2.0);
+           hwBoil(tl, "#hw-my-box", { frameDrop: 3, seed: 3 });
+           hwBoxOff(tl, "#hw-my-box", 8.0);
+    -->
+    <div
+      id="hw-bx-root"
+      data-composition-id="hw-box-label"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-bx-scene"></div>
+      <div
+        class="hw-box"
+        id="hw-bx-demo"
+        style="left: 700px; top: 420px; width: 420px; height: 230px"
+      >
+        <svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
+        <div class="hw-bx-label" id="hw-bx-demo-label"></div>
+      </div>
+      <div
+        id="hw-bx-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-box helpers (copy these too) ----
+        // Wobbled rounded-rect path in a w x h box.
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+        window.hwBoxBuild = function (target, opts) {
+          opts = opts || {};
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          el.querySelector("path").setAttribute(
+            "d",
+            window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
+          );
+          var label = el.querySelector(".hw-bx-label");
+          label.textContent = opts.label || "";
+          if ((opts.labelPos || "above") === "above") {
+            label.style.top = "-64px";
+          } else {
+            label.style.top = "50%";
+            label.style.transform = "translateY(-50%)";
+          }
+        };
+        window.hwBoxOn = function (tl, target, at) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
+          tl.to(
+            document.querySelector(target + " .hw-bx-label"),
+            { opacity: 1, duration: 0.4, ease: "power2.out" },
+            at + 0.55,
+          );
+        };
+        window.hwBoxOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwBoxBuild("#hw-bx-demo", { seed: 3, label: "Europe", labelPos: "above" });
+        var tl = gsap.timeline({ paused: true });
+        window.hwBoxOn(tl, "#hw-bx-demo", 0.4);
+        window.hwBoil(tl, "#hw-bx-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 3 });
+        window.hwBoxOff(tl, "#hw-bx-demo", 3.4);
+        tl.set("#hw-bx-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-box-label"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-box-label/hw-box-label.html b/registry/components/hw-box-label/hw-box-label.html
new file mode 100644
index 0000000000..a1c3bd2b52
--- /dev/null
+++ b/registry/components/hw-box-label/hw-box-label.html
@@ -0,0 +1,214 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-box-label ----------------------------------------------------
+         Rounded hand-drawn box + marker label (map-label style annotations).
+         Requires the hw-boil helpers in the host. */
+      .hw-box {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-box svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-box path {
+        fill: none;
+        stroke: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-box-w, 6);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-box .hw-bx-label {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 52px;
+        color: var(--hw-box-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
+      }
+      /* self-preview scene */
+      #hw-bx-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(140deg, #4a3560 0%, #1c1423 100%);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-box CSS + markup pattern, the
+         hwWobbleRect / hwBoxBuild / hwBoxOn / hwBoxOff helpers, AND the
+         hw-boil helpers. Size the wrapper over your target, then:
+
+           hwBoxBuild("#hw-my-box", { seed: 3, label: "Europe", labelPos: "above" });
+           hwBoxOn(tl, "#hw-my-box", 2.0);
+           hwBoil(tl, "#hw-my-box", { frameDrop: 3, seed: 3 });
+           hwBoxOff(tl, "#hw-my-box", 8.0);
+    -->
+    <div
+      id="hw-bx-root"
+      data-composition-id="hw-box-label"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-bx-scene"></div>
+      <div
+        class="hw-box"
+        id="hw-bx-demo"
+        style="left: 700px; top: 420px; width: 420px; height: 230px"
+      >
+        <svg viewBox="0 0 420 230"><path id="hw-bx-demo-path"></path></svg>
+        <div class="hw-bx-label" id="hw-bx-demo-label"></div>
+      </div>
+      <div
+        id="hw-bx-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-box helpers (copy these too) ----
+        // Wobbled rounded-rect path in a w x h box.
+        window.hwWobbleRect = function (w, h, r, seed, amp) {
+          amp = amp === undefined ? 3.5 : amp;
+          function wob(n) {
+            return window.hwHash(n, seed) * amp;
+          }
+          var d = "M " + (r + wob(1)) + " " + wob(2);
+          d += " L " + (w / 2 + wob(3)) + " " + wob(4);
+          d += " L " + (w - r + wob(5)) + " " + wob(6);
+          d += " Q " + (w + wob(7)) + " " + wob(8) + " " + (w + wob(9)) + " " + (r + wob(10));
+          d += " L " + (w + wob(11)) + " " + (h / 2 + wob(12));
+          d += " L " + (w + wob(13)) + " " + (h - r + wob(14));
+          d +=
+            " Q " +
+            (w + wob(15)) +
+            " " +
+            (h + wob(16)) +
+            " " +
+            (w - r + wob(17)) +
+            " " +
+            (h + wob(18));
+          d += " L " + (w / 2 + wob(19)) + " " + (h + wob(20));
+          d += " L " + (r + wob(21)) + " " + (h + wob(22));
+          d += " Q " + wob(23) + " " + (h + wob(24)) + " " + wob(25) + " " + (h - r + wob(26));
+          d += " L " + wob(27) + " " + (h / 2 + wob(28));
+          d += " L " + wob(29) + " " + (r + wob(30));
+          d += " Q " + wob(31) + " " + wob(32) + " " + (r + wob(33)) + " " + wob(34);
+          return d;
+        };
+        window.hwBoxBuild = function (target, opts) {
+          opts = opts || {};
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          el.querySelector("path").setAttribute(
+            "d",
+            window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),
+          );
+          var label = el.querySelector(".hw-bx-label");
+          label.textContent = opts.label || "";
+          if ((opts.labelPos || "above") === "above") {
+            label.style.top = "-64px";
+          } else {
+            label.style.top = "50%";
+            label.style.transform = "translateY(-50%)";
+          }
+        };
+        window.hwBoxOn = function (tl, target, at) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: "power2.inOut" }, at);
+          tl.to(
+            document.querySelector(target + " .hw-bx-label"),
+            { opacity: 1, duration: 0.4, ease: "power2.out" },
+            at + 0.55,
+          );
+        };
+        window.hwBoxOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwBoxBuild("#hw-bx-demo", { seed: 3, label: "Europe", labelPos: "above" });
+        var tl = gsap.timeline({ paused: true });
+        window.hwBoxOn(tl, "#hw-bx-demo", 0.4);
+        window.hwBoil(tl, "#hw-bx-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 3 });
+        window.hwBoxOff(tl, "#hw-bx-demo", 3.4);
+        tl.set("#hw-bx-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-box-label"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-box-label/registry-item.json b/registry/components/hw-box-label/registry-item.json
new file mode 100644
index 0000000000..9e50809412
--- /dev/null
+++ b/registry/components/hw-box-label/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-box-label",
+  "type": "hyperframes:component",
+  "title": "Hand-Drawn Box Label",
+  "description": "Wobbled rounded rectangle draws around a region with a handwritten label above or centered",
+  "tags": ["handwritten", "annotation", "overlay"],
+  "files": [
+    {
+      "path": "hw-box-label.html",
+      "target": "compositions/components/hw-box-label.html",
+      "type": "hyperframes:snippet"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/components/hw-callout-circle/assets/fonts/Caveat-700-latin.woff2 b/registry/components/hw-callout-circle/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/components/hw-callout-circle/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/components/hw-callout-circle/demo.html b/registry/components/hw-callout-circle/demo.html
new file mode 100644
index 0000000000..efcd893b0d
--- /dev/null
+++ b/registry/components/hw-callout-circle/demo.html
@@ -0,0 +1,317 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-callout-circle.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-callout-circle.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-callout-circle ----------------------------------------------
+         The full callout anatomy: wobbled ellipse outline draws around a
+         target, optional scribble fill sketches in, a curved connector leads
+         to a handwritten label. Requires the hw-boil helpers in the host. */
+      .hw-callout {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-callout svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-callout path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-callout .hw-co-outline {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-co-w, 6);
+      }
+      .hw-callout .hw-co-scribble {
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
+           previous blue read as a default UI colour. Lighter weight and alpha
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
+      }
+      .hw-callout .hw-co-connector {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: 4;
+      }
+      .hw-callout .hw-co-label {
+        position: absolute;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 54px;
+        color: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
+      }
+      /* self-preview scene */
+      #hw-co-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);
+      }
+      #hw-co-target {
+        position: absolute;
+        left: 700px;
+        top: 420px;
+        width: 220px;
+        height: 150px;
+        border-radius: 18px;
+        background: rgba(244, 242, 236, 0.18);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 600;
+        font-size: 30px;
+        color: rgba(244, 242, 236, 0.8);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-callout CSS + markup pattern, the
+         hwCalloutBuild / hwCalloutOn / hwCalloutOff helpers, AND the hw-boil
+         helpers. Size the wrapper around your target, then:
+
+           hwCalloutBuild("#hw-my-callout", { scribble: true, seed: 4,
+             label: "look here!", labelAt: "right" });
+           hwCalloutOn(tl, "#hw-my-callout", 2.0);
+           hwBoil(tl, "#hw-my-callout", { frameDrop: 3, seed: 4 });
+           hwCalloutOff(tl, "#hw-my-callout", 8.0);
+    -->
+    <div
+      id="hw-co-root"
+      data-composition-id="hw-callout-circle"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-co-scene"></div>
+      <div id="hw-co-target">subject</div>
+      <div
+        class="hw-callout"
+        id="hw-co-demo"
+        style="left: 640px; top: 370px; width: 340px; height: 250px"
+      >
+        <svg viewBox="0 0 340 250">
+          <path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
+          <path class="hw-co-outline" id="hw-co-demo-outline"></path>
+          <path class="hw-co-connector" id="hw-co-demo-connector"></path>
+        </svg>
+        <div class="hw-co-label" id="hw-co-demo-label"></div>
+      </div>
+      <div
+        id="hw-co-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- hw-callout helpers (copy these too) ----
+        // Builds outline + scribble + connector + label inside the wrapper.
+        // opts: scribble (bool), seed, label, labelAt ("right"|"left"|"below"),
+        //       connector (bool)
+        window.hwCalloutBuild = function (target, opts) {
+          opts = opts || {};
+          var seed = opts.seed || 1;
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          var cx = W / 2,
+            cy = H / 2,
+            rx = W * 0.42,
+            ry = H * 0.36;
+
+          el.querySelector(".hw-co-outline").setAttribute(
+            "d",
+            window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
+          );
+
+          var scr = el.querySelector(".hw-co-scribble");
+          if (opts.scribble === false) {
+            scr.style.display = "none";
+          } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
+            var d = "",
+              rows = 11;
+            for (var i = 0; i < rows; i++) {
+              var t = (i + 0.5) / rows;
+              var yy = cy - ry + t * ry * 2;
+              var half = Math.sqrt(Math.max(0.05, 1 - Math.pow((yy - cy) / ry, 2)));
+              var xw = rx * half * 0.86;
+              var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
+              var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
+              d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
+              d +=
+                " L " +
+                (i % 2 ? xb : xa).toFixed(1) +
+                " " +
+                (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
+            }
+            scr.setAttribute("d", d);
+          }
+
+          var conn = el.querySelector(".hw-co-connector");
+          var label = el.querySelector(".hw-co-label");
+          if (opts.connector === false) {
+            conn.style.display = "none";
+          } else {
+            var at = opts.labelAt || "right";
+            var sx = at === "left" ? cx - rx : at === "below" ? cx : cx + rx;
+            var sy = at === "below" ? cy + ry : cy + ry * 0.35;
+            var ex = at === "left" ? sx - 70 : at === "below" ? sx + 40 : sx + 70;
+            var ey = sy + 55;
+            conn.setAttribute(
+              "d",
+              "M " +
+                sx.toFixed(1) +
+                " " +
+                sy.toFixed(1) +
+                " Q " +
+                ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
+                " " +
+                (sy + 46).toFixed(1) +
+                " " +
+                ex.toFixed(1) +
+                " " +
+                ey.toFixed(1),
+            );
+            label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
+            label.style.top = ey - 24 + "px";
+          }
+          label.textContent = opts.label || "";
+        };
+        // Draw sequence: outline -> scribble -> connector -> label pop.
+        window.hwCalloutOn = function (tl, target, at) {
+          var el = document.querySelector(target);
+          var t = at;
+          ["outline", "scribble", "connector"].forEach(function (k, idx) {
+            var p = el.querySelector(".hw-co-" + k);
+            if (!p || p.style.display === "none") return;
+            var len = p.getTotalLength();
+            gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+            var dur = k === "scribble" ? 0.55 : k === "connector" ? 0.35 : 0.7;
+            tl.to(p, { strokeDashoffset: 0, duration: dur, ease: "power2.inOut" }, t);
+            t += dur * 0.85;
+          });
+          var label = el.querySelector(".hw-co-label");
+          gsap.set(label, { scale: 0.8, transformOrigin: "0% 50%" });
+          tl.to(label, { opacity: 1, scale: 1, duration: 0.4, ease: "back.out(1.6)" }, t);
+        };
+        window.hwCalloutOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwCalloutBuild("#hw-co-demo", {
+          scribble: true,
+          seed: 4,
+          label: "look here!",
+          labelAt: "right",
+        });
+        var tl = gsap.timeline({ paused: true });
+        window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
+        window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
+        window.hwCalloutOff(tl, "#hw-co-demo", 4.3);
+        tl.set("#hw-co-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["hw-callout-circle"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-callout-circle/hw-callout-circle.html b/registry/components/hw-callout-circle/hw-callout-circle.html
new file mode 100644
index 0000000000..6ae45540e6
--- /dev/null
+++ b/registry/components/hw-callout-circle/hw-callout-circle.html
@@ -0,0 +1,314 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-callout-circle ----------------------------------------------
+         The full callout anatomy: wobbled ellipse outline draws around a
+         target, optional scribble fill sketches in, a curved connector leads
+         to a handwritten label. Requires the hw-boil helpers in the host. */
+      .hw-callout {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-callout svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-callout path {
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .hw-callout .hw-co-outline {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: var(--hw-co-w, 6);
+      }
+      .hw-callout .hw-co-scribble {
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
+           previous blue read as a default UI colour. Lighter weight and alpha
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
+      }
+      .hw-callout .hw-co-connector {
+        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        stroke-width: 4;
+      }
+      .hw-callout .hw-co-label {
+        position: absolute;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 54px;
+        color: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
+        white-space: nowrap;
+        opacity: 0;
+        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
+      }
+      /* self-preview scene */
+      #hw-co-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);
+      }
+      #hw-co-target {
+        position: absolute;
+        left: 700px;
+        top: 420px;
+        width: 220px;
+        height: 150px;
+        border-radius: 18px;
+        background: rgba(244, 242, 236, 0.18);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 600;
+        font-size: 30px;
+        color: rgba(244, 242, 236, 0.8);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-callout CSS + markup pattern, the
+         hwCalloutBuild / hwCalloutOn / hwCalloutOff helpers, AND the hw-boil
+         helpers. Size the wrapper around your target, then:
+
+           hwCalloutBuild("#hw-my-callout", { scribble: true, seed: 4,
+             label: "look here!", labelAt: "right" });
+           hwCalloutOn(tl, "#hw-my-callout", 2.0);
+           hwBoil(tl, "#hw-my-callout", { frameDrop: 3, seed: 4 });
+           hwCalloutOff(tl, "#hw-my-callout", 8.0);
+    -->
+    <div
+      id="hw-co-root"
+      data-composition-id="hw-callout-circle"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-co-scene"></div>
+      <div id="hw-co-target">subject</div>
+      <div
+        class="hw-callout"
+        id="hw-co-demo"
+        style="left: 640px; top: 370px; width: 340px; height: 250px"
+      >
+        <svg viewBox="0 0 340 250">
+          <path class="hw-co-scribble" id="hw-co-demo-scribble"></path>
+          <path class="hw-co-outline" id="hw-co-demo-outline"></path>
+          <path class="hw-co-connector" id="hw-co-demo-connector"></path>
+        </svg>
+        <div class="hw-co-label" id="hw-co-demo-label"></div>
+      </div>
+      <div
+        id="hw-co-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {
+          wobblePct = wobblePct === undefined ? 3 : wobblePct;
+          var N = 14,
+            pts = [];
+          for (var i = 0; i < N; i++) {
+            var a = (i / N) * Math.PI * 2;
+            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);
+            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);
+          }
+          var mx = (pts[0][0] + pts[N - 1][0]) / 2,
+            my = (pts[0][1] + pts[N - 1][1]) / 2;
+          var d = "M" + mx.toFixed(1) + " " + my.toFixed(1);
+          for (var j = 0; j < N; j++) {
+            var p = pts[j],
+              q = pts[(j + 1) % N];
+            d +=
+              " Q" +
+              p[0].toFixed(1) +
+              " " +
+              p[1].toFixed(1) +
+              " " +
+              ((p[0] + q[0]) / 2).toFixed(1) +
+              " " +
+              ((p[1] + q[1]) / 2).toFixed(1);
+          }
+          return d;
+        };
+
+        // ---- hw-callout helpers (copy these too) ----
+        // Builds outline + scribble + connector + label inside the wrapper.
+        // opts: scribble (bool), seed, label, labelAt ("right"|"left"|"below"),
+        //       connector (bool)
+        window.hwCalloutBuild = function (target, opts) {
+          opts = opts || {};
+          var seed = opts.seed || 1;
+          var el = document.querySelector(target);
+          var svg = el.querySelector("svg");
+          var vb = svg.getAttribute("viewBox").split(" ");
+          var W = parseFloat(vb[2]),
+            H = parseFloat(vb[3]);
+          var cx = W / 2,
+            cy = H / 2,
+            rx = W * 0.42,
+            ry = H * 0.36;
+
+          el.querySelector(".hw-co-outline").setAttribute(
+            "d",
+            window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),
+          );
+
+          var scr = el.querySelector(".hw-co-scribble");
+          if (opts.scribble === false) {
+            scr.style.display = "none";
+          } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
+            var d = "",
+              rows = 11;
+            for (var i = 0; i < rows; i++) {
+              var t = (i + 0.5) / rows;
+              var yy = cy - ry + t * ry * 2;
+              var half = Math.sqrt(Math.max(0.05, 1 - Math.pow((yy - cy) / ry, 2)));
+              var xw = rx * half * 0.86;
+              var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;
+              var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;
+              d += (i === 0 ? "M " : " L ") + (i % 2 ? xa : xb).toFixed(1) + " " + yy.toFixed(1);
+              d +=
+                " L " +
+                (i % 2 ? xb : xa).toFixed(1) +
+                " " +
+                (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);
+            }
+            scr.setAttribute("d", d);
+          }
+
+          var conn = el.querySelector(".hw-co-connector");
+          var label = el.querySelector(".hw-co-label");
+          if (opts.connector === false) {
+            conn.style.display = "none";
+          } else {
+            var at = opts.labelAt || "right";
+            var sx = at === "left" ? cx - rx : at === "below" ? cx : cx + rx;
+            var sy = at === "below" ? cy + ry : cy + ry * 0.35;
+            var ex = at === "left" ? sx - 70 : at === "below" ? sx + 40 : sx + 70;
+            var ey = sy + 55;
+            conn.setAttribute(
+              "d",
+              "M " +
+                sx.toFixed(1) +
+                " " +
+                sy.toFixed(1) +
+                " Q " +
+                ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +
+                " " +
+                (sy + 46).toFixed(1) +
+                " " +
+                ex.toFixed(1) +
+                " " +
+                ey.toFixed(1),
+            );
+            label.style.left = (at === "left" ? ex - 180 : ex + 12) + "px";
+            label.style.top = ey - 24 + "px";
+          }
+          label.textContent = opts.label || "";
+        };
+        // Draw sequence: outline -> scribble -> connector -> label pop.
+        window.hwCalloutOn = function (tl, target, at) {
+          var el = document.querySelector(target);
+          var t = at;
+          ["outline", "scribble", "connector"].forEach(function (k, idx) {
+            var p = el.querySelector(".hw-co-" + k);
+            if (!p || p.style.display === "none") return;
+            var len = p.getTotalLength();
+            gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+            var dur = k === "scribble" ? 0.55 : k === "connector" ? 0.35 : 0.7;
+            tl.to(p, { strokeDashoffset: 0, duration: dur, ease: "power2.inOut" }, t);
+            t += dur * 0.85;
+          });
+          var label = el.querySelector(".hw-co-label");
+          gsap.set(label, { scale: 0.8, transformOrigin: "0% 50%" });
+          tl.to(label, { opacity: 1, scale: 1, duration: 0.4, ease: "back.out(1.6)" }, t);
+        };
+        window.hwCalloutOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        window.hwCalloutBuild("#hw-co-demo", {
+          scribble: true,
+          seed: 4,
+          label: "look here!",
+          labelAt: "right",
+        });
+        var tl = gsap.timeline({ paused: true });
+        window.hwCalloutOn(tl, "#hw-co-demo", 0.4);
+        window.hwBoil(tl, "#hw-co-demo", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });
+        window.hwCalloutOff(tl, "#hw-co-demo", 4.3);
+        tl.set("#hw-co-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["hw-callout-circle"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-callout-circle/registry-item.json b/registry/components/hw-callout-circle/registry-item.json
new file mode 100644
index 0000000000..245af83f9a
--- /dev/null
+++ b/registry/components/hw-callout-circle/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-callout-circle",
+  "type": "hyperframes:component",
+  "title": "Scribble Callout Circle",
+  "description": "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label",
+  "tags": ["handwritten", "annotation", "callout", "overlay"],
+  "files": [
+    {
+      "path": "hw-callout-circle.html",
+      "target": "compositions/components/hw-callout-circle.html",
+      "type": "hyperframes:snippet"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/components/hw-underline/assets/fonts/Caveat-700-latin.woff2 b/registry/components/hw-underline/assets/fonts/Caveat-700-latin.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/registry/components/hw-underline/assets/fonts/Caveat-700-latin.woff2 differ
diff --git a/registry/components/hw-underline/demo.html b/registry/components/hw-underline/demo.html
new file mode 100644
index 0000000000..2968cc0508
--- /dev/null
+++ b/registry/components/hw-underline/demo.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to hw-underline.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists hw-underline.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #17161a;
+        overflow: hidden;
+      }
+      /* ---- hw-underline ------------------------------------------------
+         Squiggle underline / strikethrough / bracket marks that draw on.
+         Size the wrapper over the text they annotate. Requires the hw-boil
+         helpers in the host. */
+      .hw-mark {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-mark svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-mark path {
+        fill: none;
+        stroke: var(--hw-mark-color, var(--hw-accent-warm, #ffb020));
+        stroke-width: var(--hw-mark-w, 7);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      /* self-preview scene */
+      #hw-un-scene {
+        position: absolute;
+        inset: 0;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 84px;
+        color: #f4f2ec;
+      }
+      #hw-un-scene div {
+        position: absolute;
+        left: 480px;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-mark CSS + markup pattern, the
+         hwMarkPath / hwMarkOn / hwMarkOff helpers, AND the hw-boil helpers.
+         Then:
+
+           document.querySelector("#hw-my-mark path")
+             .setAttribute("d", hwMarkPath(420, 34, "underline", 4));
+           hwMarkOn(tl, "#hw-my-mark", 2.0);
+           hwBoil(tl, "#hw-my-mark", { frameDrop: 3, seed: 4 });
+    -->
+    <div
+      id="hw-un-root"
+      data-composition-id="hw-underline"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-un-scene">
+        <div style="top: 260px">underline the point</div>
+        <div style="top: 460px">cross this out</div>
+        <div style="top: 660px">bracket the aside</div>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m1"
+        style="left: 470px; top: 350px; width: 620px; height: 34px"
+      >
+        <svg viewBox="0 0 620 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m2"
+        style="left: 470px; top: 500px; width: 480px; height: 34px"
+      >
+        <svg viewBox="0 0 480 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m3"
+        style="left: 440px; top: 650px; width: 40px; height: 110px"
+      >
+        <svg viewBox="0 0 40 110"><path></path></svg>
+      </div>
+      <div
+        id="hw-un-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-mark helpers (copy these too) ----
+        // style: "underline" (squiggle) | "strike" (double pass) | "bracket"
+        window.hwMarkPath = function (w, h, style, seed) {
+          seed = seed || 1;
+          function wob(n, range) {
+            return window.hwHash(n, seed) * (range === undefined ? 5 : range);
+          }
+          var mid = h / 2;
+          if (style === "bracket") {
+            return (
+              "M " +
+              (w * 0.9 + wob(1, 3)) +
+              " " +
+              (2 + wob(2, 3)) +
+              " Q " +
+              wob(3, 4) +
+              " " +
+              (2 + wob(4)) +
+              " " +
+              (4 + wob(5, 3)) +
+              " " +
+              (h * 0.5 + wob(6)) +
+              " Q " +
+              wob(7, 4) +
+              " " +
+              (h - 2 + wob(8)) +
+              " " +
+              (w * 0.9 + wob(9, 3)) +
+              " " +
+              (h - 2 + wob(10, 3))
+            );
+          }
+          if (style === "strike") {
+            return (
+              "M " +
+              (2 + wob(1, 3)) +
+              " " +
+              (mid + wob(2)) +
+              " L " +
+              (w - 4 + wob(3, 3)) +
+              " " +
+              (mid - 3 + wob(4)) +
+              " M " +
+              (w - 10 + wob(5, 4)) +
+              " " +
+              (mid + 7 + wob(6)) +
+              " L " +
+              (8 + wob(7, 4)) +
+              " " +
+              (mid + 3 + wob(8))
+            );
+          }
+          /* underline squiggle */
+          var segs = Math.max(5, Math.round(w / 95));
+          var d = "M 2 " + (mid + wob(0, 4));
+          for (var i = 1; i <= segs; i++) {
+            var x = (w / segs) * i;
+            d +=
+              " Q " +
+              (x - w / segs / 2 + wob(i * 4 + 1, 9)) +
+              " " +
+              (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              (mid + wob(i * 4 + 3, 4));
+          }
+          return d;
+        };
+        window.hwMarkOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwMarkOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .querySelector("#hw-un-m1 path")
+          .setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
+        document
+          .querySelector("#hw-un-m2 path")
+          .setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
+        document
+          .querySelector("#hw-un-m3 path")
+          .setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
+        var tl = gsap.timeline({ paused: true });
+        window.hwMarkOn(tl, "#hw-un-m1", 0.4);
+        window.hwMarkOn(tl, "#hw-un-m2", 1.0);
+        window.hwMarkOn(tl, "#hw-un-m3", 1.6);
+        window.hwBoil(tl, [".hw-mark"], { amp: 1.5, rot: 0.4, frameDrop: 3, seed: 5 });
+        tl.to([".hw-mark"], { opacity: 0, duration: 0.3, ease: "power2.in" }, 3.5);
+        tl.set("#hw-un-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-underline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-underline/hw-underline.html b/registry/components/hw-underline/hw-underline.html
new file mode 100644
index 0000000000..628003f8b6
--- /dev/null
+++ b/registry/components/hw-underline/hw-underline.html
@@ -0,0 +1,257 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Caveat";
+        src: url("assets/fonts/Caveat-700-latin.woff2") format("woff2");
+        font-weight: 700;
+        font-display: block;
+      }
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- hw-underline ------------------------------------------------
+         Squiggle underline / strikethrough / bracket marks that draw on.
+         Size the wrapper over the text they annotate. Requires the hw-boil
+         helpers in the host. */
+      .hw-mark {
+        position: absolute;
+        pointer-events: none;
+      }
+      .hw-mark svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .hw-mark path {
+        fill: none;
+        stroke: var(--hw-mark-color, var(--hw-accent-warm, #ffb020));
+        stroke-width: var(--hw-mark-w, 7);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      /* self-preview scene */
+      #hw-un-scene {
+        position: absolute;
+        inset: 0;
+        background: #17161a;
+        font-family: var(--hw-font-print, "Caveat", cursive);
+        font-weight: 700;
+        font-size: 84px;
+        color: #f4f2ec;
+      }
+      #hw-un-scene div {
+        position: absolute;
+        left: 480px;
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview. WIRING: copy the .hw-mark CSS + markup pattern, the
+         hwMarkPath / hwMarkOn / hwMarkOff helpers, AND the hw-boil helpers.
+         Then:
+
+           document.querySelector("#hw-my-mark path")
+             .setAttribute("d", hwMarkPath(420, 34, "underline", 4));
+           hwMarkOn(tl, "#hw-my-mark", 2.0);
+           hwBoil(tl, "#hw-my-mark", { frameDrop: 3, seed: 4 });
+    -->
+    <div
+      id="hw-un-root"
+      data-composition-id="hw-underline"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="hw-un-scene">
+        <div style="top: 260px">underline the point</div>
+        <div style="top: 460px">cross this out</div>
+        <div style="top: 660px">bracket the aside</div>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m1"
+        style="left: 470px; top: 350px; width: 620px; height: 34px"
+      >
+        <svg viewBox="0 0 620 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m2"
+        style="left: 470px; top: 500px; width: 480px; height: 34px"
+      >
+        <svg viewBox="0 0 480 34"><path></path></svg>
+      </div>
+      <div
+        class="hw-mark"
+        id="hw-un-m3"
+        style="left: 440px; top: 650px; width: 40px; height: 110px"
+      >
+        <svg viewBox="0 0 40 110"><path></path></svg>
+      </div>
+      <div
+        id="hw-un-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */
+        window.hwOnUpdate = function (tl, fn) {
+          if (!tl.__hwRenders) {
+            tl.__hwRenders = [];
+            tl.eventCallback("onUpdate", function () {
+              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();
+            });
+          }
+          tl.__hwRenders.push(fn);
+          fn();
+        };
+        window.hwHash = function (n, seed) {
+          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;
+          return (x - Math.floor(x)) * 2 - 1;
+        };
+        window.hwBoil = function (tl, target, opts) {
+          opts = opts || {};
+          var amp = opts.amp !== undefined ? opts.amp : 1.6;
+          var rot = opts.rot !== undefined ? opts.rot : 0.5;
+          var fps = opts.fps || 30;
+          var drop = opts.frameDrop || 3;
+          var seed = opts.seed || 1;
+          var els = gsap.utils.toArray(target);
+          window.hwOnUpdate(tl, function () {
+            var step = Math.floor((tl.time() * fps) / drop);
+            for (var i = 0; i < els.length; i++) {
+              gsap.set(els[i], {
+                x: window.hwHash(step * 3 + i * 97, seed) * amp,
+                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,
+                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,
+              });
+            }
+          });
+        };
+
+        // ---- hw-mark helpers (copy these too) ----
+        // style: "underline" (squiggle) | "strike" (double pass) | "bracket"
+        window.hwMarkPath = function (w, h, style, seed) {
+          seed = seed || 1;
+          function wob(n, range) {
+            return window.hwHash(n, seed) * (range === undefined ? 5 : range);
+          }
+          var mid = h / 2;
+          if (style === "bracket") {
+            return (
+              "M " +
+              (w * 0.9 + wob(1, 3)) +
+              " " +
+              (2 + wob(2, 3)) +
+              " Q " +
+              wob(3, 4) +
+              " " +
+              (2 + wob(4)) +
+              " " +
+              (4 + wob(5, 3)) +
+              " " +
+              (h * 0.5 + wob(6)) +
+              " Q " +
+              wob(7, 4) +
+              " " +
+              (h - 2 + wob(8)) +
+              " " +
+              (w * 0.9 + wob(9, 3)) +
+              " " +
+              (h - 2 + wob(10, 3))
+            );
+          }
+          if (style === "strike") {
+            return (
+              "M " +
+              (2 + wob(1, 3)) +
+              " " +
+              (mid + wob(2)) +
+              " L " +
+              (w - 4 + wob(3, 3)) +
+              " " +
+              (mid - 3 + wob(4)) +
+              " M " +
+              (w - 10 + wob(5, 4)) +
+              " " +
+              (mid + 7 + wob(6)) +
+              " L " +
+              (8 + wob(7, 4)) +
+              " " +
+              (mid + 3 + wob(8))
+            );
+          }
+          /* underline squiggle */
+          var segs = Math.max(5, Math.round(w / 95));
+          var d = "M 2 " + (mid + wob(0, 4));
+          for (var i = 1; i <= segs; i++) {
+            var x = (w / segs) * i;
+            d +=
+              " Q " +
+              (x - w / segs / 2 + wob(i * 4 + 1, 9)) +
+              " " +
+              (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +
+              " " +
+              x.toFixed(1) +
+              " " +
+              (mid + wob(i * 4 + 3, 4));
+          }
+          return d;
+        };
+        window.hwMarkOn = function (tl, target, at, dur) {
+          var p = document.querySelector(target + " path");
+          var len = p.getTotalLength();
+          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            p,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.hwMarkOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.3, ease: "power2.in" }, at);
+        };
+
+        // ---- self-preview ----
+        document
+          .querySelector("#hw-un-m1 path")
+          .setAttribute("d", window.hwMarkPath(620, 34, "underline", 4));
+        document
+          .querySelector("#hw-un-m2 path")
+          .setAttribute("d", window.hwMarkPath(480, 34, "strike", 6));
+        document
+          .querySelector("#hw-un-m3 path")
+          .setAttribute("d", window.hwMarkPath(40, 110, "bracket", 8));
+        var tl = gsap.timeline({ paused: true });
+        window.hwMarkOn(tl, "#hw-un-m1", 0.4);
+        window.hwMarkOn(tl, "#hw-un-m2", 1.0);
+        window.hwMarkOn(tl, "#hw-un-m3", 1.6);
+        window.hwBoil(tl, [".hw-mark"], { amp: 1.5, rot: 0.4, frameDrop: 3, seed: 5 });
+        tl.to([".hw-mark"], { opacity: 0, duration: 0.3, ease: "power2.in" }, 3.5);
+        tl.set("#hw-un-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["hw-underline"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/hw-underline/registry-item.json b/registry/components/hw-underline/registry-item.json
new file mode 100644
index 0000000000..5f844a4783
--- /dev/null
+++ b/registry/components/hw-underline/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hw-underline",
+  "type": "hyperframes:component",
+  "title": "Squiggle Marks",
+  "description": "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on",
+  "tags": ["handwritten", "annotation", "text-treatment"],
+  "files": [
+    {
+      "path": "hw-underline.html",
+      "target": "compositions/components/hw-underline.html",
+      "type": "hyperframes:snippet"
+    },
+    {
+      "path": "assets/fonts/Caveat-700-latin.woff2",
+      "target": "assets/fonts/Caveat-700-latin.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/components/mk-emphasis-type/demo.html b/registry/components/mk-emphasis-type/demo.html
new file mode 100644
index 0000000000..dd55374ab3
--- /dev/null
+++ b/registry/components/mk-emphasis-type/demo.html
@@ -0,0 +1,100 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to mk-emphasis-type.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists mk-emphasis-type.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #f2f4f7;
+        overflow: hidden;
+      }
+      /* ---- mk-emphasis-type ------------------------------------------------
+         Oversized low-contrast background word sliding slowly behind the
+         subject (the promo's "EMPHASIS" texture type). Decorative only —
+         keep it behind real content and mark it aria-hidden. */
+      .mk-emphasis {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-emph-color: rgba(29, 29, 31, 0.07); /* dark scheme: rgba(245,245,247,0.08) */
+
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 260px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+        white-space: nowrap;
+        text-transform: uppercase;
+        color: var(--mk-emph-color);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-emphasis CSS, the markup
+         below (keep aria-hidden + data-layout-allow-overflow — the word is
+         decorative and usually wider than the canvas), and the helpers. -->
+    <div
+      id="mk-emph-root"
+      data-composition-id="mk-emphasis-type"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="mk-emphasis"
+        id="mk-emph-demo"
+        aria-hidden="true"
+        data-layout-allow-overflow
+        style="top: 400px; left: -40px"
+      >
+        Emphasis
+      </div>
+      <div
+        id="mk-emph-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkEmphasisIn(tl, "#mk-my-word", 1.0, { drift: -120, hold: 6 });
+        //   mkEmphasisOut(tl, "#mk-my-word", 7.5);
+        window.mkEmphasisIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var drift = opts.drift === undefined ? -100 : opts.drift;
+          var hold = opts.hold === undefined ? 5 : opts.hold;
+          gsap.set(target, { opacity: 0, x: 40 });
+          tl.to(target, { opacity: 1, duration: 1.0, ease: "power2.out" }, at);
+          tl.to(target, { x: 40 + drift, duration: hold, ease: "sine.inOut" }, at);
+        };
+        window.mkEmphasisOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.5, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkEmphasisIn(tl, "#mk-emph-demo", 0.3, { drift: -110, hold: 3.2 });
+        window.mkEmphasisOut(tl, "#mk-emph-demo", 3.4);
+        tl.set("#mk-emph-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-emphasis-type"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/mk-emphasis-type/mk-emphasis-type.html b/registry/components/mk-emphasis-type/mk-emphasis-type.html
new file mode 100644
index 0000000000..35c30fab98
--- /dev/null
+++ b/registry/components/mk-emphasis-type/mk-emphasis-type.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-emphasis-type ------------------------------------------------
+         Oversized low-contrast background word sliding slowly behind the
+         subject (the promo's "EMPHASIS" texture type). Decorative only —
+         keep it behind real content and mark it aria-hidden. */
+      .mk-emphasis {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-emph-color: rgba(29, 29, 31, 0.07); /* dark scheme: rgba(245,245,247,0.08) */
+
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 260px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+        white-space: nowrap;
+        text-transform: uppercase;
+        color: var(--mk-emph-color);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-emphasis CSS, the markup
+         below (keep aria-hidden + data-layout-allow-overflow — the word is
+         decorative and usually wider than the canvas), and the helpers. -->
+    <div
+      id="mk-emph-root"
+      data-composition-id="mk-emphasis-type"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="mk-emphasis"
+        id="mk-emph-demo"
+        aria-hidden="true"
+        data-layout-allow-overflow
+        style="top: 400px; left: -40px"
+      >
+        Emphasis
+      </div>
+      <div
+        id="mk-emph-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkEmphasisIn(tl, "#mk-my-word", 1.0, { drift: -120, hold: 6 });
+        //   mkEmphasisOut(tl, "#mk-my-word", 7.5);
+        window.mkEmphasisIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var drift = opts.drift === undefined ? -100 : opts.drift;
+          var hold = opts.hold === undefined ? 5 : opts.hold;
+          gsap.set(target, { opacity: 0, x: 40 });
+          tl.to(target, { opacity: 1, duration: 1.0, ease: "power2.out" }, at);
+          tl.to(target, { x: 40 + drift, duration: hold, ease: "sine.inOut" }, at);
+        };
+        window.mkEmphasisOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.5, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkEmphasisIn(tl, "#mk-emph-demo", 0.3, { drift: -110, hold: 3.2 });
+        window.mkEmphasisOut(tl, "#mk-emph-demo", 3.4);
+        tl.set("#mk-emph-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-emphasis-type"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/mk-emphasis-type/registry-item.json b/registry/components/mk-emphasis-type/registry-item.json
new file mode 100644
index 0000000000..19626188d3
--- /dev/null
+++ b/registry/components/mk-emphasis-type/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-emphasis-type",
+  "type": "hyperframes:component",
+  "title": "Background Emphasis Type",
+  "description": "Oversized low-contrast background word drifting slowly behind the subject \u2014 typography as texture",
+  "tags": ["typography", "text-treatment", "minimal"],
+  "files": [
+    {
+      "path": "mk-emphasis-type.html",
+      "target": "compositions/components/mk-emphasis-type.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/mk-usage-arc/demo.html b/registry/components/mk-usage-arc/demo.html
new file mode 100644
index 0000000000..91572b8962
--- /dev/null
+++ b/registry/components/mk-usage-arc/demo.html
@@ -0,0 +1,162 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to mk-usage-arc.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists mk-usage-arc.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #f2f4f7;
+        overflow: hidden;
+      }
+      /* ---- mk-usage-arc ----------------------------------------------------
+         Hairline circular gauge: draw-on arc + centered value + tiny label.
+         The promo's "Usage" arc. Recolor via --mk-arc-color. */
+      .mk-arc {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-arc-color: var(--mk-accent);
+        --mk-hairline: 3px;
+
+        position: absolute;
+        width: 220px;
+        height: 220px;
+        pointer-events: none;
+      }
+      .mk-arc svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .mk-arc-track {
+        fill: none;
+        stroke: rgba(29, 29, 31, 0.1);
+        stroke-width: var(--mk-hairline);
+      }
+      .mk-arc-fill {
+        fill: none;
+        stroke: var(--mk-arc-color);
+        stroke-width: var(--mk-hairline);
+        stroke-linecap: round;
+      }
+      .mk-arc-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        font-family: var(--mk-font);
+      }
+      .mk-arc-num {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      .mk-arc-label {
+        font-weight: 500;
+        font-size: 20px;
+        color: var(--mk-ink);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-arc CSS, the markup below,
+         and the helpers into your host. r=92 with 220px box; the helper reads
+         the circle's radius, so resizing the box + r just works. -->
+    <div
+      id="mk-arc-root"
+      data-composition-id="mk-usage-arc"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
+        <svg viewBox="0 0 220 220">
+          <circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
+          <circle
+            class="mk-arc-fill"
+            cx="110"
+            cy="110"
+            r="92"
+            transform="rotate(-90 110 110)"
+          ></circle>
+        </svg>
+        <div class="mk-arc-center">
+          <span class="mk-arc-num">0%</span>
+          <span class="mk-arc-label">Usage</span>
+        </div>
+      </div>
+      <div
+        id="mk-arc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkArcIn(tl, "#mk-my-arc", 1.0, 0.76);  // draw to 76%, count the numeral
+        //   mkArcOut(tl, "#mk-my-arc", 8.5);
+        window.mkArcIn = function (tl, target, at, value) {
+          var el = document.querySelector(target);
+          var fill = el.querySelector(".mk-arc-fill");
+          var num = el.querySelector(".mk-arc-num");
+          var C = 2 * Math.PI * parseFloat(fill.getAttribute("r"));
+          gsap.set(el, { opacity: 0, y: 16 });
+          gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
+          tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
+          tl.to(
+            fill,
+            { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
+            at + 0.15,
+          );
+          var st = { v: 0 };
+          tl.to(
+            st,
+            {
+              v: value,
+              duration: 1.1,
+              ease: "power2.inOut",
+              onUpdate: function () {
+                num.textContent = Math.round(st.v * 100) + "%";
+              },
+            },
+            at + 0.15,
+          );
+        };
+        window.mkArcOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, y: -12, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkArcIn(tl, "#mk-arc-demo", 0.4, 0.76);
+        window.mkArcOut(tl, "#mk-arc-demo", 3.4);
+        tl.set("#mk-arc-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-usage-arc"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/mk-usage-arc/mk-usage-arc.html b/registry/components/mk-usage-arc/mk-usage-arc.html
new file mode 100644
index 0000000000..08f4a537ba
--- /dev/null
+++ b/registry/components/mk-usage-arc/mk-usage-arc.html
@@ -0,0 +1,159 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-usage-arc ----------------------------------------------------
+         Hairline circular gauge: draw-on arc + centered value + tiny label.
+         The promo's "Usage" arc. Recolor via --mk-arc-color. */
+      .mk-arc {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-arc-color: var(--mk-accent);
+        --mk-hairline: 3px;
+
+        position: absolute;
+        width: 220px;
+        height: 220px;
+        pointer-events: none;
+      }
+      .mk-arc svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .mk-arc-track {
+        fill: none;
+        stroke: rgba(29, 29, 31, 0.1);
+        stroke-width: var(--mk-hairline);
+      }
+      .mk-arc-fill {
+        fill: none;
+        stroke: var(--mk-arc-color);
+        stroke-width: var(--mk-hairline);
+        stroke-linecap: round;
+      }
+      .mk-arc-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        font-family: var(--mk-font);
+      }
+      .mk-arc-num {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      .mk-arc-label {
+        font-weight: 500;
+        font-size: 20px;
+        color: var(--mk-ink);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-arc CSS, the markup below,
+         and the helpers into your host. r=92 with 220px box; the helper reads
+         the circle's radius, so resizing the box + r just works. -->
+    <div
+      id="mk-arc-root"
+      data-composition-id="mk-usage-arc"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
+        <svg viewBox="0 0 220 220">
+          <circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
+          <circle
+            class="mk-arc-fill"
+            cx="110"
+            cy="110"
+            r="92"
+            transform="rotate(-90 110 110)"
+          ></circle>
+        </svg>
+        <div class="mk-arc-center">
+          <span class="mk-arc-num">0%</span>
+          <span class="mk-arc-label">Usage</span>
+        </div>
+      </div>
+      <div
+        id="mk-arc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkArcIn(tl, "#mk-my-arc", 1.0, 0.76);  // draw to 76%, count the numeral
+        //   mkArcOut(tl, "#mk-my-arc", 8.5);
+        window.mkArcIn = function (tl, target, at, value) {
+          var el = document.querySelector(target);
+          var fill = el.querySelector(".mk-arc-fill");
+          var num = el.querySelector(".mk-arc-num");
+          var C = 2 * Math.PI * parseFloat(fill.getAttribute("r"));
+          gsap.set(el, { opacity: 0, y: 16 });
+          gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
+          tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
+          tl.to(
+            fill,
+            { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" },
+            at + 0.15,
+          );
+          var st = { v: 0 };
+          tl.to(
+            st,
+            {
+              v: value,
+              duration: 1.1,
+              ease: "power2.inOut",
+              onUpdate: function () {
+                num.textContent = Math.round(st.v * 100) + "%";
+              },
+            },
+            at + 0.15,
+          );
+        };
+        window.mkArcOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, y: -12, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkArcIn(tl, "#mk-arc-demo", 0.4, 0.76);
+        window.mkArcOut(tl, "#mk-arc-demo", 3.4);
+        tl.set("#mk-arc-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-usage-arc"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/mk-usage-arc/registry-item.json b/registry/components/mk-usage-arc/registry-item.json
new file mode 100644
index 0000000000..5a73fc1fd5
--- /dev/null
+++ b/registry/components/mk-usage-arc/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-usage-arc",
+  "type": "hyperframes:component",
+  "title": "Hairline Arc Gauge",
+  "description": "Thin circular gauge that draws on while its percentage counts up; one helper call drives both",
+  "tags": ["data-viz", "gauge", "minimal"],
+  "files": [
+    {
+      "path": "mk-usage-arc.html",
+      "target": "compositions/components/mk-usage-arc.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/yt-camera-move/demo.html b/registry/components/yt-camera-move/demo.html
new file mode 100644
index 0000000000..d63a51e5a4
--- /dev/null
+++ b/registry/components/yt-camera-move/demo.html
@@ -0,0 +1,178 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to yt-camera-move.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists yt-camera-move.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #14161c;
+        overflow: hidden;
+      }
+      /* ---- yt-camera-move --------------------------------------------------
+         The creator-video punch-in as reusable GSAP helpers: dynamic
+         zoom + slide + 3D tilt/pan on any wrapper (a #video-wrap, a
+         sub-composition include, an image card). A talking-head recipe
+         is the default: cubic easing, ~11% zoom.
+
+         Optional: .yt-cm-defocus is an edge-blur overlay that pulses during
+         the move to sell the 3D feel — place it ABOVE the moving layer,
+         covering the same region. */
+      .yt-cm-defocus {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        backdrop-filter: blur(7px);
+        -webkit-backdrop-filter: blur(7px);
+        /* blur only the frame edges; center stays sharp */
+        -webkit-mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+        mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+      }
+      /* ---- self-preview stand-in "footage" (not part of the snippet) ---- */
+      #yt-cm-stage {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
+      }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
+      #yt-cm-stage .yt-cm-grid {
+        position: absolute;
+        inset: -60px;
+        background:
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
+      }
+      #yt-cm-stage .yt-cm-label {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 120px;
+        letter-spacing: -0.02em;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-cm-defocus CSS (if you want
+         the edge blur), add <div class="yt-cm-defocus" id="yt-my-defocus"></div>
+         as a sibling ABOVE your moving layer, and copy the helpers into your
+         host script. Then drive any wrapper:
+
+           ytCameraMove(tl, "#video-wrap", 5.0, { zoom: 0.11, slideY: -24 });
+           ytDefocusPulse(tl, "#yt-my-defocus", 5.0, 1.2);
+           ytCameraReset(tl, "#video-wrap", 9.0);
+    -->
+    <div
+      id="yt-cm-root"
+      data-composition-id="yt-camera-move"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-cm-stage">
+        <div class="yt-cm-grid" data-layout-allow-overflow></div>
+        <div class="yt-cm-label">FOOTAGE</div>
+      </div>
+      <div class="yt-cm-defocus" id="yt-cm-defocus"></div>
+      <div
+        id="yt-cm-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        // Punch-in / camera move on any wrapper. A talking-head base:
+        // zoom 0.11, cubic ease. tilt/pan are degrees (rotationX/rotationY,
+        // perspective is set for you); slideX/slideY in px; roll in degrees.
+        window.ytCameraMove = function (tl, target, at, opts) {
+          opts = opts || {};
+          var dur = opts.dur === undefined ? 1.2 : opts.dur;
+          gsap.set(target, {
+            transformPerspective: 1200,
+            transformOrigin: opts.origin || "50% 50%",
+          });
+          tl.to(
+            target,
+            {
+              scale: 1 + (opts.zoom === undefined ? 0.11 : opts.zoom),
+              x: opts.slideX || 0,
+              y: opts.slideY || 0,
+              rotationX: opts.tilt || 0,
+              rotationY: opts.pan || 0,
+              rotation: opts.roll || 0,
+              duration: dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Return to rest (same easing family).
+        window.ytCameraReset = function (tl, target, at, opts) {
+          opts = opts || {};
+          tl.to(
+            target,
+            {
+              scale: 1,
+              x: 0,
+              y: 0,
+              rotationX: 0,
+              rotationY: 0,
+              rotation: 0,
+              duration: opts.dur === undefined ? 1.2 : opts.dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Edge-defocus pulse synced to a move (overlay fades in then out).
+        window.ytDefocusPulse = function (tl, target, at, dur) {
+          dur = dur === undefined ? 1.2 : dur;
+          tl.to(target, { opacity: 1, duration: dur * 0.45, ease: "power2.out" }, at);
+          tl.to(target, { opacity: 0, duration: dur * 0.55, ease: "power2.in" }, at + dur * 0.45);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy):
+        // punch in with a slight tilt, hold, return.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCameraMove(tl, "#yt-cm-stage", 0.4, { zoom: 0.11, slideY: -26, tilt: 3, pan: -2 });
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 0.4, 1.2);
+        window.ytCameraReset(tl, "#yt-cm-stage", 2.5);
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 2.5, 1.2);
+        tl.set("#yt-cm-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-camera-move"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/yt-camera-move/registry-item.json b/registry/components/yt-camera-move/registry-item.json
new file mode 100644
index 0000000000..c31c313a61
--- /dev/null
+++ b/registry/components/yt-camera-move/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-camera-move",
+  "type": "hyperframes:component",
+  "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",
+  "tags": ["camera", "zoom", "effect", "creator"],
+  "files": [
+    {
+      "path": "yt-camera-move.html",
+      "target": "compositions/components/yt-camera-move.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/yt-camera-move/yt-camera-move.html b/registry/components/yt-camera-move/yt-camera-move.html
new file mode 100644
index 0000000000..6034ea6434
--- /dev/null
+++ b/registry/components/yt-camera-move/yt-camera-move.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-camera-move --------------------------------------------------
+         The creator-video punch-in as reusable GSAP helpers: dynamic
+         zoom + slide + 3D tilt/pan on any wrapper (a #video-wrap, a
+         sub-composition include, an image card). A talking-head recipe
+         is the default: cubic easing, ~11% zoom.
+
+         Optional: .yt-cm-defocus is an edge-blur overlay that pulses during
+         the move to sell the 3D feel — place it ABOVE the moving layer,
+         covering the same region. */
+      .yt-cm-defocus {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        backdrop-filter: blur(7px);
+        -webkit-backdrop-filter: blur(7px);
+        /* blur only the frame edges; center stays sharp */
+        -webkit-mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+        mask-image: radial-gradient(
+          ellipse 62% 58% at 50% 50%,
+          transparent 58%,
+          rgba(0, 0, 0, 0.85) 92%
+        );
+      }
+      /* ---- self-preview stand-in "footage" (not part of the snippet) ---- */
+      #yt-cm-stage {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
+      }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
+      #yt-cm-stage .yt-cm-grid {
+        position: absolute;
+        inset: -60px;
+        background:
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
+      }
+      #yt-cm-stage .yt-cm-label {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 120px;
+        letter-spacing: -0.02em;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-cm-defocus CSS (if you want
+         the edge blur), add <div class="yt-cm-defocus" id="yt-my-defocus"></div>
+         as a sibling ABOVE your moving layer, and copy the helpers into your
+         host script. Then drive any wrapper:
+
+           ytCameraMove(tl, "#video-wrap", 5.0, { zoom: 0.11, slideY: -24 });
+           ytDefocusPulse(tl, "#yt-my-defocus", 5.0, 1.2);
+           ytCameraReset(tl, "#video-wrap", 9.0);
+    -->
+    <div
+      id="yt-cm-root"
+      data-composition-id="yt-camera-move"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-cm-stage">
+        <div class="yt-cm-grid" data-layout-allow-overflow></div>
+        <div class="yt-cm-label">FOOTAGE</div>
+      </div>
+      <div class="yt-cm-defocus" id="yt-cm-defocus"></div>
+      <div
+        id="yt-cm-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        // Punch-in / camera move on any wrapper. A talking-head base:
+        // zoom 0.11, cubic ease. tilt/pan are degrees (rotationX/rotationY,
+        // perspective is set for you); slideX/slideY in px; roll in degrees.
+        window.ytCameraMove = function (tl, target, at, opts) {
+          opts = opts || {};
+          var dur = opts.dur === undefined ? 1.2 : opts.dur;
+          gsap.set(target, {
+            transformPerspective: 1200,
+            transformOrigin: opts.origin || "50% 50%",
+          });
+          tl.to(
+            target,
+            {
+              scale: 1 + (opts.zoom === undefined ? 0.11 : opts.zoom),
+              x: opts.slideX || 0,
+              y: opts.slideY || 0,
+              rotationX: opts.tilt || 0,
+              rotationY: opts.pan || 0,
+              rotation: opts.roll || 0,
+              duration: dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Return to rest (same easing family).
+        window.ytCameraReset = function (tl, target, at, opts) {
+          opts = opts || {};
+          tl.to(
+            target,
+            {
+              scale: 1,
+              x: 0,
+              y: 0,
+              rotationX: 0,
+              rotationY: 0,
+              rotation: 0,
+              duration: opts.dur === undefined ? 1.2 : opts.dur,
+              ease: opts.ease || "power2.inOut",
+            },
+            at,
+          );
+        };
+        // Edge-defocus pulse synced to a move (overlay fades in then out).
+        window.ytDefocusPulse = function (tl, target, at, dur) {
+          dur = dur === undefined ? 1.2 : dur;
+          tl.to(target, { opacity: 1, duration: dur * 0.45, ease: "power2.out" }, at);
+          tl.to(target, { opacity: 0, duration: dur * 0.55, ease: "power2.in" }, at + dur * 0.45);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy):
+        // punch in with a slight tilt, hold, return.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCameraMove(tl, "#yt-cm-stage", 0.4, { zoom: 0.11, slideY: -26, tilt: 3, pan: -2 });
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 0.4, 1.2);
+        window.ytCameraReset(tl, "#yt-cm-stage", 2.5);
+        window.ytDefocusPulse(tl, "#yt-cm-defocus", 2.5, 1.2);
+        tl.set("#yt-cm-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-camera-move"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/yt-circle-pointer/demo.html b/registry/components/yt-circle-pointer/demo.html
new file mode 100644
index 0000000000..0571fda655
--- /dev/null
+++ b/registry/components/yt-circle-pointer/demo.html
@@ -0,0 +1,171 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to yt-circle-pointer.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists yt-circle-pointer.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #14161c;
+        overflow: hidden;
+      }
+      /* ---- yt-circle-pointer -----------------------------------------------
+         Annotation tools: a hand-drawn-feel circle that draws on around a
+         target, and a countdown chip. Position instances via top/left with
+         explicit width/height. */
+      .yt-circle {
+        --yt-red: #e62e2e;
+        position: absolute;
+        pointer-events: none;
+      }
+      .yt-circle svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .yt-circle ellipse {
+        fill: none;
+        stroke: var(--yt-ptr-color, var(--yt-red));
+        stroke-width: 6;
+        stroke-linecap: round;
+        transform: rotate(-6deg);
+        transform-origin: 50% 50%;
+      }
+      .yt-count {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 16px 32px;
+        border-radius: 999px;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 40px;
+        background: var(--yt-count-bg, var(--yt-red));
+        color: #ffffff;
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+        opacity: 0;
+      }
+      .yt-count .num {
+        font-variant-numeric: tabular-nums;
+        min-width: 1.2em;
+        text-align: center;
+      }
+      /* self-preview scene */
+      #yt-ptr-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 60px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-circle / .yt-count CSS and
+         markup patterns, position over your target, then:
+
+           ytCircleOn(tl, "#yt-my-circle", 3.0);          // draws the ring
+           ytCircleOff(tl, "#yt-my-circle", 6.0);
+           ytCountIn(tl, "#yt-my-count", 2.0);
+           ytCountdown(tl, "#yt-my-count", 2.4, 5);       // 5 -> 0, pulsing each tick
+    -->
+    <div
+      id="yt-ptr-root"
+      data-composition-id="yt-circle-pointer"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-ptr-scene"><span>the thing</span></div>
+      <div
+        class="yt-circle"
+        id="yt-ptr-circle"
+        style="left: 760px; top: 440px; width: 420px; height: 210px"
+      >
+        <svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
+      </div>
+      <div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
+        <span class="num">5</span><span>sec</span>
+      </div>
+      <div
+        id="yt-ptr-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytCircleOn = function (tl, target, at, dur) {
+          var el = document.querySelector(target + " ellipse");
+          var len = el.getTotalLength();
+          gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            el,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.ytCircleOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+        window.ytCountIn = function (tl, target, at) {
+          gsap.set(target, { y: -18, scale: 0.9 });
+          tl.to(target, { opacity: 1, y: 0, scale: 1, duration: 0.45, ease: "back.out(1.5)" }, at);
+        };
+        window.ytCountdown = function (tl, target, at, from) {
+          var num = document.querySelector(target + " .num");
+          var st = { v: from };
+          tl.to(
+            st,
+            {
+              v: 0,
+              duration: from,
+              ease: "none",
+              onUpdate: function () {
+                num.textContent = String(Math.ceil(st.v));
+              },
+            },
+            at,
+          );
+          for (var i = 1; i <= from; i++) {
+            tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
+            tl.to(target, { scale: 1, duration: 0.14, ease: "sine.in" }, at + i);
+          }
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCountIn(tl, "#yt-ptr-count", 0.3);
+        window.ytCountdown(tl, "#yt-ptr-count", 0.7, 3);
+        window.ytCircleOn(tl, "#yt-ptr-circle", 1.0);
+        window.ytCircleOff(tl, "#yt-ptr-circle", 4.2);
+        tl.to("#yt-ptr-count", { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.3);
+        tl.set("#yt-ptr-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-circle-pointer"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/yt-circle-pointer/registry-item.json b/registry/components/yt-circle-pointer/registry-item.json
new file mode 100644
index 0000000000..0383945edf
--- /dev/null
+++ b/registry/components/yt-circle-pointer/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-circle-pointer",
+  "type": "hyperframes:component",
+  "title": "Pointer Circle + Countdown",
+  "description": "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick",
+  "tags": ["annotation", "countdown", "overlay"],
+  "files": [
+    {
+      "path": "yt-circle-pointer.html",
+      "target": "compositions/components/yt-circle-pointer.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/yt-circle-pointer/yt-circle-pointer.html b/registry/components/yt-circle-pointer/yt-circle-pointer.html
new file mode 100644
index 0000000000..62a2f260ad
--- /dev/null
+++ b/registry/components/yt-circle-pointer/yt-circle-pointer.html
@@ -0,0 +1,168 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-circle-pointer -----------------------------------------------
+         Annotation tools: a hand-drawn-feel circle that draws on around a
+         target, and a countdown chip. Position instances via top/left with
+         explicit width/height. */
+      .yt-circle {
+        --yt-red: #e62e2e;
+        position: absolute;
+        pointer-events: none;
+      }
+      .yt-circle svg {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+      }
+      .yt-circle ellipse {
+        fill: none;
+        stroke: var(--yt-ptr-color, var(--yt-red));
+        stroke-width: 6;
+        stroke-linecap: round;
+        transform: rotate(-6deg);
+        transform-origin: 50% 50%;
+      }
+      .yt-count {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+        padding: 16px 32px;
+        border-radius: 999px;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 40px;
+        background: var(--yt-count-bg, var(--yt-red));
+        color: #ffffff;
+        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
+        pointer-events: none;
+        opacity: 0;
+      }
+      .yt-count .num {
+        font-variant-numeric: tabular-nums;
+        min-width: 1.2em;
+        text-align: center;
+      }
+      /* self-preview scene */
+      #yt-ptr-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 60px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-circle / .yt-count CSS and
+         markup patterns, position over your target, then:
+
+           ytCircleOn(tl, "#yt-my-circle", 3.0);          // draws the ring
+           ytCircleOff(tl, "#yt-my-circle", 6.0);
+           ytCountIn(tl, "#yt-my-count", 2.0);
+           ytCountdown(tl, "#yt-my-count", 2.4, 5);       // 5 -> 0, pulsing each tick
+    -->
+    <div
+      id="yt-ptr-root"
+      data-composition-id="yt-circle-pointer"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-ptr-scene"><span>the thing</span></div>
+      <div
+        class="yt-circle"
+        id="yt-ptr-circle"
+        style="left: 760px; top: 440px; width: 420px; height: 210px"
+      >
+        <svg viewBox="0 0 420 210"><ellipse cx="210" cy="105" rx="196" ry="88"></ellipse></svg>
+      </div>
+      <div class="yt-count" id="yt-ptr-count" style="right: 140px; top: 110px">
+        <span class="num">5</span><span>sec</span>
+      </div>
+      <div
+        id="yt-ptr-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytCircleOn = function (tl, target, at, dur) {
+          var el = document.querySelector(target + " ellipse");
+          var len = el.getTotalLength();
+          gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(
+            el,
+            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: "power2.inOut" },
+            at,
+          );
+        };
+        window.ytCircleOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.35, ease: "power2.in" }, at);
+        };
+        window.ytCountIn = function (tl, target, at) {
+          gsap.set(target, { y: -18, scale: 0.9 });
+          tl.to(target, { opacity: 1, y: 0, scale: 1, duration: 0.45, ease: "back.out(1.5)" }, at);
+        };
+        window.ytCountdown = function (tl, target, at, from) {
+          var num = document.querySelector(target + " .num");
+          var st = { v: from };
+          tl.to(
+            st,
+            {
+              v: 0,
+              duration: from,
+              ease: "none",
+              onUpdate: function () {
+                num.textContent = String(Math.ceil(st.v));
+              },
+            },
+            at,
+          );
+          for (var i = 1; i <= from; i++) {
+            tl.to(target, { scale: 1.07, duration: 0.09, ease: "sine.out" }, at + i - 0.09);
+            tl.to(target, { scale: 1, duration: 0.14, ease: "sine.in" }, at + i);
+          }
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        window.ytCountIn(tl, "#yt-ptr-count", 0.3);
+        window.ytCountdown(tl, "#yt-ptr-count", 0.7, 3);
+        window.ytCircleOn(tl, "#yt-ptr-circle", 1.0);
+        window.ytCircleOff(tl, "#yt-ptr-circle", 4.2);
+        tl.to("#yt-ptr-count", { opacity: 0, duration: 0.3, ease: "power2.in" }, 4.3);
+        tl.set("#yt-ptr-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-circle-pointer"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/yt-feather-highlight/demo.html b/registry/components/yt-feather-highlight/demo.html
new file mode 100644
index 0000000000..a24d435b41
--- /dev/null
+++ b/registry/components/yt-feather-highlight/demo.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to yt-feather-highlight.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists yt-feather-highlight.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #14161c;
+        overflow: hidden;
+      }
+      /* ---- yt-feather-highlight --------------------------------------------
+         Spotlight part of the frame: a dim layer with a feathered ellipse
+         hole. The hole's position/size are CSS variables, so the helpers
+         tween them directly (GSAP animates CSS vars). */
+      .yt-hl {
+        --yt-hl-x: 50%;
+        --yt-hl-y: 50%;
+        --yt-hl-rx: 22%;
+        --yt-hl-ry: 26%;
+        --yt-hl-dim: 0.55;
+
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background: rgba(6, 8, 12, var(--yt-hl-dim));
+        -webkit-mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+        mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+      }
+      /* self-preview stand-in scene (not part of the snippet) */
+      #yt-hl-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #2a7fff 0%, #7d5cff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 64px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+      #yt-hl-scene .box {
+        width: 420px;
+        height: 300px;
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.16);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-hl CSS and drop
+         <div class="yt-hl" id="yt-my-hl"></div> ABOVE the content to spotlight
+         (same region). Then:
+
+           ytHighlightIn(tl, "#yt-my-hl", 3.0, { x: "28%", y: "50%", rx: "20%", ry: "30%" });
+           ytHighlightTo(tl, "#yt-my-hl", 5.0, { x: "72%" }, 0.8);   // glide to the next target
+           ytHighlightOut(tl, "#yt-my-hl", 8.0);
+    -->
+    <div
+      id="yt-hl-root"
+      data-composition-id="yt-feather-highlight"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-hl-scene">
+        <div class="box">A</div>
+        <div class="box">B</div>
+      </div>
+      <div class="yt-hl" id="yt-hl-demo"></div>
+      <div
+        id="yt-hl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytHighlightIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var vars = { opacity: 1, duration: 0.5, ease: "power2.out" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          gsap.set(target, {
+            "--yt-hl-x": opts.x !== undefined ? opts.x : "50%",
+            "--yt-hl-y": opts.y !== undefined ? opts.y : "50%",
+            "--yt-hl-rx": opts.rx !== undefined ? opts.rx : "22%",
+            "--yt-hl-ry": opts.ry !== undefined ? opts.ry : "26%",
+          });
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytHighlightTo = function (tl, target, at, opts, dur) {
+          opts = opts || {};
+          var vars = { duration: dur === undefined ? 0.8 : dur, ease: "power2.inOut" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          tl.to(target, vars, at);
+        };
+        window.ytHighlightOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline: spotlight box A, glide to box B, release.
+        var tl = gsap.timeline({ paused: true });
+        window.ytHighlightIn(tl, "#yt-hl-demo", 0.5, { x: "26%", y: "50%", rx: "17%", ry: "24%" });
+        window.ytHighlightTo(tl, "#yt-hl-demo", 2.2, { x: "74%" }, 0.9);
+        window.ytHighlightOut(tl, "#yt-hl-demo", 4.2);
+        tl.set("#yt-hl-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-feather-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/yt-feather-highlight/registry-item.json b/registry/components/yt-feather-highlight/registry-item.json
new file mode 100644
index 0000000000..cb3137c804
--- /dev/null
+++ b/registry/components/yt-feather-highlight/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-feather-highlight",
+  "type": "hyperframes:component",
+  "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",
+  "tags": ["highlight", "spotlight", "effect", "overlay"],
+  "files": [
+    {
+      "path": "yt-feather-highlight.html",
+      "target": "compositions/components/yt-feather-highlight.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/yt-feather-highlight/yt-feather-highlight.html b/registry/components/yt-feather-highlight/yt-feather-highlight.html
new file mode 100644
index 0000000000..43701dc807
--- /dev/null
+++ b/registry/components/yt-feather-highlight/yt-feather-highlight.html
@@ -0,0 +1,145 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-feather-highlight --------------------------------------------
+         Spotlight part of the frame: a dim layer with a feathered ellipse
+         hole. The hole's position/size are CSS variables, so the helpers
+         tween them directly (GSAP animates CSS vars). */
+      .yt-hl {
+        --yt-hl-x: 50%;
+        --yt-hl-y: 50%;
+        --yt-hl-rx: 22%;
+        --yt-hl-ry: 26%;
+        --yt-hl-dim: 0.55;
+
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background: rgba(6, 8, 12, var(--yt-hl-dim));
+        -webkit-mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+        mask-image: radial-gradient(
+          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),
+          transparent 0%,
+          transparent 52%,
+          black 88%
+        );
+      }
+      /* self-preview stand-in scene (not part of the snippet) */
+      #yt-hl-scene {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(135deg, #2a7fff 0%, #7d5cff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 64px;
+        color: rgba(255, 255, 255, 0.92);
+      }
+      #yt-hl-scene .box {
+        width: 420px;
+        height: 300px;
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.16);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .yt-hl CSS and drop
+         <div class="yt-hl" id="yt-my-hl"></div> ABOVE the content to spotlight
+         (same region). Then:
+
+           ytHighlightIn(tl, "#yt-my-hl", 3.0, { x: "28%", y: "50%", rx: "20%", ry: "30%" });
+           ytHighlightTo(tl, "#yt-my-hl", 5.0, { x: "72%" }, 0.8);   // glide to the next target
+           ytHighlightOut(tl, "#yt-my-hl", 8.0);
+    -->
+    <div
+      id="yt-hl-root"
+      data-composition-id="yt-feather-highlight"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-hl-scene">
+        <div class="box">A</div>
+        <div class="box">B</div>
+      </div>
+      <div class="yt-hl" id="yt-hl-demo"></div>
+      <div
+        id="yt-hl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytHighlightIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var vars = { opacity: 1, duration: 0.5, ease: "power2.out" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          gsap.set(target, {
+            "--yt-hl-x": opts.x !== undefined ? opts.x : "50%",
+            "--yt-hl-y": opts.y !== undefined ? opts.y : "50%",
+            "--yt-hl-rx": opts.rx !== undefined ? opts.rx : "22%",
+            "--yt-hl-ry": opts.ry !== undefined ? opts.ry : "26%",
+          });
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytHighlightTo = function (tl, target, at, opts, dur) {
+          opts = opts || {};
+          var vars = { duration: dur === undefined ? 0.8 : dur, ease: "power2.inOut" };
+          if (opts.x !== undefined) vars["--yt-hl-x"] = opts.x;
+          if (opts.y !== undefined) vars["--yt-hl-y"] = opts.y;
+          if (opts.rx !== undefined) vars["--yt-hl-rx"] = opts.rx;
+          if (opts.ry !== undefined) vars["--yt-hl-ry"] = opts.ry;
+          tl.to(target, vars, at);
+        };
+        window.ytHighlightOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline: spotlight box A, glide to box B, release.
+        var tl = gsap.timeline({ paused: true });
+        window.ytHighlightIn(tl, "#yt-hl-demo", 0.5, { x: "26%", y: "50%", rx: "17%", ry: "24%" });
+        window.ytHighlightTo(tl, "#yt-hl-demo", 2.2, { x: "74%" }, 0.9);
+        window.ytHighlightOut(tl, "#yt-hl-demo", 4.2);
+        tl.set("#yt-hl-root", { visibility: "hidden" }, 4.98);
+        window.__timelines["yt-feather-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/yt-screen-warp/demo.html b/registry/components/yt-screen-warp/demo.html
new file mode 100644
index 0000000000..8fff71cf48
--- /dev/null
+++ b/registry/components/yt-screen-warp/demo.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<!-- Demo plate for the catalog preview. Identical to yt-screen-warp.html except the
+     root background, which is opaque here so the transparent overlay reads.
+     Not installed by `hyperframes add` - registry-item.json lists yt-screen-warp.html only. -->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #14161c;
+        overflow: hidden;
+      }
+      /* ---- yt-screen-warp ---------------------------------------------------
+         Make footage read as a physical display: add .yt-screen-warp3d to the
+         media WRAPPER (subtle perspective), and place .yt-screen-fx overlay
+         inside it (pixel grid + scanlines + vignette + sheen). */
+      .yt-screen-warp3d {
+        transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.6deg);
+      }
+      .yt-screen-fx {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background:
+          /* sheen */
+          linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 30%),
+          /* scanlines */
+          repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
+          /* pixel grid */
+          repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px);
+        box-shadow:
+          inset 0 0 90px rgba(0, 0, 0, 0.4),
+          inset 0 0 8px rgba(0, 0, 0, 0.5);
+      }
+      /* self-preview stand-in */
+      #yt-sw-wrap {
+        position: absolute;
+        left: 360px;
+        top: 190px;
+        width: 1200px;
+        height: 700px;
+        border-radius: 18px;
+        overflow: hidden;
+      }
+      #yt-sw-fill {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(150deg, #ff8fb8 0%, #7d5cff 60%, #2a7fff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 92px;
+        color: rgba(255, 255, 255, 0.93);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the two CSS classes; add
+         class="yt-screen-warp3d" to your media wrapper and
+         <div class="yt-screen-fx" id="yt-my-fx"></div> as its LAST child. Then:
+
+           ytScreenOn(tl, "#yt-my-fx", 2.0);
+           ytScreenOff(tl, "#yt-my-fx", 8.0);
+    -->
+    <div
+      id="yt-sw-root"
+      data-composition-id="yt-screen-warp"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-sw-wrap" class="yt-screen-warp3d">
+        <div id="yt-sw-fill">on screen</div>
+        <div class="yt-screen-fx" id="yt-sw-fx"></div>
+      </div>
+      <div
+        id="yt-sw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytScreenOn = function (tl, target, at) {
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytScreenOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        gsap.set("#yt-sw-wrap", { opacity: 0, scale: 0.96 });
+        tl.to("#yt-sw-wrap", { opacity: 1, scale: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        window.ytScreenOn(tl, "#yt-sw-fx", 0.8);
+        window.ytScreenOff(tl, "#yt-sw-fx", 3.1);
+        tl.to("#yt-sw-wrap", { opacity: 0, duration: 0.35, ease: "power2.in" }, 3.5);
+        tl.set("#yt-sw-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-screen-warp"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/yt-screen-warp/registry-item.json b/registry/components/yt-screen-warp/registry-item.json
new file mode 100644
index 0000000000..66b8aa600c
--- /dev/null
+++ b/registry/components/yt-screen-warp/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-screen-warp",
+  "type": "hyperframes:component",
+  "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",
+  "tags": ["effect", "overlay", "texture"],
+  "files": [
+    {
+      "path": "yt-screen-warp.html",
+      "target": "compositions/components/yt-screen-warp.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/yt-screen-warp/yt-screen-warp.html b/registry/components/yt-screen-warp/yt-screen-warp.html
new file mode 100644
index 0000000000..1c362a300a
--- /dev/null
+++ b/registry/components/yt-screen-warp/yt-screen-warp.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- yt-screen-warp ---------------------------------------------------
+         Make footage read as a physical display: add .yt-screen-warp3d to the
+         media WRAPPER (subtle perspective), and place .yt-screen-fx overlay
+         inside it (pixel grid + scanlines + vignette + sheen). */
+      .yt-screen-warp3d {
+        transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.6deg);
+      }
+      .yt-screen-fx {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0;
+        background:
+          /* sheen */
+          linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 30%),
+          /* scanlines */
+          repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),
+          /* pixel grid */
+          repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px);
+        box-shadow:
+          inset 0 0 90px rgba(0, 0, 0, 0.4),
+          inset 0 0 8px rgba(0, 0, 0, 0.5);
+      }
+      /* self-preview stand-in */
+      #yt-sw-wrap {
+        position: absolute;
+        left: 360px;
+        top: 190px;
+        width: 1200px;
+        height: 700px;
+        border-radius: 18px;
+        overflow: hidden;
+      }
+      #yt-sw-fill {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(150deg, #ff8fb8 0%, #7d5cff 60%, #2a7fff 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: "Inter", ui-sans-serif, sans-serif;
+        font-weight: 700;
+        font-size: 92px;
+        color: rgba(255, 255, 255, 0.93);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the two CSS classes; add
+         class="yt-screen-warp3d" to your media wrapper and
+         <div class="yt-screen-fx" id="yt-my-fx"></div> as its LAST child. Then:
+
+           ytScreenOn(tl, "#yt-my-fx", 2.0);
+           ytScreenOff(tl, "#yt-my-fx", 8.0);
+    -->
+    <div
+      id="yt-sw-root"
+      data-composition-id="yt-screen-warp"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="yt-sw-wrap" class="yt-screen-warp3d">
+        <div id="yt-sw-fill">on screen</div>
+        <div class="yt-screen-fx" id="yt-sw-fx"></div>
+      </div>
+      <div
+        id="yt-sw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script ----
+        window.ytScreenOn = function (tl, target, at) {
+          tl.to(target, { opacity: 1, duration: 0.5, ease: "power2.out" }, at);
+        };
+        window.ytScreenOff = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.4, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline.
+        var tl = gsap.timeline({ paused: true });
+        gsap.set("#yt-sw-wrap", { opacity: 0, scale: 0.96 });
+        tl.to("#yt-sw-wrap", { opacity: 1, scale: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        window.ytScreenOn(tl, "#yt-sw-fx", 0.8);
+        window.ytScreenOff(tl, "#yt-sw-fx", 3.1);
+        tl.to("#yt-sw-wrap", { opacity: 0, duration: 0.35, ease: "power2.in" }, 3.5);
+        tl.set("#yt-sw-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["yt-screen-warp"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/registry.json b/registry/registry.json
index 19d8d68ae7..bff47f2948 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -579,6 +579,10 @@
       "name": "vfx-liquid-glass",
       "type": "hyperframes:block"
     },
+    {
+      "name": "mk-background",
+      "type": "hyperframes:block"
+    },
     {
       "name": "parallax-zoom",
       "type": "hyperframes:component"
@@ -586,6 +590,122 @@
     {
       "name": "parallax-unzoom",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "mk-specs-list",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "mk-callout-highlight",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "mk-placeholder-grid",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "mk-clone-wall-transition",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "mk-progress-stat",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "mk-line-graph",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "mk-usage-arc",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "mk-emphasis-type",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "yt-lcd-background",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "yt-comment-card",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "yt-prism-title",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "yt-logo-intro",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "yt-vertical-fill",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "yt-camera-move",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "yt-feather-highlight",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "yt-circle-pointer",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "yt-screen-warp",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-text-cloud",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "hw-title",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "hw-pipeline",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "hw-path-text",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "hw-frame",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "hw-scribble-transition",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "hw-boil",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-arrow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-callout-circle",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-box-label",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hw-underline",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "beat-freeze-cut",
+      "type": "hyperframes:block"
     }
   ]
 }