diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
new file mode 100644
index 000000000..5937f0962
--- /dev/null
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -0,0 +1,38 @@
+---
+title: "Highlight"
+description: "Red background sweep behind each active word, TikTok-style"
+---
+
+# Highlight
+
+Red background sweep behind each active word, TikTok-style
+
+`captions` `caption-style` `highlight` `social` `tiktok`
+
+<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/components/caption-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-highlight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-highlight.html` | `compositions/components/caption-highlight.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/docs.json b/docs/docs.json
index 45263e34f..acc33ee14 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -103,6 +103,7 @@
               "catalog/components/caption-emoji-pop",
               "catalog/components/caption-glitch-rgb",
               "catalog/components/caption-gradient-fill",
+              "catalog/components/caption-highlight",
               "catalog/components/caption-kinetic-slam",
               "catalog/components/caption-matrix-decode",
               "catalog/components/caption-neon-accent",
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index b533fb2cb..1d940f7ff 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -114,6 +114,21 @@
     "href": "/catalog/components/caption-gradient-fill",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
   },
+  {
+    "name": "caption-highlight",
+    "type": "component",
+    "title": "Highlight",
+    "description": "Red background sweep behind each active word, TikTok-style",
+    "tags": [
+      "captions",
+      "caption-style",
+      "highlight",
+      "social",
+      "tiktok"
+    ],
+    "href": "/catalog/components/caption-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png"
+  },
   {
     "name": "caption-kinetic-slam",
     "type": "component",
diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html
index 986368d7f..a519dbfe8 100644
--- a/registry/components/caption-clip-wipe/caption-clip-wipe.html
+++ b/registry/components/caption-clip-wipe/caption-clip-wipe.html
@@ -169,7 +169,7 @@
           var ws = pair[0],
             we = pair[1];
           var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
-          var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
           return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
         });
 
@@ -210,13 +210,13 @@
 
             tl.to(
               wordEl,
-              { clipPath: "inset(0 0% 0 0)", duration: 0.15, ease: "power3.out" },
+              { clipPath: "inset(0 0% 0 0)", duration: 0.3, ease: "power2.out" },
               w.start,
             );
             if (isKW) {
               tl.to(wordEl, { color: "#FFD700", duration: 0.05 }, w.start + 0.1);
             }
-            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", duration: 0.12 }, w.end);
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", duration: 0.2 }, w.end);
           });
 
           var wordEls = grp.querySelectorAll(".wp-word");
@@ -224,7 +224,7 @@
             wordEls,
             {
               clipPath: "inset(0 0% 0 100%)",
-              duration: 0.14,
+              duration: 0.25,
               stagger: 0.04,
               ease: "power2.in",
             },
diff --git a/registry/components/caption-clip-wipe/demo.html b/registry/components/caption-clip-wipe/demo.html
index 986368d7f..a519dbfe8 100644
--- a/registry/components/caption-clip-wipe/demo.html
+++ b/registry/components/caption-clip-wipe/demo.html
@@ -169,7 +169,7 @@
           var ws = pair[0],
             we = pair[1];
           var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
-          var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
           return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
         });
 
@@ -210,13 +210,13 @@
 
             tl.to(
               wordEl,
-              { clipPath: "inset(0 0% 0 0)", duration: 0.15, ease: "power3.out" },
+              { clipPath: "inset(0 0% 0 0)", duration: 0.3, ease: "power2.out" },
               w.start,
             );
             if (isKW) {
               tl.to(wordEl, { color: "#FFD700", duration: 0.05 }, w.start + 0.1);
             }
-            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", duration: 0.12 }, w.end);
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", duration: 0.2 }, w.end);
           });
 
           var wordEls = grp.querySelectorAll(".wp-word");
@@ -224,7 +224,7 @@
             wordEls,
             {
               clipPath: "inset(0 0% 0 100%)",
-              duration: 0.14,
+              duration: 0.25,
               stagger: 0.04,
               ease: "power2.in",
             },
