docs(registry): add caption catalog pages and overflow protection

- Add 15 .mdx doc pages under docs/catalog/components/ for all caption styles
- Add "Captions" group as first section in the Catalog tab navigation
- Add canvas-based fitFontSize to 14 caption components to prevent text overflow
- Fix parallax-layers vertical clipping by repositioning the behind safe zone
- Re-render all 15 preview videos at high quality and upload to CDN

docs/catalog/components/caption-clip-wipe.mdx

@@ -0,0 +1,38 @@
+---
+title: "Clip Wipe"
+description: "Left-to-right clip-path wipe reveal per word"
+---
+
+# Clip Wipe
+
+Left-to-right clip-path wipe reveal per word
+
+`captions` `caption-style` `wipe` `clip-path` `reveal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-clip-wipe
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-clip-wipe.html` | `compositions/components/caption-clip-wipe.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-clip-wipe.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-editorial-emphasis.mdx

@@ -0,0 +1,38 @@
+---
+title: "Editorial Emphasis"
+description: "Dual-font system with dramatic size contrast for emphasis words"
+---
+
+# Editorial Emphasis
+
+Dual-font system with dramatic size contrast for emphasis words
+
+`captions` `caption-style` `editorial` `typography` `emphasis`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-editorial-emphasis
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-editorial-emphasis.html` | `compositions/components/caption-editorial-emphasis.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-editorial-emphasis.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-emoji-pop.mdx

@@ -0,0 +1,38 @@
+---
+title: "Emoji Pop"
+description: "Emoji integration with stroked text and horizontal squeeze entrance"
+---
+
+# Emoji Pop
+
+Emoji integration with stroked text and horizontal squeeze entrance
+
+`captions` `caption-style` `emoji` `social`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-emoji-pop
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-emoji-pop.html` | `compositions/components/caption-emoji-pop.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-emoji-pop.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-glitch-rgb.mdx

@@ -0,0 +1,38 @@
+---
+title: "Glitch RGB"
+description: "RGB chromatic aberration with CRT scanline overlay"
+---
+
+# Glitch RGB
+
+RGB chromatic aberration with CRT scanline overlay
+
+`captions` `caption-style` `glitch` `cyber` `tech`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-glitch-rgb
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-glitch-rgb.html` | `compositions/components/caption-glitch-rgb.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-glitch-rgb.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-gradient-fill.mdx

@@ -0,0 +1,38 @@
+---
+title: "Gradient Fill"
+description: "Gradient-clipped text with elastic bounce entrance"
+---
+
+# Gradient Fill
+
+Gradient-clipped text with elastic bounce entrance
+
+`captions` `caption-style` `gradient` `colorful`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-gradient-fill
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-gradient-fill.html` | `compositions/components/caption-gradient-fill.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-gradient-fill.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-kinetic-slam.mdx

@@ -0,0 +1,38 @@
+---
+title: "Kinetic Slam"
+description: "Full-screen single-word display with alternating entrance directions"
+---
+
+# Kinetic Slam
+
+Full-screen single-word display with alternating entrance directions
+
+`captions` `caption-style` `kinetic` `typography` `slam`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-kinetic-slam
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-kinetic-slam.html` | `compositions/components/caption-kinetic-slam.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-kinetic-slam.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-matrix-decode.mdx

@@ -0,0 +1,38 @@
+---
+title: "Matrix Decode"
+description: "Character scramble animation before text reveal"
+---
+
+# Matrix Decode
+
+Character scramble animation before text reveal
+
+`captions` `caption-style` `matrix` `scramble` `decode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-matrix-decode
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-matrix-decode.html` | `compositions/components/caption-matrix-decode.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-matrix-decode.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-neon-accent.mdx

@@ -0,0 +1,38 @@
+---
+title: "Neon Accent"
+description: "Multi-color neon glow accents with wiggle drift animation"
+---
+
+# Neon Accent
+
+Multi-color neon glow accents with wiggle drift animation
+
+`captions` `caption-style` `neon` `glow` `accent`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-neon-accent
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-neon-accent.html` | `compositions/components/caption-neon-accent.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-neon-accent.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-neon-glow.mdx

@@ -0,0 +1,38 @@
+---
+title: "Neon Glow"
+description: "Cyan and magenta neon glow with keyword accent colors"
+---
+
+# Neon Glow
+
+Cyan and magenta neon glow with keyword accent colors
+
+`captions` `caption-style` `neon` `glow` `gaming`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-neon-glow
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-neon-glow.html` | `compositions/components/caption-neon-glow.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-neon-glow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-parallax-layers.mdx

