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] =?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"