diff --git a/registry/components/caption-clip-wipe/registry-item.json b/registry/components/caption-clip-wipe/registry-item.json
index 95005f509..f4ef6f9c9 100644
--- a/registry/components/caption-clip-wipe/registry-item.json
+++ b/registry/components/caption-clip-wipe/registry-item.json
@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4?v=1779051416"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4?v=1779057707"
 }
diff --git a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
index 4b3c120d3..0d8d427cc 100644
--- a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
+++ b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
@@ -56,8 +56,8 @@
           to bottom,
           transparent 0px,
           transparent 3px,
-          rgba(0, 0, 0, 0.08) 3px,
-          rgba(0, 0, 0, 0.08) 4px
+          rgba(0, 0, 0, 0.18) 3px,
+          rgba(0, 0, 0, 0.18) 4px
         );
       }
       #gl-container {
@@ -240,10 +240,10 @@
             var wordEl = document.getElementById("gl-w-" + wi);
             var isKW = KEYWORDS.has(wi);
             var rng = mulberry32(wi * 777 + 13);
-            var j1 = (rng() - 0.5) * 10;
-            var j2 = (rng() - 0.5) * 8;
-            var j3 = (rng() - 0.5) * 6;
-            var shadowMag = 3 + rng() * 4;
+            var j1 = (rng() - 0.5) * 24;
+            var j2 = (rng() - 0.5) * 18;
+            var j3 = (rng() - 0.5) * 14;
+            var shadowMag = 6 + rng() * 8;
             var sm = shadowMag.toFixed(1);
 
             tl.to(
diff --git a/registry/components/caption-glitch-rgb/demo.html b/registry/components/caption-glitch-rgb/demo.html
index 4b3c120d3..0d8d427cc 100644
--- a/registry/components/caption-glitch-rgb/demo.html
+++ b/registry/components/caption-glitch-rgb/demo.html
@@ -56,8 +56,8 @@
           to bottom,
           transparent 0px,
           transparent 3px,
-          rgba(0, 0, 0, 0.08) 3px,
-          rgba(0, 0, 0, 0.08) 4px
+          rgba(0, 0, 0, 0.18) 3px,
+          rgba(0, 0, 0, 0.18) 4px
         );
       }
       #gl-container {
@@ -240,10 +240,10 @@
             var wordEl = document.getElementById("gl-w-" + wi);
             var isKW = KEYWORDS.has(wi);
             var rng = mulberry32(wi * 777 + 13);
-            var j1 = (rng() - 0.5) * 10;
-            var j2 = (rng() - 0.5) * 8;
-            var j3 = (rng() - 0.5) * 6;
-            var shadowMag = 3 + rng() * 4;
+            var j1 = (rng() - 0.5) * 24;
+            var j2 = (rng() - 0.5) * 18;
+            var j3 = (rng() - 0.5) * 14;
+            var shadowMag = 6 + rng() * 8;
             var sm = shadowMag.toFixed(1);
 
             tl.to(
diff --git a/registry/components/caption-glitch-rgb/registry-item.json b/registry/components/caption-glitch-rgb/registry-item.json
index e8f356737..0fe36b9d3 100644
--- a/registry/components/caption-glitch-rgb/registry-item.json
+++ b/registry/components/caption-glitch-rgb/registry-item.json
@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779051416"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779057707"
 }
diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html
index eb0fa9e05..75c5d0fcf 100644
--- a/registry/components/caption-gradient-fill/caption-gradient-fill.html
+++ b/registry/components/caption-gradient-fill/caption-gradient-fill.html
@@ -233,11 +233,11 @@
           groupWords.forEach(function (w, i) {
             var wi = g.wordStart + i;
             var el = document.getElementById("gr-w-" + wi);
-            tl.to(el, { opacity: 1, scale: 1.1, duration: 0.08 }, w.start);
-            tl.to(el, { opacity: 0.3, scale: 1, duration: 0.08 }, w.end);
+            tl.to(el, { opacity: 1, scale: 1.1, duration: 0.15 }, w.start);
+            tl.to(el, { opacity: 0.3, scale: 1, duration: 0.15 }, w.end);
           });
 
