From c67e9dc1f843122225468ce63a67c57f70c2bba2 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 20:18:39 +0000
Subject: [PATCH] feat(registry): make caption-weight-shift data-driven via
 caption-data runtime

---
 .../caption-weight-shift.html                 | 383 ++++++++++++++----
 1 file changed, 301 insertions(+), 82 deletions(-)

diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index a6f37fe0b..8bcfbe9fb 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -90,7 +90,7 @@
         max-width: 1400px;
         line-height: 1.1;
         white-space: nowrap;
-        color: #ffffff;
+        color: var(--hf-caption-primary, #ffffff);
         font-family: "Montserrat", Arial, sans-serif;
         font-weight: 300;
         font-size: 72px;
@@ -117,12 +117,188 @@
     </div>
 
     <script>
-      var DURATION = 8;
-      var SAFE_ZONE_WIDTH = 1400;
-      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;
-      var CAPTION_FONT_SIZE = 72;
+      var HF_COMPOSITION_ID = "caption-weight-shift";
+      var HF_ROOT_ID = "weight-shift";
+      var HF_GROUP_SELECTOR = ".caption-group";
+
+      var HF_DEMO_DATA = {
+        version: 1,
+        segments: [
+          {
+            start: 0,
+            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+            words: [
+              { text: "Every", start: 0.0, end: 0.3 },
+              { text: "great", start: 0.3, end: 0.55 },
+              { text: "video", start: 0.55, end: 0.85 },
+              { text: "starts", start: 0.85, end: 1.1 },
+              { text: "with", start: 1.1, end: 1.25 },
+              { text: "a", start: 1.25, end: 1.35 },
+              { text: "single", start: 1.35, end: 1.65 },
+              { text: "frame.", start: 1.65, end: 2.0 },
+              { text: "HyperFrames", start: 2.1, end: 2.65 },
+              { text: "lets", start: 2.65, end: 2.85 },
+              { text: "you", start: 2.85, end: 2.95 },
+              { text: "write", start: 2.95, end: 3.15 },
+              { text: "HTML", start: 3.15, end: 3.55 },
+              { text: "and", start: 3.55, end: 3.65 },
+              { text: "render", start: 3.65, end: 3.95 },
+              { text: "professional", start: 3.95, end: 4.45 },
+              { text: "video.", start: 4.45, end: 4.8 },
+              { text: "No", start: 4.9, end: 5.05 },
+              { text: "timeline.", start: 5.05, end: 5.45 },
+              { text: "No", start: 5.5, end: 5.65 },
+              { text: "drag", start: 5.65, end: 5.85 },
+              { text: "and", start: 5.85, end: 5.95 },
+              { text: "drop.", start: 5.95, end: 6.25 },
+              { text: "Just", start: 6.35, end: 6.55 },
+              { text: "code", start: 6.55, end: 6.8 },
+              { text: "that", start: 6.8, end: 6.95 },
+              { text: "becomes", start: 6.95, end: 7.3 },
+              { text: "cinema.", start: 7.3, end: 7.7 },
+            ],
+          },
+        ],
+      };
+
+      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+      var HF_CONTRACT_VERSION = 1;
+      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+
+      function hfFlattenSegments(segments) {
+        var out = [];
+        (segments || []).forEach(function (seg) {
+          ((seg && seg.words) || []).forEach(function (w) {
+            var start = Math.max(0, Number(w.start) || 0);
+            out.push({
+              text: String(w.word || w.text || "").trim(),
+              start: start,
+              end: Math.max(start, Number(w.end) || 0),
+            });
+          });
+        });
+        out.sort(function (a, b) {
+          return a.start - b.start;
+        });
+        return out.filter(function (w) {
+          return w.text.length > 0;
+        });
+      }
+
+      function hfDeriveDuration(words) {
+        var end = 0;
+        words.forEach(function (w) {
+          if (w.end > end) end = w.end;
+        });
+        return end;
+      }
+
+      function hfValidate(data) {
+        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+          return { ok: false, reason: "unsupported-version" };
+        }
+        if (!Array.isArray(data.segments) || data.segments.length === 0) {
+          return { ok: false, reason: "no-segments" };
+        }
+        if (data.displayMode != null && data.displayMode !== "full") {
+          return { ok: false, reason: "unsupported-displayMode" };
+        }
+        var words = hfFlattenSegments(data.segments);
+        if (words.length === 0) return { ok: false, reason: "no-words" };
+        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+      }
+
+      function hfApplyStageConfig(data, durationS) {
+        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+        var root = document.getElementById(HF_ROOT_ID);
+        [document.documentElement, document.body, root].forEach(function (el) {
+          el.style.width = W + "px";
+          el.style.height = H + "px";
+        });
+        root.setAttribute("data-width", String(W));
+        root.setAttribute("data-height", String(H));
+        root.setAttribute("data-duration", String(durationS));
+        var brand = (data && data.brand) || {};
+        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+        }
+        if (typeof brand.accentColor === "string" && brand.accentColor) {
+          root.style.setProperty("--hf-caption-accent", brand.accentColor);
+        }
+        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
+      }
+
+      function hfPublishStatus(status) {
+        window.__HF_CAPTION_STATUS = status;
+        document
+          .getElementById(HF_ROOT_ID)
+          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+      }
+
+      function hfRunGate(words, durationS, failReason) {
+        if (failReason) {
+          hfPublishStatus({
+            ok: false,
+            present: false,
+            contained: false,
+            reason: failReason,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS || 0,
+          });
+          return;
+        }
+        var root = document.getElementById(HF_ROOT_ID);
+        var rootRect = root.getBoundingClientRect();
+        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+        var present = false;
+        var contained = true;
+        var tokens = [];
+        words.forEach(function (w) {
+          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+          if (t) tokens.push(t);
+        });
+        groups.forEach(function (el) {
+          var prevOpacity = el.style.opacity;
+          var prevVisibility = el.style.visibility;
+          el.style.opacity = "1";
+          el.style.visibility = "visible";
+          var r = el.getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) {
+            var text = (el.textContent || "").toLowerCase();
+            for (var i = 0; i < tokens.length; i++) {
+              if (text.indexOf(tokens[i]) !== -1) {
+                present = true;
+                break;
+              }
+            }
+            if (
+              r.left < rootRect.left - 1 ||
+              r.right > rootRect.right + 1 ||
+              r.top < rootRect.top - 1 ||
+              r.bottom > rootRect.bottom + 1
+            ) {
+              contained = false;
+            }
+          }
+          el.style.opacity = prevOpacity;
+          el.style.visibility = prevVisibility;
+        });
+        hfPublishStatus({
+          ok: present && contained,
+          present: present,
+          contained: contained,
+          version: HF_CONTRACT_VERSION,
+          durationS: durationS,
+        });
+      }
+
+      var SAFE_ZONE_WIDTH, MAX_LINE_WIDTH, CAPTION_FONT_SIZE, DURATION;
       var MAX_WORDS_PER_GROUP = 4;
