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] =?UTF-8?q?feat(registry):=20add=20mk-placeholder-grid=20?=
 =?UTF-8?q?=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 000000000..9148e41b9
--- /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 000000000..d6666d2ef
--- /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 000000000..5ca57ec2d
--- /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 27a1843df..3efed99e1 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"