@@ -0,0 +1,38 @@
+---
+title: "Parallax Layers"
+description: "Behind-subject 3D text layering with vertical stretch effect"
+---
+
+# Parallax Layers
+
+Behind-subject 3D text layering with vertical stretch effect
+
+`captions` `caption-style` `parallax` `3d` `depth`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-parallax-layers
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-parallax-layers.html` | `compositions/components/caption-parallax-layers.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-parallax-layers.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-particle-burst.mdx

@@ -0,0 +1,38 @@
+---
+title: "Particle Burst"
+description: "Keyword words trigger colored particle explosions"
+---
+
+# Particle Burst
+
+Keyword words trigger colored particle explosions
+
+`captions` `caption-style` `particles` `burst` `effects`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-particle-burst
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-particle-burst.html` | `compositions/components/caption-particle-burst.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-particle-burst.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-pill-karaoke.mdx

@@ -0,0 +1,38 @@
+---
+title: "Pill Karaoke"
+description: "Pill-shaped container with per-word karaoke color highlight"
+---
+
+# Pill Karaoke
+
+Pill-shaped container with per-word karaoke color highlight
+
+`captions` `caption-style` `karaoke` `pill`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-pill-karaoke
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-pill-karaoke.html` | `compositions/components/caption-pill-karaoke.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-pill-karaoke.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-texture-lava.mdx

@@ -0,0 +1,38 @@
+---
+title: "Texture Lava"
+description: "Flowing lava texture mask over large uppercase text"
+---
+
+# Texture Lava
+
+Flowing lava texture mask over large uppercase text
+
+`captions` `caption-style` `texture` `lava` `mask`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-texture-lava
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-texture-lava.html` | `compositions/components/caption-texture-lava.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-texture-lava.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-typewriter.mdx

@@ -0,0 +1,38 @@
+---
+title: "Typewriter"
+description: "Green terminal character-by-character reveal with blinking cursor"
+---
+
+# Typewriter
+
+Green terminal character-by-character reveal with blinking cursor
+
+`captions` `caption-style` `terminal` `typewriter` `hacker`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-typewriter
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-typewriter.html` | `compositions/components/caption-typewriter.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-typewriter.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/catalog/components/caption-weight-shift.mdx