-          tl.to(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
+          tl.to(grp, { y: -26, opacity: 0, duration: 0.25 }, g.end - 0.25);
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
diff --git a/registry/components/caption-gradient-fill/demo.html b/registry/components/caption-gradient-fill/demo.html
index eb0fa9e05..75c5d0fcf 100644
--- a/registry/components/caption-gradient-fill/demo.html
+++ b/registry/components/caption-gradient-fill/demo.html
@@ -233,11 +233,11 @@
           groupWords.forEach(function (w, i) {
             var wi = g.wordStart + i;
             var el = document.getElementById("gr-w-" + wi);
-            tl.to(el, { opacity: 1, scale: 1.1, duration: 0.08 }, w.start);
-            tl.to(el, { opacity: 0.3, scale: 1, duration: 0.08 }, w.end);
+            tl.to(el, { opacity: 1, scale: 1.1, duration: 0.15 }, w.start);
+            tl.to(el, { opacity: 0.3, scale: 1, duration: 0.15 }, w.end);
           });
 
-          tl.to(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
+          tl.to(grp, { y: -26, opacity: 0, duration: 0.25 }, g.end - 0.25);
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
diff --git a/registry/components/caption-gradient-fill/registry-item.json b/registry/components/caption-gradient-fill/registry-item.json
index f76651f1b..6e090599c 100644
--- a/registry/components/caption-gradient-fill/registry-item.json
+++ b/registry/components/caption-gradient-fill/registry-item.json
@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779051416"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779057707"
 }
diff --git a/registry/components/caption-highlight/caption-highlight.html b/registry/components/caption-highlight/caption-highlight.html
new file mode 100644
index 000000000..57a1c992b
--- /dev/null
+++ b/registry/components/caption-highlight/caption-highlight.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Highlight</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=Montserrat:wght@800&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: #0a0a0a;
+      }
+      #highlight {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #hl-video {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .hl-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #hl-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .hl-group {
+        position: absolute;
+        bottom: 140px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 16px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .hl-word {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 800;
+        font-size: 80px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.02em;
+        line-height: 1;
+        position: relative;
+        padding: 8px 16px;
+        will-change: transform;
+      }
+      .hl-word-bg {
+        position: absolute;
+        inset: 0;
+        background: #e5143a;
+        border-radius: 8px;
+        transform: scaleX(0);
+        transform-origin: 0% 50%;
+        z-index: -1;
+      }
+      .hl-word-text {
+        position: relative;
+        z-index: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="highlight"
+      data-composition-id="caption-highlight"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="hl-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+      <div class="hl-overlay"></div>
+      <div id="hl-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var 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 },
+        ];
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var container = document.getElementById("hl-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "hl-group";
+          grp.id = "hl-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 80, "800", "Montserrat", 1620);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.createElement("span");
+            wordEl.className = "hl-word";
+            wordEl.id = "hl-w-" + wi;
+            wordEl.style.fontSize = computedSize + "px";
+
+            var bgEl = document.createElement("span");
+            bgEl.className = "hl-word-bg";
+            bgEl.id = "hl-bg-" + wi;
+
+            var textEl = document.createElement("span");
+            textEl.className = "hl-word-text";
+            textEl.textContent = w.text.toUpperCase();
+
+            wordEl.appendChild(bgEl);
+            wordEl.appendChild(textEl);
+            grp.appendChild(wordEl);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, y: 20 },
+            { opacity: 1, y: 0, duration: 0.2, ease: "power3.out" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var bgEl = document.getElementById("hl-bg-" + wi);
+            var wordEl = document.getElementById("hl-w-" + wi);
+
+            tl.to(bgEl, { scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
+            tl.to(wordEl, { scale: 1.08, duration: 0.08, ease: "power2.out" }, w.start);
+            tl.to(wordEl, { scale: 1, duration: 0.12, ease: "power2.inOut" }, w.start + 0.08);
+            tl.to(
+              bgEl,
+              { scaleX: 0, transformOrigin: "100% 50%", duration: 0.12, ease: "power2.in" },
+              w.end,
+            );
+            tl.set(bgEl, { transformOrigin: "0% 50%" }, w.end + 0.12);
+          });
+
+          tl.to(grp, { opacity: 0, y: -15, duration: 0.2, ease: "power2.in" }, g.end - 0.2);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-highlight/demo.html b/registry/components/caption-highlight/demo.html
new file mode 100644
index 000000000..57a1c992b
--- /dev/null
+++ b/registry/components/caption-highlight/demo.html
@@ -0,0 +1,260 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Highlight</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=Montserrat:wght@800&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: #0a0a0a;
+      }
+      #highlight {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
+      }
+      #hl-video {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .hl-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.4);
+        z-index: 1;
+        pointer-events: none;
+      }
+      #hl-container {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+      }
+      .hl-group {
+        position: absolute;
+        bottom: 140px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 16px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .hl-word {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 800;
+        font-size: 80px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block;
+        letter-spacing: 0.02em;
+        line-height: 1;
+        position: relative;
+        padding: 8px 16px;
+        will-change: transform;
+      }
+      .hl-word-bg {
+        position: absolute;
+        inset: 0;
+        background: #e5143a;
+        border-radius: 8px;
+        transform: scaleX(0);
+        transform-origin: 0% 50%;
+        z-index: -1;
+      }
+      .hl-word-text {
+        position: relative;
+        z-index: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="highlight"
+      data-composition-id="caption-highlight"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="hl-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+      <div class="hl-overlay"></div>
+      <div id="hl-container"></div>
+    </div>
+
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var 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 },
+        ];
+
+        var RAW_GROUPS = [
+          [0, 3],
+          [4, 7],
+          [8, 8],
+          [9, 12],
+          [13, 15],
+          [16, 16],
+          [17, 19],
+          [20, 22],
+          [23, 24],
+          [25, 27],
+        ];
+        var GROUPS = RAW_GROUPS.map(function (pair, gi) {
+          var ws = pair[0],
+            we = pair[1];
+          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;
+          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
+
+        var container = document.getElementById("hl-container");
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "hl-group";
+          grp.id = "hl-grp-" + gi;
+
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
+          var computedSize = fitFontSize(groupText, 80, "800", "Montserrat", 1620);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.createElement("span");
+            wordEl.className = "hl-word";
+            wordEl.id = "hl-w-" + wi;
+            wordEl.style.fontSize = computedSize + "px";
+
+            var bgEl = document.createElement("span");
+            bgEl.className = "hl-word-bg";
+            bgEl.id = "hl-bg-" + wi;
+
+            var textEl = document.createElement("span");
+            textEl.className = "hl-word-text";
+            textEl.textContent = w.text.toUpperCase();
+
+            wordEl.appendChild(bgEl);
+            wordEl.appendChild(textEl);
+            grp.appendChild(wordEl);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, y: 20 },
+            { opacity: 1, y: 0, duration: 0.2, ease: "power3.out" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var bgEl = document.getElementById("hl-bg-" + wi);
+            var wordEl = document.getElementById("hl-w-" + wi);
+
+            tl.to(bgEl, { scaleX: 1, duration: 0.15, ease: "power2.out" }, w.start);
+            tl.to(wordEl, { scale: 1.08, duration: 0.08, ease: "power2.out" }, w.start);
+            tl.to(wordEl, { scale: 1, duration: 0.12, ease: "power2.inOut" }, w.start + 0.08);
+            tl.to(
+              bgEl,
+              { scaleX: 0, transformOrigin: "100% 50%", duration: 0.12, ease: "power2.in" },
+              w.end,
+            );
+            tl.set(bgEl, { transformOrigin: "0% 50%" }, w.end + 0.12);
+          });
+
+          tl.to(grp, { opacity: 0, y: -15, duration: 0.2, ease: "power2.in" }, g.end - 0.2);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        tl.seek(0);
+        window.__timelines["caption-highlight"] = tl;
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-highlight/registry-item.json b/registry/components/caption-highlight/registry-item.json
new file mode 100644
index 000000000..6f112c29a
--- /dev/null
+++ b/registry/components/caption-highlight/registry-item.json
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-highlight",
+  "type": "hyperframes:component",
+  "title": "Highlight",
+  "description": "Red background sweep behind each active word, TikTok-style",
+  "tags": ["captions", "caption-style", "highlight", "social", "tiktok"],
+  "files": [
+    {
+      "path": "caption-highlight.html",
+      "target": "compositions/components/caption-highlight.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-highlight/preview.mp4"
+}
diff --git a/registry/components/caption-typewriter/caption-typewriter.html b/registry/components/caption-typewriter/caption-typewriter.html
index ee1e194b4..b4f1d4523 100644
--- a/registry/components/caption-typewriter/caption-typewriter.html
+++ b/registry/components/caption-typewriter/caption-typewriter.html
@@ -163,16 +163,16 @@
         ];
 
         var GROUPS = [
-          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.1 },
-          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
-          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
-          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
-          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.4 },
-          { wordStart: 16, wordEnd: 16, start: 3.95, end: 4.75 },
-          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.4 },
-          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.2 },
-          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
-          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.4 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.35 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.9 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.8 },
+          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.7 },
+          { wordStart: 16, wordEnd: 16, start: 3.95, end: 5.05 },
+          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.7 },
+          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.5 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 7.05 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.9 },
         ];
 
         var container = document.getElementById("tw-container");
