diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
new file mode 100644
index 0000000000..0c4e8a60ce
--- /dev/null
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -0,0 +1,44 @@
+---
+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 |
+
+## 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..bb6119d0d7
--- /dev/null
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -0,0 +1,44 @@
+---
+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`
+
+<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 |
+
+## 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..79be56e88d
--- /dev/null
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -0,0 +1,44 @@
+---
+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`
+
+<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 |
+
+## 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..a57ec19b24
--- /dev/null
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -0,0 +1,44 @@
+---
+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 |
+
+## 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..cca3fb7640
--- /dev/null
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -0,0 +1,44 @@
+---
+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`
+
+<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 |
+
+## 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/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
new file mode 100644
index 0000000000..62cb016449
--- /dev/null
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -0,0 +1,38 @@
+---
+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 |
+
+## Usage
+
+Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
new file mode 100644
index 0000000000..34710f90fc
--- /dev/null
+++ b/docs/catalog/components/hw-boil.mdx
@@ -0,0 +1,38 @@
+---
+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 |
+
+## Usage
+
+Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
new file mode 100644
index 0000000000..59afb61e37
--- /dev/null
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -0,0 +1,38 @@
+---
+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 |
+
+## Usage
+
+Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
new file mode 100644
index 0000000000..8f075c56cc
--- /dev/null
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -0,0 +1,38 @@
+---
+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 |
+
+## Usage
+
+Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
new file mode 100644
index 0000000000..739d375fa1
--- /dev/null
+++ b/docs/catalog/components/hw-underline.mdx
@@ -0,0 +1,38 @@
+---
+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 |
+
+## Usage
+
+Read the installed file and copy its CSS, markup pattern, and helper functions into your host composition — the parent timeline owns all timing. The file's header comment documents the wiring calls.
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..37d035c5f0
--- /dev/null
+++ b/registry/blocks/hw-frame/hw-frame.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-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..fc35b3a694
--- /dev/null
+++ b/registry/blocks/hw-frame/registry-item.json
@@ -0,0 +1,29 @@
+{
+  "$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/hw-path-text.html b/registry/blocks/hw-path-text/hw-path-text.html
new file mode 100644
index 0000000000..713a1812d9
--- /dev/null
+++ b/registry/blocks/hw-path-text/hw-path-text.html
@@ -0,0 +1,188 @@
+<!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;
+      }
+      #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..cfff0249a5
--- /dev/null
+++ b/registry/blocks/hw-path-text/registry-item.json
@@ -0,0 +1,29 @@
+{
+  "$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"
+  ],
+  "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/hw-pipeline.html b/registry/blocks/hw-pipeline/hw-pipeline.html
new file mode 100644
index 0000000000..9fa69f470b
--- /dev/null
+++ b/registry/blocks/hw-pipeline/hw-pipeline.html
@@ -0,0 +1,268 @@
+<!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;
+        --hw-accent: #6d6dff;
+
+        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);
+            c.setAttribute(
+              "d",
+              "M " + (cx + 10) + " " + cy +
+                " Q " + (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) + " " + (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
+                " " + (ex - 10) + " " + ey +
+                " M " + (ex - 10) + " " + ey + " l -30 -14 M " + (ex - 10) + " " + ey + " l -26 18"
+            );
+            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..e33b1ae110
--- /dev/null
+++ b/registry/blocks/hw-pipeline/registry-item.json
@@ -0,0 +1,29 @@
+{
+  "$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"
+  ],
+  "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..2e7c6983c3
--- /dev/null
+++ b/registry/blocks/hw-scribble-transition/hw-scribble-transition.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;
+      }
+      #hw-st-root {
+        --hw-accent: #6d6dff;
+
+        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 purple
+          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..d996159e1c
--- /dev/null
+++ b/registry/blocks/hw-scribble-transition/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$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..89acf8a6ef
--- /dev/null
+++ b/registry/blocks/hw-text-cloud/hw-text-cloud.html
@@ -0,0 +1,260 @@
+<!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..508ab63491
--- /dev/null
+++ b/registry/blocks/hw-text-cloud/registry-item.json
@@ -0,0 +1,29 @@
+{
+  "$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/hw-title.html b/registry/blocks/hw-title/hw-title.html
new file mode 100644
index 0000000000..fe905c7335
--- /dev/null
+++ b/registry/blocks/hw-title/hw-title.html
@@ -0,0 +1,243 @@
+<!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..b2ab3cf7df
--- /dev/null
+++ b/registry/blocks/hw-title/registry-item.json
@@ -0,0 +1,29 @@
+{
+  "$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"
+  ],
+  "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/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/hw-arrow.html b/registry/components/hw-arrow/hw-arrow.html
new file mode 100644
index 0000000000..bd6439740a
--- /dev/null
+++ b/registry/components/hw-arrow/hw-arrow.html
@@ -0,0 +1,182 @@
+<!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..394672670a
--- /dev/null
+++ b/registry/components/hw-arrow/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$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/hw-boil.html b/registry/components/hw-boil/hw-boil.html
new file mode 100644
index 0000000000..c0fbc67179
--- /dev/null
+++ b/registry/components/hw-boil/hw-boil.html
@@ -0,0 +1,215 @@
+<!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..2714696ecc
--- /dev/null
+++ b/registry/components/hw-boil/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$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/hw-box-label.html b/registry/components/hw-box-label/hw-box-label.html
new file mode 100644
index 0000000000..fa15655462
--- /dev/null
+++ b/registry/components/hw-box-label/hw-box-label.html
@@ -0,0 +1,195 @@
+<!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..634396e480
--- /dev/null
+++ b/registry/components/hw-box-label/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$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/hw-callout-circle.html b/registry/components/hw-callout-circle/hw-callout-circle.html
new file mode 100644
index 0000000000..ece389cde7
--- /dev/null
+++ b/registry/components/hw-callout-circle/hw-callout-circle.html
@@ -0,0 +1,274 @@
+<!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 {
+        stroke: var(--hw-co-accent, var(--hw-accent, #6d6dff));
+        stroke-width: 4;
+        opacity: 0.7;
+      }
+      .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 {
+            var d = "",
+              rows = 6;
+            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..374b31ba20
--- /dev/null
+++ b/registry/components/hw-callout-circle/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$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/hw-underline.html b/registry/components/hw-underline/hw-underline.html
new file mode 100644
index 0000000000..2ac7374d2f
--- /dev/null
+++ b/registry/components/hw-underline/hw-underline.html
@@ -0,0 +1,200 @@
+<!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..c6c7c8b059
--- /dev/null
+++ b/registry/components/hw-underline/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$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/registry.json b/registry/registry.json
index 5513973ee9..0ba42d2256 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -563,6 +563,30 @@
       "name": "vfx-liquid-glass",
       "type": "hyperframes:block"
     },
+    {
+      "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": "parallax-zoom",
       "type": "hyperframes:component"
@@ -570,6 +594,26 @@
     {
       "name": "parallax-unzoom",
       "type": "hyperframes:component"
+    },
+    {
+      "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"
     }
   ]
 }