-      var WORD_SPACING = 12;
+      var WORD_SPACING_DESIGN = 12;
+      var WORD_SPACING;
       var PAUSE_THRESHOLD = 0.1;
       var ENTRY_DURATION = 100 / 1000;
       var WEIGHT_TRANSITION = 100 / 1000;
@@ -130,37 +306,6 @@
       var FONT_WEIGHT_LIGHT = 300;
       var FONT_WEIGHT_BOLD = 700;
 
-      var TRANSCRIPT = [
-        { text: "Every", start: 0.0, end: 0.3 },
-        { text: "great", start: 0.3, end: 0.55 },
-        { text: "video", start: 0.55, end: 0.85 },
-        { text: "starts", start: 0.85, end: 1.1 },
-        { text: "with", start: 1.1, end: 1.25 },
-        { text: "a", start: 1.25, end: 1.35 },
-        { text: "single", start: 1.35, end: 1.65 },
-        { text: "frame.", start: 1.65, end: 2.0 },
-        { text: "HyperFrames", start: 2.1, end: 2.65 },
-        { text: "lets", start: 2.65, end: 2.85 },
-        { text: "you", start: 2.85, end: 2.95 },
-        { text: "write", start: 2.95, end: 3.15 },
-        { text: "HTML", start: 3.15, end: 3.55 },
-        { text: "and", start: 3.55, end: 3.65 },
-        { text: "render", start: 3.65, end: 3.95 },
-        { text: "professional", start: 3.95, end: 4.45 },
-        { text: "video.", start: 4.45, end: 4.8 },
-        { text: "No", start: 4.9, end: 5.05 },
-        { text: "timeline.", start: 5.05, end: 5.45 },
-        { text: "No", start: 5.5, end: 5.65 },
-        { text: "drag", start: 5.65, end: 5.85 },
-        { text: "and", start: 5.85, end: 5.95 },
-        { text: "drop.", start: 5.95, end: 6.25 },
-        { text: "Just", start: 6.35, end: 6.55 },
-        { text: "code", start: 6.55, end: 6.8 },
-        { text: "that", start: 6.8, end: 6.95 },
-        { text: "becomes", start: 6.95, end: 7.3 },
-        { text: "cinema.", start: 7.3, end: 7.7 },
-      ];
-
       function normalizeWords(rawWords) {
         return rawWords
           .map(function (item) {
@@ -190,7 +335,6 @@
 
       var measureCanvas = document.createElement("canvas");
       var measureContext = measureCanvas.getContext("2d");
-      measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
 
       function measureWord(word) {
         return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
@@ -323,6 +467,7 @@
             lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
             lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
             lineEl.style.fontSize = computedSize + "px";
+            lineEl.style.maxWidth = SAFE_ZONE_WIDTH + "px";
             line.words.forEach(function (word, wordIndex) {
               var wordEl = document.createElement("span");
               wordEl.textContent = word.text.toLowerCase();
@@ -336,62 +481,136 @@
         });
       }
 
-      var WORDS = normalizeWords(TRANSCRIPT);
-      var GROUPS = makeGroups(WORDS);
-      buildCaptions(GROUPS);
+      function hfTeardown() {
+        document.getElementById("caption-stage").innerHTML = "";
+      }
 
-      window.__timelines = window.__timelines || {};
-      var tl = gsap.timeline({ paused: true });
+      function hfBuild(words, layout, durationS) {
+        DURATION = durationS;
+        CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
+        SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
+        MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - Math.round(40 * layout.scaleX);
+        WORD_SPACING = Math.round(WORD_SPACING_DESIGN * layout.fontScale);
 
-      var visibleStarts = GROUPS.map(function (group, groupIndex) {
-        var prev = GROUPS[groupIndex - 1];
-        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-        var entryLead = Math.min(ENTRY_DURATION, availableGap);
-        return Math.max(0, group.start - entryLead);
-      });
+        var stage = document.getElementById("caption-stage");
+        var stageHeight = Math.round(278 * layout.fontScale);
+        stage.style.width = SAFE_ZONE_WIDTH + "px";
+        stage.style.height = stageHeight + "px";
+        stage.style.bottom = Math.round(100 * layout.scaleY) + "px";
 
-      var allGroupEls = GROUPS.map(function (_, i) {
-        return document.getElementById("caption-group-" + i);
-      });
+        measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
 
-      GROUPS.forEach(function (group, groupIndex) {
-        var groupEl = allGroupEls[groupIndex];
-        var visibleStart = visibleStarts[groupIndex];
-        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-
-        allGroupEls.forEach(function (otherEl, otherIndex) {
-          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        var WORDS = normalizeWords(words);
+        var GROUPS = makeGroups(WORDS);
+        buildCaptions(GROUPS);
+        // set per-group sizing to match the runtime stage
+        GROUPS.forEach(function (_, i) {
+          var el = document.getElementById("caption-group-" + i);
+          el.style.width = SAFE_ZONE_WIDTH + "px";
+          el.style.height = stageHeight + "px";
         });
 
-        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
-        tl.to(
-          groupEl,
-          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-          visibleStart,
-        );
+        var tl = gsap.timeline({ paused: true });
 
-        if (group.lines.length === 2) {
-          var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
-          var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
-          var line2FirstWord = group.lines[1].words[0];
-          var switchTime = line2FirstWord.start;
+        var visibleStarts = GROUPS.map(function (group, groupIndex) {
+          var prev = GROUPS[groupIndex - 1];
+          var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+          var entryLead = Math.min(ENTRY_DURATION, availableGap);
+          return Math.max(0, group.start - entryLead);
+        });
 
+        var allGroupEls = GROUPS.map(function (_, i) {
+          return document.getElementById("caption-group-" + i);
+        });
+
+        GROUPS.forEach(function (group, groupIndex) {
+          var groupEl = allGroupEls[groupIndex];
+          var visibleStart = visibleStarts[groupIndex];
+          var visibleEnd =
+            groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+          allGroupEls.forEach(function (otherEl, otherIndex) {
+            if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+          });
+
+          tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
           tl.to(
-            line1El,
-            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-            switchTime,
-          );
-          tl.to(
-            line2El,
-            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-            switchTime,
+            groupEl,
+            { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+            visibleStart,
           );
+
+          if (group.lines.length === 2) {
+            var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+            var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+            var line2FirstWord = group.lines[1].words[0];
+            var switchTime = line2FirstWord.start;
+
+            tl.to(
+              line1El,
+              { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+              switchTime,
+            );
+            tl.to(
+              line2El,
+              { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+              switchTime,
+            );
+          }
+
+          tl.set(groupEl, { opacity: 0 }, visibleEnd);
+        });
+
+        return tl;
+      }
+
+      var hfCurrentTimeline = null;
+
+      function hfAttach(data) {
+        var v = hfValidate(data);
+        if (!v.ok) {
+          hfRunGate([], 0, v.reason);
+          return;
         }
+        if (hfCurrentTimeline) {
+          hfCurrentTimeline.kill();
+          hfCurrentTimeline = null;
+        }
+        hfTeardown();
+        var layout = hfApplyStageConfig(data, v.durationS);
+        var tl = hfBuild(v.words, layout, v.durationS);
+        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+        tl.seek(0);
+        hfCurrentTimeline = tl;
+        window.__timelines = window.__timelines || {};
+        window.__timelines[HF_COMPOSITION_ID] = tl;
+        hfRunGate(v.words, v.durationS, null);
+      }
+      window.__HF_CAPTION_ATTACH__ = hfAttach;
 
-        tl.set(groupEl, { opacity: 0 }, visibleEnd);
-      });
-
-      window.__timelines["caption-weight-shift"] = tl;
+      (function hfBoot() {
+        function start(data) {
+          var ready =
+            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+          ready.then(function () {
+            hfAttach(data);
+          });
+        }
+        if (window.__HF_CAPTION__) {
+          start(window.__HF_CAPTION__);
+          return;
+        }
+        fetch("./caption-data.json")
+          .then(function (r) {
+            return r.ok ? r.json() : null;
+          })
+          .catch(function () {
+            return null;
+          })
+          .then(function (json) {
+            start(json || HF_DEMO_DATA);
+          });
+      })();
     </script>
   </body>
 </html>