diff --git a/registry/components/caption-typewriter/demo.html b/registry/components/caption-typewriter/demo.html
index ee1e194b4..b4f1d4523 100644
--- a/registry/components/caption-typewriter/demo.html
+++ b/registry/components/caption-typewriter/demo.html
@@ -163,16 +163,16 @@
         ];
 
         var GROUPS = [
-          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.1 },
-          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },
-          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },
-          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },
-          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.4 },
-          { wordStart: 16, wordEnd: 16, start: 3.95, end: 4.75 },
-          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.4 },
-          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.2 },
-          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },
-          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.4 },
+          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.35 },
+          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.9 },
+          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.8 },
+          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.7 },
+          { wordStart: 16, wordEnd: 16, start: 3.95, end: 5.05 },
+          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.7 },
+          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.5 },
+          { wordStart: 23, wordEnd: 24, start: 6.35, end: 7.05 },
+          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.9 },
         ];
 
         var container = document.getElementById("tw-container");
diff --git a/registry/components/caption-typewriter/registry-item.json b/registry/components/caption-typewriter/registry-item.json
index f5eac06b2..9bd9d0e2a 100644
--- a/registry/components/caption-typewriter/registry-item.json
+++ b/registry/components/caption-typewriter/registry-item.json
@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779051416"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779057707"
 }
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index b02ca8e52..ec7f624e6 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -100,7 +100,7 @@
         white-space: nowrap;
         color: #ffffff;
         font-family: "Montserrat", Arial, sans-serif;
