From 95125834e8b3bd810e9f16eb65f85455887384ec Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:29 -0400
Subject: [PATCH 01/11] =?UTF-8?q?feat(registry):=20add=20mk-pill-callout?=
 =?UTF-8?q?=20=E2=80=94=20capsule=20callout=20chip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/components/mk-pill-callout.mdx   |  38 ++++++
 .../mk-pill-callout/mk-pill-callout.html      | 123 ++++++++++++++++++
 .../mk-pill-callout/registry-item.json        |  20 +++
 registry/registry.json                        |   4 +
 4 files changed, 185 insertions(+)
 create mode 100644 docs/catalog/components/mk-pill-callout.mdx
 create mode 100644 registry/components/mk-pill-callout/mk-pill-callout.html
 create mode 100644 registry/components/mk-pill-callout/registry-item.json
diff --git a/docs/catalog/components/mk-pill-callout.mdx b/docs/catalog/components/mk-pill-callout.mdx
new file mode 100644
index 0000000000..2d5881ce5e
--- /dev/null
+++ b/docs/catalog/components/mk-pill-callout.mdx
@@ -0,0 +1,38 @@
+---
+title: "Capsule Callout Chip"
+description: "Rounded capsule chip for handles, tags, and URLs with solid, paper, and frosted-glass variants; slide in/out helpers for the host timeline"
+---
+
+# Capsule Callout Chip
+
+Rounded capsule chip for handles, tags, and URLs with solid, paper, and frosted-glass variants; slide in/out helpers for the host timeline
+
+`callout` `social` `minimal` `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/mk-pill-callout.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-pill-callout.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-pill-callout
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-pill-callout.html` | `compositions/components/mk-pill-callout.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/components/mk-pill-callout/mk-pill-callout.html b/registry/components/mk-pill-callout/mk-pill-callout.html
new file mode 100644
index 0000000000..84f970e878
--- /dev/null
+++ b/registry/components/mk-pill-callout/mk-pill-callout.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-pill-callout ----------------------------------------------
+         Capsule chip in a minimal presentation style: @handles, tags, URLs, CTAs.
+         Variants: --accent (iOS-blue fill), --paper (white card + shadow),
+         --frost (frosted glass over footage/gradient).
+         Tokens fall back to the mk family defaults; override in the host. */
+      .mk-pill {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-paper: #ffffff;
+        --mk-accent: #0071e3;
+        --mk-radius-pill: 999px;
+        --mk-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
+
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 16px;
+        padding: 22px 44px;
+        border-radius: var(--mk-radius-pill);
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 40px;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        pointer-events: none;
+      }
+      .mk-pill--accent {
+        background: var(--mk-accent);
+        color: #ffffff;
+      }
+      .mk-pill--paper {
+        background: var(--mk-paper);
+        color: var(--mk-ink);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-pill--frost {
+        background: rgba(255, 255, 255, 0.42);
+        color: var(--mk-ink);
+        backdrop-filter: blur(24px) saturate(1.4);
+        -webkit-backdrop-filter: blur(24px) saturate(1.4);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-pill-dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: currentColor;
+        opacity: 0.9;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy only the .mk-pill CSS above, the
+         .mk-pill markup below, and the mkPillIn/mkPillOut helpers into your
+         host composition — position instances via top/right/bottom/left and
+         add class="clip" + data-start/data-duration/data-track-index when the
+         host should window their visibility. -->
+    <div
+      id="mk-pill-root"
+      data-composition-id="mk-pill-callout"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="mk-pill mk-pill--accent" id="mk-pill-demo" style="top: 120px; right: 140px">
+        <span class="mk-pill-dot"></span><span>@hyperframes</span>
+      </div>
+      <div
+        id="mk-pill-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 (before your timeline
+        // code), then call them on your paused host timeline:
+        //
+        //   mkPillIn(tl, "#mk-my-pill", 0.8);   // slide+fade entrance
+        //   mkPillOut(tl, "#mk-my-pill", 9.2);  // fade exit
+        //
+        window.mkPillIn = function (tl, target, at) {
+          gsap.set(target, { opacity: 0, y: 24, scale: 0.96 });
+          tl.to(target, { opacity: 1, y: 0, scale: 1, duration: 0.6, ease: "power3.out" }, at);
+        };
+        window.mkPillOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, y: -16, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkPillIn(tl, "#mk-pill-demo", 0.4);
+        window.mkPillOut(tl, "#mk-pill-demo", 3.4);
+        tl.set("#mk-pill-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-pill-callout"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/mk-pill-callout/registry-item.json b/registry/components/mk-pill-callout/registry-item.json
new file mode 100644
index 0000000000..f841aa2845
--- /dev/null
+++ b/registry/components/mk-pill-callout/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-pill-callout",
+  "type": "hyperframes:component",
+  "title": "Capsule Callout Chip",
+  "description": "Rounded capsule chip for handles, tags, and URLs with solid, paper, and frosted-glass variants; slide in/out helpers for the host timeline",
+  "tags": [
+    "callout",
+    "social",
+    "minimal",
+    "overlay"
+  ],
+  "files": [
+    {
+      "path": "mk-pill-callout.html",
+      "target": "compositions/components/mk-pill-callout.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 5513973ee9..d8f58336c1 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -570,6 +570,10 @@
     {
       "name": "parallax-unzoom",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "mk-pill-callout",
+      "type": "hyperframes:component"
     }
   ]
 }

From 3e4a4042e550e176689233bc33c6db631c5daad5 Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:29 -0400
Subject: [PATCH 02/11] =?UTF-8?q?feat(registry):=20add=20mk-specs-list=20?=
 =?UTF-8?q?=E2=80=94=20specs=20checklist?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/blocks/mk-specs-list.mdx         |  44 ++++
 .../blocks/mk-specs-list/mk-specs-list.html   | 222 ++++++++++++++++++
 .../blocks/mk-specs-list/registry-item.json   |  25 ++
 registry/registry.json                        |   4 +
 4 files changed, 295 insertions(+)
 create mode 100644 docs/catalog/blocks/mk-specs-list.mdx
 create mode 100644 registry/blocks/mk-specs-list/mk-specs-list.html
 create mode 100644 registry/blocks/mk-specs-list/registry-item.json

diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
new file mode 100644
index 0000000000..f6c64bc37e
--- /dev/null
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -0,0 +1,44 @@
+---
+title: "Specs Checklist"
+description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
+---
+
+# Specs Checklist
+
+Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes
+
+`data-viz` `list` `minimal` `professional`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-specs-list
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-specs-list.html` | `compositions/mk-specs-list.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="mk-specs-list" data-composition-src="compositions/mk-specs-list.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/registry/blocks/mk-specs-list/mk-specs-list.html b/registry/blocks/mk-specs-list/mk-specs-list.html
new file mode 100644
index 0000000000..6729adbbd2
--- /dev/null
+++ b/registry/blocks/mk-specs-list/mk-specs-list.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-sl-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-dim-dark: #a1a1a6;
+        --mk-accent: #0071e3;
+        --mk-accent-dark: #7d5cff;
+        --mk-hairline: 2px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-sl-scrim {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 62%);
+        opacity: 0;
+      }
+      #mk-sl-col {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+      }
+      .mk-sl-row {
+        font-family: var(--mk-font);
+        line-height: 1;
+        opacity: 0;
+      }
+      .mk-sl-text {
+        display: flex;
+        align-items: baseline;
+        gap: 18px;
+        white-space: nowrap;
+      }
+      .mk-sl-label {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.015em;
+        color: var(--mk-ink);
+      }
+      .mk-sl-value {
+        font-weight: 400;
+        font-size: 40px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink-dim);
+      }
+      .mk-sl-line {
+        position: relative;
+        margin-top: 22px;
+        height: var(--mk-hairline);
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 2px;
+        overflow: hidden;
+      }
+      .mk-sl-line-fill {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-accent);
+        transform-origin: left center;
+      }
+      /* dark scheme: white rows for use over footage (overlay look) */
+      .mk-dark .mk-sl-label {
+        color: var(--mk-ink-dark);
+      }
+      .mk-dark .mk-sl-value {
+        color: var(--mk-ink-dim-dark);
+      }
+      .mk-dark .mk-sl-line {
+        background: rgba(255, 255, 255, 0.18);
+      }
+      .mk-dark .mk-sl-line-fill {
+        background: var(--mk-accent-dark);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-sl-root"
+      data-composition-id="mk-specs-list"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-sl-scrim"></div>
+      <div id="mk-sl-col"></div>
+      <div
+        id="mk-sl-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          scheme: "light", // "light" (ink rows) | "dark" (white rows, for footage)
+          rows: [
+            { label: "Design", value: "Minimal, clean lines" },
+            { label: "Typography", value: "Inter SemiBold" },
+            { label: "Motion", value: "Restrained, no bounce" },
+            { label: "Color", value: "Stage + one accent" },
+            { label: "Shapes", value: "Capsules & rounded cards" },
+          ],
+          underline: true, // accent sweep under each row
+          lineWidth: 660, // px
+          scrim: 0, // 0–1 left-edge dark scrim for readability over footage
+          x: 160, // column left edge
+          rowGap: 44, // px between rows
+          stagger: 0.18, // s between row entrances
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        var root = document.getElementById("mk-sl-root");
+        var col = document.getElementById("mk-sl-col");
+        var scrim = document.getElementById("mk-sl-scrim");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+        scrim.style.opacity = String(CONFIG.scrim);
+
+        /* build rows */
+        CONFIG.rows.forEach(function (r, i) {
+          var row = document.createElement("div");
+          row.id = "mk-sl-row-" + i;
+          row.className = "mk-sl-row";
+          if (i > 0) row.style.marginTop = CONFIG.rowGap + "px";
+
+          var text = document.createElement("div");
+          text.className = "mk-sl-text";
+          var label = document.createElement("span");
+          label.className = "mk-sl-label";
+          label.textContent = r.label;
+          text.appendChild(label);
+          if (r.value) {
+            var value = document.createElement("span");
+            value.className = "mk-sl-value";
+            value.textContent = r.value;
+            text.appendChild(value);
+          }
+          row.appendChild(text);
+
+          if (CONFIG.underline) {
+            var line = document.createElement("div");
+            line.className = "mk-sl-line";
+            line.style.width = CONFIG.lineWidth + "px";
+            var fill = document.createElement("div");
+            fill.id = "mk-sl-fill-" + i;
+            fill.className = "mk-sl-line-fill";
+            line.appendChild(fill);
+            row.appendChild(line);
+          }
+          col.appendChild(row);
+        });
+
+        /* center the column vertically */
+        var colH =
+          CONFIG.rows.length * (46 + 22 + (CONFIG.underline ? 2 : 0)) +
+          (CONFIG.rows.length - 1) * CONFIG.rowGap;
+        col.style.left = CONFIG.x + "px";
+        col.style.top = Math.round((1080 - colH) / 2) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        CONFIG.rows.forEach(function (r, i) {
+          var row = document.getElementById("mk-sl-row-" + i);
+          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
+
+          if (CONFIG.animationIn) {
+            gsap.set(row, { opacity: 0, x: -36 });
+            tl.to(row, { opacity: 1, x: 0, duration: 0.7, ease: "power3.out" }, t0);
+          } else {
+            gsap.set(row, { opacity: 1 });
+          }
+
+          if (CONFIG.underline) {
+            var fill = document.getElementById("mk-sl-fill-" + i);
+            gsap.set(fill, { scaleX: 0 });
+            tl.to(fill, { scaleX: 1, duration: 0.8, ease: "power2.inOut" }, t0 + 0.15);
+          }
+        });
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(col, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+          tl.to(scrim, { opacity: 0, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-specs-list"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-specs-list/registry-item.json b/registry/blocks/mk-specs-list/registry-item.json
new file mode 100644
index 0000000000..e4d2c0949b
--- /dev/null
+++ b/registry/blocks/mk-specs-list/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-specs-list",
+  "type": "hyperframes:block",
+  "title": "Specs Checklist",
+  "description": "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes",
+  "tags": [
+    "data-viz",
+    "list",
+    "minimal",
+    "professional"
+  ],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "mk-specs-list.html",
+      "target": "compositions/mk-specs-list.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index d8f58336c1..c96d67a487 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -563,6 +563,10 @@
       "name": "vfx-liquid-glass",
       "type": "hyperframes:block"
     },
+    {
+      "name": "mk-specs-list",
+      "type": "hyperframes:block"
+    },
     {
       "name": "parallax-zoom",
       "type": "hyperframes:component"

From 9be7a6415c7847690a3216f958ae834100ccfcbf Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:29 -0400
Subject: [PATCH 03/11] =?UTF-8?q?feat(registry):=20add=20mk-callout-highli?=
 =?UTF-8?q?ght=20=E2=80=94=20word-sweep=20highlight?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/blocks/mk-callout-highlight.mdx  |  44 +++++
 .../mk-callout-highlight.html                 | 152 ++++++++++++++++++
 .../mk-callout-highlight/registry-item.json   |  25 +++
 registry/registry.json                        |   4 +
 4 files changed, 225 insertions(+)
 create mode 100644 docs/catalog/blocks/mk-callout-highlight.mdx
 create mode 100644 registry/blocks/mk-callout-highlight/mk-callout-highlight.html
 create mode 100644 registry/blocks/mk-callout-highlight/registry-item.json

diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
new file mode 100644
index 0000000000..42a47419d2
--- /dev/null
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -0,0 +1,44 @@
+---
+title: "Word-Sweep Highlight"
+description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
+---
+
+# Word-Sweep Highlight
+
+A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover
+
+`typography` `karaoke` `captions` `minimal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-callout-highlight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-callout-highlight.html` | `compositions/mk-callout-highlight.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="mk-callout-highlight" data-composition-src="compositions/mk-callout-highlight.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/registry/blocks/mk-callout-highlight/mk-callout-highlight.html b/registry/blocks/mk-callout-highlight/mk-callout-highlight.html
new file mode 100644
index 0000000000..d9585560f4
--- /dev/null
+++ b/registry/blocks/mk-callout-highlight/mk-callout-highlight.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ch-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        /* faint = transient pre-sweep tier (tweens up to full ink) — distinct from the family --mk-ink-dim */
+        --mk-ink-faint: #bcbcc2;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-faint-dark: rgba(245, 245, 247, 0.32);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-ch-box {
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 500;
+        letter-spacing: -0.015em;
+      }
+      .mk-ch-word {
+        display: inline;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ch-root"
+      data-composition-id="mk-callout-highlight"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-ch-box" data-layout-allow-occlusion></div>
+      <div
+        id="mk-ch-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           The mechanic: one scalar (highlight progress 0..1) sweeps word-by-word
+           emphasis across the sentence — a "highlight amount"
+           slider. Tween the scalar over the speaker's sentence to follow speech. */
+        var CONFIG = {
+          scheme: "light", // "light" (ink on light bg) | "dark" (white on footage)
+          text: "Functionality was our goal from the very beginning",
+          fontSize: 60,
+          lineHeight: 1.3,
+          maxWidth: 700, // px; sentence wraps inside this
+          x: 1030, // box left edge; null = centered horizontally
+          y: null, // box top edge; null = centered vertically
+          align: "left",
+          sweep: { start: 1.2, end: 6.2 }, // block-local seconds, linear
+          animationIn: true, // fade/rise entrance before the sweep
+          animationOut: true,
+        };
+
+        var DUR = 8;
+        var root = document.getElementById("mk-ch-root");
+        var box = document.getElementById("mk-ch-box");
+
+        var FULL = CONFIG.scheme === "dark" ? "#f5f5f7" : "#1d1d1f";
+        var FAINT = CONFIG.scheme === "dark" ? "rgba(245,245,247,0.32)" : "#bcbcc2";
+
+        box.style.fontSize = CONFIG.fontSize + "px";
+        box.style.lineHeight = String(CONFIG.lineHeight);
+        box.style.maxWidth = CONFIG.maxWidth + "px";
+        box.style.textAlign = CONFIG.align;
+
+        /* build word spans */
+        var wordEls = [];
+        CONFIG.text.split(/\s+/).forEach(function (w, i) {
+          if (i > 0) box.appendChild(document.createTextNode(" "));
+          var span = document.createElement("span");
+          span.id = "mk-ch-w-" + i;
+          span.className = "mk-ch-word";
+          span.textContent = w;
+          span.style.color = FAINT;
+          box.appendChild(span);
+          wordEls.push(span);
+        });
+
+        /* position (measure after building) */
+        var rect = box.getBoundingClientRect();
+        box.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        box.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        /* state proxy: GSAP animates st.p, render derives every word color from it */
+        var st = { p: 0 };
+        var mix = gsap.utils.interpolate(FAINT, FULL);
+        function render() {
+          var k = st.p * wordEls.length;
+          for (var i = 0; i < wordEls.length; i++) {
+            var f = Math.max(0, Math.min(1, k - i));
+            wordEls[i].style.color = mix(f);
+          }
+        }
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(box, { opacity: 0, y: 24 });
+          tl.to(box, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
+        }
+
+        /* the highlight sweep — one scalar, linear so it tracks speech evenly.
+           To follow a real voiceover, replace with several tweens between
+           per-phrase progress values (keyframes on the slider). */
+        tl.to(st, { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: "none" }, CONFIG.sweep.start);
+
+        if (CONFIG.animationOut) {
+          tl.to(box, { opacity: 0, y: -16, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        tl.eventCallback("onUpdate", render);
+        render();
+
+        window.__timelines["mk-callout-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-callout-highlight/registry-item.json b/registry/blocks/mk-callout-highlight/registry-item.json
new file mode 100644
index 0000000000..f86bec841a
--- /dev/null
+++ b/registry/blocks/mk-callout-highlight/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-callout-highlight",
+  "type": "hyperframes:block",
+  "title": "Word-Sweep Highlight",
+  "description": "A sentence whose word-by-word emphasis is driven by a single scalar \u2014 tween it to sync the highlight with a voiceover",
+  "tags": [
+    "typography",
+    "karaoke",
+    "captions",
+    "minimal"
+  ],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "mk-callout-highlight.html",
+      "target": "compositions/mk-callout-highlight.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index c96d67a487..27a1843df5 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -567,6 +567,10 @@
       "name": "mk-specs-list",
       "type": "hyperframes:block"
     },
+    {
+      "name": "mk-callout-highlight",
+      "type": "hyperframes:block"
+    },
     {
       "name": "parallax-zoom",
       "type": "hyperframes:component"

From ac8d34fb9db1442e6d4ea1e7f0bbdf9c91df2b79 Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:29 -0400
Subject: [PATCH 04/11] =?UTF-8?q?feat(registry):=20add=20mk-placeholder-gr?=
 =?UTF-8?q?id=20=E2=80=94=20rounded=20media=20grid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/blocks/mk-placeholder-grid.mdx   |  44 ++++
 .../mk-placeholder-grid.html                  | 233 ++++++++++++++++++
 .../mk-placeholder-grid/registry-item.json    |  25 ++
 registry/registry.json                        |   4 +
 4 files changed, 306 insertions(+)
 create mode 100644 docs/catalog/blocks/mk-placeholder-grid.mdx
 create mode 100644 registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
 create mode 100644 registry/blocks/mk-placeholder-grid/registry-item.json

diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
new file mode 100644
index 0000000000..9148e41b98
--- /dev/null
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -0,0 +1,44 @@
+---
+title: "Rounded Media Grid"
+description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
+---
+
+# Rounded Media Grid
+
+N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle
+
+`placeholder` `media` `grid` `minimal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-placeholder-grid
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-placeholder-grid.html` | `compositions/mk-placeholder-grid.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="mk-placeholder-grid" data-composition-src="compositions/mk-placeholder-grid.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html b/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
new file mode 100644
index 0000000000..d6666d2ef5
--- /dev/null
+++ b/registry/blocks/mk-placeholder-grid/mk-placeholder-grid.html
@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-pg-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink-dim: #6e6e73;
+        --mk-paper: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-accent-dark: #7d5cff;
+        --mk-blob-1-soft: #ffd3ec;
+        --mk-blob-2-soft: #d9fff8;
+        --mk-accent-dark-soft: #cabdff;
+        --mk-well-warm: #ffb86b;
+        --mk-well-warm-soft: #ffe3c2;
+        --mk-well-sky: #5cb8ff;
+        --mk-well-sky-soft: #cfe9ff;
+        --mk-well-rose: #ff8f8f;
+        --mk-well-rose-soft: #ffd6d6;
+        --mk-well-num: rgba(255, 255, 255, 0.9);
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* pair with mk-background beneath for the gradient backdrop */
+      }
+      .mk-pg-cell {
+        position: absolute;
+        border-radius: var(--mk-radius-card);
+        overflow: hidden;
+        background: var(--mk-paper);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-pg-media {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      /* empty drop-zone well: soft gradient + index numeral */
+      .mk-pg-well {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .mk-pg-well-num {
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 88px;
+        letter-spacing: -0.02em;
+        color: var(--mk-well-num);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-pg-root"
+      data-composition-id="mk-placeholder-grid"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-pg-grid"></div>
+      <div
+        id="mk-pg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ---- */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          layout: "1+2", // "2up" | "3up" | "4up" | "3x2" | "1+2" (hero left + two stacked)
+          margin: 120, // outer margin, px
+          gap: 40, // px between cells
+          radius: 40, // cell corner radius (rounded-edge look)
+          // One entry per cell (in layout order). src: image path, or null for a
+          // styled drop-zone well. insideScale: media scale inside the mask —
+          // an "inside scale" convention (1 = cover-fit).
+          cells: [
+            { src: null, insideScale: 1 },
+            { src: null, insideScale: 1 },
+            { src: null, insideScale: 1 },
+          ],
+          kenBurns: true, // slow media settle inside the mask
+          stagger: 0.15, // "box, box, box" entrance
+          animationIn: true,
+          animationOut: true,
+        };
+
+        /* decorative fills for empty wells (cycled) */
+        var WELL_FILLS = [
+          "linear-gradient(135deg, var(--mk-blob-1) 0%, var(--mk-blob-1-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-blob-2) 0%, var(--mk-blob-2-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-accent-dark) 0%, var(--mk-accent-dark-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-warm) 0%, var(--mk-well-warm-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-sky) 0%, var(--mk-well-sky-soft) 100%)",
+          "linear-gradient(135deg, var(--mk-well-rose) 0%, var(--mk-well-rose-soft) 100%)",
+        ];
+
+        var W = 1920,
+          H = 1080,
+          DUR = 8;
+
+        function rects(layout, m, g) {
+          var iw = W - 2 * m,
+            ih = H - 2 * m;
+          function grid(cols, rows) {
+            var cw = (iw - (cols - 1) * g) / cols,
+              ch = (ih - (rows - 1) * g) / rows,
+              out = [];
+            for (var r = 0; r < rows; r++)
+              for (var c = 0; c < cols; c++)
+                out.push({ x: m + c * (cw + g), y: m + r * (ch + g), w: cw, h: ch });
+            return out;
+          }
+          if (layout === "2up") return grid(2, 1);
+          if (layout === "3up") return grid(3, 1);
+          if (layout === "4up") return grid(2, 2);
+          if (layout === "3x2") return grid(3, 2);
+          /* "1+2": hero left (58%), two stacked right */
+          var w1 = Math.round((iw - g) * 0.58),
+            w2 = iw - g - w1,
+            h2 = (ih - g) / 2;
+          return [
+            { x: m, y: m, w: w1, h: ih },
+            { x: m + w1 + g, y: m, w: w2, h: h2 },
+            { x: m + w1 + g, y: m + h2 + g, w: w2, h: h2 },
+          ];
+        }
+
+        var root = document.getElementById("mk-pg-root");
+        var grid = document.getElementById("mk-pg-grid");
+        var R = rects(CONFIG.layout, CONFIG.margin, CONFIG.gap);
+
+        var cells = [],
+          medias = [];
+        R.forEach(function (r, i) {
+          var conf = CONFIG.cells[i] || {};
+          var cell = document.createElement("div");
+          cell.id = "mk-pg-cell-" + i;
+          cell.className = "mk-pg-cell";
+          cell.style.left = r.x + "px";
+          cell.style.top = r.y + "px";
+          cell.style.width = r.w + "px";
+          cell.style.height = r.h + "px";
+          cell.style.borderRadius = CONFIG.radius + "px";
+
+          var inner;
+          if (conf.src) {
+            inner = document.createElement("img");
+            inner.className = "mk-pg-media";
+            inner.src = conf.src;
+          } else {
+            inner = document.createElement("div");
+            inner.className = "mk-pg-well";
+            inner.style.background = WELL_FILLS[i % WELL_FILLS.length];
+            var num = document.createElement("span");
+            num.className = "mk-pg-well-num";
+            num.textContent = String(i + 1);
+            inner.appendChild(num);
+          }
+          inner.id = "mk-pg-inner-" + i;
+          inner.setAttribute("data-layout-allow-overflow", ""); // ken-burns scales past the mask by design
+          cell.appendChild(inner);
+          grid.appendChild(cell);
+          cells.push(cell);
+          medias.push(inner);
+
+          gsap.set(inner, { scale: conf.insideScale || 1 });
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        cells.forEach(function (cell, i) {
+          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;
+
+          if (CONFIG.animationIn) {
+            gsap.set(cell, { opacity: 0, scale: 0.92, y: 28 });
+            tl.to(cell, { opacity: 1, scale: 1, y: 0, duration: 0.65, ease: "power3.out" }, t0);
+          }
+
+          if (CONFIG.kenBurns) {
+            var base = (CONFIG.cells[i] && CONFIG.cells[i].insideScale) || 1;
+            tl.fromTo(
+              medias[i],
+              { scale: base * 1.06 },
+              { scale: base, duration: DUR - t0 - 0.6, ease: "sine.out" },
+              t0
+            );
+          }
+        });
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to(grid, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-placeholder-grid"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-placeholder-grid/registry-item.json b/registry/blocks/mk-placeholder-grid/registry-item.json
new file mode 100644
index 0000000000..5ca57ec2d1
--- /dev/null
+++ b/registry/blocks/mk-placeholder-grid/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-placeholder-grid",
+  "type": "hyperframes:block",
+  "title": "Rounded Media Grid",
+  "description": "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle",
+  "tags": [
+    "placeholder",
+    "media",
+    "grid",
+    "minimal"
+  ],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "files": [
+    {
+      "path": "mk-placeholder-grid.html",
+      "target": "compositions/mk-placeholder-grid.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 27a1843df5..3efed99e12 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -571,6 +571,10 @@
       "name": "mk-callout-highlight",
       "type": "hyperframes:block"
     },
+    {
+      "name": "mk-placeholder-grid",
+      "type": "hyperframes:block"
+    },
     {
       "name": "parallax-zoom",
       "type": "hyperframes:component"

From fc40c882e1db9c8924f21b34335308bb875f76c2 Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:29 -0400
Subject: [PATCH 05/11] =?UTF-8?q?feat(registry):=20add=20mk-clone-wall-tra?=
 =?UTF-8?q?nsition=20=E2=80=94=20text=20clone=20wall=20transition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../blocks/mk-clone-wall-transition.mdx       |  44 ++++
 .../mk-clone-wall-transition.html             | 217 ++++++++++++++++++
 .../registry-item.json                        |  24 ++
 registry/registry.json                        |   4 +
 4 files changed, 289 insertions(+)
 create mode 100644 docs/catalog/blocks/mk-clone-wall-transition.mdx
 create mode 100644 registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
 create mode 100644 registry/blocks/mk-clone-wall-transition/registry-item.json

diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
new file mode 100644
index 0000000000..1700692105
--- /dev/null
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -0,0 +1,44 @@
+---
+title: "Text Clone Wall Transition"
+description: "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
+---
+
+# Text Clone Wall Transition
+
+Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered
+
+`transition` `typography` `wipe`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-clone-wall-transition
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 2.4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-clone-wall-transition.html` | `compositions/mk-clone-wall-transition.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="mk-clone-wall-transition" data-composition-src="compositions/mk-clone-wall-transition.html" data-start="0" data-duration="2.4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html b/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
new file mode 100644
index 0000000000..7b088e8125
--- /dev/null
+++ b/registry/blocks/mk-clone-wall-transition/mk-clone-wall-transition.html
@@ -0,0 +1,217 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-cw-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-paper: #ffffff;
+        --mk-blob-1: #ff7ac8;
+        --mk-blob-2: #45d6c8;
+        --mk-radius-card: 40px;
+        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+      /* the wall: paper sheet + tiled word rows + inversion layer, exits as one */
+      #mk-cw-wall {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-paper);
+        /* no overflow:hidden — the composition root clips; isolation keeps the
+           difference blend scoped to the wall's own tiles */
+        isolation: isolate;
+      }
+      .mk-cw-row {
+        position: absolute;
+        white-space: nowrap;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        line-height: 1;
+      }
+      .mk-cw-tile {
+        display: inline-block;
+      }
+      /* inversion sweep — a paper-colored rect in difference blend:
+         a paper-colored rect XORs the wall, flipping paper<->ink as it arrives */
+      #mk-cw-invert {
+        position: absolute;
+        inset: 0;
+        background: var(--mk-paper);
+        mix-blend-mode: difference;
+      }
+      /* the outgoing frame shrinking to a rounded card mid-transition */
+      #mk-cw-card {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        border-radius: 0;
+        overflow: hidden;
+        background: linear-gradient(120deg, #fdfbfd 0%, var(--mk-blob-1) 38%, var(--mk-blob-2) 100%);
+        box-shadow: var(--mk-shadow);
+        transform-origin: 50% 50%;
+      }
+      #mk-cw-card img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-cw-root"
+      data-composition-id="mk-clone-wall-transition"
+      data-start="0"
+      data-duration="2.4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-cw-wall" data-layout-allow-overflow>
+        <div id="mk-cw-tiles" data-layout-allow-overflow></div>
+        <div id="mk-cw-invert" data-layout-allow-overflow></div>
+      </div>
+      <div id="mk-cw-card" data-layout-allow-overflow></div>
+      <div
+        id="mk-cw-drv"
+        class="clip"
+        data-start="0"
+        data-duration="2.4"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           Overlay-transition model: place this block spanning the host's cut
+           point (e.g. start 0.9s before the cut). The wall fully covers the
+           frame from ~0.6s to ~1.9s local — hard-cut the content beneath
+           anywhere in that window. */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          word: "HyperFrames", // the cloned word
+          fontSize: 240, // px — the tiled text size
+          spreadX: 90, // px gap between tiles (tile spread X)
+          spreadY: 60, // px gap between rows (Spread Y)
+          brickOffset: true, // alternate rows offset by half a tile
+          card: {
+            enabled: true, // outgoing-frame card. In real use set src to a
+            src: null, //     still of the outgoing clip; null = family gradient
+          },
+          driftX: -46, // slow wall drift during the hold
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 2.4;
+
+        var root = document.getElementById("mk-cw-root");
+        var wall = document.getElementById("mk-cw-wall");
+        var tilesBox = document.getElementById("mk-cw-tiles");
+        var invert = document.getElementById("mk-cw-invert");
+        var card = document.getElementById("mk-cw-card");
+
+        /* build the tile wall — rows of repeated words, brick-offset */
+        var rowH = CONFIG.fontSize + CONFIG.spreadY;
+        var rows = Math.ceil(H / rowH) + 1;
+        /* rough tile width estimate to fill each row past both edges */
+        var tileW = CONFIG.word.length * CONFIG.fontSize * 0.58 + CONFIG.spreadX;
+        var perRow = Math.ceil(W / tileW) + 2;
+        for (var r = 0; r < rows; r++) {
+          var row = document.createElement("div");
+          row.id = "mk-cw-row-" + r;
+          row.className = "mk-cw-row";
+          /* rows intentionally run past the canvas and sit beneath the card */
+          row.setAttribute("data-layout-allow-overflow", "");
+          row.setAttribute("data-layout-allow-occlusion", "");
+          row.style.fontSize = CONFIG.fontSize + "px";
+          row.style.top = r * rowH - CONFIG.fontSize * 0.35 + "px";
+          var offset = CONFIG.brickOffset && r % 2 === 1 ? -Math.round(tileW / 2) : 0;
+          row.style.left = offset - tileW + "px";
+          for (var c = 0; c < perRow + 1; c++) {
+            var tile = document.createElement("span");
+            tile.className = "mk-cw-tile";
+            tile.textContent = CONFIG.word;
+            tile.style.marginRight = CONFIG.spreadX + "px";
+            row.appendChild(tile);
+          }
+          tilesBox.appendChild(row);
+        }
+
+        if (CONFIG.card.enabled && CONFIG.card.src) {
+          var img = document.createElement("img");
+          img.src = CONFIG.card.src;
+          card.appendChild(img);
+        }
+        if (!CONFIG.card.enabled) card.style.display = "none";
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* The wall sits in place from t=0, fully hidden beneath the
+           full-bleed card — the card's shrink IS the wall's reveal. */
+
+        /* 0.2–0.95  outgoing frame shrinks to a rounded card on the wall */
+        if (CONFIG.card.enabled) {
+          tl.to(
+            card,
+            {
+              top: 330,
+              left: 640,
+              width: 640,
+              height: 420,
+              borderRadius: 40,
+              duration: 0.75,
+              ease: "power3.inOut",
+            },
+            0.2
+          );
+          /* 1.35–1.75  card is put away */
+          tl.to(card, { scale: 0.6, opacity: 0, duration: 0.4, ease: "power2.in" }, 1.35);
+        }
+
+        /* slow drift keeps the wall alive during the hold */
+        tl.to(tilesBox, { x: CONFIG.driftX, duration: 1.8, ease: "sine.inOut" }, 0.3);
+
+        /* 0.85–1.5  inversion sweeps in and STAYS — wall flips ink<->paper */
+        gsap.set(invert, { x: -W });
+        tl.to(invert, { x: 0, duration: 0.65, ease: "power3.inOut" }, 0.85);
+
+        /* 1.9–2.35  the inverted wall fades off, revealing the cut beneath */
+        tl.to(wall, { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.9);
+
+        /* hard kills — wall and card die the moment their fades complete */
+        if (CONFIG.card.enabled) tl.set(card, { visibility: "hidden" }, 1.76);
+        tl.set(root, { visibility: "hidden" }, 2.36);
+
+        window.__timelines["mk-clone-wall-transition"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-clone-wall-transition/registry-item.json b/registry/blocks/mk-clone-wall-transition/registry-item.json
new file mode 100644
index 0000000000..4b6d9fa154
--- /dev/null
+++ b/registry/blocks/mk-clone-wall-transition/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-clone-wall-transition",
+  "type": "hyperframes:block",
+  "title": "Text Clone Wall Transition",
+  "description": "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears \u2014 hard-cut the content beneath while covered",
+  "tags": [
+    "transition",
+    "typography",
+    "wipe"
+  ],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 2.4,
+  "files": [
+    {
+      "path": "mk-clone-wall-transition.html",
+      "target": "compositions/mk-clone-wall-transition.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 3efed99e12..005934f097 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -575,6 +575,10 @@
       "name": "mk-placeholder-grid",
       "type": "hyperframes:block"
     },
+    {
+      "name": "mk-clone-wall-transition",
+      "type": "hyperframes:block"
+    },
     {
       "name": "parallax-zoom",
       "type": "hyperframes:component"

From eed6adafb0a98705ba42a8b65802c8946d7028bc Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:29 -0400
Subject: [PATCH 06/11] =?UTF-8?q?feat(registry):=20add=20mk-cta-button=20?=
 =?UTF-8?q?=E2=80=94=20pill=20cta=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/components/mk-cta-button.mdx     |  38 +++++
 .../mk-cta-button/mk-cta-button.html          | 135 ++++++++++++++++++
 .../mk-cta-button/registry-item.json          |  20 +++
 registry/registry.json                        |   4 +
 4 files changed, 197 insertions(+)
 create mode 100644 docs/catalog/components/mk-cta-button.mdx
 create mode 100644 registry/components/mk-cta-button/mk-cta-button.html
 create mode 100644 registry/components/mk-cta-button/registry-item.json

diff --git a/docs/catalog/components/mk-cta-button.mdx b/docs/catalog/components/mk-cta-button.mdx
new file mode 100644
index 0000000000..59ab2eef8c
--- /dev/null
+++ b/docs/catalog/components/mk-cta-button.mdx
@@ -0,0 +1,38 @@
+---
+title: "Pill CTA Button"
+description: "Rounded call-to-action button with arrow, optional outline frame with shadow, frosted variant, and an arrow-nudge helper"
+---
+
+# Pill CTA Button
+
+Rounded call-to-action button with arrow, optional outline frame with shadow, frosted variant, and an arrow-nudge helper
+
+`cta` `button` `minimal` `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/mk-cta-button.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-cta-button.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-cta-button
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-cta-button.html` | `compositions/components/mk-cta-button.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/components/mk-cta-button/mk-cta-button.html b/registry/components/mk-cta-button/mk-cta-button.html
new file mode 100644
index 0000000000..ca566aeea9
--- /dev/null
+++ b/registry/components/mk-cta-button/mk-cta-button.html
@@ -0,0 +1,135 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-cta-button ---------------------------------------------------
+         Pill CTA ("Buy", "Subscribe"). Set --mk-cta-bg/--mk-cta-fg to recolor
+         (any css color); add .mk-cta--framed for the outlined ring
+         with drop shadow, .mk-cta--frost for frosted glass over footage. */
+      .mk-cta {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-accent: #0071e3;
+        --mk-cta-bg: var(--mk-accent);
+        --mk-cta-fg: #ffffff;
+        --mk-cta-frame: rgba(29, 29, 31, 0.22);
+        --mk-cta-arrow-w: 3.5;
+        --mk-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
+
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 20px;
+        padding: 24px 48px;
+        border-radius: 999px;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 42px;
+        letter-spacing: -0.01em;
+        white-space: nowrap;
+        background: var(--mk-cta-bg);
+        color: var(--mk-cta-fg);
+        pointer-events: none;
+      }
+      .mk-cta--framed::before {
+        content: "";
+        position: absolute;
+        inset: -16px;
+        border: 2px solid var(--mk-cta-frame);
+        border-radius: 999px;
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-cta--frost {
+        background: rgba(255, 255, 255, 0.42);
+        color: var(--mk-ink);
+        backdrop-filter: blur(24px) saturate(1.4);
+        -webkit-backdrop-filter: blur(24px) saturate(1.4);
+        box-shadow: var(--mk-shadow);
+      }
+      .mk-cta-arrow {
+        display: inline-flex;
+        width: 0.62em;
+      }
+      .mk-cta-arrow svg {
+        width: 100%;
+        stroke: currentColor;
+        stroke-width: var(--mk-cta-arrow-w);
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-cta CSS above, the .mk-cta
+         markup below, and the helpers into your host composition. Position
+         via top/right/bottom/left; add class="clip" + data-start/duration/
+         track-index for host windowing. -->
+    <div
+      id="mk-cta-root"
+      data-composition-id="mk-cta-button"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="mk-cta mk-cta--framed" id="mk-cta-demo" style="top: 480px; left: 780px">
+        <span>Subscribe</span>
+        <span class="mk-cta-arrow"
+          ><svg viewBox="0 0 24 24"><path d="M4 12h15M13 5l7 7-7 7" /></svg
+        ></span>
+      </div>
+      <div
+        id="mk-cta-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then call them on the
+        // paused host timeline:
+        //   mkCtaIn(tl, "#mk-my-cta", 1.0);
+        //   mkCtaNudge(tl, "#mk-my-cta", 2.0);  // arrow beckons once
+        //   mkCtaOut(tl, "#mk-my-cta", 8.5);
+        window.mkCtaIn = function (tl, target, at) {
+          gsap.set(target, { opacity: 0, y: 26, scale: 0.95 });
+          tl.to(target, { opacity: 1, y: 0, scale: 1, duration: 0.65, ease: "back.out(1.2)" }, at);
+        };
+        window.mkCtaNudge = function (tl, target, at) {
+          var arrow = document.querySelector(target + " .mk-cta-arrow");
+          if (arrow) tl.to(arrow, { x: 7, duration: 0.28, ease: "sine.inOut", yoyo: true, repeat: 3 }, at);
+        };
+        window.mkCtaOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, y: -16, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkCtaIn(tl, "#mk-cta-demo", 0.4);
+        window.mkCtaNudge(tl, "#mk-cta-demo", 1.5);
+        window.mkCtaOut(tl, "#mk-cta-demo", 3.4);
+        tl.set("#mk-cta-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-cta-button"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/mk-cta-button/registry-item.json b/registry/components/mk-cta-button/registry-item.json
new file mode 100644
index 0000000000..0674f79760
--- /dev/null
+++ b/registry/components/mk-cta-button/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-cta-button",
+  "type": "hyperframes:component",
+  "title": "Pill CTA Button",
+  "description": "Rounded call-to-action button with arrow, optional outline frame with shadow, frosted variant, and an arrow-nudge helper",
+  "tags": [
+    "cta",
+    "button",
+    "minimal",
+    "overlay"
+  ],
+  "files": [
+    {
+      "path": "mk-cta-button.html",
+      "target": "compositions/components/mk-cta-button.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 005934f097..dfd130ad18 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -590,6 +590,10 @@
     {
       "name": "mk-pill-callout",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "mk-cta-button",
+      "type": "hyperframes:component"
     }
   ]
 }

From 63c6cd02ead1c8bd93cde2a354a84cd9ff3b6a1f Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:30 -0400
Subject: [PATCH 07/11] =?UTF-8?q?feat(registry):=20add=20mk-usage-arc=20?=
 =?UTF-8?q?=E2=80=94=20hairline=20arc=20gauge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/components/mk-usage-arc.mdx      |  38 +++++
 .../components/mk-usage-arc/mk-usage-arc.html | 149 ++++++++++++++++++
 .../mk-usage-arc/registry-item.json           |  19 +++
 registry/registry.json                        |   4 +
 4 files changed, 210 insertions(+)
 create mode 100644 docs/catalog/components/mk-usage-arc.mdx
 create mode 100644 registry/components/mk-usage-arc/mk-usage-arc.html
 create mode 100644 registry/components/mk-usage-arc/registry-item.json

diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
new file mode 100644
index 0000000000..5f2bbb97c5
--- /dev/null
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -0,0 +1,38 @@
+---
+title: "Hairline Arc Gauge"
+description: "Thin circular gauge that draws on while its percentage counts up; one helper call drives both"
+---
+
+# Hairline Arc Gauge
+
+Thin circular gauge that draws on while its percentage counts up; one helper call drives both
+
+`data-viz` `gauge` `minimal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-usage-arc
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-usage-arc.html` | `compositions/components/mk-usage-arc.html` | hyperframes:snippet |
+
+## Usage
+
+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/components/mk-usage-arc/mk-usage-arc.html b/registry/components/mk-usage-arc/mk-usage-arc.html
new file mode 100644
index 0000000000..852205d644
--- /dev/null
+++ b/registry/components/mk-usage-arc/mk-usage-arc.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-usage-arc ----------------------------------------------------
+         Hairline circular gauge: draw-on arc + centered value + tiny label.
+         The promo's "Usage" arc. Recolor via --mk-arc-color. */
+      .mk-arc {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-arc-color: var(--mk-accent);
+        --mk-hairline: 3px;
+
+        position: absolute;
+        width: 220px;
+        height: 220px;
+        pointer-events: none;
+      }
+      .mk-arc svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .mk-arc-track {
+        fill: none;
+        stroke: rgba(29, 29, 31, 0.1);
+        stroke-width: var(--mk-hairline);
+      }
+      .mk-arc-fill {
+        fill: none;
+        stroke: var(--mk-arc-color);
+        stroke-width: var(--mk-hairline);
+        stroke-linecap: round;
+      }
+      .mk-arc-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        font-family: var(--mk-font);
+      }
+      .mk-arc-num {
+        font-weight: 600;
+        font-size: 46px;
+        letter-spacing: -0.02em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      .mk-arc-label {
+        font-weight: 500;
+        font-size: 20px;
+        color: var(--mk-ink);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-arc CSS, the markup below,
+         and the helpers into your host. r=92 with 220px box; the helper reads
+         the circle's radius, so resizing the box + r just works. -->
+    <div
+      id="mk-arc-root"
+      data-composition-id="mk-usage-arc"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="mk-arc" id="mk-arc-demo" style="top: 430px; left: 850px">
+        <svg viewBox="0 0 220 220">
+          <circle class="mk-arc-track" cx="110" cy="110" r="92"></circle>
+          <circle class="mk-arc-fill" cx="110" cy="110" r="92" transform="rotate(-90 110 110)"></circle>
+        </svg>
+        <div class="mk-arc-center">
+          <span class="mk-arc-num">0%</span>
+          <span class="mk-arc-label">Usage</span>
+        </div>
+      </div>
+      <div
+        id="mk-arc-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkArcIn(tl, "#mk-my-arc", 1.0, 0.76);  // draw to 76%, count the numeral
+        //   mkArcOut(tl, "#mk-my-arc", 8.5);
+        window.mkArcIn = function (tl, target, at, value) {
+          var el = document.querySelector(target);
+          var fill = el.querySelector(".mk-arc-fill");
+          var num = el.querySelector(".mk-arc-num");
+          var C = 2 * Math.PI * parseFloat(fill.getAttribute("r"));
+          gsap.set(el, { opacity: 0, y: 16 });
+          gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });
+          tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, at);
+          tl.to(fill, { strokeDashoffset: C * (1 - value), duration: 1.1, ease: "power2.inOut" }, at + 0.15);
+          var st = { v: 0 };
+          tl.to(
+            st,
+            {
+              v: value,
+              duration: 1.1,
+              ease: "power2.inOut",
+              onUpdate: function () {
+                num.textContent = Math.round(st.v * 100) + "%";
+              },
+            },
+            at + 0.15
+          );
+        };
+        window.mkArcOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, y: -12, duration: 0.35, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkArcIn(tl, "#mk-arc-demo", 0.4, 0.76);
+        window.mkArcOut(tl, "#mk-arc-demo", 3.4);
+        tl.set("#mk-arc-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-usage-arc"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/mk-usage-arc/registry-item.json b/registry/components/mk-usage-arc/registry-item.json
new file mode 100644
index 0000000000..c79e07cd9d
--- /dev/null
+++ b/registry/components/mk-usage-arc/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-usage-arc",
+  "type": "hyperframes:component",
+  "title": "Hairline Arc Gauge",
+  "description": "Thin circular gauge that draws on while its percentage counts up; one helper call drives both",
+  "tags": [
+    "data-viz",
+    "gauge",
+    "minimal"
+  ],
+  "files": [
+    {
+      "path": "mk-usage-arc.html",
+      "target": "compositions/components/mk-usage-arc.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index dfd130ad18..3feaf9af67 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -594,6 +594,10 @@
     {
       "name": "mk-cta-button",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "mk-usage-arc",
+      "type": "hyperframes:component"
     }
   ]
 }

From 2039bf5f44285c26cfe4f1f46c62215dcf5d8337 Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:30 -0400
Subject: [PATCH 08/11] =?UTF-8?q?feat(registry):=20add=20mk-progress-stat?=
 =?UTF-8?q?=20=E2=80=94=20count-up=20stat=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/blocks/mk-progress-stat.mdx      |  44 +++++
 .../mk-progress-stat/mk-progress-stat.html    | 185 ++++++++++++++++++
 .../mk-progress-stat/registry-item.json       |  24 +++
 registry/registry.json                        |   4 +
 4 files changed, 257 insertions(+)
 create mode 100644 docs/catalog/blocks/mk-progress-stat.mdx
 create mode 100644 registry/blocks/mk-progress-stat/mk-progress-stat.html
 create mode 100644 registry/blocks/mk-progress-stat/registry-item.json

diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
new file mode 100644
index 0000000000..46ff095a55
--- /dev/null
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -0,0 +1,44 @@
+---
+title: "Count-Up Stat Card"
+description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
+---
+
+# Count-Up Stat Card
+
+Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes
+
+`data-viz` `stat` `minimal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-progress-stat
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-progress-stat.html` | `compositions/mk-progress-stat.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="mk-progress-stat" data-composition-src="compositions/mk-progress-stat.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/registry/blocks/mk-progress-stat/mk-progress-stat.html b/registry/blocks/mk-progress-stat/mk-progress-stat.html
new file mode 100644
index 0000000000..daee0abd7b
--- /dev/null
+++ b/registry/blocks/mk-progress-stat/mk-progress-stat.html
@@ -0,0 +1,185 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ps-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-ink-dark: #f5f5f7;
+        --mk-ink-dim-dark: #a1a1a6;
+        --mk-accent: #0071e3;
+        --mk-accent-dark: #7d5cff;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+      }
+      #mk-ps-group {
+        position: absolute;
+        font-family: var(--mk-font);
+      }
+      #mk-ps-num {
+        font-weight: 600;
+        font-size: 190px;
+        line-height: 1;
+        letter-spacing: -0.03em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+      }
+      #mk-ps-label {
+        margin-top: 10px;
+        font-weight: 500;
+        font-size: 42px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink);
+      }
+      #mk-ps-track {
+        position: relative;
+        margin-top: 28px;
+        height: 6px;
+        border-radius: 3px;
+        background: rgba(29, 29, 31, 0.1);
+        overflow: hidden;
+      }
+      #mk-ps-fill {
+        position: absolute;
+        inset: 0;
+        border-radius: 3px;
+        background: var(--mk-accent);
+        transform-origin: left center;
+      }
+      #mk-ps-caption {
+        margin-top: 22px;
+        font-weight: 400;
+        font-size: 30px;
+        color: var(--mk-ink-dim);
+      }
+      .mk-dark #mk-ps-num,
+      .mk-dark #mk-ps-label {
+        color: var(--mk-ink-dark);
+      }
+      .mk-dark #mk-ps-caption {
+        color: var(--mk-ink-dim-dark);
+      }
+      .mk-dark #mk-ps-track {
+        background: rgba(245, 245, 247, 0.18);
+      }
+      .mk-dark #mk-ps-fill {
+        background: var(--mk-accent-dark);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ps-root"
+      data-composition-id="mk-progress-stat"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div id="mk-ps-group">
+        <div id="mk-ps-num">0</div>
+        <div id="mk-ps-label"></div>
+        <div id="mk-ps-track"><div id="mk-ps-fill"></div></div>
+        <div id="mk-ps-caption"></div>
+      </div>
+      <div
+        id="mk-ps-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A "22 · Goals reached" progress card: big count-up
+           numeral, label, thin accent track filling to value/max, caption. */
+        var CONFIG = {
+          scheme: "light", // "light" | "dark"
+          value: 22,
+          suffix: "", // e.g. "%", "K"
+          label: "Goals reached",
+          caption: "Great job, we are getting closer!",
+          max: 30, // track fills to value/max
+          trackWidth: 480, // px
+          x: 1300, // group left edge; null = centered
+          y: 250, // group top edge; null = centered
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        var root = document.getElementById("mk-ps-root");
+        var group = document.getElementById("mk-ps-group");
+        var num = document.getElementById("mk-ps-num");
+        var fill = document.getElementById("mk-ps-fill");
+
+        if (CONFIG.scheme === "dark") root.classList.add("mk-dark");
+        document.getElementById("mk-ps-label").textContent = CONFIG.label;
+        document.getElementById("mk-ps-caption").textContent = CONFIG.caption;
+        document.getElementById("mk-ps-track").style.width = CONFIG.trackWidth + "px";
+
+        /* position (measure after filling text) */
+        var rect = group.getBoundingClientRect();
+        group.style.left =
+          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + "px";
+        group.style.top =
+          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        if (CONFIG.animationIn) {
+          gsap.set(group, { opacity: 0, y: 28 });
+          tl.to(group, { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 0.3);
+        }
+
+        /* count-up + track fill on the same ease (the data-viz recipe) */
+        var st = { v: 0 };
+        tl.to(
+          st,
+          {
+            v: CONFIG.value,
+            duration: 1.6,
+            ease: "power2.out",
+            onUpdate: function () {
+              num.textContent = Math.round(st.v) + CONFIG.suffix;
+            },
+          },
+          0.5
+        );
+        gsap.set(fill, { scaleX: 0 });
+        tl.to(fill, { scaleX: CONFIG.value / CONFIG.max, duration: 1.6, ease: "power2.out" }, 0.5);
+
+        if (CONFIG.animationOut) {
+          tl.to(group, { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-progress-stat"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-progress-stat/registry-item.json b/registry/blocks/mk-progress-stat/registry-item.json
new file mode 100644
index 0000000000..cce68471ea
--- /dev/null
+++ b/registry/blocks/mk-progress-stat/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-progress-stat",
+  "type": "hyperframes:block",
+  "title": "Count-Up Stat Card",
+  "description": "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes",
+  "tags": [
+    "data-viz",
+    "stat",
+    "minimal"
+  ],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 7,
+  "files": [
+    {
+      "path": "mk-progress-stat.html",
+      "target": "compositions/mk-progress-stat.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 3feaf9af67..1ff799d5b1 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -579,6 +579,10 @@
       "name": "mk-clone-wall-transition",
       "type": "hyperframes:block"
     },
+    {
+      "name": "mk-progress-stat",
+      "type": "hyperframes:block"
+    },
     {
       "name": "parallax-zoom",
       "type": "hyperframes:component"

From 4ce35b7cba683d7f2ffe8ad4e3f03e853f6425c3 Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:30 -0400
Subject: [PATCH 09/11] =?UTF-8?q?feat(registry):=20add=20mk-line-graph=20?=
 =?UTF-8?q?=E2=80=94=20minimal=20line=20graph?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/blocks/mk-line-graph.mdx         |  44 +++
 .../blocks/mk-line-graph/mk-line-graph.html   | 283 ++++++++++++++++++
 .../blocks/mk-line-graph/registry-item.json   |  25 ++
 registry/registry.json                        |   4 +
 4 files changed, 356 insertions(+)
 create mode 100644 docs/catalog/blocks/mk-line-graph.mdx
 create mode 100644 registry/blocks/mk-line-graph/mk-line-graph.html
 create mode 100644 registry/blocks/mk-line-graph/registry-item.json

diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
new file mode 100644
index 0000000000..a8813964f3
--- /dev/null
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -0,0 +1,44 @@
+---
+title: "Minimal Line Graph"
+description: "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend"
+---
+
+# Minimal Line Graph
+
+One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend
+
+`data-viz` `chart` `graph` `minimal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-line-graph
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-line-graph.html` | `compositions/mk-line-graph.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="mk-line-graph" data-composition-src="compositions/mk-line-graph.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/registry/blocks/mk-line-graph/mk-line-graph.html b/registry/blocks/mk-line-graph/mk-line-graph.html
new file mode 100644
index 0000000000..e942a288fa
--- /dev/null
+++ b/registry/blocks/mk-line-graph/mk-line-graph.html
@@ -0,0 +1,283 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-lg-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-accent: #0071e3;
+        --mk-paper: #ffffff;
+        --mk-blob-2: #45d6c8;
+        --mk-axis: rgba(29, 29, 31, 0.22);
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+        font-family: var(--mk-font);
+      }
+      #mk-lg-svg {
+        position: absolute;
+        inset: 0;
+      }
+      .mk-lg-line {
+        fill: none;
+        stroke-width: 5;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      .mk-lg-dot {
+        stroke-width: 4;
+        fill: var(--mk-paper);
+      }
+      .mk-lg-axis {
+        stroke: var(--mk-axis);
+        stroke-width: 2;
+      }
+      .mk-lg-value {
+        position: absolute;
+        font-weight: 600;
+        font-size: 30px;
+        letter-spacing: -0.01em;
+        color: var(--mk-ink);
+        font-variant-numeric: tabular-nums;
+        transform: translate(-50%, -100%);
+        white-space: nowrap;
+      }
+      .mk-lg-xlabel {
+        position: absolute;
+        font-weight: 400;
+        font-size: 26px;
+        color: var(--mk-ink-dim);
+        transform: translateX(-50%);
+        white-space: nowrap;
+      }
+      .mk-lg-legend {
+        position: absolute;
+        display: flex;
+        gap: 40px;
+      }
+      .mk-lg-legend-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-weight: 500;
+        font-size: 30px;
+        color: var(--mk-ink-dim);
+      }
+      .mk-lg-legend-dot {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-lg-root"
+      data-composition-id="mk-line-graph"
+      data-start="0"
+      data-duration="7"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="mk-lg-svg" viewBox="0 0 1920 1080"></svg>
+      <div id="mk-lg-labels"></div>
+      <div
+        id="mk-lg-drv"
+        class="clip"
+        data-start="0"
+        data-duration="7"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A minimal presentation line graph: 1–2 series draw on, dots pop, value labels
+           ride their points, axes dimmer than labels (clear hierarchy). */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          series: [
+            { name: "Renders", color: null /* accent */, values: [12, 26, 22, 38, 44, 58] },
+            { name: "Projects", color: null /* blob-2 */, values: [8, 14, 18, 16, 28, 36] },
+          ],
+          xLabels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+          showValues: true,
+          area: { x: 160, y: 240, w: 980, h: 500 }, // plot rectangle
+          animationIn: true,
+          animationOut: true,
+        };
+
+        var DUR = 7;
+        var NS = "http://www.w3.org/2000/svg";
+        var root = document.getElementById("mk-lg-root");
+        var svg = document.getElementById("mk-lg-svg");
+        var labels = document.getElementById("mk-lg-labels");
+        var A = CONFIG.area;
+
+        var accent = getComputedStyle(root).getPropertyValue("--mk-accent").trim();
+        var blob2 = getComputedStyle(root).getPropertyValue("--mk-blob-2").trim();
+        if (CONFIG.series[1] && !CONFIG.series[1].color) CONFIG.series[1].color = blob2;
+
+        /* scale: 0..max(all values)*1.15 into the plot rect */
+        var max = 0;
+        CONFIG.series.forEach(function (s) {
+          s.values.forEach(function (v) {
+            if (v > max) max = v;
+          });
+        });
+        max *= 1.15;
+        var n = CONFIG.series[0].values.length;
+        function px(i) {
+          return A.x + (i / (n - 1)) * A.w;
+        }
+        function py(v) {
+          return A.y + A.h - (v / max) * A.h;
+        }
+
+        /* baseline axis */
+        var axis = document.createElementNS(NS, "line");
+        axis.setAttribute("class", "mk-lg-axis");
+        axis.setAttribute("x1", A.x - 20);
+        axis.setAttribute("y1", A.y + A.h);
+        axis.setAttribute("x2", A.x + A.w + 20);
+        axis.setAttribute("y2", A.y + A.h);
+        axis.id = "mk-lg-axis";
+        svg.appendChild(axis);
+
+        /* series paths, dots, value labels */
+        var paths = [],
+          dots = [],
+          vals = [];
+        CONFIG.series.forEach(function (s, si) {
+          var color = s.color || accent;
+          var d = s.values
+            .map(function (v, i) {
+              return (i === 0 ? "M" : "L") + px(i) + " " + py(v);
+            })
+            .join(" ");
+          var path = document.createElementNS(NS, "path");
+          path.setAttribute("class", "mk-lg-line");
+          path.setAttribute("d", d);
+          path.setAttribute("stroke", color);
+          path.id = "mk-lg-path-" + si;
+          svg.appendChild(path);
+          paths.push(path);
+
+          s.values.forEach(function (v, i) {
+            var dot = document.createElementNS(NS, "circle");
+            dot.setAttribute("class", "mk-lg-dot");
+            dot.setAttribute("cx", px(i));
+            dot.setAttribute("cy", py(v));
+            dot.setAttribute("r", 9);
+            dot.setAttribute("stroke", color);
+            dot.id = "mk-lg-dot-" + si + "-" + i;
+            svg.appendChild(dot);
+            dots.push({ el: dot, si: si, i: i });
+
+            if (CONFIG.showValues) {
+              var val = document.createElement("div");
+              val.className = "mk-lg-value";
+              val.id = "mk-lg-val-" + si + "-" + i;
+              val.textContent = v;
+              val.style.left = px(i) + "px";
+              val.style.top = py(v) - 20 + "px";
+              labels.appendChild(val);
+              vals.push({ el: val, si: si, i: i });
+            }
+          });
+        });
+
+        /* x labels + legend */
+        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {
+          var xl = document.createElement("div");
+          xl.className = "mk-lg-xlabel";
+          xl.id = "mk-lg-xl-" + i;
+          xl.textContent = t;
+          xl.style.left = px(i) + "px";
+          xl.style.top = A.y + A.h + 24 + "px";
+          labels.appendChild(xl);
+        });
+        var legend = document.createElement("div");
+        legend.className = "mk-lg-legend";
+        legend.id = "mk-lg-legend";
+        legend.style.left = A.x + "px";
+        legend.style.top = A.y + A.h + 90 + "px";
+        CONFIG.series.forEach(function (s) {
+          var item = document.createElement("div");
+          item.className = "mk-lg-legend-item";
+          var dot = document.createElement("span");
+          dot.className = "mk-lg-legend-dot";
+          dot.style.background = s.color || accent;
+          item.appendChild(dot);
+          item.appendChild(document.createTextNode(s.name));
+          legend.appendChild(item);
+        });
+        labels.appendChild(legend);
+
+        var tl = gsap.timeline({ paused: true });
+        var DRAW = 1.3;
+
+        /* entrance: axis + x labels settle first */
+        gsap.set([axis, legend], { opacity: 0 });
+        tl.to(axis, { opacity: 1, duration: 0.5, ease: "power2.out" }, 0.2);
+        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {
+          var xl = document.getElementById("mk-lg-xl-" + i);
+          gsap.set(xl, { opacity: 0, y: 10 });
+          tl.to(xl, { opacity: 1, y: 0, duration: 0.4, ease: "power2.out" }, 0.25 + i * 0.05);
+        });
+
+        /* draw each series, dots + values riding the draw front */
+        CONFIG.series.forEach(function (s, si) {
+          var t0 = (CONFIG.animationIn ? 0.5 : 0) + si * 0.35;
+          var path = paths[si];
+          var len = path.getTotalLength();
+          gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });
+          tl.to(path, { strokeDashoffset: 0, duration: DRAW, ease: "power2.inOut" }, t0);
+
+          s.values.forEach(function (v, i) {
+            var dot = document.getElementById("mk-lg-dot-" + si + "-" + i);
+            var td = t0 + (i / (n - 1)) * DRAW * 0.92;
+            gsap.set(dot, { scale: 0, transformOrigin: "50% 50%" });
+            tl.to(dot, { scale: 1, duration: 0.35, ease: "back.out(1.2)" }, td);
+            if (CONFIG.showValues) {
+              var val = document.getElementById("mk-lg-val-" + si + "-" + i);
+              gsap.set(val, { opacity: 0, y: 8 });
+              tl.to(val, { opacity: 1, y: 0, duration: 0.35, ease: "power2.out" }, td + 0.06);
+            }
+          });
+        });
+
+        tl.to(legend, { opacity: 1, duration: 0.5, ease: "power2.out" }, 2.3);
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to([svg, labels], { opacity: 0, y: -20, duration: 0.4, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-line-graph"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-line-graph/registry-item.json b/registry/blocks/mk-line-graph/registry-item.json
new file mode 100644
index 0000000000..78e4a21b3b
--- /dev/null
+++ b/registry/blocks/mk-line-graph/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-line-graph",
+  "type": "hyperframes:block",
+  "title": "Minimal Line Graph",
+  "description": "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend",
+  "tags": [
+    "data-viz",
+    "chart",
+    "graph",
+    "minimal"
+  ],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 7,
+  "files": [
+    {
+      "path": "mk-line-graph.html",
+      "target": "compositions/mk-line-graph.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 1ff799d5b1..5be18ae282 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -583,6 +583,10 @@
       "name": "mk-progress-stat",
       "type": "hyperframes:block"
     },
+    {
+      "name": "mk-line-graph",
+      "type": "hyperframes:block"
+    },
     {
       "name": "parallax-zoom",
       "type": "hyperframes:component"

From 44cd5202533f176593b37404a85f51997877438f Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:30 -0400
Subject: [PATCH 10/11] =?UTF-8?q?feat(registry):=20add=20mk-logo-sting=20?=
 =?UTF-8?q?=E2=80=94=20outline=20logo=20sting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/blocks/mk-logo-sting.mdx         |  44 +++++
 .../blocks/mk-logo-sting/mk-logo-sting.html   | 174 ++++++++++++++++++
 .../blocks/mk-logo-sting/registry-item.json   |  24 +++
 registry/registry.json                        |   4 +
 4 files changed, 246 insertions(+)
 create mode 100644 docs/catalog/blocks/mk-logo-sting.mdx
 create mode 100644 registry/blocks/mk-logo-sting/mk-logo-sting.html
 create mode 100644 registry/blocks/mk-logo-sting/registry-item.json

diff --git a/docs/catalog/blocks/mk-logo-sting.mdx b/docs/catalog/blocks/mk-logo-sting.mdx
new file mode 100644
index 0000000000..20bf305e10
--- /dev/null
+++ b/docs/catalog/blocks/mk-logo-sting.mdx
@@ -0,0 +1,44 @@
+---
+title: "Outline Logo Sting"
+description: "A hairline rounded-square outline draws on and the logo lands inside — image or text wordmark in the same shell"
+---
+
+# Outline Logo Sting
+
+A hairline rounded-square outline draws on and the logo lands inside — image or text wordmark in the same shell
+
+`logo` `sting` `minimal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-logo-sting.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-logo-sting.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-logo-sting
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 3.5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-logo-sting.html` | `compositions/mk-logo-sting.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="mk-logo-sting" data-composition-src="compositions/mk-logo-sting.html" data-start="0" data-duration="3.5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/registry/blocks/mk-logo-sting/mk-logo-sting.html b/registry/blocks/mk-logo-sting/mk-logo-sting.html
new file mode 100644
index 0000000000..667c886c00
--- /dev/null
+++ b/registry/blocks/mk-logo-sting/mk-logo-sting.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      #mk-ls-root {
+        /* ---- mk tokens: override in the host to re-skin the family ---- */
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-ink: #1d1d1f;
+        --mk-ink-dim: #6e6e73;
+        --mk-hairline: 3px;
+
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent; /* overlays footage or mk-background */
+        font-family: var(--mk-font);
+      }
+      #mk-ls-svg {
+        position: absolute;
+        inset: 0;
+      }
+      #mk-ls-outline {
+        fill: none;
+        stroke: var(--mk-ink);
+        stroke-width: var(--mk-hairline);
+      }
+      #mk-ls-logo {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      #mk-ls-logo img {
+        width: 72%;
+        height: 72%;
+        object-fit: contain;
+      }
+      #mk-ls-text {
+        font-weight: 600;
+        font-size: 120px;
+        letter-spacing: -0.03em;
+        color: var(--mk-ink);
+      }
+      #mk-ls-caption {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        font-weight: 500;
+        font-size: 32px;
+        color: var(--mk-ink-dim);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="mk-ls-root"
+      data-composition-id="mk-logo-sting"
+      data-start="0"
+      data-duration="3.5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <svg id="mk-ls-svg" viewBox="0 0 1920 1080">
+        <rect id="mk-ls-outline"></rect>
+      </svg>
+      <div id="mk-ls-logo"><span id="mk-ls-text"></span></div>
+      <div id="mk-ls-caption"></div>
+      <div
+        id="mk-ls-drv"
+        class="clip"
+        data-start="0"
+        data-duration="3.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 || {};
+
+        /* ---- published parameters (inspector-style CONFIG) ----
+           A logo preset: hairline rounded-square outline draws on, the
+           logo lands inside. logoType switches drop-zone image <-> wordmark
+           text (same animation shell — one logoType toggle). */
+        var CONFIG = {
+          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
+          logoType: "text", // "text" | "image"
+          text: "HF",
+          src: null, // image path when logoType === "image"
+          boxSize: 340, // outline square, px
+          radius: 72,
+          caption: "Built with HyperFrames",
+          animationOut: true,
+        };
+
+        var W = 1920,
+          H = 1080,
+          DUR = 3.5;
+
+        var root = document.getElementById("mk-ls-root");
+        var outline = document.getElementById("mk-ls-outline");
+        var logo = document.getElementById("mk-ls-logo");
+        var textEl = document.getElementById("mk-ls-text");
+        var caption = document.getElementById("mk-ls-caption");
+
+        var S = CONFIG.boxSize;
+        var bx = (W - S) / 2,
+          by = (H - S) / 2 - 40;
+        outline.setAttribute("x", bx);
+        outline.setAttribute("y", by);
+        outline.setAttribute("width", S);
+        outline.setAttribute("height", S);
+        outline.setAttribute("rx", CONFIG.radius);
+
+        logo.style.left = bx + "px";
+        logo.style.top = by + "px";
+        logo.style.width = S + "px";
+        logo.style.height = S + "px";
+        logo.style.borderRadius = CONFIG.radius + "px";
+
+        if (CONFIG.logoType === "image" && CONFIG.src) {
+          textEl.remove();
+          var img = document.createElement("img");
+          img.src = CONFIG.src;
+          logo.appendChild(img);
+        } else {
+          textEl.textContent = CONFIG.text;
+        }
+
+        caption.textContent = CONFIG.caption;
+        caption.style.top = by + S + 48 + "px";
+
+        var tl = gsap.timeline({ paused: true });
+
+        /* outline draws on */
+        var len = outline.getTotalLength();
+        gsap.set(outline, { strokeDasharray: len, strokeDashoffset: len });
+        tl.to(outline, { strokeDashoffset: 0, duration: 1.0, ease: "power2.inOut" }, 0.15);
+
+        /* logo lands inside */
+        gsap.set(logo, { opacity: 0, scale: 0.82 });
+        tl.to(logo, { opacity: 1, scale: 1, duration: 0.6, ease: "back.out(1.2)" }, 0.85);
+
+        /* caption */
+        gsap.set(caption, { opacity: 0, y: 12 });
+        tl.to(caption, { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 1.35);
+
+        /* exit + hard kill */
+        if (CONFIG.animationOut) {
+          tl.to([logo, caption], { opacity: 0, duration: 0.35, ease: "power2.in" }, DUR - 0.55);
+          tl.to(outline, { opacity: 0, duration: 0.35, ease: "power2.in" }, DUR - 0.5);
+        }
+        tl.set(root, { visibility: "hidden" }, DUR - 0.02);
+
+        window.__timelines["mk-logo-sting"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/mk-logo-sting/registry-item.json b/registry/blocks/mk-logo-sting/registry-item.json
new file mode 100644
index 0000000000..54e05e00d3
--- /dev/null
+++ b/registry/blocks/mk-logo-sting/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-logo-sting",
+  "type": "hyperframes:block",
+  "title": "Outline Logo Sting",
+  "description": "A hairline rounded-square outline draws on and the logo lands inside \u2014 image or text wordmark in the same shell",
+  "tags": [
+    "logo",
+    "sting",
+    "minimal"
+  ],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 3.5,
+  "files": [
+    {
+      "path": "mk-logo-sting.html",
+      "target": "compositions/mk-logo-sting.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 5be18ae282..4710ff2882 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -587,6 +587,10 @@
       "name": "mk-line-graph",
       "type": "hyperframes:block"
     },
+    {
+      "name": "mk-logo-sting",
+      "type": "hyperframes:block"
+    },
     {
       "name": "parallax-zoom",
       "type": "hyperframes:component"

From cc98f5fd6d84101708134d58d10c25aa28c2841f Mon Sep 17 00:00:00 2001
From: jbernard077 <jbernard077@yahoo.com>
Date: Sun, 5 Jul 2026 13:53:30 -0400
Subject: [PATCH 11/11] =?UTF-8?q?feat(registry):=20add=20mk-emphasis-type?=
 =?UTF-8?q?=20=E2=80=94=20background=20emphasis=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/catalog/components/mk-emphasis-type.mdx  | 38 ++++++++
 .../mk-emphasis-type/mk-emphasis-type.html    | 97 +++++++++++++++++++
 .../mk-emphasis-type/registry-item.json       | 19 ++++
 registry/registry.json                        |  4 +
 4 files changed, 158 insertions(+)
 create mode 100644 docs/catalog/components/mk-emphasis-type.mdx
 create mode 100644 registry/components/mk-emphasis-type/mk-emphasis-type.html
 create mode 100644 registry/components/mk-emphasis-type/registry-item.json

diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
new file mode 100644
index 0000000000..4333831e21
--- /dev/null
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -0,0 +1,38 @@
+---
+title: "Background Emphasis Type"
+description: "Oversized low-contrast background word drifting slowly behind the subject — typography as texture"
+---
+
+# Background Emphasis Type
+
+Oversized low-contrast background word drifting slowly behind the subject — typography as texture
+
+`typography` `text-treatment` `minimal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mk-emphasis-type
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mk-emphasis-type.html` | `compositions/components/mk-emphasis-type.html` | hyperframes:snippet |
+
+## Usage
+
+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/components/mk-emphasis-type/mk-emphasis-type.html b/registry/components/mk-emphasis-type/mk-emphasis-type.html
new file mode 100644
index 0000000000..7b63907368
--- /dev/null
+++ b/registry/components/mk-emphasis-type/mk-emphasis-type.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      /* ---- mk-emphasis-type ------------------------------------------------
+         Oversized low-contrast background word sliding slowly behind the
+         subject (the promo's "EMPHASIS" texture type). Decorative only —
+         keep it behind real content and mark it aria-hidden. */
+      .mk-emphasis {
+        --mk-font: "Inter", -apple-system, sans-serif;
+        --mk-emph-color: rgba(29, 29, 31, 0.07); /* dark scheme: rgba(245,245,247,0.08) */
+
+        position: absolute;
+        font-family: var(--mk-font);
+        font-weight: 600;
+        font-size: 260px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+        white-space: nowrap;
+        text-transform: uppercase;
+        color: var(--mk-emph-color);
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Self-preview wrapper. WIRING: copy the .mk-emphasis CSS, the markup
+         below (keep aria-hidden + data-layout-allow-overflow — the word is
+         decorative and usually wider than the canvas), and the helpers. -->
+    <div
+      id="mk-emph-root"
+      data-composition-id="mk-emphasis-type"
+      data-start="0"
+      data-duration="4"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        class="mk-emphasis"
+        id="mk-emph-demo"
+        aria-hidden="true"
+        data-layout-allow-overflow
+        style="top: 400px; left: -40px"
+      >
+        Emphasis
+      </div>
+      <div
+        id="mk-emph-drv"
+        class="clip"
+        data-start="0"
+        data-duration="4"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // ---- copy these helpers into the host script, then:
+        //   mkEmphasisIn(tl, "#mk-my-word", 1.0, { drift: -120, hold: 6 });
+        //   mkEmphasisOut(tl, "#mk-my-word", 7.5);
+        window.mkEmphasisIn = function (tl, target, at, opts) {
+          opts = opts || {};
+          var drift = opts.drift === undefined ? -100 : opts.drift;
+          var hold = opts.hold === undefined ? 5 : opts.hold;
+          gsap.set(target, { opacity: 0, x: 40 });
+          tl.to(target, { opacity: 1, duration: 1.0, ease: "power2.out" }, at);
+          tl.to(target, { x: 40 + drift, duration: hold, ease: "sine.inOut" }, at);
+        };
+        window.mkEmphasisOut = function (tl, target, at) {
+          tl.to(target, { opacity: 0, duration: 0.5, ease: "power2.in" }, at);
+        };
+
+        // Self-preview timeline (not part of the snippet you copy).
+        var tl = gsap.timeline({ paused: true });
+        window.mkEmphasisIn(tl, "#mk-emph-demo", 0.3, { drift: -110, hold: 3.2 });
+        window.mkEmphasisOut(tl, "#mk-emph-demo", 3.4);
+        tl.set("#mk-emph-root", { visibility: "hidden" }, 3.98);
+        window.__timelines["mk-emphasis-type"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/mk-emphasis-type/registry-item.json b/registry/components/mk-emphasis-type/registry-item.json
new file mode 100644
index 0000000000..847b28c006
--- /dev/null
+++ b/registry/components/mk-emphasis-type/registry-item.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mk-emphasis-type",
+  "type": "hyperframes:component",
+  "title": "Background Emphasis Type",
+  "description": "Oversized low-contrast background word drifting slowly behind the subject \u2014 typography as texture",
+  "tags": [
+    "typography",
+    "text-treatment",
+    "minimal"
+  ],
+  "files": [
+    {
+      "path": "mk-emphasis-type.html",
+      "target": "compositions/components/mk-emphasis-type.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 4710ff2882..c0a08860f7 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -610,6 +610,10 @@
     {
       "name": "mk-usage-arc",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "mk-emphasis-type",
+      "type": "hyperframes:component"
     }
   ]
 }