@@ -0,0 +1,38 @@
+---
+title: "Weight Shift"
+description: "Elegant font-weight transition between caption lines"
+---
+
+# Weight Shift
+
+Elegant font-weight transition between caption lines
+
+`captions` `caption-style` `minimal` `typography`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416" poster="https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add caption-weight-shift
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `caption-weight-shift.html` | `compositions/components/caption-weight-shift.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/caption-weight-shift.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

docs/docs.json

@@ -95,6 +95,26 @@
       {
         "tab": "Catalog",
         "groups": [
+          {
+            "group": "Captions",
+            "pages": [
+              "catalog/components/caption-pill-karaoke",
+              "catalog/components/caption-neon-accent",
+              "catalog/components/caption-weight-shift",
+              "catalog/components/caption-emoji-pop",
+              "catalog/components/caption-editorial-emphasis",
+              "catalog/components/caption-parallax-layers",
+              "catalog/components/caption-glitch-rgb",
+              "catalog/components/caption-typewriter",
+              "catalog/components/caption-matrix-decode",
+              "catalog/components/caption-particle-burst",
+              "catalog/components/caption-texture-lava",
+              "catalog/components/caption-clip-wipe",
+              "catalog/components/caption-kinetic-slam",
+              "catalog/components/caption-gradient-fill",
+              "catalog/components/caption-neon-glow"
+            ]
+          },
           {
             "group": "HTML-in-Canvas",
             "pages": [

registry/components/caption-clip-wipe/caption-clip-wipe.html

@@ -107,6 +107,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -179,13 +192,16 @@
           grp.className = "wp-group";
           grp.id = "wp-grp-" + gi;
 
+          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var computedSize = fitFontSize(groupText, 88, "800", "Poppins", 1720);
+
           groupWords.forEach(function (w, i) {
             var wi = g.wordStart + i;
             var span = document.createElement("span");
             span.className = "wp-word";
             span.id = "wp-w-" + wi;
             span.textContent = w.text.toUpperCase();
-            span.style.fontSize = "88px";
+            span.style.fontSize = computedSize + "px";
             grp.appendChild(span);
           });
 

registry/components/caption-clip-wipe/demo.html

@@ -107,6 +107,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -179,13 +192,16 @@
           grp.className = "wp-group";
           grp.id = "wp-grp-" + gi;
 
+          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var computedSize = fitFontSize(groupText, 88, "800", "Poppins", 1720);
+
           groupWords.forEach(function (w, i) {
             var wi = g.wordStart + i;
             var span = document.createElement("span");
             span.className = "wp-word";
             span.id = "wp-w-" + wi;
             span.textContent = w.text.toUpperCase();
-            span.style.fontSize = "88px";
+            span.style.fontSize = computedSize + "px";
             grp.appendChild(span);
           });
 

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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4?v=1779051416"
 }

registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html

@@ -152,6 +152,19 @@
       var ENTRY_DUR = 0.1;
       var SLIDE_DUR = 0.2;
 
+      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;
+      }
+
       // Generic transcript words
       var W = [
         { text: "Every", start: 0.0, end: 0.3 },
@@ -260,6 +273,16 @@
 
       var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
 
+      function computeLineSize(linePairs) {
+        var hasEmphasis = linePairs.some(function (p) { return p[1] === "e"; });
+        if (hasEmphasis) {
+          var lineText = linePairs.map(function (p) { return W[p[0]].text; }).join(" ");
+          return fitFontSize(lineText, 180, "800", "Playfair Display", SAFE_WIDTH);
+        }
+        var lineText = linePairs.map(function (p) { return W[p[0]].text; }).join(" ");
+        return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
+      }
+
       function buildBlocks() {
         var stage = document.getElementById("caption-stage");
         BLOCKS.forEach(function (block, bi) {
@@ -267,6 +290,7 @@
           el.className = "caption-block";
           el.id = "b" + bi;
 
+          var l1Size = computeLineSize(block.line1);
           var l1 = document.createElement("div");
           l1.className = "caption-line";
           l1.id = "b" + bi + "L1";
@@ -275,11 +299,17 @@
             span.className = CLASS_MAP[pair[1]];
             span.id = "b" + bi + "L1w" + wi;
             span.textContent = W[pair[0]].text;
+            if (pair[1] === "e") {
+              span.style.fontSize = l1Size + "px";
+            } else {
+              span.style.fontSize = l1Size + "px";
+            }
             l1.appendChild(span);
           });
           el.appendChild(l1);
 
           if (block.line2) {
+            var l2Size = computeLineSize(block.line2);
             var l2 = document.createElement("div");
             l2.className = "caption-line";
             l2.id = "b" + bi + "L2";
@@ -288,6 +318,11 @@
               span.className = CLASS_MAP[pair[1]];
               span.id = "b" + bi + "L2w" + wi;
               span.textContent = W[pair[0]].text;
+              if (pair[1] === "e") {
+                span.style.fontSize = l2Size + "px";
+              } else {
+                span.style.fontSize = l2Size + "px";
+              }
               l2.appendChild(span);
             });
             el.appendChild(l2);

registry/components/caption-editorial-emphasis/demo.html

@@ -152,6 +152,19 @@
       var ENTRY_DUR = 0.1;
       var SLIDE_DUR = 0.2;
 
+      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;
+      }
+
       // Generic transcript words
       var W = [
         { text: "Every", start: 0.0, end: 0.3 },
@@ -260,6 +273,16 @@
 
       var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
 
+      function computeLineSize(linePairs) {
+        var hasEmphasis = linePairs.some(function (p) { return p[1] === "e"; });
+        if (hasEmphasis) {
+          var lineText = linePairs.map(function (p) { return W[p[0]].text; }).join(" ");
+          return fitFontSize(lineText, 180, "800", "Playfair Display", SAFE_WIDTH);
+        }
+        var lineText = linePairs.map(function (p) { return W[p[0]].text; }).join(" ");
+        return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
+      }
+
       function buildBlocks() {
         var stage = document.getElementById("caption-stage");
         BLOCKS.forEach(function (block, bi) {
@@ -267,6 +290,7 @@
           el.className = "caption-block";
           el.id = "b" + bi;
 
+          var l1Size = computeLineSize(block.line1);
           var l1 = document.createElement("div");
           l1.className = "caption-line";
           l1.id = "b" + bi + "L1";
@@ -275,11 +299,17 @@
             span.className = CLASS_MAP[pair[1]];
             span.id = "b" + bi + "L1w" + wi;
             span.textContent = W[pair[0]].text;
+            if (pair[1] === "e") {
+              span.style.fontSize = l1Size + "px";
+            } else {
+              span.style.fontSize = l1Size + "px";
+            }
             l1.appendChild(span);
           });
           el.appendChild(l1);
 
           if (block.line2) {
+            var l2Size = computeLineSize(block.line2);
             var l2 = document.createElement("div");
             l2.className = "caption-line";
             l2.id = "b" + bi + "L2";
@@ -288,6 +318,11 @@
               span.className = CLASS_MAP[pair[1]];
               span.id = "b" + bi + "L2w" + wi;
               span.textContent = W[pair[0]].text;
+              if (pair[1] === "e") {
+                span.style.fontSize = l2Size + "px";
+              } else {
+                span.style.fontSize = l2Size + "px";
+              }
               l2.appendChild(span);
             });
             el.appendChild(l2);

registry/components/caption-editorial-emphasis/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4?v=1779051416"
 }

registry/components/caption-emoji-pop/caption-emoji-pop.html

@@ -293,6 +293,19 @@
         });
       }
 
+      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 measureCanvas = document.createElement("canvas");
       var measureContext = measureCanvas.getContext("2d");
 
@@ -382,6 +395,8 @@
       function buildCaptions(groups) {
         var stage = document.getElementById("caption-stage");
         groups.forEach(function (group, groupIndex) {
+          var groupText = group.words.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var computedSize = fitFontSize(groupText, CAPTION_FONT_SIZE, "900", "Gabarito", SAFE_ZONE_WIDTH);
           var groupEl = document.createElement("div");
           groupEl.id = "caption-group-" + groupIndex;
           groupEl.className = "caption-group";
@@ -401,6 +416,7 @@
             wordEl.className = "caption-word";
             wordEl.textContent = word.text.toUpperCase();
             wordEl.style.color = color;
+            wordEl.style.fontSize = computedSize + "px";
             wordEl.style.textShadow = shadowForColor(color);
             lineEl.appendChild(wordEl);
           });

registry/components/caption-emoji-pop/demo.html

@@ -293,6 +293,19 @@
         });
       }
 
+      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 measureCanvas = document.createElement("canvas");
       var measureContext = measureCanvas.getContext("2d");
 
@@ -382,6 +395,8 @@
       function buildCaptions(groups) {
         var stage = document.getElementById("caption-stage");
         groups.forEach(function (group, groupIndex) {
+          var groupText = group.words.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var computedSize = fitFontSize(groupText, CAPTION_FONT_SIZE, "900", "Gabarito", SAFE_ZONE_WIDTH);
           var groupEl = document.createElement("div");
           groupEl.id = "caption-group-" + groupIndex;
           groupEl.className = "caption-group";
@@ -401,6 +416,7 @@
             wordEl.className = "caption-word";
             wordEl.textContent = word.text.toUpperCase();
             wordEl.style.color = color;
+            wordEl.style.fontSize = computedSize + "px";
             wordEl.style.textShadow = shadowForColor(color);
             lineEl.appendChild(wordEl);
           });

registry/components/caption-emoji-pop/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4?v=1779051416"
 }

registry/components/caption-glitch-rgb/caption-glitch-rgb.html

@@ -121,6 +121,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -195,13 +208,16 @@
           grp.className = "gl-group";
           grp.id = "gl-grp-" + gi;
 
+          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var computedSize = fitFontSize(groupText, BASE_FONT, "700", "Space Grotesk", 1720);
+
           groupWords.forEach(function (w, i) {
             var wi = g.wordStart + i;
             var span = document.createElement("span");
             span.className = "gl-word";
             span.id = "gl-w-" + wi;
             span.textContent = w.text.toUpperCase();
-            span.style.fontSize = BASE_FONT + "px";
+            span.style.fontSize = computedSize + "px";
             grp.appendChild(span);
           });
 

registry/components/caption-glitch-rgb/demo.html

@@ -121,6 +121,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -195,13 +208,16 @@
           grp.className = "gl-group";
           grp.id = "gl-grp-" + gi;
 
+          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var computedSize = fitFontSize(groupText, BASE_FONT, "700", "Space Grotesk", 1720);
+
           groupWords.forEach(function (w, i) {
             var wi = g.wordStart + i;
             var span = document.createElement("span");
             span.className = "gl-word";
             span.id = "gl-w-" + wi;
             span.textContent = w.text.toUpperCase();
-            span.style.fontSize = BASE_FONT + "px";
+            span.style.fontSize = computedSize + "px";
             grp.appendChild(span);
           });
 

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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779051416"
 }

registry/components/caption-gradient-fill/caption-gradient-fill.html

@@ -108,6 +108,19 @@
       (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 },
@@ -175,6 +188,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords.map(function (w) { return w.text; }).join(" ");
+          var fontSize = fitFontSize(groupText, 100, "900", "'Nunito', sans-serif", 1760);
           var grp = document.createElement("div");
           grp.className = "gr-group";
           grp.id = "gr-grp-" + gi;
@@ -185,7 +200,7 @@
             span.className = "gr-word";
             span.id = "gr-w-" + wi;
             span.textContent = w.text;
-            span.style.fontSize = "100px";
+            span.style.fontSize = fontSize + "px";
             var grad = KEYWORD_GRADS[wi] || GRADS[wi % 7];
             span.style.background = grad;
             span.style.webkitBackgroundClip = "text";

registry/components/caption-gradient-fill/demo.html

@@ -108,6 +108,19 @@
       (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 },
@@ -175,6 +188,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords.map(function (w) { return w.text; }).join(" ");
+          var fontSize = fitFontSize(groupText, 100, "900", "'Nunito', sans-serif", 1760);
           var grp = document.createElement("div");
           grp.className = "gr-group";
           grp.id = "gr-grp-" + gi;
@@ -185,7 +200,7 @@
             span.className = "gr-word";
             span.id = "gr-w-" + wi;
             span.textContent = w.text;
-            span.style.fontSize = "100px";
+            span.style.fontSize = fontSize + "px";
             var grad = KEYWORD_GRADS[wi] || GRADS[wi % 7];
             span.style.background = grad;
             span.style.webkitBackgroundClip = "text";

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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779051416"
 }

registry/components/caption-kinetic-slam/caption-kinetic-slam.html

@@ -94,6 +94,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -145,7 +158,7 @@
           el.className = "kt-word";
           el.id = "kt-w-" + wi;
           el.textContent = w.text.toUpperCase();
-          el.style.fontSize = "220px";
+          el.style.fontSize = fitFontSize(w.text.toUpperCase(), 220, "400", "'Anton', sans-serif", 1720) + "px";
           if (KEYWORDS.has(wi)) el.style.color = "#FFD700";
           container.appendChild(el);
 

registry/components/caption-kinetic-slam/demo.html

@@ -94,6 +94,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -145,7 +158,7 @@
           el.className = "kt-word";
           el.id = "kt-w-" + wi;
           el.textContent = w.text.toUpperCase();
-          el.style.fontSize = "220px";
+          el.style.fontSize = fitFontSize(w.text.toUpperCase(), 220, "400", "'Anton', sans-serif", 1720) + "px";
           if (KEYWORDS.has(wi)) el.style.color = "#FFD700";
           container.appendChild(el);
 

registry/components/caption-kinetic-slam/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4?v=1779051416"
 }

registry/components/caption-matrix-decode/caption-matrix-decode.html

@@ -115,6 +115,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -185,6 +198,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords.map(function (w) { return w.text; }).join(" ");
+          var fontSize = fitFontSize(groupText, 96, "700", "'Space Grotesk', sans-serif", 1760);
           var grp = document.createElement("div");
           grp.className = "sc-group";
           grp.id = "sc-grp-" + gi;
@@ -194,7 +209,7 @@
             var wordWrap = document.createElement("span");
             wordWrap.className = "sc-word-wrap";
             wordWrap.id = "sc-ww-" + wi;
-            wordWrap.style.fontSize = "96px";
+            wordWrap.style.fontSize = fontSize + "px";
 
             var real = document.createElement("span");
             real.className = "sc-real";

registry/components/caption-matrix-decode/demo.html

@@ -115,6 +115,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -185,6 +198,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords.map(function (w) { return w.text; }).join(" ");
+          var fontSize = fitFontSize(groupText, 96, "700", "'Space Grotesk', sans-serif", 1760);
           var grp = document.createElement("div");
           grp.className = "sc-group";
           grp.id = "sc-grp-" + gi;
@@ -194,7 +209,7 @@
             var wordWrap = document.createElement("span");
             wordWrap.className = "sc-word-wrap";
             wordWrap.id = "sc-ww-" + wi;
-            wordWrap.style.fontSize = "96px";
+            wordWrap.style.fontSize = fontSize + "px";
 
             var real = document.createElement("span");
             real.className = "sc-real";

registry/components/caption-matrix-decode/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4?v=1779051416"
 }

registry/components/caption-neon-accent/caption-neon-accent.html

@@ -247,6 +247,19 @@
         { text: "cinema.", start: 7.3, end: 7.7 },
       ];
 
+      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;
+      }
+
       gsap.registerPlugin && gsap.registerPlugin();
 
       function cleanText(text) {
@@ -378,7 +391,8 @@
 
       function makeGroup(words, groupIndex) {
         var colors = assignWordColors(words, groupIndex);
-        var fontSize = BASE_FONT_SIZE;
+        var groupText = words.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+        var fontSize = fitFontSize(groupText, BASE_FONT_SIZE, "800", "Montserrat", SAFE_ZONE_WIDTH);
         while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) {
           fontSize -= 2;
         }

registry/components/caption-neon-accent/demo.html

@@ -247,6 +247,19 @@
         { text: "cinema.", start: 7.3, end: 7.7 },
       ];
 
+      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;
+      }
+
       gsap.registerPlugin && gsap.registerPlugin();
 
       function cleanText(text) {
@@ -378,7 +391,8 @@
 
       function makeGroup(words, groupIndex) {
         var colors = assignWordColors(words, groupIndex);
-        var fontSize = BASE_FONT_SIZE;
+        var groupText = words.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+        var fontSize = fitFontSize(groupText, BASE_FONT_SIZE, "800", "Montserrat", SAFE_ZONE_WIDTH);
         while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) {
           fontSize -= 2;
         }

registry/components/caption-neon-accent/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4?v=1779051416"
 }

registry/components/caption-neon-glow/caption-neon-glow.html

@@ -106,6 +106,19 @@
       (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 },
@@ -158,6 +171,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var fontSize = fitFontSize(groupText, 96, "900", "'Outfit', sans-serif", 1760);
           var grp = document.createElement("div");
           grp.className = "ne-group";
           grp.id = "ne-grp-" + gi;
@@ -168,7 +183,7 @@
             span.className = "ne-word";
             span.id = "ne-w-" + wi;
             span.textContent = w.text;
-            span.style.fontSize = "96px";
+            span.style.fontSize = fontSize + "px";
             grp.appendChild(span);
           });
 

registry/components/caption-neon-glow/demo.html

@@ -106,6 +106,19 @@
       (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 },
@@ -158,6 +171,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var fontSize = fitFontSize(groupText, 96, "900", "'Outfit', sans-serif", 1760);
           var grp = document.createElement("div");
           grp.className = "ne-group";
           grp.id = "ne-grp-" + gi;
@@ -168,7 +183,7 @@
             span.className = "ne-word";
             span.id = "ne-w-" + wi;
             span.textContent = w.text;
-            span.style.fontSize = "96px";
+            span.style.fontSize = fontSize + "px";
             grp.appendChild(span);
           });
 

registry/components/caption-neon-glow/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4?v=1779051416"
 }

registry/components/caption-parallax-layers/caption-parallax-layers.html

@@ -65,7 +65,7 @@
 
       .behind-safe-zone {
         position: absolute;
-        top: 240px;
+        top: 40px;
         left: 0;
         width: 1920px;
         height: 500px;
@@ -101,7 +101,7 @@
 
       .caption-line--behind {
         transform: scaleY(2.8);
-        transform-origin: 50% 100%;
+        transform-origin: 50% 0%;
       }
 
       .word {
@@ -181,6 +181,19 @@
       var ENTRY_DUR = 0.1;
       var SLIDE_DUR = 0.2;
 
+      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 W = [
         { text: "Every", start: 0.0, end: 0.3 },
         { text: "great", start: 0.3, end: 0.55 },
@@ -234,6 +247,8 @@
         bEl.className = "caption-block";
         bEl.id = "bb" + bi;
         if (block.behind) {
+          var behindText = block.behind.map(function (wi_arr) { return W[wi_arr[0]].text; }).join(" ");
+          var behindSize = fitFontSize(behindText, 220, "400", "Instrument Serif", BEHIND_WIDTH);
           var bLine = document.createElement("div");
           bLine.className = "caption-line caption-line--behind";
           block.behind.forEach(function (wi_arr, wi) {
@@ -241,6 +256,7 @@
             span.className = "word word--behind";
             span.id = "bb" + bi + "w" + wi;
             span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = behindSize + "px";
             bLine.appendChild(span);
           });
           bEl.appendChild(bLine);
@@ -251,6 +267,8 @@
         fEl.className = "caption-block";
         fEl.id = "fb" + bi;
         if (block.front) {
+          var frontText = block.front.map(function (wi_arr) { return W[wi_arr[0]].text; }).join(" ");
+          var frontSize = fitFontSize(frontText, 130, "400", "Instrument Serif", FRONT_WIDTH);
           var fLine = document.createElement("div");
           fLine.className = "caption-line";
           block.front.forEach(function (wi_arr, wi) {
@@ -259,6 +277,7 @@
             span.className = "word " + (isItalic ? "word--front-italic" : "word--front-normal");
             span.id = "fb" + bi + "w" + wi;
             span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = frontSize + "px";
             fLine.appendChild(span);
           });
           fEl.appendChild(fLine);

registry/components/caption-parallax-layers/demo.html

@@ -65,7 +65,7 @@
 
       .behind-safe-zone {
         position: absolute;
-        top: 240px;
+        top: 40px;
         left: 0;
         width: 1920px;
         height: 500px;
@@ -101,7 +101,7 @@
 
       .caption-line--behind {
         transform: scaleY(2.8);
-        transform-origin: 50% 100%;
+        transform-origin: 50% 0%;
       }
 
       .word {
@@ -181,6 +181,19 @@
       var ENTRY_DUR = 0.1;
       var SLIDE_DUR = 0.2;
 
+      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 W = [
         { text: "Every", start: 0.0, end: 0.3 },
         { text: "great", start: 0.3, end: 0.55 },
@@ -234,6 +247,8 @@
         bEl.className = "caption-block";
         bEl.id = "bb" + bi;
         if (block.behind) {
+          var behindText = block.behind.map(function (wi_arr) { return W[wi_arr[0]].text; }).join(" ");
+          var behindSize = fitFontSize(behindText, 220, "400", "Instrument Serif", BEHIND_WIDTH);
           var bLine = document.createElement("div");
           bLine.className = "caption-line caption-line--behind";
           block.behind.forEach(function (wi_arr, wi) {
@@ -241,6 +256,7 @@
             span.className = "word word--behind";
             span.id = "bb" + bi + "w" + wi;
             span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = behindSize + "px";
             bLine.appendChild(span);
           });
           bEl.appendChild(bLine);
@@ -251,6 +267,8 @@
         fEl.className = "caption-block";
         fEl.id = "fb" + bi;
         if (block.front) {
+          var frontText = block.front.map(function (wi_arr) { return W[wi_arr[0]].text; }).join(" ");
+          var frontSize = fitFontSize(frontText, 130, "400", "Instrument Serif", FRONT_WIDTH);
           var fLine = document.createElement("div");
           fLine.className = "caption-line";
           block.front.forEach(function (wi_arr, wi) {
@@ -259,6 +277,7 @@
             span.className = "word " + (isItalic ? "word--front-italic" : "word--front-normal");
             span.id = "fb" + bi + "w" + wi;
             span.textContent = W[wi_arr[0]].text;
+            span.style.fontSize = frontSize + "px";
             fLine.appendChild(span);
           });
           fEl.appendChild(fLine);

registry/components/caption-parallax-layers/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4?v=1779051692"
 }

registry/components/caption-particle-burst/caption-particle-burst.html

@@ -117,6 +117,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -198,6 +211,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var fontSize = fitFontSize(groupText, 88, "900", "'Outfit', sans-serif", 1720);
           var grp = document.createElement("div");
           grp.className = "bs-group";
           grp.id = "bs-grp-" + gi;
@@ -208,7 +223,7 @@
             span.className = "bs-word";
             span.id = "bs-w-" + wi;
             span.textContent = w.text.toUpperCase();
-            span.style.fontSize = "88px";
+            span.style.fontSize = fontSize + "px";
             grp.appendChild(span);
           });
 

registry/components/caption-particle-burst/demo.html

@@ -117,6 +117,19 @@
       (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;
+        }
+
         function mulberry32(seed) {
           return function () {
             seed |= 0;
@@ -198,6 +211,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var fontSize = fitFontSize(groupText, 88, "900", "'Outfit', sans-serif", 1720);
           var grp = document.createElement("div");
           grp.className = "bs-group";
           grp.id = "bs-grp-" + gi;
@@ -208,7 +223,7 @@
             span.className = "bs-word";
             span.id = "bs-w-" + wi;
             span.textContent = w.text.toUpperCase();
-            span.style.fontSize = "88px";
+            span.style.fontSize = fontSize + "px";
             grp.appendChild(span);
           });
 

registry/components/caption-particle-burst/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4?v=1779051416"
 }

registry/components/caption-pill-karaoke/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4?v=1779051416"
 }

registry/components/caption-texture-lava/caption-texture-lava.html

@@ -126,6 +126,19 @@
       (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 },
@@ -164,7 +177,7 @@
 
         WORDS.forEach(function (w, wi) {
           var txt = w.text.toUpperCase();
-          var fontSize = 200;
+          var fontSize = fitFontSize(txt, 200, "400", "'Anton', sans-serif", 1720);
 
           var shadow = document.createElement("div");
           shadow.className = "lv-shadow";

registry/components/caption-texture-lava/demo.html

@@ -126,6 +126,19 @@
       (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 },
@@ -164,7 +177,7 @@
 
         WORDS.forEach(function (w, wi) {
           var txt = w.text.toUpperCase();
-          var fontSize = 200;
+          var fontSize = fitFontSize(txt, 200, "400", "'Anton', sans-serif", 1720);
 
           var shadow = document.createElement("div");
           shadow.className = "lv-shadow";

registry/components/caption-texture-lava/registry-item.json

@@ -12,5 +12,5 @@
       "type": "hyperframes:snippet"
     }
   ],
-  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416"
 }

registry/components/caption-typewriter/caption-typewriter.html

@@ -118,6 +118,19 @@
       (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 },
@@ -167,7 +180,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
-          var fontSize = 76;
+          var groupText = groupWords.map(function (w) { return w.text; }).join(" ");
+          var fontSize = fitFontSize(groupText, 76, "700", "'JetBrains Mono', monospace", 1760);
           var grp = document.createElement("div");
           grp.className = "tw-group";
           grp.id = "tw-grp-" + gi;

registry/components/caption-typewriter/demo.html

@@ -118,6 +118,19 @@
       (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 },
@@ -167,7 +180,8 @@
 
         GROUPS.forEach(function (g, gi) {
           var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
-          var fontSize = 76;
+          var groupText = groupWords.map(function (w) { return w.text; }).join(" ");
+          var fontSize = fitFontSize(groupText, 76, "700", "'JetBrains Mono', monospace", 1760);
           var grp = document.createElement("div");
           grp.className = "tw-group";
           grp.id = "tw-grp-" + gi;

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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779051416"
 }

registry/components/caption-weight-shift/caption-weight-shift.html

@@ -192,6 +192,19 @@
           });
       }
 
+      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 measureCanvas = document.createElement("canvas");
       var measureContext = measureCanvas.getContext("2d");
       measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
@@ -275,6 +288,8 @@
       function buildCaptions(groups) {
         var stage = document.getElementById("caption-stage");
         groups.forEach(function (group, groupIndex) {
+          var groupText = group.words.map(function (w) { return w.text.toLowerCase(); }).join(" ");
+          var computedSize = fitFontSize(groupText, CAPTION_FONT_SIZE, "700", "Montserrat", MAX_LINE_WIDTH);
           var groupEl = document.createElement("div");
           var copyEl = document.createElement("div");
           groupEl.id = "caption-group-" + groupIndex;
@@ -285,6 +300,7 @@
             lineEl.className = "caption-line";
             lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
             lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+            lineEl.style.fontSize = computedSize + "px";
             line.words.forEach(function (word) {
               var wordEl = document.createElement("span");
               wordEl.textContent = word.text.toLowerCase();

registry/components/caption-weight-shift/demo.html

@@ -192,6 +192,19 @@
           });
       }
 
+      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 measureCanvas = document.createElement("canvas");
       var measureContext = measureCanvas.getContext("2d");
       measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
@@ -275,6 +288,8 @@
       function buildCaptions(groups) {
         var stage = document.getElementById("caption-stage");
         groups.forEach(function (group, groupIndex) {
+          var groupText = group.words.map(function (w) { return w.text.toLowerCase(); }).join(" ");
+          var computedSize = fitFontSize(groupText, CAPTION_FONT_SIZE, "700", "Montserrat", MAX_LINE_WIDTH);
           var groupEl = document.createElement("div");
           var copyEl = document.createElement("div");
           groupEl.id = "caption-group-" + groupIndex;
@@ -285,6 +300,7 @@
             lineEl.className = "caption-line";
             lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
             lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+            lineEl.style.fontSize = computedSize + "px";
             line.words.forEach(function (word) {
               var wordEl = document.createElement("span");
               wordEl.textContent = word.text.toLowerCase();

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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416"
 }