-        font-weight: 300;
+        font-weight: 200;
         font-size: 72px;
         letter-spacing: -0.03em;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -142,10 +142,10 @@
       var WORD_SPACING = 12;
       var PAUSE_THRESHOLD = 0.1;
       var ENTRY_DURATION = 100 / 1000;
-      var WEIGHT_TRANSITION = 100 / 1000;
+      var WEIGHT_TRANSITION = 250 / 1000;
       var FONT_WIDTH_SAFETY = 1.14;
-      var FONT_WEIGHT_LIGHT = 300;
-      var FONT_WEIGHT_BOLD = 700;
+      var FONT_WEIGHT_LIGHT = 200;
+      var FONT_WEIGHT_BOLD = 900;
 
       var TRANSCRIPT = [
         { text: "Every", start: 0.0, end: 0.3 },
@@ -309,11 +309,17 @@
             var lineEl = document.createElement("div");
             lineEl.className = "caption-line";
             lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
-            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+            lineEl.style.fontWeight = FONT_WEIGHT_LIGHT;
             lineEl.style.fontSize = computedSize + "px";
-            line.words.forEach(function (word) {
+            line.words.forEach(function (word, wordIndex) {
               var wordEl = document.createElement("span");
+              wordEl.id = "cw-" + groupIndex + "-" + lineIndex + "-" + wordIndex;
               wordEl.textContent = word.text.toLowerCase();
+              wordEl.style.fontWeight = FONT_WEIGHT_LIGHT;
+              wordEl.style.display = "inline-block";
+              wordEl.style.transition = "none";
+              wordEl.dataset.start = word.start;
+              wordEl.dataset.end = word.end;
               lineEl.appendChild(wordEl);
             });
             copyEl.appendChild(lineEl);
@@ -357,22 +363,24 @@
           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,
-          );
-        }
+        group.lines.forEach(function (line, lineIndex) {
+          line.words.forEach(function (word, wordIndex) {
+            var wEl = document.getElementById(
+              "cw-" + groupIndex + "-" + lineIndex + "-" + wordIndex,
+            );
+            if (!wEl) return;
+            tl.to(
+              wEl,
+              { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+              word.start,
+            );
+            tl.to(
+              wEl,
+              { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.in" },
+              word.end,
+            );
+          });
+        });
 
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
diff --git a/registry/components/caption-weight-shift/demo.html b/registry/components/caption-weight-shift/demo.html
index b02ca8e52..ec7f624e6 100644
--- a/registry/components/caption-weight-shift/demo.html
+++ b/registry/components/caption-weight-shift/demo.html
@@ -100,7 +100,7 @@
         white-space: nowrap;
         color: #ffffff;
         font-family: "Montserrat", Arial, sans-serif;
-        font-weight: 300;
+        font-weight: 200;
         font-size: 72px;
         letter-spacing: -0.03em;
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
@@ -142,10 +142,10 @@
       var WORD_SPACING = 12;
       var PAUSE_THRESHOLD = 0.1;
       var ENTRY_DURATION = 100 / 1000;
-      var WEIGHT_TRANSITION = 100 / 1000;
+      var WEIGHT_TRANSITION = 250 / 1000;
       var FONT_WIDTH_SAFETY = 1.14;
-      var FONT_WEIGHT_LIGHT = 300;
-      var FONT_WEIGHT_BOLD = 700;
+      var FONT_WEIGHT_LIGHT = 200;
+      var FONT_WEIGHT_BOLD = 900;
 
       var TRANSCRIPT = [
         { text: "Every", start: 0.0, end: 0.3 },
@@ -309,11 +309,17 @@
             var lineEl = document.createElement("div");
             lineEl.className = "caption-line";
             lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
-            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+            lineEl.style.fontWeight = FONT_WEIGHT_LIGHT;
             lineEl.style.fontSize = computedSize + "px";
-            line.words.forEach(function (word) {
+            line.words.forEach(function (word, wordIndex) {
               var wordEl = document.createElement("span");
+              wordEl.id = "cw-" + groupIndex + "-" + lineIndex + "-" + wordIndex;
               wordEl.textContent = word.text.toLowerCase();
+              wordEl.style.fontWeight = FONT_WEIGHT_LIGHT;
+              wordEl.style.display = "inline-block";
+              wordEl.style.transition = "none";
+              wordEl.dataset.start = word.start;
+              wordEl.dataset.end = word.end;
               lineEl.appendChild(wordEl);
             });
             copyEl.appendChild(lineEl);
@@ -357,22 +363,24 @@
           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,
-          );
-        }
+        group.lines.forEach(function (line, lineIndex) {
+          line.words.forEach(function (word, wordIndex) {
+            var wEl = document.getElementById(
+              "cw-" + groupIndex + "-" + lineIndex + "-" + wordIndex,
+            );
+            if (!wEl) return;
+            tl.to(
+              wEl,
+              { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+              word.start,
+            );
+            tl.to(
+              wEl,
+              { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.in" },
+              word.end,
+            );
+          });
+        });
 
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
diff --git a/registry/components/caption-weight-shift/registry-item.json b/registry/components/caption-weight-shift/registry-item.json
index a5cd5924b..0f3fbbdbb 100644
--- a/registry/components/caption-weight-shift/registry-item.json
+++ b/registry/components/caption-weight-shift/registry-item.json
@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779057707"
 }
diff --git a/registry/registry.json b/registry/registry.json
index 73b93dc5a..303584cf4 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -127,6 +127,10 @@
       "name": "caption-neon-glow",
       "type": "hyperframes:component"
     },
+    {
+      "name": "caption-highlight",
+      "type": "hyperframes:component"
+    },
     {
       "name": "instagram-follow",
       "type": "hyperframes:block"