From 392a9d251a4feadbf7703ba4f9157c1857c7a59b Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Thu, 23 Jul 2026 21:31:46 +0000
Subject: [PATCH] feat(registry): make caption-emoji-pop data-driven with
 generic emoji lexicon

Retrofits caption-emoji-pop onto the shared HyperFrames caption-data runtime
(Blocks A-D) and the emphasis heuristic (Block E), replacing the hardcoded
7-word emoji map, fixed KEYWORDS set, and TRANSITION_WORDS set with a
generic ~40-entry lexicon and HF_STOPWORDS/hfIsEmphasisWord. The component
now consumes brand.primaryColor (hfPrimaryColor) and brand.accentColor
(hfAccentColors) and rescales stage/font/emoji sizing to the runtime
resolution via layout.fontScale/scaleX/scaleY.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../caption-emoji-pop/caption-emoji-pop.html  | 519 ++++++++++++++----
 1 file changed, 419 insertions(+), 100 deletions(-)

diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index f8a863d2e..d4107123b 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -125,22 +125,185 @@
     </div>
 
     <script>
-      var DURATION = 8;
-      var SAFE_ZONE_WIDTH = 1400;
-      var CAPTION_FONT_SIZE = 72;
-      var MAX_WORDS_PER_GROUP = 3;
-      var WORD_SPACING = 14;
-      var PAUSE_THRESHOLD = 0.1;
-      var ENTRY_FRAMES = 4;
-      var EXIT_FRAMES = 3;
-      var FPS = 30;
-      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
-      var EXIT_DURATION = EXIT_FRAMES / FPS;
-      var FONT_WIDTH_SAFETY = 1.14;
-      var PRIMARY_COLOR = "#FFFFFF";
-      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
-      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
-      var TRANSITION_WORDS = new Set([
+      var HF_COMPOSITION_ID = "caption-emoji-pop";
+      var HF_ROOT_ID = "emoji-pop";
+      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 HF_STOPWORDS = new Set([
         "the",
         "a",
         "an",
@@ -193,49 +356,115 @@
         "up",
         "out",
         "about",
+        "into",
+        "over",
+        "after",
+        "before",
+        "your",
+        "you",
+        "our",
+        "we",
+        "they",
+        "them",
+        "their",
+        "there",
+        "here",
+        "when",
+        "what",
+        "which",
+        "who",
+        "how",
+        "all",
+        "any",
+        "some",
+        "more",
+        "most",
+        "other",
+        "than",
+        "too",
+        "very",
+        "also",
+        "because",
       ]);
 
-      // Emoji map for key words
-      var WORD_EMOJI = {
-        hyperframes: "🎬",
-        html: "💻",
-        professional: "✨",
-        code: "⌨️",
-        cinema: "🎥",
-        video: "📹",
-        frame: "🖼️",
-      };
+      function hfIsEmphasisWord(text) {
+        var clean = String(text)
+          .toLowerCase()
+          .replace(/[^a-z]/g, "");
+        return clean.length >= 5 && !HF_STOPWORDS.has(clean);
+      }
 
-      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 },
-      ];
+      var DURATION, SAFE_ZONE_WIDTH, CAPTION_FONT_SIZE, WORD_SPACING;
+      var MAX_WORDS_PER_GROUP = 3;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_FRAMES = 4;
+      var EXIT_FRAMES = 3;
+      var FPS = 30;
+      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+      var EXIT_DURATION = EXIT_FRAMES / FPS;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+      var hfPrimaryColor = PRIMARY_COLOR;
+      var hfAccentColors = ACCENT_COLORS;
+      var hfFontScale = 1;
+
+      // Emoji map for a generic keyword lexicon (not tied to the demo transcript)
+      var WORD_EMOJI = {
+        amazing: "🤩",
+        awesome: "🔥",
+        big: "🐘",
+        brain: "🧠",
+        build: "🛠️",
+        built: "🛠️",
+        celebrate: "🎉",
+        change: "🔄",
+        cinema: "🎥",
+        code: "⌨️",
+        customers: "🤝",
+        data: "📊",
+        dream: "💭",
+        easy: "👌",
+        fast: "⚡",
+        fire: "🔥",
+        frame: "🖼️",
+        free: "🎁",
+        fun: "🎈",
+        future: "🔮",
+        global: "🌍",
+        grow: "📈",
+        growth: "📈",
+        heart: "❤️",
+        huge: "🐘",
+        idea: "💡",
+        launch: "🚀",
+        learn: "📚",
+        love: "❤️",
+        magic: "✨",
+        money: "💰",
+        music: "🎵",
+        new: "✨",
+        party: "🎉",
+        perfect: "💯",
+        power: "💪",
+        professional: "✨",
+        rocket: "🚀",
+        save: "🛟",
+        saves: "🛟",
+        secret: "🤫",
+        smart: "🧠",
+        star: "⭐",
+        stop: "✋",
+        strong: "💪",
+        success: "🏆",
+        team: "👥",
+        time: "⏰",
+        today: "📅",
+        video: "📹",
+        win: "🏆",
+        world: "🌍",
+        wow: "😮",
+      };
 
       function normalizeWords(rawWords) {
         return rawWords
@@ -262,17 +491,17 @@
       function assignWordColors(words, groupIndex) {
         return words.map(function (word, index) {
           var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
-          if (KEYWORDS.has(clean)) {
-            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
-            return ACCENT_COLORS[ci];
+          if (hfIsEmphasisWord(word.text)) {
+            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * hfAccentColors.length);
+            return hfAccentColors[ci];
           }
-          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          if (HF_STOPWORDS.has(clean)) return hfPrimaryColor;
           var rand = seededRandom(groupIndex * 13 + index);
           if (rand > 0.55) {
-            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
-            return ACCENT_COLORS[ci2];
+            var ci2 = Math.floor(rand * hfAccentColors.length) % hfAccentColors.length;
+            return hfAccentColors[ci2];
           }
-          return PRIMARY_COLOR;
+          return hfPrimaryColor;
         });
       }
 
@@ -398,13 +627,14 @@
             var emojiEl = document.createElement("div");
             emojiEl.className = "caption-emoji";
             emojiEl.textContent = group.emoji;
+            emojiEl.style.fontSize = Math.round(56 * hfFontScale) + "px";
             groupEl.appendChild(emojiEl);
           }
 
           var lineEl = document.createElement("div");
           lineEl.className = "caption-line";
           group.words.forEach(function (word, wordIndex) {
-            var color = group.colors[wordIndex] || PRIMARY_COLOR;
+            var color = group.colors[wordIndex] || hfPrimaryColor;
             var wordEl = document.createElement("span");
             wordEl.className = "caption-word";
             wordEl.textContent = word.text.toUpperCase();
@@ -419,49 +649,138 @@
         });
       }
 
