chore: import upstream snapshot with attribution

2026-07-13 12:58:35 +08:00
commit 85453da49f
4031 changed files with 710987 additions and 0 deletions
@@ -0,0 +1,401 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pill Karaoke</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: transparent;
+        font-family: "Poppins", Arial, sans-serif;
+      }
+
+      #pill-karaoke {
+        pointer-events: none;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      .caption-pill {
+        width: auto;
+        max-width: 1600px;
+        padding: 18px 60px 20px;
+        border-radius: 22px;
+        background: #e7e5e7;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        text-align: center;
+        overflow: visible;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        color: #a6a6a6;
+        font-family: "Poppins", Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.16;
+        letter-spacing: 0;
+        white-space: nowrap;
+        word-break: normal;
+        overflow: visible;
+      }
+
+      .caption-line {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        width: 100%;
+        max-width: none;
+        line-height: 1.16;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #a6a6a6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="pill-karaoke"
+      data-composition-id="caption-pill-karaoke"
+      data-timeline-locked
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var PILL_MAX_WIDTH = 1400;
+      var PILL_MIN_PADDING_X = 30;
+      var PILL_MAX_PADDING_X = 60;
+      var FONT_WIDTH_SAFETY = 1.18;
+      var FONT_FAMILY = "Poppins";
+      var FONT_WEIGHT = "700";
+      var BASE_FONT_SIZE = 72;
+      var MIN_FONT_SIZE = 52;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var GROUP_END_BUFFER = 0.3;
+      var COLOR_INACTIVE = "#A6A6A6";
+      var COLOR_ACTIVE = "#1C1E1D";
+      var COLOR_FADE_DURATION = 0.1;
+      var WORD_FADE_LEAD = 0.05;
+
+      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) {
+            var text = String(item.word || item.text || "").trim();
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (w) {
+            return w.text.length > 0;
+          });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWordWidth(text, fontSize) {
+        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
+          );
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, fontSize) {
+        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+        if (
+          words.some(function (w) {
+            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+          })
+        ) {
+          return null;
+        }
+        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+        var bestSplit = null;
+        var bestImbalance = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var firstLine = words.slice(0, split);
+          var secondLine = words.slice(split);
+          var firstWidth = measureLineWidth(firstLine, fontSize);
+          var secondWidth = measureLineWidth(secondLine, fontSize);
+          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+            var imbalance = Math.abs(firstWidth - secondWidth);
+            if (imbalance < bestImbalance) {
+              bestSplit = [firstLine, secondLine];
+              bestImbalance = imbalance;
+            }
+          }
+        }
+        return bestSplit;
+      }
+
+      function fitsInTwoLinesAtSize(words, fontSize) {
+        return splitLinesForGroup(words, fontSize) !== null;
+      }
+
+      function planPillLayout(words, fontSize) {
+        var lines = splitLinesForGroup(words, fontSize) || [words];
+        var widestLine = lines.reduce(function (max, lineWords) {
+          return Math.max(max, measureLineWidth(lineWords, fontSize));
+        }, 0);
+        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+        return { lines: lines, padX: padX, pillWidth: pillWidth };
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var testGroup = current.concat([word]);
+          var nextWord = words[index + 1];
+          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+          if (wouldExceedMaxWords || wouldExceedTwoLines) {
+            if (current.length) {
+              groups.push({
+                words: current.slice(),
+                start: current[0].start,
+                end: current[current.length - 1].end,
+              });
+            }
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var hasPunctuation = /[,.:!?]$/.test(word.text);
+          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+            groups.push({
+              words: current.slice(),
+              start: current[0].start,
+              end: current[current.length - 1].end,
+            });
+            current = [];
+          }
+        });
+        if (current.length)
+          groups.push({
+            words: current.slice(),
+            start: current[0].start,
+            end: current[current.length - 1].end,
+          });
+        return groups;
+      }
+
+      function fontSizeForGroup(words) {
+        var size = BASE_FONT_SIZE;
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+          size -= 2;
+        }
+        return size;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var pillEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          var fontSize = fontSizeForGroup(group.words);
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          pillEl.className = "caption-pill";
+          copyEl.className = "caption-copy";
+          copyEl.style.fontSize = fontSize + "px";
+          var indexedWords = group.words.map(function (word, wordIndex) {
+            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
+          });
+          var layout = planPillLayout(indexedWords, fontSize);
+          pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.paddingLeft = layout.padX + "px";
+          pillEl.style.paddingRight = layout.padX + "px";
+          layout.lines.slice(0, 2).forEach(function (lineWords) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineWords.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          pillEl.appendChild(copyEl);
+          groupEl.appendChild(pillEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = document.getElementById("caption-group-" + groupIndex);
+        var nextGroup = GROUPS[groupIndex + 1];
+        var isLastGroup = groupIndex === GROUPS.length - 1;
+        var effectiveEnd = isLastGroup
+          ? DURATION
+          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var visibleStart = Math.max(0, group.start);
+        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+        tl.set(groupEl, { opacity: 1 }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+        group.words.forEach(function (word, wordIndex) {
+          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+          var isFirstWord = wordIndex === 0;
+          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
+          if (isFirstWord) return;
+          tl.to(
+            wordEl,
+            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
+            wordStart,
+          );
+        });
+      });
+
+      window.__timelines["caption-pill-karaoke"] = tl;
+    </script>
+  </body>
+</html>
@@ -0,0 +1,399 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pill Karaoke</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Poppins", Arial, sans-serif;
+      }
+
+      #pill-karaoke {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      .caption-pill {
+        width: auto;
+        max-width: 1600px;
+        padding: 18px 60px 20px;
+        border-radius: 22px;
+        background: #e7e5e7;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        text-align: center;
+        overflow: visible;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        color: #a6a6a6;
+        font-family: "Poppins", Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.16;
+        letter-spacing: 0;
+        white-space: nowrap;
+        word-break: normal;
+        overflow: visible;
+      }
+
+      .caption-line {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        width: 100%;
+        max-width: none;
+        line-height: 1.16;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #a6a6a6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="pill-karaoke"
+      data-composition-id="caption-pill-karaoke"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var PILL_MAX_WIDTH = 1400;
+      var PILL_MIN_PADDING_X = 30;
+      var PILL_MAX_PADDING_X = 60;
+      var FONT_WIDTH_SAFETY = 1.18;
+      var FONT_FAMILY = "Poppins";
+      var FONT_WEIGHT = "700";
+      var BASE_FONT_SIZE = 72;
+      var MIN_FONT_SIZE = 52;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var GROUP_END_BUFFER = 0.3;
+      var COLOR_INACTIVE = "#A6A6A6";
+      var COLOR_ACTIVE = "#1C1E1D";
+      var COLOR_FADE_DURATION = 0.1;
+      var WORD_FADE_LEAD = 0.05;
+
+      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) {
+            var text = String(item.word || item.text || "").trim();
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (w) {
+            return w.text.length > 0;
+          });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWordWidth(text, fontSize) {
+        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return (
+            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
+          );
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, fontSize) {
+        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+        if (
+          words.some(function (w) {
+            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+          })
+        ) {
+          return null;
+        }
+        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+        var bestSplit = null;
+        var bestImbalance = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var firstLine = words.slice(0, split);
+          var secondLine = words.slice(split);
+          var firstWidth = measureLineWidth(firstLine, fontSize);
+          var secondWidth = measureLineWidth(secondLine, fontSize);
+          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+            var imbalance = Math.abs(firstWidth - secondWidth);
+            if (imbalance < bestImbalance) {
+              bestSplit = [firstLine, secondLine];
+              bestImbalance = imbalance;
+            }
+          }
+        }
+        return bestSplit;
+      }
+
+      function fitsInTwoLinesAtSize(words, fontSize) {
+        return splitLinesForGroup(words, fontSize) !== null;
+      }
+
+      function planPillLayout(words, fontSize) {
+        var lines = splitLinesForGroup(words, fontSize) || [words];
+        var widestLine = lines.reduce(function (max, lineWords) {
+          return Math.max(max, measureLineWidth(lineWords, fontSize));
+        }, 0);
+        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+        return { lines: lines, padX: padX, pillWidth: pillWidth };
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var testGroup = current.concat([word]);
+          var nextWord = words[index + 1];
+          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+          if (wouldExceedMaxWords || wouldExceedTwoLines) {
+            if (current.length) {
+              groups.push({
+                words: current.slice(),
+                start: current[0].start,
+                end: current[current.length - 1].end,
+              });
+            }
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var hasPunctuation = /[,.:!?]$/.test(word.text);
+          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+            groups.push({
+              words: current.slice(),
+              start: current[0].start,
+              end: current[current.length - 1].end,
+            });
+            current = [];
+          }
+        });
+        if (current.length)
+          groups.push({
+            words: current.slice(),
+            start: current[0].start,
+            end: current[current.length - 1].end,
+          });
+        return groups;
+      }
+
+      function fontSizeForGroup(words) {
+        var size = BASE_FONT_SIZE;
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+          size -= 2;
+        }
+        return size;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var pillEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          var fontSize = fontSizeForGroup(group.words);
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          pillEl.className = "caption-pill";
+          copyEl.className = "caption-copy";
+          copyEl.style.fontSize = fontSize + "px";
+          var indexedWords = group.words.map(function (word, wordIndex) {
+            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
+          });
+          var layout = planPillLayout(indexedWords, fontSize);
+          pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.paddingLeft = layout.padX + "px";
+          pillEl.style.paddingRight = layout.padX + "px";
+          layout.lines.slice(0, 2).forEach(function (lineWords) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineWords.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          pillEl.appendChild(copyEl);
+          groupEl.appendChild(pillEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = document.getElementById("caption-group-" + groupIndex);
+        var nextGroup = GROUPS[groupIndex + 1];
+        var isLastGroup = groupIndex === GROUPS.length - 1;
+        var effectiveEnd = isLastGroup
+          ? DURATION
+          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var visibleStart = Math.max(0, group.start);
+        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+        tl.set(groupEl, { opacity: 1 }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+        group.words.forEach(function (word, wordIndex) {
+          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+          var isFirstWord = wordIndex === 0;
+          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
+          if (isFirstWord) return;
+          tl.to(
+            wordEl,
+            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
+            wordStart,
+          );
+        });
+      });
+
+      window.__timelines["caption-pill-karaoke"] = tl;
+    </script>
+  </body>
+</html>
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-pill-karaoke",
+  "type": "hyperframes:component",
+  "title": "Pill Karaoke",
+  "description": "Pill-shaped container with per-word karaoke color highlight",
+  "tags": ["captions", "caption-style", "karaoke", "pill"],
+  "files": [
+    {
+      "path": "caption-pill-karaoke.html",
+      "target": "compositions/components/caption-pill-karaoke.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
+  }
+}