-      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);
+        WORD_SPACING = Math.round(14 * layout.fontScale);
+        hfFontScale = 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(280 * layout.fontScale);
+        stage.style.width = SAFE_ZONE_WIDTH + "px";
+        stage.style.height = stageHeight + "px";
+        stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
 
-      var allGroupEls = GROUPS.map(function (_, i) {
-        return document.getElementById("caption-group-" + i);
-      });
+        var rootEl = document.getElementById(HF_ROOT_ID);
+        var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
+        var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
+        hfPrimaryColor = /^#[0-9a-f]{6}$/i.test(primary) ? primary : "#FFFFFF";
+        hfAccentColors = /^#[0-9a-f]{6}$/i.test(accent)
+          ? [accent]
+          : ["#FF76FF", "#FF0002", "#B2F7FF"];
 
-      GROUPS.forEach(function (group, groupIndex) {
-        var groupEl = allGroupEls[groupIndex];
-        var visibleStart = visibleStarts[groupIndex];
-        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_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);
+        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, scaleX: 0.8, scaleY: 1 }, visibleStart);
-        tl.to(
-          groupEl,
-          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-          visibleStart,
-        );
-        tl.to(
-          groupEl,
-          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
-          exitStart,
-        );
-        tl.set(groupEl, { opacity: 0 }, visibleEnd);
-      });
+        var tl = gsap.timeline({ paused: true });
 
-      window.__timelines["caption-emoji-pop"] = tl;
+        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;
+          var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+          allGroupEls.forEach(function (otherEl, otherIndex) {
+            if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+          });
+
+          tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+          tl.to(
+            groupEl,
+            { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+            visibleStart,
+          );
+          tl.to(
+            groupEl,
+            {
+              scaleX: 0.75,
+              opacity: 0.8,
+              duration: EXIT_DURATION,
+              ease: "power2.in",
+              force3D: true,
+            },
+            exitStart,
+          );
+          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
+        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+        tl.render(0, true, true);
+        hfCurrentTimeline = tl;
+        window.__timelines = window.__timelines || {};
+        window.__timelines[HF_COMPOSITION_ID] = tl;
+        hfRunGate(v.words, v.durationS, null);
+      }
+      window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+      (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>