From 78ddd2602b9bb40e1b78afec158598ff0f59cfa4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sun, 17 May 2026 19:57:25 +0000
Subject: [PATCH 1/7] feat(registry): add 15 caption style catalog components

Add 15 caption overlay components to the registry, covering a wide
range of animation techniques:

Standalone origins (6):
- caption-pill-karaoke: pill container + karaoke word highlight
- caption-neon-accent: multi-color neon glow with wiggle drift
- caption-weight-shift: font-weight transition between lines
- caption-emoji-pop: emoji + stroked text + horizontal squeeze
- caption-editorial-emphasis: dual-font (Inter + Playfair) emphasis
- caption-parallax-layers: 3D text layering with vertical stretch

Gallery picks (9):
- caption-glitch-rgb: RGB chromatic aberration + CRT scanlines
- caption-typewriter: green terminal char-by-char with cursor
- caption-matrix-decode: scramble-reveal character animation
- caption-particle-burst: keyword particle explosions
- caption-texture-lava: flowing lava texture mask
- caption-clip-wipe: clip-path left-to-right wipe reveal
- caption-kinetic-slam: full-screen single-word slam
- caption-gradient-fill: gradient-clipped text + elastic bounce
- caption-neon-glow: cyan/magenta neon glow accents

Each component includes the reusable HTML, a demo composition,
and registry-item.json. All use a generic HyperFrames transcript.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../caption-clip-wipe/caption-clip-wipe.html  | 170 ++++++++
 .../components/caption-clip-wipe/demo.html    | 170 ++++++++
 .../caption-clip-wipe/registry-item.json      |  15 +
 .../caption-editorial-emphasis.html           | 303 ++++++++++++++
 .../caption-editorial-emphasis/demo.html      | 303 ++++++++++++++
 .../registry-item.json                        |  15 +
 .../caption-emoji-pop/caption-emoji-pop.html  | 367 +++++++++++++++++
 .../components/caption-emoji-pop/demo.html    | 367 +++++++++++++++++
 .../caption-emoji-pop/registry-item.json      |  15 +
 .../caption-glitch-rgb.html                   | 187 +++++++++
 .../components/caption-glitch-rgb/demo.html   | 187 +++++++++
 .../caption-glitch-rgb/registry-item.json     |  15 +
 .../caption-gradient-fill.html                | 187 +++++++++
 .../caption-gradient-fill/demo.html           | 187 +++++++++
 .../caption-gradient-fill/registry-item.json  |  15 +
 .../caption-kinetic-slam.html                 | 157 +++++++
 .../components/caption-kinetic-slam/demo.html | 157 +++++++
 .../caption-kinetic-slam/registry-item.json   |  15 +
 .../caption-matrix-decode.html                | 197 +++++++++
 .../caption-matrix-decode/demo.html           | 197 +++++++++
 .../caption-matrix-decode/registry-item.json  |  15 +
 .../caption-neon-accent.html                  | 384 ++++++++++++++++++
 .../components/caption-neon-accent/demo.html  | 384 ++++++++++++++++++
 .../caption-neon-accent/registry-item.json    |  15 +
 .../caption-neon-glow/caption-neon-glow.html  | 161 ++++++++
 .../components/caption-neon-glow/demo.html    | 161 ++++++++
 .../caption-neon-glow/registry-item.json      |  15 +
 .../caption-parallax-layers.html              | 329 +++++++++++++++
 .../caption-parallax-layers/demo.html         | 329 +++++++++++++++
 .../registry-item.json                        |  15 +
 .../caption-particle-burst.html               | 212 ++++++++++
 .../caption-particle-burst/demo.html          | 212 ++++++++++
 .../caption-particle-burst/registry-item.json |  15 +
 .../caption-pill-karaoke.html                 | 365 +++++++++++++++++
 .../components/caption-pill-karaoke/demo.html | 365 +++++++++++++++++
 .../caption-pill-karaoke/registry-item.json   |  15 +
 .../caption-texture-lava.html                 | 172 ++++++++
 .../components/caption-texture-lava/demo.html | 172 ++++++++
 .../components/caption-texture-lava/lava.png  | Bin 0 -> 74455 bytes
 .../caption-texture-lava/registry-item.json   |  15 +
 .../caption-typewriter.html                   | 181 +++++++++
 .../components/caption-typewriter/demo.html   | 181 +++++++++
 .../caption-typewriter/registry-item.json     |  15 +
 .../caption-weight-shift.html                 | 323 +++++++++++++++
 .../components/caption-weight-shift/demo.html | 323 +++++++++++++++
 .../caption-weight-shift/registry-item.json   |  15 +
 registry/registry.json                        |  60 +++
 47 files changed, 7675 insertions(+)
 create mode 100644 registry/components/caption-clip-wipe/caption-clip-wipe.html
 create mode 100644 registry/components/caption-clip-wipe/demo.html
 create mode 100644 registry/components/caption-clip-wipe/registry-item.json
 create mode 100644 registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
 create mode 100644 registry/components/caption-editorial-emphasis/demo.html
 create mode 100644 registry/components/caption-editorial-emphasis/registry-item.json
 create mode 100644 registry/components/caption-emoji-pop/caption-emoji-pop.html
 create mode 100644 registry/components/caption-emoji-pop/demo.html
 create mode 100644 registry/components/caption-emoji-pop/registry-item.json
 create mode 100644 registry/components/caption-glitch-rgb/caption-glitch-rgb.html
 create mode 100644 registry/components/caption-glitch-rgb/demo.html
 create mode 100644 registry/components/caption-glitch-rgb/registry-item.json
 create mode 100644 registry/components/caption-gradient-fill/caption-gradient-fill.html
 create mode 100644 registry/components/caption-gradient-fill/demo.html
 create mode 100644 registry/components/caption-gradient-fill/registry-item.json
 create mode 100644 registry/components/caption-kinetic-slam/caption-kinetic-slam.html
 create mode 100644 registry/components/caption-kinetic-slam/demo.html
 create mode 100644 registry/components/caption-kinetic-slam/registry-item.json
 create mode 100644 registry/components/caption-matrix-decode/caption-matrix-decode.html
 create mode 100644 registry/components/caption-matrix-decode/demo.html
 create mode 100644 registry/components/caption-matrix-decode/registry-item.json
 create mode 100644 registry/components/caption-neon-accent/caption-neon-accent.html
 create mode 100644 registry/components/caption-neon-accent/demo.html
 create mode 100644 registry/components/caption-neon-accent/registry-item.json
 create mode 100644 registry/components/caption-neon-glow/caption-neon-glow.html
 create mode 100644 registry/components/caption-neon-glow/demo.html
 create mode 100644 registry/components/caption-neon-glow/registry-item.json
 create mode 100644 registry/components/caption-parallax-layers/caption-parallax-layers.html
 create mode 100644 registry/components/caption-parallax-layers/demo.html
 create mode 100644 registry/components/caption-parallax-layers/registry-item.json
 create mode 100644 registry/components/caption-particle-burst/caption-particle-burst.html
 create mode 100644 registry/components/caption-particle-burst/demo.html
 create mode 100644 registry/components/caption-particle-burst/registry-item.json
 create mode 100644 registry/components/caption-pill-karaoke/caption-pill-karaoke.html
 create mode 100644 registry/components/caption-pill-karaoke/demo.html
 create mode 100644 registry/components/caption-pill-karaoke/registry-item.json
 create mode 100644 registry/components/caption-texture-lava/caption-texture-lava.html
 create mode 100644 registry/components/caption-texture-lava/demo.html
 create mode 100644 registry/components/caption-texture-lava/lava.png
 create mode 100644 registry/components/caption-texture-lava/registry-item.json
 create mode 100644 registry/components/caption-typewriter/caption-typewriter.html
 create mode 100644 registry/components/caption-typewriter/demo.html
 create mode 100644 registry/components/caption-typewriter/registry-item.json
 create mode 100644 registry/components/caption-weight-shift/caption-weight-shift.html
 create mode 100644 registry/components/caption-weight-shift/demo.html
 create mode 100644 registry/components/caption-weight-shift/registry-item.json

diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html
new file mode 100644
index 000000000..a793d6763
--- /dev/null
+++ b/registry/components/caption-clip-wipe/caption-clip-wipe.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Clip Wipe</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@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;
+      }
+      #clip-wipe {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #wp-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .wp-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+      }
+      #wp-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .wp-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 100px;
+        visibility: hidden;
+      }
+      .wp-word {
+        font-family: 'Poppins', sans-serif;
+        font-weight: 800; font-size: 88px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        clip-path: inset(0 100% 0 0);
+        will-change: clip-path, color, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="clip-wipe"
+      data-composition-id="caption-clip-wipe"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="wp-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="wp-overlay"></div>
+      <div id="wp-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      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.35, nextStart - 0.05);
+        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+      });
+
+      var container = document.getElementById('wp-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 = 'wp-group';
+        grp.id = 'wp-grp-' + gi;
+
+        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';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible' }, g.start);
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var wordEl = document.getElementById('wp-w-' + wi);
+          var isKW = KEYWORDS.has(wi);
+
+          tl.to(wordEl, { clipPath: 'inset(0 0% 0 0)', duration: 0.15, ease: 'power3.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);
+        });
+
+        var wordEls = grp.querySelectorAll('.wp-word');
+        tl.to(wordEls, {
+          clipPath: 'inset(0 0% 0 100%)',
+          duration: 0.14, stagger: 0.04, ease: 'power2.in'
+        }, g.end - 0.2);
+        tl.set(grp, { visibility: 'hidden', opacity: 0 }, g.end);
+      });
+
+      tl.seek(0);
+      window.__timelines['clip-wipe'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-clip-wipe/demo.html b/registry/components/caption-clip-wipe/demo.html
new file mode 100644
index 000000000..a793d6763
--- /dev/null
+++ b/registry/components/caption-clip-wipe/demo.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Clip Wipe</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@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;
+      }
+      #clip-wipe {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #wp-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .wp-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+      }
+      #wp-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .wp-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 100px;
+        visibility: hidden;
+      }
+      .wp-word {
+        font-family: 'Poppins', sans-serif;
+        font-weight: 800; font-size: 88px;
+        text-transform: uppercase;
+        color: #ffffff;
+        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        clip-path: inset(0 100% 0 0);
+        will-change: clip-path, color, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="clip-wipe"
+      data-composition-id="caption-clip-wipe"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="wp-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="wp-overlay"></div>
+      <div id="wp-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      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.35, nextStart - 0.05);
+        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+      });
+
+      var container = document.getElementById('wp-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 = 'wp-group';
+        grp.id = 'wp-grp-' + gi;
+
+        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';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible' }, g.start);
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var wordEl = document.getElementById('wp-w-' + wi);
+          var isKW = KEYWORDS.has(wi);
+
+          tl.to(wordEl, { clipPath: 'inset(0 0% 0 0)', duration: 0.15, ease: 'power3.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);
+        });
+
+        var wordEls = grp.querySelectorAll('.wp-word');
+        tl.to(wordEls, {
+          clipPath: 'inset(0 0% 0 100%)',
+          duration: 0.14, stagger: 0.04, ease: 'power2.in'
+        }, g.end - 0.2);
+        tl.set(grp, { visibility: 'hidden', opacity: 0 }, g.end);
+      });
+
+      tl.seek(0);
+      window.__timelines['clip-wipe'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-clip-wipe/registry-item.json b/registry/components/caption-clip-wipe/registry-item.json
new file mode 100644
index 000000000..e1a545bb8
--- /dev/null
+++ b/registry/components/caption-clip-wipe/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-clip-wipe",
+  "type": "hyperframes:component",
+  "title": "Clip Wipe",
+  "description": "Left-to-right clip-path wipe reveal per word",
+  "tags": ["captions", "caption-style", "wipe", "clip-path", "reveal"],
+  "files": [
+    {
+      "path": "caption-clip-wipe.html",
+      "target": "compositions/components/caption-clip-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
new file mode 100644
index 000000000..a9c2e2eb6
--- /dev/null
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -0,0 +1,303 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Editorial Emphasis</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=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,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: #000;
+        font-family: "Inter", sans-serif;
+      }
+
+      #editorial-emphasis {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      #bg-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        top: 580px;
+        left: 60px;
+        width: 1800px;
+        height: 430px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        transform-origin: 0% 0%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line + .caption-line {
+        margin-top: 8px;
+      }
+
+      .word {
+        display: inline-block;
+        color: #F5F0D0;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--normal {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: normal;
+      }
+
+      .word--italic {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: italic;
+      }
+
+      .word--emphasis {
+        font-family: "Playfair Display", serif;
+        font-size: 180px;
+        font-weight: 800;
+        font-style: italic;
+        line-height: 0.9;
+        color: #F5F0D0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="editorial-emphasis"
+      data-composition-id="caption-editorial-emphasis"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="bg-video"
+        muted
+        playsinline
+        preload="auto"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_WIDTH = 1800;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      // Generic transcript words
+      var W = [
+        {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}
+      ];
+
+      // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
+      // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
+      var BLOCKS = [
+        { line1: [[0,"n"],[1,"n"],[2,"n"]],       line2: [[3,"n"],[4,"n"]] },
+        { line1: [[5,"n"],[6,"n"]],               line2: [[7,"e"]] },
+        { line1: [[8,"e"]],                       line2: null },
+        { line1: [[9,"n"],[10,"n"],[11,"n"]],     line2: [[12,"e"]] },
+        { line1: [[13,"n"],[14,"n"]],             line2: [[15,"e"]] },
+        { line1: [[16,"n"],[17,"n"]],             line2: null },
+        { line1: [[18,"n"]],                      line2: [[19,"n"],[20,"n"]] },
+        { line1: [[21,"n"],[22,"n"]],             line2: null },
+        { line1: [[23,"i"],[24,"e"]],             line2: null },
+        { line1: [[25,"n"],[26,"n"]],             line2: [[27,"e"]] },
+      ];
+
+      var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
+
+      function buildBlocks() {
+        var stage = document.getElementById("caption-stage");
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.createElement("div");
+          el.className = "caption-block";
+          el.id = "b" + bi;
+
+          var l1 = document.createElement("div");
+          l1.className = "caption-line";
+          l1.id = "b" + bi + "L1";
+          block.line1.forEach(function (pair, wi) {
+            var span = document.createElement("span");
+            span.className = CLASS_MAP[pair[1]];
+            span.id = "b" + bi + "L1w" + wi;
+            span.textContent = W[pair[0]].text;
+            l1.appendChild(span);
+          });
+          el.appendChild(l1);
+
+          if (block.line2) {
+            var l2 = document.createElement("div");
+            l2.className = "caption-line";
+            l2.id = "b" + bi + "L2";
+            block.line2.forEach(function (pair, wi) {
+              var span = document.createElement("span");
+              span.className = CLASS_MAP[pair[1]];
+              span.id = "b" + bi + "L2w" + wi;
+              span.textContent = W[pair[0]].text;
+              l2.appendChild(span);
+            });
+            el.appendChild(l2);
+          }
+
+          stage.appendChild(el);
+        });
+      }
+
+      buildBlocks();
+
+      // Scale blocks that exceed safe width
+      (function fitBlocks() {
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.getElementById("b" + bi);
+          el.style.opacity = "1";
+          el.style.position = "relative";
+          var lines = el.querySelectorAll(".caption-line");
+          var maxW = 0;
+          lines.forEach(function (line) { if (line.scrollWidth > maxW) maxW = line.scrollWidth; });
+          if (maxW > SAFE_WIDTH) {
+            var s = SAFE_WIDTH / maxW;
+            el.style.transform = "scale(" + s + ")";
+          }
+          el.style.opacity = "0";
+          el.style.position = "";
+        });
+      })();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var allEls = BLOCKS.map(function (_, i) { return document.getElementById("b" + i); });
+
+      function blockStart(bi) { return W[BLOCKS[bi].line1[0][0]].start; }
+
+      BLOCKS.forEach(function (block, bi) {
+        var el = allEls[bi];
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+
+        allEls.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+        tl.set(el, { opacity: 1 }, start);
+
+        block.line1.forEach(function (pair, wi) {
+          var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+          var wordStart = W[pair[0]].start;
+          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+          tl.to(wordEl, { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+        });
+
+        if (block.line2) {
+          var hasEmphasis = block.line2.some(function (p) { return p[1] === "e"; });
+          var l2El = document.getElementById("b" + bi + "L2");
+          if (hasEmphasis) {
+            var l2Start = W[block.line2[0][0]].start;
+            tl.set(l2El, { opacity: 0, x: -1920 }, start);
+            tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+          } else {
+            tl.set(l2El, { opacity: 1 }, start);
+            block.line2.forEach(function (pair, wi) {
+              var wordEl = document.getElementById("b" + bi + "L2w" + wi);
+              var wordStart = W[pair[0]].start;
+              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.to(wordEl, { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+            });
+          }
+        }
+
+        tl.set(el, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["editorial-emphasis"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-editorial-emphasis/demo.html b/registry/components/caption-editorial-emphasis/demo.html
new file mode 100644
index 000000000..a9c2e2eb6
--- /dev/null
+++ b/registry/components/caption-editorial-emphasis/demo.html
@@ -0,0 +1,303 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Editorial Emphasis</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=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,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: #000;
+        font-family: "Inter", sans-serif;
+      }
+
+      #editorial-emphasis {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      #bg-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        top: 580px;
+        left: 60px;
+        width: 1800px;
+        height: 430px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 0;
+        top: 0;
+        opacity: 0;
+        transform-origin: 0% 0%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line + .caption-line {
+        margin-top: 8px;
+      }
+
+      .word {
+        display: inline-block;
+        color: #F5F0D0;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--normal {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: normal;
+      }
+
+      .word--italic {
+        font-family: "Inter", sans-serif;
+        font-size: 86px;
+        font-weight: 400;
+        font-style: italic;
+      }
+
+      .word--emphasis {
+        font-family: "Playfair Display", serif;
+        font-size: 180px;
+        font-weight: 800;
+        font-style: italic;
+        line-height: 0.9;
+        color: #F5F0D0;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="editorial-emphasis"
+      data-composition-id="caption-editorial-emphasis"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="bg-video"
+        muted
+        playsinline
+        preload="auto"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_WIDTH = 1800;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      // Generic transcript words
+      var W = [
+        {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}
+      ];
+
+      // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
+      // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
+      var BLOCKS = [
+        { line1: [[0,"n"],[1,"n"],[2,"n"]],       line2: [[3,"n"],[4,"n"]] },
+        { line1: [[5,"n"],[6,"n"]],               line2: [[7,"e"]] },
+        { line1: [[8,"e"]],                       line2: null },
+        { line1: [[9,"n"],[10,"n"],[11,"n"]],     line2: [[12,"e"]] },
+        { line1: [[13,"n"],[14,"n"]],             line2: [[15,"e"]] },
+        { line1: [[16,"n"],[17,"n"]],             line2: null },
+        { line1: [[18,"n"]],                      line2: [[19,"n"],[20,"n"]] },
+        { line1: [[21,"n"],[22,"n"]],             line2: null },
+        { line1: [[23,"i"],[24,"e"]],             line2: null },
+        { line1: [[25,"n"],[26,"n"]],             line2: [[27,"e"]] },
+      ];
+
+      var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
+
+      function buildBlocks() {
+        var stage = document.getElementById("caption-stage");
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.createElement("div");
+          el.className = "caption-block";
+          el.id = "b" + bi;
+
+          var l1 = document.createElement("div");
+          l1.className = "caption-line";
+          l1.id = "b" + bi + "L1";
+          block.line1.forEach(function (pair, wi) {
+            var span = document.createElement("span");
+            span.className = CLASS_MAP[pair[1]];
+            span.id = "b" + bi + "L1w" + wi;
+            span.textContent = W[pair[0]].text;
+            l1.appendChild(span);
+          });
+          el.appendChild(l1);
+
+          if (block.line2) {
+            var l2 = document.createElement("div");
+            l2.className = "caption-line";
+            l2.id = "b" + bi + "L2";
+            block.line2.forEach(function (pair, wi) {
+              var span = document.createElement("span");
+              span.className = CLASS_MAP[pair[1]];
+              span.id = "b" + bi + "L2w" + wi;
+              span.textContent = W[pair[0]].text;
+              l2.appendChild(span);
+            });
+            el.appendChild(l2);
+          }
+
+          stage.appendChild(el);
+        });
+      }
+
+      buildBlocks();
+
+      // Scale blocks that exceed safe width
+      (function fitBlocks() {
+        BLOCKS.forEach(function (block, bi) {
+          var el = document.getElementById("b" + bi);
+          el.style.opacity = "1";
+          el.style.position = "relative";
+          var lines = el.querySelectorAll(".caption-line");
+          var maxW = 0;
+          lines.forEach(function (line) { if (line.scrollWidth > maxW) maxW = line.scrollWidth; });
+          if (maxW > SAFE_WIDTH) {
+            var s = SAFE_WIDTH / maxW;
+            el.style.transform = "scale(" + s + ")";
+          }
+          el.style.opacity = "0";
+          el.style.position = "";
+        });
+      })();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var allEls = BLOCKS.map(function (_, i) { return document.getElementById("b" + i); });
+
+      function blockStart(bi) { return W[BLOCKS[bi].line1[0][0]].start; }
+
+      BLOCKS.forEach(function (block, bi) {
+        var el = allEls[bi];
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+
+        allEls.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+        tl.set(el, { opacity: 1 }, start);
+
+        block.line1.forEach(function (pair, wi) {
+          var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+          var wordStart = W[pair[0]].start;
+          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+          tl.to(wordEl, { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+        });
+
+        if (block.line2) {
+          var hasEmphasis = block.line2.some(function (p) { return p[1] === "e"; });
+          var l2El = document.getElementById("b" + bi + "L2");
+          if (hasEmphasis) {
+            var l2Start = W[block.line2[0][0]].start;
+            tl.set(l2El, { opacity: 0, x: -1920 }, start);
+            tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+          } else {
+            tl.set(l2El, { opacity: 1 }, start);
+            block.line2.forEach(function (pair, wi) {
+              var wordEl = document.getElementById("b" + bi + "L2w" + wi);
+              var wordStart = W[pair[0]].start;
+              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.to(wordEl, { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+            });
+          }
+        }
+
+        tl.set(el, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["editorial-emphasis"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-editorial-emphasis/registry-item.json b/registry/components/caption-editorial-emphasis/registry-item.json
new file mode 100644
index 000000000..d0f88ecf4
--- /dev/null
+++ b/registry/components/caption-editorial-emphasis/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-editorial-emphasis",
+  "type": "hyperframes:component",
+  "title": "Editorial Emphasis",
+  "description": "Dual-font system with dramatic size contrast for emphasis words",
+  "tags": ["captions", "caption-style", "editorial", "typography", "emphasis"],
+  "files": [
+    {
+      "path": "caption-editorial-emphasis.html",
+      "target": "compositions/components/caption-editorial-emphasis.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
new file mode 100644
index 000000000..10f4b9573
--- /dev/null
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -0,0 +1,367 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Emoji Pop</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=Gabarito:wght@900&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Gabarito", Arial, sans-serif;
+      }
+
+      #emoji-pop {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-emoji {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, calc(-50% - 70px));
+        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+        font-size: 56px;
+        line-height: 1;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 14px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Gabarito", Arial, sans-serif;
+        font-weight: 900;
+        font-size: 72px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        text-transform: uppercase;
+        -webkit-text-stroke: 3px #000000;
+        paint-order: stroke fill;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="emoji-pop"
+      data-composition-id="caption-emoji-pop"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 3;
+      var WORD_SPACING = 14;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_FRAMES = 4;
+      var EXIT_FRAMES = 3;
+      var FPS = 30;
+      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+      var EXIT_DURATION = EXIT_FRAMES / FPS;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+      var TRANSITION_WORDS = new Set([
+        "the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
+        "to", "of", "in", "on", "at", "for", "with", "by", "from", "as",
+        "it", "its", "this", "that", "these", "those", "be", "been",
+        "have", "has", "had", "do", "does", "did", "will", "would", "could",
+        "should", "may", "might", "must", "can", "if", "then", "so", "just",
+        "not", "no", "yes", "up", "out", "about"
+      ]);
+
+      // Emoji map for key words
+      var WORD_EMOJI = {
+        "hyperframes": "🎬",
+        "html": "💻",
+        "professional": "✨",
+        "code": "⌨️",
+        "cinema": "🎥",
+        "video": "📹",
+        "frame": "🖼️"
+      };
+
+      var TRANSCRIPT = [
+        {"text": "Every", "start": 0.0, "end": 0.3},
+        {"text": "great", "start": 0.3, "end": 0.55},
+        {"text": "video", "start": 0.55, "end": 0.85},
+        {"text": "starts", "start": 0.85, "end": 1.1},
+        {"text": "with", "start": 1.1, "end": 1.25},
+        {"text": "a", "start": 1.25, "end": 1.35},
+        {"text": "single", "start": 1.35, "end": 1.65},
+        {"text": "frame.", "start": 1.65, "end": 2.0},
+        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
+        {"text": "lets", "start": 2.65, "end": 2.85},
+        {"text": "you", "start": 2.85, "end": 2.95},
+        {"text": "write", "start": 2.95, "end": 3.15},
+        {"text": "HTML", "start": 3.15, "end": 3.55},
+        {"text": "and", "start": 3.55, "end": 3.65},
+        {"text": "render", "start": 3.65, "end": 3.95},
+        {"text": "professional", "start": 3.95, "end": 4.45},
+        {"text": "video.", "start": 4.45, "end": 4.8},
+        {"text": "No", "start": 4.9, "end": 5.05},
+        {"text": "timeline.", "start": 5.05, "end": 5.45},
+        {"text": "No", "start": 5.5, "end": 5.65},
+        {"text": "drag", "start": 5.65, "end": 5.85},
+        {"text": "and", "start": 5.85, "end": 5.95},
+        {"text": "drop.", "start": 5.95, "end": 6.25},
+        {"text": "Just", "start": 6.35, "end": 6.55},
+        {"text": "code", "start": 6.55, "end": 6.8},
+        {"text": "that", "start": 6.8, "end": 6.95},
+        {"text": "becomes", "start": 6.95, "end": 7.3},
+        {"text": "cinema.", "start": 7.3, "end": 7.7}
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords.map(function (item) {
+          var text = String(item.word || item.text || "").trim();
+          var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+          return {
+            text: text,
+            start: Math.max(0, Number(item.start) || 0),
+            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            emoji: WORD_EMOJI[clean] || null,
+          };
+        }).filter(function (word) { return word.text.length > 0; });
+      }
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word, index) {
+          var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
+          if (KEYWORDS.has(clean)) {
+            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[ci];
+          }
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 13 + index);
+          if (rand > 0.55) {
+            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci2];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWord(word, fontSize) {
+        measureContext.font = "900 " + fontSize + "px Gabarito";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsLine(words) {
+        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var emoji = null;
+        for (var i = 0; i < words.length; i++) {
+          if (words[i].emoji) { emoji = words[i].emoji; break; }
+        }
+        return { words: words.slice(), colors: colors, emoji: emoji, start: words[0].start, end: words[words.length - 1].end };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        return "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" + r + "," + g + "," + b + ",1), 0 0 8px rgba(" + r + "," + g + "," + b + ",0.6)";
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+
+          if (group.emoji) {
+            var emojiEl = document.createElement("div");
+            emojiEl.className = "caption-emoji";
+            emojiEl.textContent = group.emoji;
+            groupEl.appendChild(emojiEl);
+          }
+
+          var lineEl = document.createElement("div");
+          lineEl.className = "caption-line";
+          group.words.forEach(function (word, wordIndex) {
+            var color = group.colors[wordIndex] || PRIMARY_COLOR;
+            var wordEl = document.createElement("span");
+            wordEl.className = "caption-word";
+            wordEl.textContent = word.text.toUpperCase();
+            wordEl.style.color = color;
+            wordEl.style.textShadow = shadowForColor(color);
+            lineEl.appendChild(wordEl);
+          });
+
+          groupEl.appendChild(lineEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+        tl.to(groupEl, { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
+        tl.to(groupEl, { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true }, exitStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["emoji-pop"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-emoji-pop/demo.html b/registry/components/caption-emoji-pop/demo.html
new file mode 100644
index 000000000..10f4b9573
--- /dev/null
+++ b/registry/components/caption-emoji-pop/demo.html
@@ -0,0 +1,367 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Emoji Pop</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=Gabarito:wght@900&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Gabarito", Arial, sans-serif;
+      }
+
+      #emoji-pop {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 280px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-emoji {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, calc(-50% - 70px));
+        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+        font-size: 56px;
+        line-height: 1;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 14px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Gabarito", Arial, sans-serif;
+        font-weight: 900;
+        font-size: 72px;
+        line-height: 1.1;
+        letter-spacing: -0.03em;
+        text-transform: uppercase;
+        -webkit-text-stroke: 3px #000000;
+        paint-order: stroke fill;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="emoji-pop"
+      data-composition-id="caption-emoji-pop"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 3;
+      var WORD_SPACING = 14;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_FRAMES = 4;
+      var EXIT_FRAMES = 3;
+      var FPS = 30;
+      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+      var EXIT_DURATION = EXIT_FRAMES / FPS;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+      var TRANSITION_WORDS = new Set([
+        "the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
+        "to", "of", "in", "on", "at", "for", "with", "by", "from", "as",
+        "it", "its", "this", "that", "these", "those", "be", "been",
+        "have", "has", "had", "do", "does", "did", "will", "would", "could",
+        "should", "may", "might", "must", "can", "if", "then", "so", "just",
+        "not", "no", "yes", "up", "out", "about"
+      ]);
+
+      // Emoji map for key words
+      var WORD_EMOJI = {
+        "hyperframes": "🎬",
+        "html": "💻",
+        "professional": "✨",
+        "code": "⌨️",
+        "cinema": "🎥",
+        "video": "📹",
+        "frame": "🖼️"
+      };
+
+      var TRANSCRIPT = [
+        {"text": "Every", "start": 0.0, "end": 0.3},
+        {"text": "great", "start": 0.3, "end": 0.55},
+        {"text": "video", "start": 0.55, "end": 0.85},
+        {"text": "starts", "start": 0.85, "end": 1.1},
+        {"text": "with", "start": 1.1, "end": 1.25},
+        {"text": "a", "start": 1.25, "end": 1.35},
+        {"text": "single", "start": 1.35, "end": 1.65},
+        {"text": "frame.", "start": 1.65, "end": 2.0},
+        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
+        {"text": "lets", "start": 2.65, "end": 2.85},
+        {"text": "you", "start": 2.85, "end": 2.95},
+        {"text": "write", "start": 2.95, "end": 3.15},
+        {"text": "HTML", "start": 3.15, "end": 3.55},
+        {"text": "and", "start": 3.55, "end": 3.65},
+        {"text": "render", "start": 3.65, "end": 3.95},
+        {"text": "professional", "start": 3.95, "end": 4.45},
+        {"text": "video.", "start": 4.45, "end": 4.8},
+        {"text": "No", "start": 4.9, "end": 5.05},
+        {"text": "timeline.", "start": 5.05, "end": 5.45},
+        {"text": "No", "start": 5.5, "end": 5.65},
+        {"text": "drag", "start": 5.65, "end": 5.85},
+        {"text": "and", "start": 5.85, "end": 5.95},
+        {"text": "drop.", "start": 5.95, "end": 6.25},
+        {"text": "Just", "start": 6.35, "end": 6.55},
+        {"text": "code", "start": 6.55, "end": 6.8},
+        {"text": "that", "start": 6.8, "end": 6.95},
+        {"text": "becomes", "start": 6.95, "end": 7.3},
+        {"text": "cinema.", "start": 7.3, "end": 7.7}
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords.map(function (item) {
+          var text = String(item.word || item.text || "").trim();
+          var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+          return {
+            text: text,
+            start: Math.max(0, Number(item.start) || 0),
+            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            emoji: WORD_EMOJI[clean] || null,
+          };
+        }).filter(function (word) { return word.text.length > 0; });
+      }
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word, index) {
+          var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
+          if (KEYWORDS.has(clean)) {
+            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[ci];
+          }
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 13 + index);
+          if (rand > 0.55) {
+            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci2];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWord(word, fontSize) {
+        measureContext.font = "900 " + fontSize + "px Gabarito";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsLine(words) {
+        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var emoji = null;
+        for (var i = 0; i < words.length; i++) {
+          if (words[i].emoji) { emoji = words[i].emoji; break; }
+        }
+        return { words: words.slice(), colors: colors, emoji: emoji, start: words[0].start, end: words[words.length - 1].end };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        return "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" + r + "," + g + "," + b + ",1), 0 0 8px rgba(" + r + "," + g + "," + b + ",0.6)";
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+
+          if (group.emoji) {
+            var emojiEl = document.createElement("div");
+            emojiEl.className = "caption-emoji";
+            emojiEl.textContent = group.emoji;
+            groupEl.appendChild(emojiEl);
+          }
+
+          var lineEl = document.createElement("div");
+          lineEl.className = "caption-line";
+          group.words.forEach(function (word, wordIndex) {
+            var color = group.colors[wordIndex] || PRIMARY_COLOR;
+            var wordEl = document.createElement("span");
+            wordEl.className = "caption-word";
+            wordEl.textContent = word.text.toUpperCase();
+            wordEl.style.color = color;
+            wordEl.style.textShadow = shadowForColor(color);
+            lineEl.appendChild(wordEl);
+          });
+
+          groupEl.appendChild(lineEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+        tl.to(groupEl, { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
+        tl.to(groupEl, { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true }, exitStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["emoji-pop"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-emoji-pop/registry-item.json b/registry/components/caption-emoji-pop/registry-item.json
new file mode 100644
index 000000000..523126d4b
--- /dev/null
+++ b/registry/components/caption-emoji-pop/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-emoji-pop",
+  "type": "hyperframes:component",
+  "title": "Emoji Pop",
+  "description": "Emoji integration with stroked text and horizontal squeeze entrance",
+  "tags": ["captions", "caption-style", "emoji", "social"],
+  "files": [
+    {
+      "path": "caption-emoji-pop.html",
+      "target": "compositions/components/caption-emoji-pop.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
new file mode 100644
index 000000000..8b6758751
--- /dev/null
+++ b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Glitch RGB</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=Space+Grotesk:wght@700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body {
+        width: 1920px; height: 1080px; margin: 0;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #glitch-rgb {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #gl-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .gl-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+      }
+      .gl-scanlines {
+        position: absolute; inset: 0; z-index: 5; pointer-events: none;
+        background: repeating-linear-gradient(
+          to bottom,
+          transparent 0px, transparent 3px,
+          rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
+        );
+      }
+      #gl-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .gl-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 100px;
+        opacity: 0; visibility: hidden;
+      }
+      .gl-word {
+        font-family: 'Space Grotesk', sans-serif;
+        font-weight: 700; font-size: 88px;
+        text-transform: uppercase;
+        color: rgba(180,230,255,0.45);
+        display: inline-block; letter-spacing: 0.05em; line-height: 1;
+        will-change: transform, text-shadow, color;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="glitch-rgb"
+      data-composition-id="caption-glitch-rgb"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="gl-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="gl-overlay"></div>
+      <div class="gl-scanlines"></div>
+      <div id="gl-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      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}
+      ];
+
+      // Keywords get white + glow on activation
+      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      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.35, nextStart - 0.05);
+        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+      });
+
+      var BASE_FONT = 88;
+      var container = document.getElementById('gl-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 = 'gl-group';
+        grp.id = 'gl-grp-' + gi;
+
+        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';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible' }, g.start);
+        tl.fromTo(grp,
+          { opacity: 0, x: -8 },
+          { opacity: 1, x: 0, duration: 0.18, ease: 'power3.out' },
+          g.start
+        );
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          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 sm = shadowMag.toFixed(1);
+
+          tl.to(wordEl, { x: j1, color: '#ffffff', textShadow: sm + 'px 0 #ff003c, -' + sm + 'px 0 #00e5ff', duration: 0.045, ease: 'none' }, w.start);
+          tl.to(wordEl, { x: j2, textShadow: '-' + (shadowMag * 0.7).toFixed(1) + 'px 0 #ff003c, ' + (shadowMag * 0.7).toFixed(1) + 'px 0 #00e5ff', duration: 0.038, ease: 'none' }, w.start + 0.045);
+          tl.to(wordEl, { x: j3, textShadow: sm + 'px 0 #ff003c, -' + sm + 'px 0 #00e5ff', duration: 0.03, ease: 'none' }, w.start + 0.083);
+          tl.to(wordEl, { x: 0, textShadow: 'none', color: isKW ? '#ffffff' : '#00e5ff', duration: 0.05, ease: 'power2.out' }, w.start + 0.113);
+          tl.to(wordEl, { color: 'rgba(180,230,255,0.4)', textShadow: 'none', duration: 0.12 }, w.end);
+        });
+
+        tl.to(grp, { opacity: 0, x: 8, duration: 0.15 }, g.end - 0.15);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      tl.seek(0);
+      window.__timelines['glitch-rgb'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-glitch-rgb/demo.html b/registry/components/caption-glitch-rgb/demo.html
new file mode 100644
index 000000000..8b6758751
--- /dev/null
+++ b/registry/components/caption-glitch-rgb/demo.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Glitch RGB</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=Space+Grotesk:wght@700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body {
+        width: 1920px; height: 1080px; margin: 0;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #glitch-rgb {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #gl-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .gl-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+      }
+      .gl-scanlines {
+        position: absolute; inset: 0; z-index: 5; pointer-events: none;
+        background: repeating-linear-gradient(
+          to bottom,
+          transparent 0px, transparent 3px,
+          rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
+        );
+      }
+      #gl-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .gl-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 100px;
+        opacity: 0; visibility: hidden;
+      }
+      .gl-word {
+        font-family: 'Space Grotesk', sans-serif;
+        font-weight: 700; font-size: 88px;
+        text-transform: uppercase;
+        color: rgba(180,230,255,0.45);
+        display: inline-block; letter-spacing: 0.05em; line-height: 1;
+        will-change: transform, text-shadow, color;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="glitch-rgb"
+      data-composition-id="caption-glitch-rgb"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="gl-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="gl-overlay"></div>
+      <div class="gl-scanlines"></div>
+      <div id="gl-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      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}
+      ];
+
+      // Keywords get white + glow on activation
+      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      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.35, nextStart - 0.05);
+        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+      });
+
+      var BASE_FONT = 88;
+      var container = document.getElementById('gl-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 = 'gl-group';
+        grp.id = 'gl-grp-' + gi;
+
+        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';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible' }, g.start);
+        tl.fromTo(grp,
+          { opacity: 0, x: -8 },
+          { opacity: 1, x: 0, duration: 0.18, ease: 'power3.out' },
+          g.start
+        );
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          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 sm = shadowMag.toFixed(1);
+
+          tl.to(wordEl, { x: j1, color: '#ffffff', textShadow: sm + 'px 0 #ff003c, -' + sm + 'px 0 #00e5ff', duration: 0.045, ease: 'none' }, w.start);
+          tl.to(wordEl, { x: j2, textShadow: '-' + (shadowMag * 0.7).toFixed(1) + 'px 0 #ff003c, ' + (shadowMag * 0.7).toFixed(1) + 'px 0 #00e5ff', duration: 0.038, ease: 'none' }, w.start + 0.045);
+          tl.to(wordEl, { x: j3, textShadow: sm + 'px 0 #ff003c, -' + sm + 'px 0 #00e5ff', duration: 0.03, ease: 'none' }, w.start + 0.083);
+          tl.to(wordEl, { x: 0, textShadow: 'none', color: isKW ? '#ffffff' : '#00e5ff', duration: 0.05, ease: 'power2.out' }, w.start + 0.113);
+          tl.to(wordEl, { color: 'rgba(180,230,255,0.4)', textShadow: 'none', duration: 0.12 }, w.end);
+        });
+
+        tl.to(grp, { opacity: 0, x: 8, duration: 0.15 }, g.end - 0.15);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      tl.seek(0);
+      window.__timelines['glitch-rgb'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-glitch-rgb/registry-item.json b/registry/components/caption-glitch-rgb/registry-item.json
new file mode 100644
index 000000000..278d2e966
--- /dev/null
+++ b/registry/components/caption-glitch-rgb/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-glitch-rgb",
+  "type": "hyperframes:component",
+  "title": "Glitch RGB",
+  "description": "RGB chromatic aberration with CRT scanline overlay",
+  "tags": ["captions", "caption-style", "glitch", "cyber", "tech"],
+  "files": [
+    {
+      "path": "caption-glitch-rgb.html",
+      "target": "compositions/components/caption-glitch-rgb.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html
new file mode 100644
index 000000000..cd34918b4
--- /dev/null
+++ b/registry/components/caption-gradient-fill/caption-gradient-fill.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gradient Fill</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=Nunito:wght@900&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;
+      }
+      #gradient-fill {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #gr-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .gr-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.42); z-index: 1; pointer-events: none;
+      }
+      #gr-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .gr-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 80px;
+        opacity: 0; visibility: hidden;
+      }
+      .gr-word {
+        font-family: 'Nunito', sans-serif;
+        font-weight: 900; font-size: 100px;
+        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        opacity: 0.3;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="gradient-fill"
+      data-composition-id="caption-gradient-fill"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="gr-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="gr-overlay"></div>
+      <div id="gr-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      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 GROUPS = [
+        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
+        {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},
+      ];
+
+      // Enhanced gradient palette with accent for keywords
+      var GRADS = [
+        "linear-gradient(135deg,#FF6B6B,#FFD700)",
+        "linear-gradient(135deg,#4ADE80,#22D3EE)",
+        "linear-gradient(135deg,#818CF8,#E879F9)",
+        "linear-gradient(135deg,#FFD700,#FF6B35)",
+        "linear-gradient(135deg,#22D3EE,#4ADE80)",
+        "linear-gradient(135deg,#E879F9,#818CF8)",
+        "linear-gradient(135deg,#FF3366,#FF6B35)"
+      ];
+      var KEYWORD_GRADS = {
+        8:  "linear-gradient(135deg,#FF6B6B,#FFD700,#FF6B6B)", // HyperFrames
+        12: "linear-gradient(135deg,#22D3EE,#ffffff,#22D3EE)",  // HTML
+        15: "linear-gradient(135deg,#818CF8,#E879F9,#818CF8)",  // professional
+        24: "linear-gradient(135deg,#00F5D4,#22D3EE,#00F5D4)",  // code
+        27: "linear-gradient(135deg,#FFD700,#FF6B35,#FFD700)"   // cinema.
+      };
+
+      var container = document.getElementById('gr-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 = 'gr-group';
+        grp.id = 'gr-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var span = document.createElement('span');
+          span.className = 'gr-word';
+          span.id = 'gr-w-' + wi;
+          span.textContent = w.text;
+          span.style.fontSize = '100px';
+          var grad = KEYWORD_GRADS[wi] || GRADS[wi % 7];
+          span.style.background = grad;
+          span.style.webkitBackgroundClip = 'text';
+          span.style.backgroundClip = 'text';
+          span.style.color = 'transparent';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+
+        var gs = g.start;
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var el = document.getElementById('gr-w-' + wi);
+          tl.set(el, { opacity: 0, y: 55, scale: 0.35 }, gs);
+          tl.fromTo(el,
+            { y: 55, scale: 0.35, opacity: 0 },
+            { y: 0, scale: 1, opacity: 0.35, duration: 0.55, ease: 'elastic.out(1.6,0.4)' },
+            gs + i * 0.05
+          );
+        });
+
+        tl.set(grp, { visibility: 'visible', opacity: 1 }, gs);
+
+        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(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      window.__timelines['gradient-fill'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-gradient-fill/demo.html b/registry/components/caption-gradient-fill/demo.html
new file mode 100644
index 000000000..cd34918b4
--- /dev/null
+++ b/registry/components/caption-gradient-fill/demo.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Gradient Fill</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=Nunito:wght@900&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;
+      }
+      #gradient-fill {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #gr-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .gr-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.42); z-index: 1; pointer-events: none;
+      }
+      #gr-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .gr-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 80px;
+        opacity: 0; visibility: hidden;
+      }
+      .gr-word {
+        font-family: 'Nunito', sans-serif;
+        font-weight: 900; font-size: 100px;
+        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        opacity: 0.3;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="gradient-fill"
+      data-composition-id="caption-gradient-fill"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="gr-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="gr-overlay"></div>
+      <div id="gr-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      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 GROUPS = [
+        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
+        {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},
+      ];
+
+      // Enhanced gradient palette with accent for keywords
+      var GRADS = [
+        "linear-gradient(135deg,#FF6B6B,#FFD700)",
+        "linear-gradient(135deg,#4ADE80,#22D3EE)",
+        "linear-gradient(135deg,#818CF8,#E879F9)",
+        "linear-gradient(135deg,#FFD700,#FF6B35)",
+        "linear-gradient(135deg,#22D3EE,#4ADE80)",
+        "linear-gradient(135deg,#E879F9,#818CF8)",
+        "linear-gradient(135deg,#FF3366,#FF6B35)"
+      ];
+      var KEYWORD_GRADS = {
+        8:  "linear-gradient(135deg,#FF6B6B,#FFD700,#FF6B6B)", // HyperFrames
+        12: "linear-gradient(135deg,#22D3EE,#ffffff,#22D3EE)",  // HTML
+        15: "linear-gradient(135deg,#818CF8,#E879F9,#818CF8)",  // professional
+        24: "linear-gradient(135deg,#00F5D4,#22D3EE,#00F5D4)",  // code
+        27: "linear-gradient(135deg,#FFD700,#FF6B35,#FFD700)"   // cinema.
+      };
+
+      var container = document.getElementById('gr-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 = 'gr-group';
+        grp.id = 'gr-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var span = document.createElement('span');
+          span.className = 'gr-word';
+          span.id = 'gr-w-' + wi;
+          span.textContent = w.text;
+          span.style.fontSize = '100px';
+          var grad = KEYWORD_GRADS[wi] || GRADS[wi % 7];
+          span.style.background = grad;
+          span.style.webkitBackgroundClip = 'text';
+          span.style.backgroundClip = 'text';
+          span.style.color = 'transparent';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+
+        var gs = g.start;
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var el = document.getElementById('gr-w-' + wi);
+          tl.set(el, { opacity: 0, y: 55, scale: 0.35 }, gs);
+          tl.fromTo(el,
+            { y: 55, scale: 0.35, opacity: 0 },
+            { y: 0, scale: 1, opacity: 0.35, duration: 0.55, ease: 'elastic.out(1.6,0.4)' },
+            gs + i * 0.05
+          );
+        });
+
+        tl.set(grp, { visibility: 'visible', opacity: 1 }, gs);
+
+        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(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      window.__timelines['gradient-fill'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-gradient-fill/registry-item.json b/registry/components/caption-gradient-fill/registry-item.json
new file mode 100644
index 000000000..dbf8c92a3
--- /dev/null
+++ b/registry/components/caption-gradient-fill/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-gradient-fill",
+  "type": "hyperframes:component",
+  "title": "Gradient Fill",
+  "description": "Gradient-clipped text with elastic bounce entrance",
+  "tags": ["captions", "caption-style", "gradient", "colorful"],
+  "files": [
+    {
+      "path": "caption-gradient-fill.html",
+      "target": "compositions/components/caption-gradient-fill.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
new file mode 100644
index 000000000..11a70bc3d
--- /dev/null
+++ b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Slam</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=Anton&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;
+      }
+      #kinetic-slam {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #kt-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .kt-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+      }
+      #kt-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .kt-word {
+        font-family: 'Anton', sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #ffffff;
+        position: absolute; left: 0; width: 100%;
+        text-align: center; top: 50%;
+        letter-spacing: 0.04em; line-height: 1;
+        opacity: 0; visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="kinetic-slam"
+      data-composition-id="caption-kinetic-slam"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="kt-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="kt-overlay"></div>
+      <div id="kt-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      var container = document.getElementById('kt-container');
+      var tl = gsap.timeline({ paused: true });
+
+      WORDS.forEach(function(w, wi) {
+        var el = document.createElement('div');
+        el.className = 'kt-word';
+        el.id = 'kt-w-' + wi;
+        el.textContent = w.text.toUpperCase();
+        el.style.fontSize = '220px';
+        if (KEYWORDS.has(wi)) el.style.color = '#FFD700';
+        container.appendChild(el);
+
+        gsap.set(el, { yPercent: -50 });
+
+        var entranceMode = wi % 4;
+        tl.set(el, { visibility: 'visible' }, w.start);
+        if (entranceMode === 0) {
+          tl.fromTo(el,
+            { y: -120, opacity: 0 },
+            { y: 0, opacity: 1, duration: 0.22, ease: 'back.out(1.7)' },
+            w.start
+          );
+        } else if (entranceMode === 1) {
+          tl.fromTo(el,
+            { x: -300, opacity: 0 },
+            { x: 0, opacity: 1, duration: 0.2, ease: 'expo.out' },
+            w.start
+          );
+        } else if (entranceMode === 2) {
+          tl.fromTo(el,
+            { x: 300, opacity: 0 },
+            { x: 0, opacity: 1, duration: 0.2, ease: 'expo.out' },
+            w.start
+          );
+        } else {
+          tl.fromTo(el,
+            { scale: 0.4, opacity: 0 },
+            { scale: 1, opacity: 1, duration: 0.24, ease: 'back.out(2.2)' },
+            w.start
+          );
+        }
+
+        tl.to(el, { opacity: 0, duration: 0.1, ease: 'power2.in' }, w.end);
+        tl.set(el, { opacity: 0, visibility: 'hidden' }, w.end + 0.1);
+      });
+
+      tl.seek(0);
+      window.__timelines['kinetic-slam'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-kinetic-slam/demo.html b/registry/components/caption-kinetic-slam/demo.html
new file mode 100644
index 000000000..11a70bc3d
--- /dev/null
+++ b/registry/components/caption-kinetic-slam/demo.html
@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Kinetic Slam</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=Anton&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;
+      }
+      #kinetic-slam {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #kt-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .kt-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+      }
+      #kt-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .kt-word {
+        font-family: 'Anton', sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #ffffff;
+        position: absolute; left: 0; width: 100%;
+        text-align: center; top: 50%;
+        letter-spacing: 0.04em; line-height: 1;
+        opacity: 0; visibility: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="kinetic-slam"
+      data-composition-id="caption-kinetic-slam"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="kt-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="kt-overlay"></div>
+      <div id="kt-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      var container = document.getElementById('kt-container');
+      var tl = gsap.timeline({ paused: true });
+
+      WORDS.forEach(function(w, wi) {
+        var el = document.createElement('div');
+        el.className = 'kt-word';
+        el.id = 'kt-w-' + wi;
+        el.textContent = w.text.toUpperCase();
+        el.style.fontSize = '220px';
+        if (KEYWORDS.has(wi)) el.style.color = '#FFD700';
+        container.appendChild(el);
+
+        gsap.set(el, { yPercent: -50 });
+
+        var entranceMode = wi % 4;
+        tl.set(el, { visibility: 'visible' }, w.start);
+        if (entranceMode === 0) {
+          tl.fromTo(el,
+            { y: -120, opacity: 0 },
+            { y: 0, opacity: 1, duration: 0.22, ease: 'back.out(1.7)' },
+            w.start
+          );
+        } else if (entranceMode === 1) {
+          tl.fromTo(el,
+            { x: -300, opacity: 0 },
+            { x: 0, opacity: 1, duration: 0.2, ease: 'expo.out' },
+            w.start
+          );
+        } else if (entranceMode === 2) {
+          tl.fromTo(el,
+            { x: 300, opacity: 0 },
+            { x: 0, opacity: 1, duration: 0.2, ease: 'expo.out' },
+            w.start
+          );
+        } else {
+          tl.fromTo(el,
+            { scale: 0.4, opacity: 0 },
+            { scale: 1, opacity: 1, duration: 0.24, ease: 'back.out(2.2)' },
+            w.start
+          );
+        }
+
+        tl.to(el, { opacity: 0, duration: 0.1, ease: 'power2.in' }, w.end);
+        tl.set(el, { opacity: 0, visibility: 'hidden' }, w.end + 0.1);
+      });
+
+      tl.seek(0);
+      window.__timelines['kinetic-slam'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-kinetic-slam/registry-item.json b/registry/components/caption-kinetic-slam/registry-item.json
new file mode 100644
index 000000000..fa3249229
--- /dev/null
+++ b/registry/components/caption-kinetic-slam/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-kinetic-slam",
+  "type": "hyperframes:component",
+  "title": "Kinetic Slam",
+  "description": "Full-screen single-word display with alternating entrance directions",
+  "tags": ["captions", "caption-style", "kinetic", "typography", "slam"],
+  "files": [
+    {
+      "path": "caption-kinetic-slam.html",
+      "target": "compositions/components/caption-kinetic-slam.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-matrix-decode/caption-matrix-decode.html b/registry/components/caption-matrix-decode/caption-matrix-decode.html
new file mode 100644
index 000000000..ac5176793
--- /dev/null
+++ b/registry/components/caption-matrix-decode/caption-matrix-decode.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Matrix Decode</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=Space+Grotesk:wght@700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body {
+        width: 1920px; height: 1080px; margin: 0;
+        overflow: hidden; background: #000;
+      }
+      #matrix-decode {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #000;
+      }
+      #sc-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .sc-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.85); z-index: 1; pointer-events: none;
+      }
+      #sc-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .sc-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 80px;
+        opacity: 0; visibility: hidden;
+      }
+      .sc-word-wrap {
+        font-family: 'Space Grotesk', sans-serif;
+        font-weight: 700; font-size: 96px;
+        color: #00FF41;
+        display: inline-block; letter-spacing: 0.04em; line-height: 1; position: relative;
+      }
+      .sc-real { display: none; }
+      .sc-scr0 { display: none; }
+      .sc-scr1 { display: none; }
+    </style>
+  </head>
+  <body>
+    <div
+      id="matrix-decode"
+      data-composition-id="caption-matrix-decode"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="sc-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="sc-overlay"></div>
+      <div id="sc-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      var ALPHANUM = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+      function scrambleChars(seed) {
+        var rng = mulberry32(seed);
+        var result = '';
+        for (var i = 0; i < 4; i++) {
+          result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+        }
+        return result;
+      }
+
+      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 GROUPS = [
+        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
+        {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},
+      ];
+
+      var container = document.getElementById('sc-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 = 'sc-group';
+        grp.id = 'sc-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var wordWrap = document.createElement('span');
+          wordWrap.className = 'sc-word-wrap';
+          wordWrap.id = 'sc-ww-' + wi;
+          wordWrap.style.fontSize = '96px';
+
+          var real = document.createElement('span');
+          real.className = 'sc-real';
+          real.id = 'sc-real-' + wi;
+          real.textContent = w.text;
+          wordWrap.appendChild(real);
+
+          var scr0 = document.createElement('span');
+          scr0.className = 'sc-scr0';
+          scr0.id = 'sc-scr0-' + wi;
+          scr0.textContent = scrambleChars(wi * 1000 + 0);
+          wordWrap.appendChild(scr0);
+
+          var scr1 = document.createElement('span');
+          scr1.className = 'sc-scr1';
+          scr1.id = 'sc-scr1-' + wi;
+          scr1.textContent = scrambleChars(wi * 1000 + 1);
+          wordWrap.appendChild(scr1);
+
+          grp.appendChild(wordWrap);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible', opacity: 0 }, g.start);
+        tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var realEl  = document.getElementById('sc-real-'  + wi);
+          var scr0El  = document.getElementById('sc-scr0-'  + wi);
+          var scr1El  = document.getElementById('sc-scr1-'  + wi);
+
+          tl.set(scr0El, { display: 'inline' }, w.start);
+          tl.set(scr1El, { display: 'inline' }, w.start + 0.05);
+          tl.set(scr0El, { display: 'none' },   w.start + 0.05);
+          tl.set(realEl, { display: 'inline' },  w.start + 0.1);
+          tl.set(scr1El, { display: 'none' },    w.start + 0.1);
+        });
+
+        tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      window.__timelines['matrix-decode'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-matrix-decode/demo.html b/registry/components/caption-matrix-decode/demo.html
new file mode 100644
index 000000000..ac5176793
--- /dev/null
+++ b/registry/components/caption-matrix-decode/demo.html
@@ -0,0 +1,197 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Matrix Decode</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=Space+Grotesk:wght@700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body {
+        width: 1920px; height: 1080px; margin: 0;
+        overflow: hidden; background: #000;
+      }
+      #matrix-decode {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #000;
+      }
+      #sc-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .sc-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.85); z-index: 1; pointer-events: none;
+      }
+      #sc-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .sc-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 80px;
+        opacity: 0; visibility: hidden;
+      }
+      .sc-word-wrap {
+        font-family: 'Space Grotesk', sans-serif;
+        font-weight: 700; font-size: 96px;
+        color: #00FF41;
+        display: inline-block; letter-spacing: 0.04em; line-height: 1; position: relative;
+      }
+      .sc-real { display: none; }
+      .sc-scr0 { display: none; }
+      .sc-scr1 { display: none; }
+    </style>
+  </head>
+  <body>
+    <div
+      id="matrix-decode"
+      data-composition-id="caption-matrix-decode"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="sc-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="sc-overlay"></div>
+      <div id="sc-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      var ALPHANUM = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+      function scrambleChars(seed) {
+        var rng = mulberry32(seed);
+        var result = '';
+        for (var i = 0; i < 4; i++) {
+          result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+        }
+        return result;
+      }
+
+      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 GROUPS = [
+        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
+        {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},
+      ];
+
+      var container = document.getElementById('sc-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 = 'sc-group';
+        grp.id = 'sc-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var wordWrap = document.createElement('span');
+          wordWrap.className = 'sc-word-wrap';
+          wordWrap.id = 'sc-ww-' + wi;
+          wordWrap.style.fontSize = '96px';
+
+          var real = document.createElement('span');
+          real.className = 'sc-real';
+          real.id = 'sc-real-' + wi;
+          real.textContent = w.text;
+          wordWrap.appendChild(real);
+
+          var scr0 = document.createElement('span');
+          scr0.className = 'sc-scr0';
+          scr0.id = 'sc-scr0-' + wi;
+          scr0.textContent = scrambleChars(wi * 1000 + 0);
+          wordWrap.appendChild(scr0);
+
+          var scr1 = document.createElement('span');
+          scr1.className = 'sc-scr1';
+          scr1.id = 'sc-scr1-' + wi;
+          scr1.textContent = scrambleChars(wi * 1000 + 1);
+          wordWrap.appendChild(scr1);
+
+          grp.appendChild(wordWrap);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible', opacity: 0 }, g.start);
+        tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var realEl  = document.getElementById('sc-real-'  + wi);
+          var scr0El  = document.getElementById('sc-scr0-'  + wi);
+          var scr1El  = document.getElementById('sc-scr1-'  + wi);
+
+          tl.set(scr0El, { display: 'inline' }, w.start);
+          tl.set(scr1El, { display: 'inline' }, w.start + 0.05);
+          tl.set(scr0El, { display: 'none' },   w.start + 0.05);
+          tl.set(realEl, { display: 'inline' },  w.start + 0.1);
+          tl.set(scr1El, { display: 'none' },    w.start + 0.1);
+        });
+
+        tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      window.__timelines['matrix-decode'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-matrix-decode/registry-item.json b/registry/components/caption-matrix-decode/registry-item.json
new file mode 100644
index 000000000..71379cd17
--- /dev/null
+++ b/registry/components/caption-matrix-decode/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-matrix-decode",
+  "type": "hyperframes:component",
+  "title": "Matrix Decode",
+  "description": "Character scramble animation before text reveal",
+  "tags": ["captions", "caption-style", "matrix", "scramble", "decode"],
+  "files": [
+    {
+      "path": "caption-matrix-decode.html",
+      "target": "compositions/components/caption-matrix-decode.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-neon-accent/caption-neon-accent.html b/registry/components/caption-neon-accent/caption-neon-accent.html
new file mode 100644
index 000000000..ff4e9c9e5
--- /dev/null
+++ b/registry/components/caption-neon-accent/caption-neon-accent.html
@@ -0,0 +1,384 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Accent</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: #000000;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #neon-accent {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 800;
+        font-size: 88px;
+        line-height: 1.1;
+        letter-spacing: 0;
+        text-transform: uppercase;
+      }
+
+      .caption-word.accent {
+        font-size: 106px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-accent"
+      data-composition-id="caption-neon-accent"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var BASE_FONT_SIZE = 88;
+      var ACCENT_FONT_SIZE = 106;
+      var MIN_FONT_SIZE = 62;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 7 / 30;
+      var WIGGLE_DISTANCE = 14;
+      var WIGGLE_CYCLE = 2 / 1.3;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#53FF01", "#FF0002", "#FCFF00"];
+      var TRANSITION_WORDS = new Set([
+        "the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
+        "to", "of", "in", "on", "at", "for", "with", "by", "from", "as",
+        "it", "its", "this", "that", "these", "those", "be", "been",
+        "have", "has", "had", "do", "does", "did", "will", "would", "could",
+        "should", "may", "might", "must", "can", "if", "then", "so", "just",
+        "not", "no", "yes", "up", "out", "about", "lets", "you", "write", "render"
+      ]);
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+
+      var TRANSCRIPT = [
+        {"text": "Every", "start": 0.0, "end": 0.3},
+        {"text": "great", "start": 0.3, "end": 0.55},
+        {"text": "video", "start": 0.55, "end": 0.85},
+        {"text": "starts", "start": 0.85, "end": 1.1},
+        {"text": "with", "start": 1.1, "end": 1.25},
+        {"text": "a", "start": 1.25, "end": 1.35},
+        {"text": "single", "start": 1.35, "end": 1.65},
+        {"text": "frame.", "start": 1.65, "end": 2.0},
+        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
+        {"text": "lets", "start": 2.65, "end": 2.85},
+        {"text": "you", "start": 2.85, "end": 2.95},
+        {"text": "write", "start": 2.95, "end": 3.15},
+        {"text": "HTML", "start": 3.15, "end": 3.55},
+        {"text": "and", "start": 3.55, "end": 3.65},
+        {"text": "render", "start": 3.65, "end": 3.95},
+        {"text": "professional", "start": 3.95, "end": 4.45},
+        {"text": "video.", "start": 4.45, "end": 4.8},
+        {"text": "No", "start": 4.9, "end": 5.05},
+        {"text": "timeline.", "start": 5.05, "end": 5.45},
+        {"text": "No", "start": 5.5, "end": 5.65},
+        {"text": "drag", "start": 5.65, "end": 5.85},
+        {"text": "and", "start": 5.85, "end": 5.95},
+        {"text": "drop.", "start": 5.95, "end": 6.25},
+        {"text": "Just", "start": 6.35, "end": 6.55},
+        {"text": "code", "start": 6.55, "end": 6.8},
+        {"text": "that", "start": 6.8, "end": 6.95},
+        {"text": "becomes", "start": 6.95, "end": 7.3},
+        {"text": "cinema.", "start": 7.3, "end": 7.7}
+      ];
+
+      gsap.registerPlugin && gsap.registerPlugin();
+
+      function cleanText(text) {
+        return String(text || "").trim();
+      }
+
+      function normalizeWords(rawWords) {
+        return rawWords.map(function (item) {
+          return {
+            text: cleanText(item.word || item.text),
+            start: Math.max(0, Number(item.start) || 0),
+            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+          };
+        }).filter(function (word) { return word.text.length > 0; });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function isKeyword(text) {
+        return KEYWORDS.has(text.toLowerCase().replace(/[^a-z]/g, ""));
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word) {
+          if (isKeyword(word.text)) {
+            var colorIndex = Math.floor(seededRandom(groupIndex * 23 + 7) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[colorIndex];
+          }
+          var clean = word.text.toLowerCase().replace(/[^a-z']/g, "");
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 7 + words.indexOf(word));
+          if (rand > 0.6) {
+            var ci = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      function measureWord(word, color, fontSize) {
+        var size = color === PRIMARY_COLOR ? fontSize : fontSize * 1.2;
+        measureContext.font = "800 " + size + "px Montserrat";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, colors, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, colors, fontSize) {
+        var maxLineWidth = SAFE_ZONE_WIDTH;
+        if (words.some(function (word, i) { return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth; })) return null;
+        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth) return [{ words: words, colors: colors }];
+        var best = null;
+        var bestDiff = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var fw = words.slice(0, split), sw = words.slice(split);
+          var fc = colors.slice(0, split), sc = colors.slice(split);
+          var fW = measureLineWidth(fw, fc, fontSize);
+          var sW = measureLineWidth(sw, sc, fontSize);
+          if (fW <= maxLineWidth && sW <= maxLineWidth) {
+            var diff = Math.abs(fW - sW);
+            if (diff < bestDiff) { best = [{ words: fw, colors: fc }, { words: sw, colors: sc }]; bestDiff = diff; }
+          }
+        }
+        return best;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          var exceedsWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var colors = assignWordColors(testGroup, groups.length);
+          var exceedsFit = !splitLinesForGroup(testGroup, colors, BASE_FONT_SIZE);
+          if (exceedsWords || exceedsFit) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var fontSize = BASE_FONT_SIZE;
+        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) { fontSize -= 2; }
+        return {
+          words: words.slice(), colors: colors, fontSize: fontSize,
+          lines: splitLinesForGroup(words, colors, fontSize) || [{ words: words, colors: colors }],
+          start: words[0].start, end: words[words.length - 1].end,
+        };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        var glow = "0 0 4px rgba(" + r + "," + g + "," + b + ",1), 0 0 10px rgba(" + r + "," + g + "," + b + ",0.9), 0 0 20px rgba(" + r + "," + g + "," + b + ",0.7), 0 0 40px rgba(" + r + "," + g + "," + b + ",0.4)";
+        return "0 8px 16px rgba(0,0,0,0.8), 0 16px 40px rgba(0,0,0,0.6), " + glow;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.slice(0, 2).forEach(function (line) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            line.words.forEach(function (word, wordIndex) {
+              var color = line.colors[wordIndex] || PRIMARY_COLOR;
+              var wordEl = document.createElement("span");
+              wordEl.className = color === PRIMARY_COLOR ? "caption-word" : "caption-word accent";
+              wordEl.textContent = word.text.toUpperCase();
+              wordEl.style.color = color;
+              wordEl.style.fontSize = color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
+              wordEl.style.textShadow = shadowForColor(color);
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var direction = groupIndex % 2 === 0 ? -1 : 1;
+        var D = WIGGLE_DISTANCE * direction;
+        var wiggleCycles = Math.max(1, Math.ceil((visibleEnd - visibleStart) / WIGGLE_CYCLE));
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.65, x: 0, y: 0 }, visibleStart);
+        tl.to(groupEl, { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
+        tl.to(groupEl, { x: D, y: D, duration: WIGGLE_CYCLE / 2, ease: "sine.inOut", yoyo: true, repeat: Math.max(0, wiggleCycles * 2 - 1), force3D: true }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["neon-accent"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-neon-accent/demo.html b/registry/components/caption-neon-accent/demo.html
new file mode 100644
index 000000000..ff4e9c9e5
--- /dev/null
+++ b/registry/components/caption-neon-accent/demo.html
@@ -0,0 +1,384 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Accent</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: #000000;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #neon-accent {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 800;
+        font-size: 88px;
+        line-height: 1.1;
+        letter-spacing: 0;
+        text-transform: uppercase;
+      }
+
+      .caption-word.accent {
+        font-size: 106px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-accent"
+      data-composition-id="caption-neon-accent"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var BASE_FONT_SIZE = 88;
+      var ACCENT_FONT_SIZE = 106;
+      var MIN_FONT_SIZE = 62;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 7 / 30;
+      var WIGGLE_DISTANCE = 14;
+      var WIGGLE_CYCLE = 2 / 1.3;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var PRIMARY_COLOR = "#FFFFFF";
+      var ACCENT_COLORS = ["#53FF01", "#FF0002", "#FCFF00"];
+      var TRANSITION_WORDS = new Set([
+        "the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
+        "to", "of", "in", "on", "at", "for", "with", "by", "from", "as",
+        "it", "its", "this", "that", "these", "those", "be", "been",
+        "have", "has", "had", "do", "does", "did", "will", "would", "could",
+        "should", "may", "might", "must", "can", "if", "then", "so", "just",
+        "not", "no", "yes", "up", "out", "about", "lets", "you", "write", "render"
+      ]);
+      var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
+
+      var TRANSCRIPT = [
+        {"text": "Every", "start": 0.0, "end": 0.3},
+        {"text": "great", "start": 0.3, "end": 0.55},
+        {"text": "video", "start": 0.55, "end": 0.85},
+        {"text": "starts", "start": 0.85, "end": 1.1},
+        {"text": "with", "start": 1.1, "end": 1.25},
+        {"text": "a", "start": 1.25, "end": 1.35},
+        {"text": "single", "start": 1.35, "end": 1.65},
+        {"text": "frame.", "start": 1.65, "end": 2.0},
+        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
+        {"text": "lets", "start": 2.65, "end": 2.85},
+        {"text": "you", "start": 2.85, "end": 2.95},
+        {"text": "write", "start": 2.95, "end": 3.15},
+        {"text": "HTML", "start": 3.15, "end": 3.55},
+        {"text": "and", "start": 3.55, "end": 3.65},
+        {"text": "render", "start": 3.65, "end": 3.95},
+        {"text": "professional", "start": 3.95, "end": 4.45},
+        {"text": "video.", "start": 4.45, "end": 4.8},
+        {"text": "No", "start": 4.9, "end": 5.05},
+        {"text": "timeline.", "start": 5.05, "end": 5.45},
+        {"text": "No", "start": 5.5, "end": 5.65},
+        {"text": "drag", "start": 5.65, "end": 5.85},
+        {"text": "and", "start": 5.85, "end": 5.95},
+        {"text": "drop.", "start": 5.95, "end": 6.25},
+        {"text": "Just", "start": 6.35, "end": 6.55},
+        {"text": "code", "start": 6.55, "end": 6.8},
+        {"text": "that", "start": 6.8, "end": 6.95},
+        {"text": "becomes", "start": 6.95, "end": 7.3},
+        {"text": "cinema.", "start": 7.3, "end": 7.7}
+      ];
+
+      gsap.registerPlugin && gsap.registerPlugin();
+
+      function cleanText(text) {
+        return String(text || "").trim();
+      }
+
+      function normalizeWords(rawWords) {
+        return rawWords.map(function (item) {
+          return {
+            text: cleanText(item.word || item.text),
+            start: Math.max(0, Number(item.start) || 0),
+            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+          };
+        }).filter(function (word) { return word.text.length > 0; });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function seededRandom(seed) {
+        var x = Math.sin(seed * 9999) * 10000;
+        return x - Math.floor(x);
+      }
+
+      function isKeyword(text) {
+        return KEYWORDS.has(text.toLowerCase().replace(/[^a-z]/g, ""));
+      }
+
+      function assignWordColors(words, groupIndex) {
+        return words.map(function (word) {
+          if (isKeyword(word.text)) {
+            var colorIndex = Math.floor(seededRandom(groupIndex * 23 + 7) * ACCENT_COLORS.length);
+            return ACCENT_COLORS[colorIndex];
+          }
+          var clean = word.text.toLowerCase().replace(/[^a-z']/g, "");
+          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;
+          var rand = seededRandom(groupIndex * 7 + words.indexOf(word));
+          if (rand > 0.6) {
+            var ci = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;
+            return ACCENT_COLORS[ci];
+          }
+          return PRIMARY_COLOR;
+        });
+      }
+
+      function measureWord(word, color, fontSize) {
+        var size = color === PRIMARY_COLOR ? fontSize : fontSize * 1.2;
+        measureContext.font = "800 " + size + "px Montserrat";
+        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, colors, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, colors, fontSize) {
+        var maxLineWidth = SAFE_ZONE_WIDTH;
+        if (words.some(function (word, i) { return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth; })) return null;
+        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth) return [{ words: words, colors: colors }];
+        var best = null;
+        var bestDiff = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var fw = words.slice(0, split), sw = words.slice(split);
+          var fc = colors.slice(0, split), sc = colors.slice(split);
+          var fW = measureLineWidth(fw, fc, fontSize);
+          var sW = measureLineWidth(sw, sc, fontSize);
+          if (fW <= maxLineWidth && sW <= maxLineWidth) {
+            var diff = Math.abs(fW - sW);
+            if (diff < bestDiff) { best = [{ words: fw, colors: fc }, { words: sw, colors: sc }]; bestDiff = diff; }
+          }
+        }
+        return best;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          var exceedsWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var colors = assignWordColors(testGroup, groups.length);
+          var exceedsFit = !splitLinesForGroup(testGroup, colors, BASE_FONT_SIZE);
+          if (exceedsWords || exceedsFit) {
+            if (current.length) groups.push(makeGroup(current, groups.length));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+            groups.push(makeGroup(current, groups.length));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current, groups.length));
+        return groups;
+      }
+
+      function makeGroup(words, groupIndex) {
+        var colors = assignWordColors(words, groupIndex);
+        var fontSize = BASE_FONT_SIZE;
+        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) { fontSize -= 2; }
+        return {
+          words: words.slice(), colors: colors, fontSize: fontSize,
+          lines: splitLinesForGroup(words, colors, fontSize) || [{ words: words, colors: colors }],
+          start: words[0].start, end: words[words.length - 1].end,
+        };
+      }
+
+      function shadowForColor(color) {
+        var hex = color.replace("#", "");
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        var glow = "0 0 4px rgba(" + r + "," + g + "," + b + ",1), 0 0 10px rgba(" + r + "," + g + "," + b + ",0.9), 0 0 20px rgba(" + r + "," + g + "," + b + ",0.7), 0 0 40px rgba(" + r + "," + g + "," + b + ",0.4)";
+        return "0 8px 16px rgba(0,0,0,0.8), 0 16px 40px rgba(0,0,0,0.6), " + glow;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.slice(0, 2).forEach(function (line) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            line.words.forEach(function (word, wordIndex) {
+              var color = line.colors[wordIndex] || PRIMARY_COLOR;
+              var wordEl = document.createElement("span");
+              wordEl.className = color === PRIMARY_COLOR ? "caption-word" : "caption-word accent";
+              wordEl.textContent = word.text.toUpperCase();
+              wordEl.style.color = color;
+              wordEl.style.fontSize = color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
+              wordEl.style.textShadow = shadowForColor(color);
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+        var direction = groupIndex % 2 === 0 ? -1 : 1;
+        var D = WIGGLE_DISTANCE * direction;
+        var wiggleCycles = Math.max(1, Math.ceil((visibleEnd - visibleStart) / WIGGLE_CYCLE));
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.65, x: 0, y: 0 }, visibleStart);
+        tl.to(groupEl, { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
+        tl.to(groupEl, { x: D, y: D, duration: WIGGLE_CYCLE / 2, ease: "sine.inOut", yoyo: true, repeat: Math.max(0, wiggleCycles * 2 - 1), force3D: true }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["neon-accent"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-neon-accent/registry-item.json b/registry/components/caption-neon-accent/registry-item.json
new file mode 100644
index 000000000..01aabe703
--- /dev/null
+++ b/registry/components/caption-neon-accent/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-neon-accent",
+  "type": "hyperframes:component",
+  "title": "Neon Accent",
+  "description": "Multi-color neon glow accents with wiggle drift animation",
+  "tags": ["captions", "caption-style", "neon", "glow", "accent"],
+  "files": [
+    {
+      "path": "caption-neon-accent.html",
+      "target": "compositions/components/caption-neon-accent.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-neon-glow/caption-neon-glow.html b/registry/components/caption-neon-glow/caption-neon-glow.html
new file mode 100644
index 000000000..39000033e
--- /dev/null
+++ b/registry/components/caption-neon-glow/caption-neon-glow.html
@@ -0,0 +1,161 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Glow</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=Outfit:wght@900&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: #000;
+      }
+      #neon-glow {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #000;
+      }
+      #ne-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .ne-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.75); z-index: 1; pointer-events: none;
+      }
+      #ne-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .ne-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 80px;
+        opacity: 0; visibility: hidden;
+      }
+      .ne-word {
+        font-family: 'Outfit', sans-serif;
+        font-weight: 900; font-size: 96px;
+        text-transform: uppercase;
+        color: rgba(0,255,240,0.14);
+        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-glow"
+      data-composition-id="caption-neon-glow"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="ne-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="ne-overlay"></div>
+      <div id="ne-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      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 GROUPS = [
+        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
+        {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},
+      ];
+
+      // Keywords get pink glow; others get cyan glow
+      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      var container = document.getElementById('ne-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 = 'ne-group';
+        grp.id = 'ne-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var span = document.createElement('span');
+          span.className = 'ne-word';
+          span.id = 'ne-w-' + wi;
+          span.textContent = w.text;
+          span.style.fontSize = '96px';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible', opacity: 0 }, g.start);
+        tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: 'steps(1)' }, g.start);
+        tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: 'power3.out' }, g.start + 0.05);
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var el = document.getElementById('ne-w-' + wi);
+          var isKW = KEYWORDS.has(wi);
+          var activeColor = isKW ? '#FF0099' : '#00FFF0';
+          tl.to(el, {
+            color: activeColor,
+            textShadow: '0 0 10px ' + activeColor + ', 0 0 35px ' + activeColor + ', 0 0 90px ' + activeColor,
+            duration: 0.06
+          }, w.start);
+          tl.to(el, { color: 'rgba(0,255,240,0.14)', textShadow: 'none', duration: 0.06 }, w.end);
+        });
+
+        tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: 'steps(1)' }, g.end - 0.1);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      window.__timelines['neon-glow'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-neon-glow/demo.html b/registry/components/caption-neon-glow/demo.html
new file mode 100644
index 000000000..39000033e
--- /dev/null
+++ b/registry/components/caption-neon-glow/demo.html
@@ -0,0 +1,161 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Neon Glow</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=Outfit:wght@900&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: #000;
+      }
+      #neon-glow {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #000;
+      }
+      #ne-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .ne-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.75); z-index: 1; pointer-events: none;
+      }
+      #ne-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .ne-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 80px;
+        opacity: 0; visibility: hidden;
+      }
+      .ne-word {
+        font-family: 'Outfit', sans-serif;
+        font-weight: 900; font-size: 96px;
+        text-transform: uppercase;
+        color: rgba(0,255,240,0.14);
+        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="neon-glow"
+      data-composition-id="caption-neon-glow"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="ne-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="ne-overlay"></div>
+      <div id="ne-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      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 GROUPS = [
+        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
+        {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},
+      ];
+
+      // Keywords get pink glow; others get cyan glow
+      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      var container = document.getElementById('ne-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 = 'ne-group';
+        grp.id = 'ne-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var span = document.createElement('span');
+          span.className = 'ne-word';
+          span.id = 'ne-w-' + wi;
+          span.textContent = w.text;
+          span.style.fontSize = '96px';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible', opacity: 0 }, g.start);
+        tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: 'steps(1)' }, g.start);
+        tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: 'power3.out' }, g.start + 0.05);
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var el = document.getElementById('ne-w-' + wi);
+          var isKW = KEYWORDS.has(wi);
+          var activeColor = isKW ? '#FF0099' : '#00FFF0';
+          tl.to(el, {
+            color: activeColor,
+            textShadow: '0 0 10px ' + activeColor + ', 0 0 35px ' + activeColor + ', 0 0 90px ' + activeColor,
+            duration: 0.06
+          }, w.start);
+          tl.to(el, { color: 'rgba(0,255,240,0.14)', textShadow: 'none', duration: 0.06 }, w.end);
+        });
+
+        tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: 'steps(1)' }, g.end - 0.1);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      window.__timelines['neon-glow'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-neon-glow/registry-item.json b/registry/components/caption-neon-glow/registry-item.json
new file mode 100644
index 000000000..2a7824a54
--- /dev/null
+++ b/registry/components/caption-neon-glow/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-neon-glow",
+  "type": "hyperframes:component",
+  "title": "Neon Glow",
+  "description": "Cyan and magenta neon glow with keyword accent colors",
+  "tags": ["captions", "caption-style", "neon", "glow", "gaming"],
+  "files": [
+    {
+      "path": "caption-neon-glow.html",
+      "target": "compositions/components/caption-neon-glow.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-parallax-layers/caption-parallax-layers.html b/registry/components/caption-parallax-layers/caption-parallax-layers.html
new file mode 100644
index 000000000..f94731714
--- /dev/null
+++ b/registry/components/caption-parallax-layers/caption-parallax-layers.html
@@ -0,0 +1,329 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Layers</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=Instrument+Serif:ital@0;1&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: #000;
+        font-family: "Instrument Serif", serif;
+      }
+
+      #parallax-layers {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      #bg-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /* Behind captions: big red 3D text */
+      .behind-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      /* Front captions */
+      .front-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 30;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .behind-safe-zone {
+        position: absolute;
+        top: 240px;
+        left: 0;
+        width: 1920px;
+        height: 500px;
+      }
+
+      .front-safe-zone {
+        position: absolute;
+        top: 700px;
+        left: 0;
+        width: 1920px;
+        height: 300px;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line--behind {
+        transform: scaleY(2.8);
+        transform-origin: 50% 100%;
+      }
+
+      .word {
+        display: inline-block;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--behind {
+        font-family: "Instrument Serif", serif;
+        font-size: 220px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 0.9;
+        color: #E50914;
+        -webkit-text-stroke: 5px #E50914;
+        text-shadow: 2px 4px 4px #A30610;
+      }
+
+      .word--front-normal {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: normal;
+        color: #EEEEEE;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+
+      .word--front-italic {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: italic;
+        color: #EEEEEE;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="parallax-layers"
+      data-composition-id="caption-parallax-layers"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="bg-video"
+        muted
+        playsinline
+        preload="auto"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="behind-caption-layer" aria-hidden="true">
+        <div id="behind-stage" class="behind-safe-zone"></div>
+      </div>
+
+      <div class="front-caption-layer" aria-hidden="true">
+        <div id="front-stage" class="front-safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var BEHIND_WIDTH = 1800;
+      var FRONT_WIDTH = 1750;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var W = [
+        {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}
+      ];
+
+      // behind=red 3D emphasis words, front=normal white words
+      var BLOCKS = [
+        { behind: null,    front: [[0],[1],[2]] },
+        { behind: [[3]],   front: [[4],[5]] },
+        { behind: [[6]],   front: [[7]] },
+        { behind: [[8]],   front: [[9],[10],[11]] },
+        { behind: [[12]],  front: [[13],[14]] },
+        { behind: [[15]],  front: [[16]] },
+        { behind: null,    front: [[17],[18]] },
+        { behind: null,    front: [[19],[20],[21],[22]] },
+        { behind: [[24]],  front: [[23],[25],[26]] },
+        { behind: [[27]],  front: null },
+      ];
+
+      var behindStage = document.getElementById("behind-stage");
+      var frontStage = document.getElementById("front-stage");
+
+      BLOCKS.forEach(function (block, bi) {
+        var bEl = document.createElement("div");
+        bEl.className = "caption-block";
+        bEl.id = "bb" + bi;
+        if (block.behind) {
+          var bLine = document.createElement("div");
+          bLine.className = "caption-line caption-line--behind";
+          block.behind.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            span.className = "word word--behind";
+            span.id = "bb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            bLine.appendChild(span);
+          });
+          bEl.appendChild(bLine);
+        }
+        behindStage.appendChild(bEl);
+
+        var fEl = document.createElement("div");
+        fEl.className = "caption-block";
+        fEl.id = "fb" + bi;
+        if (block.front) {
+          var fLine = document.createElement("div");
+          fLine.className = "caption-line";
+          block.front.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            var isItalic = wi_arr[0] === 7 || wi_arr[0] === 18; // frame., timeline.
+            span.className = "word " + (isItalic ? "word--front-italic" : "word--front-normal");
+            span.id = "fb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            fLine.appendChild(span);
+          });
+          fEl.appendChild(fLine);
+        }
+        frontStage.appendChild(fEl);
+      });
+
+      var allBehind = BLOCKS.map(function (_, i) { return document.getElementById("bb" + i); });
+      var allFront  = BLOCKS.map(function (_, i) { return document.getElementById("fb" + i); });
+
+      function applyBehindScales() {
+        BLOCKS.forEach(function (block, bi) {
+          if (block.behind) {
+            var line = allBehind[bi].querySelector(".caption-line");
+            if (line) {
+              var natW = line.scrollWidth;
+              if (natW > 0) {
+                var s = BEHIND_WIDTH / natW;
+                line.style.transform = "scaleX(" + s + ") scaleY(2.8)";
+              }
+            }
+          }
+        });
+      }
+      applyBehindScales();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      function blockStart(bi) {
+        var b = BLOCKS[bi];
+        var firstIdx = b.behind ? b.behind[0][0] : b.front[0][0];
+        return W[firstIdx].start;
+      }
+
+      BLOCKS.forEach(function (block, bi) {
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+        var bEl = allBehind[bi];
+        var fEl = allFront[bi];
+
+        allBehind.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+        allFront.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+
+        if (block.behind) {
+          tl.set(bEl, { opacity: 1 }, start);
+          block.behind.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("bb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.to(wordEl, { opacity: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+          });
+        }
+
+        if (block.front) {
+          tl.set(fEl, { opacity: 1 }, start);
+          block.front.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("fb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.set(wordEl, { opacity: 1 }, wordStart);
+          });
+        }
+
+        tl.set(bEl, { opacity: 0 }, nextStart);
+        tl.set(fEl, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["parallax-layers"] = tl;
+
+      document.fonts.ready.then(function () { applyBehindScales(); });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-parallax-layers/demo.html b/registry/components/caption-parallax-layers/demo.html
new file mode 100644
index 000000000..f94731714
--- /dev/null
+++ b/registry/components/caption-parallax-layers/demo.html
@@ -0,0 +1,329 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Parallax Layers</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=Instrument+Serif:ital@0;1&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: #000;
+        font-family: "Instrument Serif", serif;
+      }
+
+      #parallax-layers {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+
+      #bg-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /* Behind captions: big red 3D text */
+      .behind-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      /* Front captions */
+      .front-caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 30;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .behind-safe-zone {
+        position: absolute;
+        top: 240px;
+        left: 0;
+        width: 1920px;
+        height: 500px;
+      }
+
+      .front-safe-zone {
+        position: absolute;
+        top: 700px;
+        left: 0;
+        width: 1920px;
+        height: 300px;
+      }
+
+      .caption-block {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: baseline;
+        justify-content: center;
+        gap: 14px;
+        line-height: 1.1;
+        white-space: nowrap;
+      }
+
+      .caption-line--behind {
+        transform: scaleY(2.8);
+        transform-origin: 50% 100%;
+      }
+
+      .word {
+        display: inline-block;
+        will-change: transform, opacity;
+        backface-visibility: hidden;
+      }
+
+      .word--behind {
+        font-family: "Instrument Serif", serif;
+        font-size: 220px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 0.9;
+        color: #E50914;
+        -webkit-text-stroke: 5px #E50914;
+        text-shadow: 2px 4px 4px #A30610;
+      }
+
+      .word--front-normal {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: normal;
+        color: #EEEEEE;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+
+      .word--front-italic {
+        font-family: "Instrument Serif", serif;
+        font-size: 130px;
+        font-weight: 400;
+        font-style: italic;
+        color: #EEEEEE;
+        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="parallax-layers"
+      data-composition-id="caption-parallax-layers"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="bg-video"
+        muted
+        playsinline
+        preload="auto"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="behind-caption-layer" aria-hidden="true">
+        <div id="behind-stage" class="behind-safe-zone"></div>
+      </div>
+
+      <div class="front-caption-layer" aria-hidden="true">
+        <div id="front-stage" class="front-safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var BEHIND_WIDTH = 1800;
+      var FRONT_WIDTH = 1750;
+      var ENTRY_DUR = 0.1;
+      var SLIDE_DUR = 0.2;
+
+      var W = [
+        {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}
+      ];
+
+      // behind=red 3D emphasis words, front=normal white words
+      var BLOCKS = [
+        { behind: null,    front: [[0],[1],[2]] },
+        { behind: [[3]],   front: [[4],[5]] },
+        { behind: [[6]],   front: [[7]] },
+        { behind: [[8]],   front: [[9],[10],[11]] },
+        { behind: [[12]],  front: [[13],[14]] },
+        { behind: [[15]],  front: [[16]] },
+        { behind: null,    front: [[17],[18]] },
+        { behind: null,    front: [[19],[20],[21],[22]] },
+        { behind: [[24]],  front: [[23],[25],[26]] },
+        { behind: [[27]],  front: null },
+      ];
+
+      var behindStage = document.getElementById("behind-stage");
+      var frontStage = document.getElementById("front-stage");
+
+      BLOCKS.forEach(function (block, bi) {
+        var bEl = document.createElement("div");
+        bEl.className = "caption-block";
+        bEl.id = "bb" + bi;
+        if (block.behind) {
+          var bLine = document.createElement("div");
+          bLine.className = "caption-line caption-line--behind";
+          block.behind.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            span.className = "word word--behind";
+            span.id = "bb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            bLine.appendChild(span);
+          });
+          bEl.appendChild(bLine);
+        }
+        behindStage.appendChild(bEl);
+
+        var fEl = document.createElement("div");
+        fEl.className = "caption-block";
+        fEl.id = "fb" + bi;
+        if (block.front) {
+          var fLine = document.createElement("div");
+          fLine.className = "caption-line";
+          block.front.forEach(function (wi_arr, wi) {
+            var span = document.createElement("span");
+            var isItalic = wi_arr[0] === 7 || wi_arr[0] === 18; // frame., timeline.
+            span.className = "word " + (isItalic ? "word--front-italic" : "word--front-normal");
+            span.id = "fb" + bi + "w" + wi;
+            span.textContent = W[wi_arr[0]].text;
+            fLine.appendChild(span);
+          });
+          fEl.appendChild(fLine);
+        }
+        frontStage.appendChild(fEl);
+      });
+
+      var allBehind = BLOCKS.map(function (_, i) { return document.getElementById("bb" + i); });
+      var allFront  = BLOCKS.map(function (_, i) { return document.getElementById("fb" + i); });
+
+      function applyBehindScales() {
+        BLOCKS.forEach(function (block, bi) {
+          if (block.behind) {
+            var line = allBehind[bi].querySelector(".caption-line");
+            if (line) {
+              var natW = line.scrollWidth;
+              if (natW > 0) {
+                var s = BEHIND_WIDTH / natW;
+                line.style.transform = "scaleX(" + s + ") scaleY(2.8)";
+              }
+            }
+          }
+        });
+      }
+      applyBehindScales();
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      function blockStart(bi) {
+        var b = BLOCKS[bi];
+        var firstIdx = b.behind ? b.behind[0][0] : b.front[0][0];
+        return W[firstIdx].start;
+      }
+
+      BLOCKS.forEach(function (block, bi) {
+        var start = blockStart(bi);
+        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+        var bEl = allBehind[bi];
+        var fEl = allFront[bi];
+
+        allBehind.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+        allFront.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+
+        if (block.behind) {
+          tl.set(bEl, { opacity: 1 }, start);
+          block.behind.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("bb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.to(wordEl, { opacity: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+          });
+        }
+
+        if (block.front) {
+          tl.set(fEl, { opacity: 1 }, start);
+          block.front.forEach(function (wi_arr, wi) {
+            var wordEl = document.getElementById("fb" + bi + "w" + wi);
+            var wordStart = W[wi_arr[0]].start;
+            tl.set(wordEl, { opacity: 0 }, start);
+            tl.set(wordEl, { opacity: 1 }, wordStart);
+          });
+        }
+
+        tl.set(bEl, { opacity: 0 }, nextStart);
+        tl.set(fEl, { opacity: 0 }, nextStart);
+      });
+
+      tl.to({}, { duration: DURATION }, 0);
+      window.__timelines["parallax-layers"] = tl;
+
+      document.fonts.ready.then(function () { applyBehindScales(); });
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-parallax-layers/registry-item.json b/registry/components/caption-parallax-layers/registry-item.json
new file mode 100644
index 000000000..cdb5edfa5
--- /dev/null
+++ b/registry/components/caption-parallax-layers/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-parallax-layers",
+  "type": "hyperframes:component",
+  "title": "Parallax Layers",
+  "description": "Behind-subject 3D text layering with vertical stretch effect",
+  "tags": ["captions", "caption-style", "parallax", "3d", "depth"],
+  "files": [
+    {
+      "path": "caption-parallax-layers.html",
+      "target": "compositions/components/caption-parallax-layers.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-particle-burst/caption-particle-burst.html b/registry/components/caption-particle-burst/caption-particle-burst.html
new file mode 100644
index 000000000..cd06ba584
--- /dev/null
+++ b/registry/components/caption-particle-burst/caption-particle-burst.html
@@ -0,0 +1,212 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Burst</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=Outfit:wght@900&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;
+      }
+      #particle-burst {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #bs-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .bs-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+      }
+      #bs-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .bs-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 100px;
+        opacity: 0; visibility: hidden;
+      }
+      .bs-word {
+        font-family: 'Outfit', sans-serif;
+        font-weight: 900; font-size: 88px;
+        text-transform: uppercase;
+        color: rgba(255,255,255,0.45);
+        display: inline-block; letter-spacing: 0.05em; line-height: 1;
+      }
+      .bs-particle {
+        position: absolute; width: 10px; height: 10px;
+        border-radius: 50%; opacity: 0; pointer-events: none; z-index: 20;
+        left: 960px; bottom: 180px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="particle-burst"
+      data-composition-id="caption-particle-burst"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="bs-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="bs-overlay"></div>
+      <div id="bs-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      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}
+      ];
+
+      // Keywords get particle burst + gold color
+      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      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.35, nextStart - 0.05);
+        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+      });
+
+      var PARTICLE_COLORS = ['#FFD700','#FF6B35','#FF3C78','#9B5DE5','#00BBF9','#00F5D4','#ffffff','#F15BB5'];
+      var NUM_PARTICLES = 10;
+
+      var container = document.getElementById('bs-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 = 'bs-group';
+        grp.id = 'bs-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var span = document.createElement('span');
+          span.className = 'bs-word';
+          span.id = 'bs-w-' + wi;
+          span.textContent = w.text.toUpperCase();
+          span.style.fontSize = '88px';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+      });
+
+      // Create particles for keyword words
+      var particleData = {};
+      WORDS.forEach(function(w, wi) {
+        if (!KEYWORDS.has(wi)) return;
+        var rng = mulberry32(wi * 137 + 99);
+        particleData[wi] = [];
+        for (var p = 0; p < NUM_PARTICLES; p++) {
+          var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
+          var dist = 120 + rng() * 200;
+          var sz = 4 + rng() * 8;
+          var dx = Math.cos(angle) * dist;
+          var dy = -Math.sin(angle) * dist;
+          var dot = document.createElement('div');
+          dot.className = 'bs-particle';
+          dot.id = 'bs-p-' + wi + '-' + p;
+          dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
+          dot.style.width = sz.toFixed(1) + 'px';
+          dot.style.height = sz.toFixed(1) + 'px';
+          container.appendChild(dot);
+          particleData[wi].push({ el: dot, dx: dx, dy: dy });
+        }
+      });
+
+      GROUPS.forEach(function(g, gi) {
+        var grp = document.getElementById('bs-grp-' + gi);
+        var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+
+        tl.set(grp, { visibility: 'visible' }, g.start);
+        tl.fromTo(grp,
+          { opacity: 0, scale: 0.92 },
+          { opacity: 1, scale: 1, duration: 0.2, ease: 'back.out(1.5)' },
+          g.start
+        );
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var wordEl = document.getElementById('bs-w-' + wi);
+          var isKW = KEYWORDS.has(wi);
+
+          tl.to(wordEl, { color: isKW ? '#FFD700' : '#ffffff', scale: isKW ? 1.12 : 1.05, duration: 0.08 }, w.start);
+          tl.to(wordEl, { color: 'rgba(255,255,255,0.4)', scale: 1.0, duration: 0.1 }, w.end);
+
+          if (isKW && particleData[wi]) {
+            particleData[wi].forEach(function(pd, pi) {
+              tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
+              tl.to(pd.el, { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: 'power3.out' }, w.start + pi * 0.018);
+              tl.to(pd.el, { opacity: 0, duration: 0.45, ease: 'power1.in' }, w.start + 0.12 + pi * 0.018);
+              tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
+            });
+          }
+        });
+
+        tl.to(grp, { opacity: 0, duration: 0.14, ease: 'power2.in' }, g.end - 0.14);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      tl.seek(0);
+      window.__timelines['particle-burst'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-particle-burst/demo.html b/registry/components/caption-particle-burst/demo.html
new file mode 100644
index 000000000..cd06ba584
--- /dev/null
+++ b/registry/components/caption-particle-burst/demo.html
@@ -0,0 +1,212 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Particle Burst</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=Outfit:wght@900&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;
+      }
+      #particle-burst {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0a0a;
+      }
+      #bs-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .bs-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+      }
+      #bs-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .bs-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 100px;
+        opacity: 0; visibility: hidden;
+      }
+      .bs-word {
+        font-family: 'Outfit', sans-serif;
+        font-weight: 900; font-size: 88px;
+        text-transform: uppercase;
+        color: rgba(255,255,255,0.45);
+        display: inline-block; letter-spacing: 0.05em; line-height: 1;
+      }
+      .bs-particle {
+        position: absolute; width: 10px; height: 10px;
+        border-radius: 50%; opacity: 0; pointer-events: none; z-index: 20;
+        left: 960px; bottom: 180px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="particle-burst"
+      data-composition-id="caption-particle-burst"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="bs-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="bs-overlay"></div>
+      <div id="bs-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      function mulberry32(seed) {
+        return function() {
+          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
+          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
+          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+          return ((t ^ t >>> 14) >>> 0) / 4294967296;
+        };
+      }
+
+      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}
+      ];
+
+      // Keywords get particle burst + gold color
+      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      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.35, nextStart - 0.05);
+        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+      });
+
+      var PARTICLE_COLORS = ['#FFD700','#FF6B35','#FF3C78','#9B5DE5','#00BBF9','#00F5D4','#ffffff','#F15BB5'];
+      var NUM_PARTICLES = 10;
+
+      var container = document.getElementById('bs-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 = 'bs-group';
+        grp.id = 'bs-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var span = document.createElement('span');
+          span.className = 'bs-word';
+          span.id = 'bs-w-' + wi;
+          span.textContent = w.text.toUpperCase();
+          span.style.fontSize = '88px';
+          grp.appendChild(span);
+        });
+
+        container.appendChild(grp);
+      });
+
+      // Create particles for keyword words
+      var particleData = {};
+      WORDS.forEach(function(w, wi) {
+        if (!KEYWORDS.has(wi)) return;
+        var rng = mulberry32(wi * 137 + 99);
+        particleData[wi] = [];
+        for (var p = 0; p < NUM_PARTICLES; p++) {
+          var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
+          var dist = 120 + rng() * 200;
+          var sz = 4 + rng() * 8;
+          var dx = Math.cos(angle) * dist;
+          var dy = -Math.sin(angle) * dist;
+          var dot = document.createElement('div');
+          dot.className = 'bs-particle';
+          dot.id = 'bs-p-' + wi + '-' + p;
+          dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
+          dot.style.width = sz.toFixed(1) + 'px';
+          dot.style.height = sz.toFixed(1) + 'px';
+          container.appendChild(dot);
+          particleData[wi].push({ el: dot, dx: dx, dy: dy });
+        }
+      });
+
+      GROUPS.forEach(function(g, gi) {
+        var grp = document.getElementById('bs-grp-' + gi);
+        var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+
+        tl.set(grp, { visibility: 'visible' }, g.start);
+        tl.fromTo(grp,
+          { opacity: 0, scale: 0.92 },
+          { opacity: 1, scale: 1, duration: 0.2, ease: 'back.out(1.5)' },
+          g.start
+        );
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var wordEl = document.getElementById('bs-w-' + wi);
+          var isKW = KEYWORDS.has(wi);
+
+          tl.to(wordEl, { color: isKW ? '#FFD700' : '#ffffff', scale: isKW ? 1.12 : 1.05, duration: 0.08 }, w.start);
+          tl.to(wordEl, { color: 'rgba(255,255,255,0.4)', scale: 1.0, duration: 0.1 }, w.end);
+
+          if (isKW && particleData[wi]) {
+            particleData[wi].forEach(function(pd, pi) {
+              tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
+              tl.to(pd.el, { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: 'power3.out' }, w.start + pi * 0.018);
+              tl.to(pd.el, { opacity: 0, duration: 0.45, ease: 'power1.in' }, w.start + 0.12 + pi * 0.018);
+              tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
+            });
+          }
+        });
+
+        tl.to(grp, { opacity: 0, duration: 0.14, ease: 'power2.in' }, g.end - 0.14);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      tl.seek(0);
+      window.__timelines['particle-burst'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-particle-burst/registry-item.json b/registry/components/caption-particle-burst/registry-item.json
new file mode 100644
index 000000000..d594310ea
--- /dev/null
+++ b/registry/components/caption-particle-burst/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-particle-burst",
+  "type": "hyperframes:component",
+  "title": "Particle Burst",
+  "description": "Keyword words trigger colored particle explosions",
+  "tags": ["captions", "caption-style", "particles", "burst", "effects"],
+  "files": [
+    {
+      "path": "caption-particle-burst.html",
+      "target": "compositions/components/caption-particle-burst.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
new file mode 100644
index 000000000..1e439742a
--- /dev/null
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pill Karaoke</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Poppins", Arial, sans-serif;
+      }
+
+      #pill-karaoke {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      .caption-pill {
+        width: auto;
+        max-width: 1600px;
+        padding: 18px 60px 20px;
+        border-radius: 22px;
+        background: #e7e5e7;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        text-align: center;
+        overflow: visible;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        color: #a6a6a6;
+        font-family: "Poppins", Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.16;
+        letter-spacing: 0;
+        white-space: nowrap;
+        word-break: normal;
+        overflow: visible;
+      }
+
+      .caption-line {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        width: 100%;
+        max-width: none;
+        line-height: 1.16;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #a6a6a6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="pill-karaoke"
+      data-composition-id="caption-pill-karaoke"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var PILL_MAX_WIDTH = 1400;
+      var PILL_MIN_PADDING_X = 30;
+      var PILL_MAX_PADDING_X = 60;
+      var FONT_WIDTH_SAFETY = 1.18;
+      var FONT_FAMILY = "Poppins";
+      var FONT_WEIGHT = "700";
+      var BASE_FONT_SIZE = 72;
+      var MIN_FONT_SIZE = 52;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var GROUP_END_BUFFER = 0.3;
+      var COLOR_INACTIVE = "#A6A6A6";
+      var COLOR_ACTIVE = "#1C1E1D";
+      var COLOR_FADE_DURATION = 0.1;
+      var WORD_FADE_LEAD = 0.05;
+
+      var TRANSCRIPT = [
+        {"text": "Every", "start": 0.0, "end": 0.3},
+        {"text": "great", "start": 0.3, "end": 0.55},
+        {"text": "video", "start": 0.55, "end": 0.85},
+        {"text": "starts", "start": 0.85, "end": 1.1},
+        {"text": "with", "start": 1.1, "end": 1.25},
+        {"text": "a", "start": 1.25, "end": 1.35},
+        {"text": "single", "start": 1.35, "end": 1.65},
+        {"text": "frame.", "start": 1.65, "end": 2.0},
+        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
+        {"text": "lets", "start": 2.65, "end": 2.85},
+        {"text": "you", "start": 2.85, "end": 2.95},
+        {"text": "write", "start": 2.95, "end": 3.15},
+        {"text": "HTML", "start": 3.15, "end": 3.55},
+        {"text": "and", "start": 3.55, "end": 3.65},
+        {"text": "render", "start": 3.65, "end": 3.95},
+        {"text": "professional", "start": 3.95, "end": 4.45},
+        {"text": "video.", "start": 4.45, "end": 4.8},
+        {"text": "No", "start": 4.9, "end": 5.05},
+        {"text": "timeline.", "start": 5.05, "end": 5.45},
+        {"text": "No", "start": 5.5, "end": 5.65},
+        {"text": "drag", "start": 5.65, "end": 5.85},
+        {"text": "and", "start": 5.85, "end": 5.95},
+        {"text": "drop.", "start": 5.95, "end": 6.25},
+        {"text": "Just", "start": 6.35, "end": 6.55},
+        {"text": "code", "start": 6.55, "end": 6.8},
+        {"text": "that", "start": 6.8, "end": 6.95},
+        {"text": "becomes", "start": 6.95, "end": 7.3},
+        {"text": "cinema.", "start": 7.3, "end": 7.7}
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords.map(function (item) {
+          var text = String(item.word || item.text || "").trim();
+          return {
+            text: text,
+            start: Math.max(0, Number(item.start) || 0),
+            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+          };
+        }).filter(function (w) { return w.text.length > 0; });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWordWidth(text, fontSize) {
+        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, fontSize) {
+        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+        if (words.some(function (w) { return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth; })) {
+          return null;
+        }
+        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+        var bestSplit = null;
+        var bestImbalance = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var firstLine = words.slice(0, split);
+          var secondLine = words.slice(split);
+          var firstWidth = measureLineWidth(firstLine, fontSize);
+          var secondWidth = measureLineWidth(secondLine, fontSize);
+          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+            var imbalance = Math.abs(firstWidth - secondWidth);
+            if (imbalance < bestImbalance) {
+              bestSplit = [firstLine, secondLine];
+              bestImbalance = imbalance;
+            }
+          }
+        }
+        return bestSplit;
+      }
+
+      function fitsInTwoLinesAtSize(words, fontSize) {
+        return splitLinesForGroup(words, fontSize) !== null;
+      }
+
+      function planPillLayout(words, fontSize) {
+        var lines = splitLinesForGroup(words, fontSize) || [words];
+        var widestLine = lines.reduce(function (max, lineWords) {
+          return Math.max(max, measureLineWidth(lineWords, fontSize));
+        }, 0);
+        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+        return { lines: lines, padX: padX, pillWidth: pillWidth };
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var testGroup = current.concat([word]);
+          var nextWord = words[index + 1];
+          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+          if (wouldExceedMaxWords || wouldExceedTwoLines) {
+            if (current.length) {
+              groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+            }
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var hasPunctuation = /[,.:!?]$/.test(word.text);
+          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+            groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+            current = [];
+          }
+        });
+        if (current.length) groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+        return groups;
+      }
+
+      function fontSizeForGroup(words) {
+        var size = BASE_FONT_SIZE;
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) { size -= 2; }
+        return size;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var pillEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          var fontSize = fontSizeForGroup(group.words);
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          pillEl.className = "caption-pill";
+          copyEl.className = "caption-copy";
+          copyEl.style.fontSize = fontSize + "px";
+          var indexedWords = group.words.map(function (word, wordIndex) {
+            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
+          });
+          var layout = planPillLayout(indexedWords, fontSize);
+          pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.paddingLeft = layout.padX + "px";
+          pillEl.style.paddingRight = layout.padX + "px";
+          layout.lines.slice(0, 2).forEach(function (lineWords) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineWords.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          pillEl.appendChild(copyEl);
+          groupEl.appendChild(pillEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = document.getElementById("caption-group-" + groupIndex);
+        var nextGroup = GROUPS[groupIndex + 1];
+        var isLastGroup = groupIndex === GROUPS.length - 1;
+        var effectiveEnd = isLastGroup ? DURATION : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var visibleStart = Math.max(0, group.start);
+        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+        tl.set(groupEl, { opacity: 1 }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+        group.words.forEach(function (word, wordIndex) {
+          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+          var isFirstWord = wordIndex === 0;
+          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
+          if (isFirstWord) return;
+          tl.to(wordEl, { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" }, wordStart);
+        });
+      });
+
+      window.__timelines["pill-karaoke"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-pill-karaoke/demo.html b/registry/components/caption-pill-karaoke/demo.html
new file mode 100644
index 000000000..1e439742a
--- /dev/null
+++ b/registry/components/caption-pill-karaoke/demo.html
@@ -0,0 +1,365 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pill Karaoke</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Poppins", Arial, sans-serif;
+      }
+
+      #pill-karaoke {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1600px;
+        height: 220px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+
+      .caption-pill {
+        width: auto;
+        max-width: 1600px;
+        padding: 18px 60px 20px;
+        border-radius: 22px;
+        background: #e7e5e7;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+        text-align: center;
+        overflow: visible;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        color: #a6a6a6;
+        font-family: "Poppins", Arial, sans-serif;
+        font-size: 72px;
+        font-weight: 700;
+        line-height: 1.16;
+        letter-spacing: 0;
+        white-space: nowrap;
+        word-break: normal;
+        overflow: visible;
+      }
+
+      .caption-line {
+        display: flex;
+        justify-content: center;
+        gap: 16px;
+        width: 100%;
+        max-width: none;
+        line-height: 1.16;
+        white-space: nowrap;
+        overflow: visible;
+      }
+
+      .caption-word {
+        display: inline-block;
+        color: #a6a6a6;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="pill-karaoke"
+      data-composition-id="caption-pill-karaoke"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var PILL_MAX_WIDTH = 1400;
+      var PILL_MIN_PADDING_X = 30;
+      var PILL_MAX_PADDING_X = 60;
+      var FONT_WIDTH_SAFETY = 1.18;
+      var FONT_FAMILY = "Poppins";
+      var FONT_WEIGHT = "700";
+      var BASE_FONT_SIZE = 72;
+      var MIN_FONT_SIZE = 52;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 16;
+      var PAUSE_THRESHOLD = 0.1;
+      var GROUP_END_BUFFER = 0.3;
+      var COLOR_INACTIVE = "#A6A6A6";
+      var COLOR_ACTIVE = "#1C1E1D";
+      var COLOR_FADE_DURATION = 0.1;
+      var WORD_FADE_LEAD = 0.05;
+
+      var TRANSCRIPT = [
+        {"text": "Every", "start": 0.0, "end": 0.3},
+        {"text": "great", "start": 0.3, "end": 0.55},
+        {"text": "video", "start": 0.55, "end": 0.85},
+        {"text": "starts", "start": 0.85, "end": 1.1},
+        {"text": "with", "start": 1.1, "end": 1.25},
+        {"text": "a", "start": 1.25, "end": 1.35},
+        {"text": "single", "start": 1.35, "end": 1.65},
+        {"text": "frame.", "start": 1.65, "end": 2.0},
+        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
+        {"text": "lets", "start": 2.65, "end": 2.85},
+        {"text": "you", "start": 2.85, "end": 2.95},
+        {"text": "write", "start": 2.95, "end": 3.15},
+        {"text": "HTML", "start": 3.15, "end": 3.55},
+        {"text": "and", "start": 3.55, "end": 3.65},
+        {"text": "render", "start": 3.65, "end": 3.95},
+        {"text": "professional", "start": 3.95, "end": 4.45},
+        {"text": "video.", "start": 4.45, "end": 4.8},
+        {"text": "No", "start": 4.9, "end": 5.05},
+        {"text": "timeline.", "start": 5.05, "end": 5.45},
+        {"text": "No", "start": 5.5, "end": 5.65},
+        {"text": "drag", "start": 5.65, "end": 5.85},
+        {"text": "and", "start": 5.85, "end": 5.95},
+        {"text": "drop.", "start": 5.95, "end": 6.25},
+        {"text": "Just", "start": 6.35, "end": 6.55},
+        {"text": "code", "start": 6.55, "end": 6.8},
+        {"text": "that", "start": 6.8, "end": 6.95},
+        {"text": "becomes", "start": 6.95, "end": 7.3},
+        {"text": "cinema.", "start": 7.3, "end": 7.7}
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords.map(function (item) {
+          var text = String(item.word || item.text || "").trim();
+          return {
+            text: text,
+            start: Math.max(0, Number(item.start) || 0),
+            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+          };
+        }).filter(function (w) { return w.text.length > 0; });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+
+      function measureWordWidth(text, fontSize) {
+        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words, fontSize) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function splitLinesForGroup(words, fontSize) {
+        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+        if (words.some(function (w) { return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth; })) {
+          return null;
+        }
+        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+        var bestSplit = null;
+        var bestImbalance = Infinity;
+        for (var split = 1; split < words.length; split++) {
+          var firstLine = words.slice(0, split);
+          var secondLine = words.slice(split);
+          var firstWidth = measureLineWidth(firstLine, fontSize);
+          var secondWidth = measureLineWidth(secondLine, fontSize);
+          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+            var imbalance = Math.abs(firstWidth - secondWidth);
+            if (imbalance < bestImbalance) {
+              bestSplit = [firstLine, secondLine];
+              bestImbalance = imbalance;
+            }
+          }
+        }
+        return bestSplit;
+      }
+
+      function fitsInTwoLinesAtSize(words, fontSize) {
+        return splitLinesForGroup(words, fontSize) !== null;
+      }
+
+      function planPillLayout(words, fontSize) {
+        var lines = splitLinesForGroup(words, fontSize) || [words];
+        var widestLine = lines.reduce(function (max, lineWords) {
+          return Math.max(max, measureLineWidth(lineWords, fontSize));
+        }, 0);
+        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+        return { lines: lines, padX: padX, pillWidth: pillWidth };
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var testGroup = current.concat([word]);
+          var nextWord = words[index + 1];
+          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+          if (wouldExceedMaxWords || wouldExceedTwoLines) {
+            if (current.length) {
+              groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+            }
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var hasPunctuation = /[,.:!?]$/.test(word.text);
+          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+            groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+            current = [];
+          }
+        });
+        if (current.length) groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+        return groups;
+      }
+
+      function fontSizeForGroup(words) {
+        var size = BASE_FONT_SIZE;
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) { size -= 2; }
+        return size;
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var pillEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          var fontSize = fontSizeForGroup(group.words);
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          pillEl.className = "caption-pill";
+          copyEl.className = "caption-copy";
+          copyEl.style.fontSize = fontSize + "px";
+          var indexedWords = group.words.map(function (word, wordIndex) {
+            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
+          });
+          var layout = planPillLayout(indexedWords, fontSize);
+          pillEl.style.width = layout.pillWidth + "px";
+          pillEl.style.paddingLeft = layout.padX + "px";
+          pillEl.style.paddingRight = layout.padX + "px";
+          layout.lines.slice(0, 2).forEach(function (lineWords) {
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            lineWords.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          pillEl.appendChild(copyEl);
+          groupEl.appendChild(pillEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = document.getElementById("caption-group-" + groupIndex);
+        var nextGroup = GROUPS[groupIndex + 1];
+        var isLastGroup = groupIndex === GROUPS.length - 1;
+        var effectiveEnd = isLastGroup ? DURATION : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var visibleStart = Math.max(0, group.start);
+        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+        tl.set(groupEl, { opacity: 1 }, visibleStart);
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+        group.words.forEach(function (word, wordIndex) {
+          var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+          var isFirstWord = wordIndex === 0;
+          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
+          if (isFirstWord) return;
+          tl.to(wordEl, { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" }, wordStart);
+        });
+      });
+
+      window.__timelines["pill-karaoke"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-pill-karaoke/registry-item.json b/registry/components/caption-pill-karaoke/registry-item.json
new file mode 100644
index 000000000..1651c748f
--- /dev/null
+++ b/registry/components/caption-pill-karaoke/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-pill-karaoke",
+  "type": "hyperframes:component",
+  "title": "Pill Karaoke",
+  "description": "Pill-shaped container with per-word karaoke color highlight",
+  "tags": ["captions", "caption-style", "karaoke", "pill"],
+  "files": [
+    {
+      "path": "caption-pill-karaoke.html",
+      "target": "compositions/components/caption-pill-karaoke.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-texture-lava/caption-texture-lava.html b/registry/components/caption-texture-lava/caption-texture-lava.html
new file mode 100644
index 000000000..212240d2c
--- /dev/null
+++ b/registry/components/caption-texture-lava/caption-texture-lava.html
@@ -0,0 +1,172 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Texture Lava</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=Anton&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* Inlined texture-mask-text component styles */
+      .hf-texture-text {
+        color: #fff;
+        -webkit-mask-size: var(--mask-size, cover);
+        mask-size: var(--mask-size, cover);
+        -webkit-mask-position: var(--mask-position, center);
+        mask-position: var(--mask-position, center);
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(var(--mask-contrast, 1));
+      }
+      .hf-texture-lava {
+        -webkit-mask-image: url("/assets/texture-mask-text/masks/lava.png");
+        mask-image: url("/assets/texture-mask-text/masks/lava.png");
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body {
+        width: 1920px; height: 1080px; margin: 0;
+        overflow: hidden; background: #0a0805;
+      }
+      #texture-lava {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0805;
+      }
+      #lv-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .lv-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.55); z-index: 1; pointer-events: none;
+      }
+      #lv-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+
+      /* Lava-specific overrides for texture mask */
+      .lv-texture-override {
+        -webkit-mask-size: 200% 200%;
+        mask-size: 200% 200%;
+        -webkit-mask-position: 0% 50%;
+        mask-position: 0% 50%;
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(1.2);
+      }
+
+      .lv-shadow {
+        position: absolute;
+        left: 0; width: 100%; text-align: center;
+        top: 50%;
+        filter: drop-shadow(0 4px 24px rgba(255,100,20,0.55));
+        opacity: 0; visibility: hidden;
+      }
+      .lv-word {
+        font-family: 'Anton', sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #FFD0A0;
+        display: inline-block;
+        letter-spacing: 0.04em; line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="texture-lava"
+      data-composition-id="caption-texture-lava"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="lv-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="lv-overlay"></div>
+      <div id="lv-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      var container = document.getElementById('lv-container');
+      var tl = gsap.timeline({ paused: true });
+
+      WORDS.forEach(function(w, wi) {
+        var txt = w.text.toUpperCase();
+        var fontSize = 200;
+
+        var shadow = document.createElement('div');
+        shadow.className = 'lv-shadow';
+        shadow.id = 'lv-shadow-' + wi;
+        gsap.set(shadow, { yPercent: -50 });
+
+        var wordEl = document.createElement('div');
+        wordEl.className = 'hf-texture-text hf-texture-lava lv-texture-override lv-word';
+        wordEl.id = 'lv-word-' + wi;
+        wordEl.textContent = txt;
+        wordEl.style.fontSize = fontSize + 'px';
+        if (KEYWORDS.has(wi)) wordEl.style.color = '#FFAA44';
+
+        shadow.appendChild(wordEl);
+        container.appendChild(shadow);
+
+        var dur = Math.max(w.end - w.start + 0.3, 0.4);
+
+        tl.set(shadow, { visibility: 'visible', opacity: 0 }, w.start);
+        tl.fromTo(shadow,
+          { opacity: 0, scale: 0.88 },
+          { opacity: 1, scale: 1, duration: 0.18, ease: 'power3.out' },
+          w.start
+        );
+        tl.set(wordEl, { '--mask-position': '0% 50%' }, w.start);
+        tl.to(wordEl, { '--mask-position': '100% 50%', duration: dur, ease: 'sine.inOut' }, w.start);
+
+        tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: 'power2.in' }, w.end);
+        tl.set(shadow, { opacity: 0, visibility: 'hidden' }, w.end + 0.1);
+      });
+
+      tl.seek(0);
+      window.__timelines['texture-lava'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-texture-lava/demo.html b/registry/components/caption-texture-lava/demo.html
new file mode 100644
index 000000000..212240d2c
--- /dev/null
+++ b/registry/components/caption-texture-lava/demo.html
@@ -0,0 +1,172 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Texture Lava</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=Anton&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* Inlined texture-mask-text component styles */
+      .hf-texture-text {
+        color: #fff;
+        -webkit-mask-size: var(--mask-size, cover);
+        mask-size: var(--mask-size, cover);
+        -webkit-mask-position: var(--mask-position, center);
+        mask-position: var(--mask-position, center);
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(var(--mask-contrast, 1));
+      }
+      .hf-texture-lava {
+        -webkit-mask-image: url("/assets/texture-mask-text/masks/lava.png");
+        mask-image: url("/assets/texture-mask-text/masks/lava.png");
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body {
+        width: 1920px; height: 1080px; margin: 0;
+        overflow: hidden; background: #0a0805;
+      }
+      #texture-lava {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #0a0805;
+      }
+      #lv-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .lv-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.55); z-index: 1; pointer-events: none;
+      }
+      #lv-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+
+      /* Lava-specific overrides for texture mask */
+      .lv-texture-override {
+        -webkit-mask-size: 200% 200%;
+        mask-size: 200% 200%;
+        -webkit-mask-position: 0% 50%;
+        mask-position: 0% 50%;
+        -webkit-mask-mode: luminance;
+        mask-mode: luminance;
+        filter: contrast(1.2);
+      }
+
+      .lv-shadow {
+        position: absolute;
+        left: 0; width: 100%; text-align: center;
+        top: 50%;
+        filter: drop-shadow(0 4px 24px rgba(255,100,20,0.55));
+        opacity: 0; visibility: hidden;
+      }
+      .lv-word {
+        font-family: 'Anton', sans-serif;
+        font-weight: 400;
+        text-transform: uppercase;
+        color: #FFD0A0;
+        display: inline-block;
+        letter-spacing: 0.04em; line-height: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="texture-lava"
+      data-composition-id="caption-texture-lava"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="lv-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="lv-overlay"></div>
+      <div id="lv-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+      var container = document.getElementById('lv-container');
+      var tl = gsap.timeline({ paused: true });
+
+      WORDS.forEach(function(w, wi) {
+        var txt = w.text.toUpperCase();
+        var fontSize = 200;
+
+        var shadow = document.createElement('div');
+        shadow.className = 'lv-shadow';
+        shadow.id = 'lv-shadow-' + wi;
+        gsap.set(shadow, { yPercent: -50 });
+
+        var wordEl = document.createElement('div');
+        wordEl.className = 'hf-texture-text hf-texture-lava lv-texture-override lv-word';
+        wordEl.id = 'lv-word-' + wi;
+        wordEl.textContent = txt;
+        wordEl.style.fontSize = fontSize + 'px';
+        if (KEYWORDS.has(wi)) wordEl.style.color = '#FFAA44';
+
+        shadow.appendChild(wordEl);
+        container.appendChild(shadow);
+
+        var dur = Math.max(w.end - w.start + 0.3, 0.4);
+
+        tl.set(shadow, { visibility: 'visible', opacity: 0 }, w.start);
+        tl.fromTo(shadow,
+          { opacity: 0, scale: 0.88 },
+          { opacity: 1, scale: 1, duration: 0.18, ease: 'power3.out' },
+          w.start
+        );
+        tl.set(wordEl, { '--mask-position': '0% 50%' }, w.start);
+        tl.to(wordEl, { '--mask-position': '100% 50%', duration: dur, ease: 'sine.inOut' }, w.start);
+
+        tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: 'power2.in' }, w.end);
+        tl.set(shadow, { opacity: 0, visibility: 'hidden' }, w.end + 0.1);
+      });
+
+      tl.seek(0);
+      window.__timelines['texture-lava'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-texture-lava/lava.png b/registry/components/caption-texture-lava/lava.png
new file mode 100644
index 0000000000000000000000000000000000000000..3de2ac6c20c19fb7125b41833d3cbfa884e24ae3
GIT binary patch
literal 74455
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
Vw-?)~hJXM7002ovPDHLkV1kaiWoiHb

literal 0
HcmV?d00001

diff --git a/registry/components/caption-texture-lava/registry-item.json b/registry/components/caption-texture-lava/registry-item.json
new file mode 100644
index 000000000..eadbe6c02
--- /dev/null
+++ b/registry/components/caption-texture-lava/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-texture-lava",
+  "type": "hyperframes:component",
+  "title": "Texture Lava",
+  "description": "Flowing lava texture mask over large uppercase text",
+  "tags": ["captions", "caption-style", "texture", "lava", "mask"],
+  "files": [
+    {
+      "path": "caption-texture-lava.html",
+      "target": "compositions/components/caption-texture-lava.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-typewriter/caption-typewriter.html b/registry/components/caption-typewriter/caption-typewriter.html
new file mode 100644
index 000000000..5df7d240a
--- /dev/null
+++ b/registry/components/caption-typewriter/caption-typewriter.html
@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Typewriter</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=JetBrains+Mono:wght@700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body {
+        width: 1920px; height: 1080px; margin: 0;
+        overflow: hidden; background: #000;
+      }
+      #typewriter {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #000;
+      }
+      #tw-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .tw-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.85); z-index: 1; pointer-events: none;
+      }
+      #tw-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .tw-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 80px;
+        opacity: 0; visibility: hidden;
+      }
+      .tw-word {
+        font-family: 'JetBrains Mono', monospace;
+        font-weight: 700; font-size: 76px;
+        color: #00FF41;
+        text-shadow: 0 0 12px rgba(0,255,65,0.5);
+        display: inline-block; letter-spacing: 0.04em; line-height: 1; white-space: nowrap;
+      }
+      .tw-char { display: none; }
+      .tw-cursor {
+        font-family: 'JetBrains Mono', monospace;
+        font-weight: 700; font-size: 76px;
+        color: #00FF41;
+        text-shadow: 0 0 12px rgba(0,255,65,0.5);
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="typewriter"
+      data-composition-id="caption-typewriter"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="tw-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="tw-overlay"></div>
+      <div id="tw-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      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 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},
+      ];
+
+      var container = document.getElementById('tw-container');
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function(g, gi) {
+        var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+        var fontSize = 76;
+        var grp = document.createElement('div');
+        grp.className = 'tw-group';
+        grp.id = 'tw-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var wordWrap = document.createElement('span');
+          wordWrap.className = 'tw-word';
+          wordWrap.id = 'tw-w-' + wi;
+          wordWrap.style.fontSize = fontSize + 'px';
+
+          w.text.split('').forEach(function(c, ci) {
+            var charEl = document.createElement('span');
+            charEl.className = 'tw-char';
+            charEl.id = 'tw-c-' + wi + '-' + ci;
+            charEl.textContent = c;
+            wordWrap.appendChild(charEl);
+          });
+
+          var cursor = document.createElement('span');
+          cursor.className = 'tw-cursor';
+          cursor.id = 'tw-cur-' + wi;
+          cursor.textContent = '_';
+          cursor.style.fontSize = fontSize + 'px';
+          wordWrap.appendChild(cursor);
+          grp.appendChild(wordWrap);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible', opacity: 1 }, g.start);
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var chars = w.text.split('');
+          var wordDuration = Math.max(w.end - w.start, 0.1);
+          var charCount = chars.length;
+          var cursorEl = document.getElementById('tw-cur-' + wi);
+
+          tl.set(cursorEl, { display: 'inline' }, w.start);
+          chars.forEach(function(c, ci) {
+            var charEl = document.getElementById('tw-c-' + wi + '-' + ci);
+            tl.set(charEl, { display: 'inline' }, w.start + ci * (wordDuration / charCount));
+          });
+          tl.set(cursorEl, { display: 'none' }, w.end);
+        });
+
+        tl.to(grp, { opacity: 0, duration: 0.2 }, g.end - 0.2);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      window.__timelines['typewriter'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-typewriter/demo.html b/registry/components/caption-typewriter/demo.html
new file mode 100644
index 000000000..5df7d240a
--- /dev/null
+++ b/registry/components/caption-typewriter/demo.html
@@ -0,0 +1,181 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Typewriter</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=JetBrains+Mono:wght@700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body {
+        width: 1920px; height: 1080px; margin: 0;
+        overflow: hidden; background: #000;
+      }
+      #typewriter {
+        position: relative; width: 1920px; height: 1080px;
+        overflow: hidden; background: #000;
+      }
+      #tw-video {
+        position: absolute; inset: 0; z-index: 0;
+        width: 100%; height: 100%; object-fit: cover;
+      }
+      .tw-overlay {
+        position: absolute; inset: 0;
+        background: rgba(0,0,0,0.85); z-index: 1; pointer-events: none;
+      }
+      #tw-container {
+        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+      }
+      .tw-group {
+        position: absolute;
+        bottom: 120px; left: 0; width: 100%;
+        display: flex; flex-wrap: wrap; align-items: flex-end;
+        justify-content: center; gap: 24px; padding: 0 80px;
+        opacity: 0; visibility: hidden;
+      }
+      .tw-word {
+        font-family: 'JetBrains Mono', monospace;
+        font-weight: 700; font-size: 76px;
+        color: #00FF41;
+        text-shadow: 0 0 12px rgba(0,255,65,0.5);
+        display: inline-block; letter-spacing: 0.04em; line-height: 1; white-space: nowrap;
+      }
+      .tw-char { display: none; }
+      .tw-cursor {
+        font-family: 'JetBrains Mono', monospace;
+        font-weight: 700; font-size: 76px;
+        color: #00FF41;
+        text-shadow: 0 0 12px rgba(0,255,65,0.5);
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="typewriter"
+      data-composition-id="caption-typewriter"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video id="tw-video" muted playsinline
+        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <div class="tw-overlay"></div>
+      <div id="tw-container"></div>
+    </div>
+
+    <script>
+    (function () {
+      window.__timelines = window.__timelines || {};
+
+      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 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},
+      ];
+
+      var container = document.getElementById('tw-container');
+      var tl = gsap.timeline({ paused: true });
+
+      GROUPS.forEach(function(g, gi) {
+        var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+        var fontSize = 76;
+        var grp = document.createElement('div');
+        grp.className = 'tw-group';
+        grp.id = 'tw-grp-' + gi;
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var wordWrap = document.createElement('span');
+          wordWrap.className = 'tw-word';
+          wordWrap.id = 'tw-w-' + wi;
+          wordWrap.style.fontSize = fontSize + 'px';
+
+          w.text.split('').forEach(function(c, ci) {
+            var charEl = document.createElement('span');
+            charEl.className = 'tw-char';
+            charEl.id = 'tw-c-' + wi + '-' + ci;
+            charEl.textContent = c;
+            wordWrap.appendChild(charEl);
+          });
+
+          var cursor = document.createElement('span');
+          cursor.className = 'tw-cursor';
+          cursor.id = 'tw-cur-' + wi;
+          cursor.textContent = '_';
+          cursor.style.fontSize = fontSize + 'px';
+          wordWrap.appendChild(cursor);
+          grp.appendChild(wordWrap);
+        });
+
+        container.appendChild(grp);
+
+        tl.set(grp, { visibility: 'visible', opacity: 1 }, g.start);
+
+        groupWords.forEach(function(w, i) {
+          var wi = g.wordStart + i;
+          var chars = w.text.split('');
+          var wordDuration = Math.max(w.end - w.start, 0.1);
+          var charCount = chars.length;
+          var cursorEl = document.getElementById('tw-cur-' + wi);
+
+          tl.set(cursorEl, { display: 'inline' }, w.start);
+          chars.forEach(function(c, ci) {
+            var charEl = document.getElementById('tw-c-' + wi + '-' + ci);
+            tl.set(charEl, { display: 'inline' }, w.start + ci * (wordDuration / charCount));
+          });
+          tl.set(cursorEl, { display: 'none' }, w.end);
+        });
+
+        tl.to(grp, { opacity: 0, duration: 0.2 }, g.end - 0.2);
+        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
+      });
+
+      window.__timelines['typewriter'] = tl;
+    })();
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-typewriter/registry-item.json b/registry/components/caption-typewriter/registry-item.json
new file mode 100644
index 000000000..8e58c81ee
--- /dev/null
+++ b/registry/components/caption-typewriter/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-typewriter",
+  "type": "hyperframes:component",
+  "title": "Typewriter",
+  "description": "Green terminal character-by-character reveal with blinking cursor",
+  "tags": ["captions", "caption-style", "terminal", "typewriter", "hacker"],
+  "files": [
+    {
+      "path": "caption-typewriter.html",
+      "target": "compositions/components/caption-typewriter.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
new file mode 100644
index 000000000..48a574fdc
--- /dev/null
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -0,0 +1,323 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Shift</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@300;700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #weight-shift {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 300;
+        font-size: 72px;
+        letter-spacing: -0.03em;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        text-transform: lowercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="weight-shift"
+      data-composition-id="caption-weight-shift"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 12;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 100 / 1000;
+      var WEIGHT_TRANSITION = 100 / 1000;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var FONT_WEIGHT_LIGHT = 300;
+      var FONT_WEIGHT_BOLD = 700;
+
+      var TRANSCRIPT = [
+        {"text": "Every", "start": 0.0, "end": 0.3},
+        {"text": "great", "start": 0.3, "end": 0.55},
+        {"text": "video", "start": 0.55, "end": 0.85},
+        {"text": "starts", "start": 0.85, "end": 1.1},
+        {"text": "with", "start": 1.1, "end": 1.25},
+        {"text": "a", "start": 1.25, "end": 1.35},
+        {"text": "single", "start": 1.35, "end": 1.65},
+        {"text": "frame.", "start": 1.65, "end": 2.0},
+        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
+        {"text": "lets", "start": 2.65, "end": 2.85},
+        {"text": "you", "start": 2.85, "end": 2.95},
+        {"text": "write", "start": 2.95, "end": 3.15},
+        {"text": "HTML", "start": 3.15, "end": 3.55},
+        {"text": "and", "start": 3.55, "end": 3.65},
+        {"text": "render", "start": 3.65, "end": 3.95},
+        {"text": "professional", "start": 3.95, "end": 4.45},
+        {"text": "video.", "start": 4.45, "end": 4.8},
+        {"text": "No", "start": 4.9, "end": 5.05},
+        {"text": "timeline.", "start": 5.05, "end": 5.45},
+        {"text": "No", "start": 5.5, "end": 5.65},
+        {"text": "drag", "start": 5.65, "end": 5.85},
+        {"text": "and", "start": 5.85, "end": 5.95},
+        {"text": "drop.", "start": 5.95, "end": 6.25},
+        {"text": "Just", "start": 6.35, "end": 6.55},
+        {"text": "code", "start": 6.55, "end": 6.8},
+        {"text": "that", "start": 6.8, "end": 6.95},
+        {"text": "becomes", "start": 6.95, "end": 7.3},
+        {"text": "cinema.", "start": 7.3, "end": 7.7}
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords.map(function (item) {
+          return {
+            text: String(item.word || item.text || "").trim(),
+            start: Math.max(0, Number(item.start) || 0),
+            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+          };
+        }).filter(function (word) { return word.text.length > 0; });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+      measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
+
+      function measureWord(word) {
+        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsInTwoLines(words) {
+        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
+      }
+
+      function splitLines(words) {
+        if (measureLineWidth(words) <= MAX_LINE_WIDTH) {
+          return [{ words: words, startIndex: 0 }];
+        }
+        var bestSplit = Math.ceil(words.length / 2);
+        var bestDiff = Infinity;
+        for (var s = 1; s < words.length; s++) {
+          var w1 = measureLineWidth(words.slice(0, s));
+          var w2 = measureLineWidth(words.slice(s));
+          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
+            var diff = Math.abs(w1 - w2);
+            if (diff < bestDiff) { bestDiff = diff; bestSplit = s; }
+          }
+        }
+        var result = [];
+        var line1 = words.slice(0, bestSplit);
+        var line2 = words.slice(bestSplit);
+        if (line1.length) result.push({ words: line1, startIndex: 0 });
+        if (line2.length) result.push({ words: line2, startIndex: line1.length });
+        return result;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
+            if (current.length) groups.push(makeGroup(current));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+            groups.push(makeGroup(current));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current));
+        return groups;
+      }
+
+      function makeGroup(words) {
+        return { words: words.slice(), lines: splitLines(words), start: words[0].start, end: words[words.length - 1].end };
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.forEach(function (line, lineIndex) {
+            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;
+            line.words.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
+        tl.to(groupEl, { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
+
+        if (group.lines.length === 2) {
+          var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+          var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+          var line2FirstWord = group.lines[1].words[0];
+          var switchTime = line2FirstWord.start;
+          tl.to(line1El, { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" }, switchTime);
+          tl.to(line2El, { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" }, switchTime);
+        }
+
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["weight-shift"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-weight-shift/demo.html b/registry/components/caption-weight-shift/demo.html
new file mode 100644
index 000000000..48a574fdc
--- /dev/null
+++ b/registry/components/caption-weight-shift/demo.html
@@ -0,0 +1,323 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Weight Shift</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@300;700&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000000;
+        font-family: "Montserrat", Arial, sans-serif;
+      }
+
+      #weight-shift {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #avatar-video {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .caption-layer {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        pointer-events: none;
+        transform: translateZ(0);
+      }
+
+      .safe-zone {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .caption-group {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1400px;
+        height: 260px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transform-origin: 50% 50%;
+        will-change: transform;
+        backface-visibility: hidden;
+      }
+
+      .caption-copy {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 1400px;
+        text-align: center;
+      }
+
+      .caption-line {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        width: max-content;
+        max-width: 1400px;
+        line-height: 1.1;
+        white-space: nowrap;
+        color: #ffffff;
+        font-family: "Montserrat", Arial, sans-serif;
+        font-weight: 300;
+        font-size: 72px;
+        letter-spacing: -0.03em;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        text-transform: lowercase;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="weight-shift"
+      data-composition-id="caption-weight-shift"
+      data-start="0"
+      data-duration="8"
+      data-fps="30"
+      data-width="1920"
+      data-height="1080"
+    >
+      <video
+        id="avatar-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
+
+      <div class="caption-layer" aria-hidden="true">
+        <div id="caption-stage" class="safe-zone"></div>
+      </div>
+    </div>
+
+    <script>
+      var DURATION = 8;
+      var SAFE_ZONE_WIDTH = 1400;
+      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;
+      var CAPTION_FONT_SIZE = 72;
+      var MAX_WORDS_PER_GROUP = 4;
+      var WORD_SPACING = 12;
+      var PAUSE_THRESHOLD = 0.1;
+      var ENTRY_DURATION = 100 / 1000;
+      var WEIGHT_TRANSITION = 100 / 1000;
+      var FONT_WIDTH_SAFETY = 1.14;
+      var FONT_WEIGHT_LIGHT = 300;
+      var FONT_WEIGHT_BOLD = 700;
+
+      var TRANSCRIPT = [
+        {"text": "Every", "start": 0.0, "end": 0.3},
+        {"text": "great", "start": 0.3, "end": 0.55},
+        {"text": "video", "start": 0.55, "end": 0.85},
+        {"text": "starts", "start": 0.85, "end": 1.1},
+        {"text": "with", "start": 1.1, "end": 1.25},
+        {"text": "a", "start": 1.25, "end": 1.35},
+        {"text": "single", "start": 1.35, "end": 1.65},
+        {"text": "frame.", "start": 1.65, "end": 2.0},
+        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
+        {"text": "lets", "start": 2.65, "end": 2.85},
+        {"text": "you", "start": 2.85, "end": 2.95},
+        {"text": "write", "start": 2.95, "end": 3.15},
+        {"text": "HTML", "start": 3.15, "end": 3.55},
+        {"text": "and", "start": 3.55, "end": 3.65},
+        {"text": "render", "start": 3.65, "end": 3.95},
+        {"text": "professional", "start": 3.95, "end": 4.45},
+        {"text": "video.", "start": 4.45, "end": 4.8},
+        {"text": "No", "start": 4.9, "end": 5.05},
+        {"text": "timeline.", "start": 5.05, "end": 5.45},
+        {"text": "No", "start": 5.5, "end": 5.65},
+        {"text": "drag", "start": 5.65, "end": 5.85},
+        {"text": "and", "start": 5.85, "end": 5.95},
+        {"text": "drop.", "start": 5.95, "end": 6.25},
+        {"text": "Just", "start": 6.35, "end": 6.55},
+        {"text": "code", "start": 6.55, "end": 6.8},
+        {"text": "that", "start": 6.8, "end": 6.95},
+        {"text": "becomes", "start": 6.95, "end": 7.3},
+        {"text": "cinema.", "start": 7.3, "end": 7.7}
+      ];
+
+      function normalizeWords(rawWords) {
+        return rawWords.map(function (item) {
+          return {
+            text: String(item.word || item.text || "").trim(),
+            start: Math.max(0, Number(item.start) || 0),
+            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+          };
+        }).filter(function (word) { return word.text.length > 0; });
+      }
+
+      var measureCanvas = document.createElement("canvas");
+      var measureContext = measureCanvas.getContext("2d");
+      measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
+
+      function measureWord(word) {
+        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
+      }
+
+      function measureLineWidth(words) {
+        return words.reduce(function (total, word, index) {
+          return total + measureWord(word) + (index ? WORD_SPACING : 0);
+        }, 0);
+      }
+
+      function fitsInTwoLines(words) {
+        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
+      }
+
+      function splitLines(words) {
+        if (measureLineWidth(words) <= MAX_LINE_WIDTH) {
+          return [{ words: words, startIndex: 0 }];
+        }
+        var bestSplit = Math.ceil(words.length / 2);
+        var bestDiff = Infinity;
+        for (var s = 1; s < words.length; s++) {
+          var w1 = measureLineWidth(words.slice(0, s));
+          var w2 = measureLineWidth(words.slice(s));
+          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
+            var diff = Math.abs(w1 - w2);
+            if (diff < bestDiff) { bestDiff = diff; bestSplit = s; }
+          }
+        }
+        var result = [];
+        var line1 = words.slice(0, bestSplit);
+        var line2 = words.slice(bestSplit);
+        if (line1.length) result.push({ words: line1, startIndex: 0 });
+        if (line2.length) result.push({ words: line2, startIndex: line1.length });
+        return result;
+      }
+
+      function makeGroups(words) {
+        var groups = [];
+        var current = [];
+        words.forEach(function (word, index) {
+          var nextWord = words[index + 1];
+          var testGroup = current.concat([word]);
+          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
+            if (current.length) groups.push(makeGroup(current));
+            current = [word];
+            return;
+          }
+          current.push(word);
+          var punctuation = /[,.:!?]$/.test(word.text);
+          var pause = nextWord ? nextWord.start - word.end : 0;
+          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+            groups.push(makeGroup(current));
+            current = [];
+          }
+        });
+        if (current.length) groups.push(makeGroup(current));
+        return groups;
+      }
+
+      function makeGroup(words) {
+        return { words: words.slice(), lines: splitLines(words), start: words[0].start, end: words[words.length - 1].end };
+      }
+
+      function buildCaptions(groups) {
+        var stage = document.getElementById("caption-stage");
+        groups.forEach(function (group, groupIndex) {
+          var groupEl = document.createElement("div");
+          var copyEl = document.createElement("div");
+          groupEl.id = "caption-group-" + groupIndex;
+          groupEl.className = "caption-group";
+          copyEl.className = "caption-copy";
+          group.lines.forEach(function (line, lineIndex) {
+            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;
+            line.words.forEach(function (word) {
+              var wordEl = document.createElement("span");
+              wordEl.textContent = word.text.toLowerCase();
+              lineEl.appendChild(wordEl);
+            });
+            copyEl.appendChild(lineEl);
+          });
+          groupEl.appendChild(copyEl);
+          stage.appendChild(groupEl);
+        });
+      }
+
+      var WORDS = normalizeWords(TRANSCRIPT);
+      var GROUPS = makeGroups(WORDS);
+      buildCaptions(GROUPS);
+
+      window.__timelines = window.__timelines || {};
+      var tl = gsap.timeline({ paused: true });
+
+      var visibleStarts = GROUPS.map(function (group, groupIndex) {
+        var prev = GROUPS[groupIndex - 1];
+        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+        var entryLead = Math.min(ENTRY_DURATION, availableGap);
+        return Math.max(0, group.start - entryLead);
+      });
+
+      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+
+      GROUPS.forEach(function (group, groupIndex) {
+        var groupEl = allGroupEls[groupIndex];
+        var visibleStart = visibleStarts[groupIndex];
+        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+        allGroupEls.forEach(function (otherEl, otherIndex) {
+          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);
+        });
+
+        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
+        tl.to(groupEl, { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
+
+        if (group.lines.length === 2) {
+          var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+          var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+          var line2FirstWord = group.lines[1].words[0];
+          var switchTime = line2FirstWord.start;
+          tl.to(line1El, { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" }, switchTime);
+          tl.to(line2El, { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" }, switchTime);
+        }
+
+        tl.set(groupEl, { opacity: 0 }, visibleEnd);
+      });
+
+      window.__timelines["weight-shift"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/components/caption-weight-shift/registry-item.json b/registry/components/caption-weight-shift/registry-item.json
new file mode 100644
index 000000000..af641fcd8
--- /dev/null
+++ b/registry/components/caption-weight-shift/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "caption-weight-shift",
+  "type": "hyperframes:component",
+  "title": "Weight Shift",
+  "description": "Elegant font-weight transition between caption lines",
+  "tags": ["captions", "caption-style", "minimal", "typography"],
+  "files": [
+    {
+      "path": "caption-weight-shift.html",
+      "target": "compositions/components/caption-weight-shift.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 415976368..73b93dc5a 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -67,6 +67,66 @@
       "name": "vignette",
       "type": "hyperframes:component"
     },
+    {
+      "name": "caption-pill-karaoke",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-neon-accent",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-weight-shift",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-emoji-pop",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-editorial-emphasis",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-parallax-layers",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-glitch-rgb",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-typewriter",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-matrix-decode",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-particle-burst",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-texture-lava",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-clip-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-kinetic-slam",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-gradient-fill",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "caption-neon-glow",
+      "type": "hyperframes:component"
+    },
     {
       "name": "instagram-follow",
       "type": "hyperframes:block"

From a19a772dc5eeb1dc0535341a0836a1e720e8671f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sun, 17 May 2026 19:59:43 +0000
Subject: [PATCH 2/7] style: format caption component files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../caption-clip-wipe/caption-clip-wipe.html  | 277 +++++++-----
 .../components/caption-clip-wipe/demo.html    | 277 +++++++-----
 .../caption-editorial-emphasis.html           | 180 +++++---
 .../caption-editorial-emphasis/demo.html      | 180 +++++---
 .../caption-emoji-pop/caption-emoji-pop.html  | 209 ++++++---
 .../components/caption-emoji-pop/demo.html    | 209 ++++++---
 .../caption-glitch-rgb.html                   | 349 +++++++++------
 .../components/caption-glitch-rgb/demo.html   | 349 +++++++++------
 .../caption-gradient-fill.html                | 296 +++++++------
 .../caption-gradient-fill/demo.html           | 296 +++++++------
 .../caption-kinetic-slam.html                 | 244 ++++++-----
 .../components/caption-kinetic-slam/demo.html | 244 ++++++-----
 .../caption-matrix-decode.html                | 343 ++++++++-------
 .../caption-matrix-decode/demo.html           | 343 ++++++++-------
 .../caption-neon-accent.html                  | 243 ++++++++---
 .../components/caption-neon-accent/demo.html  | 243 ++++++++---
 .../caption-neon-glow/caption-neon-glow.html  | 261 +++++++-----
 .../components/caption-neon-glow/demo.html    | 261 +++++++-----
 .../caption-parallax-layers.html              | 119 +++---
 .../caption-parallax-layers/demo.html         | 119 +++---
 .../caption-particle-burst.html               | 396 +++++++++++-------
 .../caption-particle-burst/demo.html          | 396 +++++++++++-------
 .../caption-pill-karaoke.html                 | 124 ++++--
 .../components/caption-pill-karaoke/demo.html | 124 ++++--
 .../caption-texture-lava.html                 | 205 +++++----
 .../components/caption-texture-lava/demo.html | 205 +++++----
 .../caption-typewriter.html                   | 285 +++++++------
 .../components/caption-typewriter/demo.html   | 285 +++++++------
 .../caption-weight-shift.html                 | 120 ++++--
 .../components/caption-weight-shift/demo.html | 120 ++++--
 30 files changed, 4546 insertions(+), 2756 deletions(-)

diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html
index a793d6763..63a7aa1ec 100644
--- a/registry/components/caption-clip-wipe/caption-clip-wipe.html
+++ b/registry/components/caption-clip-wipe/caption-clip-wipe.html
@@ -6,42 +6,75 @@
     <title>Clip Wipe</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins: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;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #clip-wipe {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #wp-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .wp-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
       }
       #wp-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .wp-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 100px;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
         visibility: hidden;
       }
       .wp-word {
-        font-family: 'Poppins', sans-serif;
-        font-weight: 800; font-size: 88px;
+        font-family: "Poppins", sans-serif;
+        font-weight: 800;
+        font-size: 88px;
         text-transform: uppercase;
         color: #ffffff;
-        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
         clip-path: inset(0 100% 0 0);
         will-change: clip-path, color, opacity;
       }
@@ -57,114 +90,142 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="wp-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="wp-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="wp-overlay"></div>
       <div id="wp-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-      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 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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      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.35, nextStart - 0.05);
-        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
-      });
+        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.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
 
-      var container = document.getElementById('wp-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("wp-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 = 'wp-group';
-        grp.id = 'wp-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "wp-group";
+          grp.id = "wp-grp-" + gi;
 
-        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';
-          grp.appendChild(span);
-        });
+          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";
+            grp.appendChild(span);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible' }, g.start);
+          tl.set(grp, { visibility: "visible" }, g.start);
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var wordEl = document.getElementById('wp-w-' + wi);
-          var isKW = KEYWORDS.has(wi);
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("wp-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
 
-          tl.to(wordEl, { clipPath: 'inset(0 0% 0 0)', duration: 0.15, ease: 'power3.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,
+              { clipPath: "inset(0 0% 0 0)", duration: 0.15, ease: "power3.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);
+          });
 
-        var wordEls = grp.querySelectorAll('.wp-word');
-        tl.to(wordEls, {
-          clipPath: 'inset(0 0% 0 100%)',
-          duration: 0.14, stagger: 0.04, ease: 'power2.in'
-        }, g.end - 0.2);
-        tl.set(grp, { visibility: 'hidden', opacity: 0 }, g.end);
-      });
+          var wordEls = grp.querySelectorAll(".wp-word");
+          tl.to(
+            wordEls,
+            {
+              clipPath: "inset(0 0% 0 100%)",
+              duration: 0.14,
+              stagger: 0.04,
+              ease: "power2.in",
+            },
+            g.end - 0.2,
+          );
+          tl.set(grp, { visibility: "hidden", opacity: 0 }, g.end);
+        });
 
-      tl.seek(0);
-      window.__timelines['clip-wipe'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["clip-wipe"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-clip-wipe/demo.html b/registry/components/caption-clip-wipe/demo.html
index a793d6763..63a7aa1ec 100644
--- a/registry/components/caption-clip-wipe/demo.html
+++ b/registry/components/caption-clip-wipe/demo.html
@@ -6,42 +6,75 @@
     <title>Clip Wipe</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins: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;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #clip-wipe {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #wp-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .wp-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
       }
       #wp-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .wp-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 100px;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
         visibility: hidden;
       }
       .wp-word {
-        font-family: 'Poppins', sans-serif;
-        font-weight: 800; font-size: 88px;
+        font-family: "Poppins", sans-serif;
+        font-weight: 800;
+        font-size: 88px;
         text-transform: uppercase;
         color: #ffffff;
-        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
         clip-path: inset(0 100% 0 0);
         will-change: clip-path, color, opacity;
       }
@@ -57,114 +90,142 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="wp-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="wp-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="wp-overlay"></div>
       <div id="wp-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-      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 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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      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.35, nextStart - 0.05);
-        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
-      });
+        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.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
 
-      var container = document.getElementById('wp-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("wp-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 = 'wp-group';
-        grp.id = 'wp-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "wp-group";
+          grp.id = "wp-grp-" + gi;
 
-        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';
-          grp.appendChild(span);
-        });
+          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";
+            grp.appendChild(span);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible' }, g.start);
+          tl.set(grp, { visibility: "visible" }, g.start);
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var wordEl = document.getElementById('wp-w-' + wi);
-          var isKW = KEYWORDS.has(wi);
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("wp-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
 
-          tl.to(wordEl, { clipPath: 'inset(0 0% 0 0)', duration: 0.15, ease: 'power3.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,
+              { clipPath: "inset(0 0% 0 0)", duration: 0.15, ease: "power3.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);
+          });
 
-        var wordEls = grp.querySelectorAll('.wp-word');
-        tl.to(wordEls, {
-          clipPath: 'inset(0 0% 0 100%)',
-          duration: 0.14, stagger: 0.04, ease: 'power2.in'
-        }, g.end - 0.2);
-        tl.set(grp, { visibility: 'hidden', opacity: 0 }, g.end);
-      });
+          var wordEls = grp.querySelectorAll(".wp-word");
+          tl.to(
+            wordEls,
+            {
+              clipPath: "inset(0 0% 0 100%)",
+              duration: 0.14,
+              stagger: 0.04,
+              ease: "power2.in",
+            },
+            g.end - 0.2,
+          );
+          tl.set(grp, { visibility: "hidden", opacity: 0 }, g.end);
+        });
 
-      tl.seek(0);
-      window.__timelines['clip-wipe'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["clip-wipe"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index a9c2e2eb6..999a01e09 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -6,7 +6,10 @@
     <title>Editorial Emphasis</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=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,800&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,800&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -85,8 +88,10 @@
 
       .word {
         display: inline-block;
-        color: #F5F0D0;
-        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+        color: #f5f0d0;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
         will-change: transform, opacity;
         backface-visibility: hidden;
       }
@@ -111,7 +116,7 @@
         font-weight: 800;
         font-style: italic;
         line-height: 0.9;
-        color: #F5F0D0;
+        color: #f5f0d0;
       }
     </style>
   </head>
@@ -149,49 +154,108 @@
 
       // Generic transcript words
       var W = [
-        {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}
+        { 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 },
       ];
 
       // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
       // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
       var BLOCKS = [
-        { line1: [[0,"n"],[1,"n"],[2,"n"]],       line2: [[3,"n"],[4,"n"]] },
-        { line1: [[5,"n"],[6,"n"]],               line2: [[7,"e"]] },
-        { line1: [[8,"e"]],                       line2: null },
-        { line1: [[9,"n"],[10,"n"],[11,"n"]],     line2: [[12,"e"]] },
-        { line1: [[13,"n"],[14,"n"]],             line2: [[15,"e"]] },
-        { line1: [[16,"n"],[17,"n"]],             line2: null },
-        { line1: [[18,"n"]],                      line2: [[19,"n"],[20,"n"]] },
-        { line1: [[21,"n"],[22,"n"]],             line2: null },
-        { line1: [[23,"i"],[24,"e"]],             line2: null },
-        { line1: [[25,"n"],[26,"n"]],             line2: [[27,"e"]] },
+        {
+          line1: [
+            [0, "n"],
+            [1, "n"],
+            [2, "n"],
+          ],
+          line2: [
+            [3, "n"],
+            [4, "n"],
+          ],
+        },
+        {
+          line1: [
+            [5, "n"],
+            [6, "n"],
+          ],
+          line2: [[7, "e"]],
+        },
+        { line1: [[8, "e"]], line2: null },
+        {
+          line1: [
+            [9, "n"],
+            [10, "n"],
+            [11, "n"],
+          ],
+          line2: [[12, "e"]],
+        },
+        {
+          line1: [
+            [13, "n"],
+            [14, "n"],
+          ],
+          line2: [[15, "e"]],
+        },
+        {
+          line1: [
+            [16, "n"],
+            [17, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [[18, "n"]],
+          line2: [
+            [19, "n"],
+            [20, "n"],
+          ],
+        },
+        {
+          line1: [
+            [21, "n"],
+            [22, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [23, "i"],
+            [24, "e"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [25, "n"],
+            [26, "n"],
+          ],
+          line2: [[27, "e"]],
+        },
       ];
 
       var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
@@ -243,7 +307,9 @@
           el.style.position = "relative";
           var lines = el.querySelectorAll(".caption-line");
           var maxW = 0;
-          lines.forEach(function (line) { if (line.scrollWidth > maxW) maxW = line.scrollWidth; });
+          lines.forEach(function (line) {
+            if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+          });
           if (maxW > SAFE_WIDTH) {
             var s = SAFE_WIDTH / maxW;
             el.style.transform = "scale(" + s + ")";
@@ -256,27 +322,39 @@
       window.__timelines = window.__timelines || {};
       var tl = gsap.timeline({ paused: true });
 
-      var allEls = BLOCKS.map(function (_, i) { return document.getElementById("b" + i); });
+      var allEls = BLOCKS.map(function (_, i) {
+        return document.getElementById("b" + i);
+      });
 
-      function blockStart(bi) { return W[BLOCKS[bi].line1[0][0]].start; }
+      function blockStart(bi) {
+        return W[BLOCKS[bi].line1[0][0]].start;
+      }
 
       BLOCKS.forEach(function (block, bi) {
         var el = allEls[bi];
         var start = blockStart(bi);
         var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
 
-        allEls.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+        allEls.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
         tl.set(el, { opacity: 1 }, start);
 
         block.line1.forEach(function (pair, wi) {
           var wordEl = document.getElementById("b" + bi + "L1w" + wi);
           var wordStart = W[pair[0]].start;
           tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-          tl.to(wordEl, { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+          tl.to(
+            wordEl,
+            { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+            wordStart,
+          );
         });
 
         if (block.line2) {
-          var hasEmphasis = block.line2.some(function (p) { return p[1] === "e"; });
+          var hasEmphasis = block.line2.some(function (p) {
+            return p[1] === "e";
+          });
           var l2El = document.getElementById("b" + bi + "L2");
           if (hasEmphasis) {
             var l2Start = W[block.line2[0][0]].start;
@@ -288,7 +366,11 @@
               var wordEl = document.getElementById("b" + bi + "L2w" + wi);
               var wordStart = W[pair[0]].start;
               tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-              tl.to(wordEl, { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+              tl.to(
+                wordEl,
+                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                wordStart,
+              );
             });
           }
         }
diff --git a/registry/components/caption-editorial-emphasis/demo.html b/registry/components/caption-editorial-emphasis/demo.html
index a9c2e2eb6..999a01e09 100644
--- a/registry/components/caption-editorial-emphasis/demo.html
+++ b/registry/components/caption-editorial-emphasis/demo.html
@@ -6,7 +6,10 @@
     <title>Editorial Emphasis</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=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,800&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,800&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -85,8 +88,10 @@
 
       .word {
         display: inline-block;
-        color: #F5F0D0;
-        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+        color: #f5f0d0;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
         will-change: transform, opacity;
         backface-visibility: hidden;
       }
@@ -111,7 +116,7 @@
         font-weight: 800;
         font-style: italic;
         line-height: 0.9;
-        color: #F5F0D0;
+        color: #f5f0d0;
       }
     </style>
   </head>
@@ -149,49 +154,108 @@
 
       // Generic transcript words
       var W = [
-        {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}
+        { 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 },
       ];
 
       // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)
       // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)
       var BLOCKS = [
-        { line1: [[0,"n"],[1,"n"],[2,"n"]],       line2: [[3,"n"],[4,"n"]] },
-        { line1: [[5,"n"],[6,"n"]],               line2: [[7,"e"]] },
-        { line1: [[8,"e"]],                       line2: null },
-        { line1: [[9,"n"],[10,"n"],[11,"n"]],     line2: [[12,"e"]] },
-        { line1: [[13,"n"],[14,"n"]],             line2: [[15,"e"]] },
-        { line1: [[16,"n"],[17,"n"]],             line2: null },
-        { line1: [[18,"n"]],                      line2: [[19,"n"],[20,"n"]] },
-        { line1: [[21,"n"],[22,"n"]],             line2: null },
-        { line1: [[23,"i"],[24,"e"]],             line2: null },
-        { line1: [[25,"n"],[26,"n"]],             line2: [[27,"e"]] },
+        {
+          line1: [
+            [0, "n"],
+            [1, "n"],
+            [2, "n"],
+          ],
+          line2: [
+            [3, "n"],
+            [4, "n"],
+          ],
+        },
+        {
+          line1: [
+            [5, "n"],
+            [6, "n"],
+          ],
+          line2: [[7, "e"]],
+        },
+        { line1: [[8, "e"]], line2: null },
+        {
+          line1: [
+            [9, "n"],
+            [10, "n"],
+            [11, "n"],
+          ],
+          line2: [[12, "e"]],
+        },
+        {
+          line1: [
+            [13, "n"],
+            [14, "n"],
+          ],
+          line2: [[15, "e"]],
+        },
+        {
+          line1: [
+            [16, "n"],
+            [17, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [[18, "n"]],
+          line2: [
+            [19, "n"],
+            [20, "n"],
+          ],
+        },
+        {
+          line1: [
+            [21, "n"],
+            [22, "n"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [23, "i"],
+            [24, "e"],
+          ],
+          line2: null,
+        },
+        {
+          line1: [
+            [25, "n"],
+            [26, "n"],
+          ],
+          line2: [[27, "e"]],
+        },
       ];
 
       var CLASS_MAP = { n: "word word--normal", i: "word word--italic", e: "word word--emphasis" };
@@ -243,7 +307,9 @@
           el.style.position = "relative";
           var lines = el.querySelectorAll(".caption-line");
           var maxW = 0;
-          lines.forEach(function (line) { if (line.scrollWidth > maxW) maxW = line.scrollWidth; });
+          lines.forEach(function (line) {
+            if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+          });
           if (maxW > SAFE_WIDTH) {
             var s = SAFE_WIDTH / maxW;
             el.style.transform = "scale(" + s + ")";
@@ -256,27 +322,39 @@
       window.__timelines = window.__timelines || {};
       var tl = gsap.timeline({ paused: true });
 
-      var allEls = BLOCKS.map(function (_, i) { return document.getElementById("b" + i); });
+      var allEls = BLOCKS.map(function (_, i) {
+        return document.getElementById("b" + i);
+      });
 
-      function blockStart(bi) { return W[BLOCKS[bi].line1[0][0]].start; }
+      function blockStart(bi) {
+        return W[BLOCKS[bi].line1[0][0]].start;
+      }
 
       BLOCKS.forEach(function (block, bi) {
         var el = allEls[bi];
         var start = blockStart(bi);
         var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
 
-        allEls.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+        allEls.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
         tl.set(el, { opacity: 1 }, start);
 
         block.line1.forEach(function (pair, wi) {
           var wordEl = document.getElementById("b" + bi + "L1w" + wi);
           var wordStart = W[pair[0]].start;
           tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-          tl.to(wordEl, { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+          tl.to(
+            wordEl,
+            { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+            wordStart,
+          );
         });
 
         if (block.line2) {
-          var hasEmphasis = block.line2.some(function (p) { return p[1] === "e"; });
+          var hasEmphasis = block.line2.some(function (p) {
+            return p[1] === "e";
+          });
           var l2El = document.getElementById("b" + bi + "L2");
           if (hasEmphasis) {
             var l2Start = W[block.line2[0][0]].start;
@@ -288,7 +366,11 @@
               var wordEl = document.getElementById("b" + bi + "L2w" + wi);
               var wordStart = W[pair[0]].start;
               tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-              tl.to(wordEl, { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" }, wordStart);
+              tl.to(
+                wordEl,
+                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                wordStart,
+              );
             });
           }
         }
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index 10f4b9573..7f017d19c 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -6,7 +6,10 @@
     <title>Emoji Pop</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=Gabarito:wght@900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@900&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -155,67 +158,117 @@
       var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
       var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
       var TRANSITION_WORDS = new Set([
-        "the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
-        "to", "of", "in", "on", "at", "for", "with", "by", "from", "as",
-        "it", "its", "this", "that", "these", "those", "be", "been",
-        "have", "has", "had", "do", "does", "did", "will", "would", "could",
-        "should", "may", "might", "must", "can", "if", "then", "so", "just",
-        "not", "no", "yes", "up", "out", "about"
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
       ]);
 
       // Emoji map for key words
       var WORD_EMOJI = {
-        "hyperframes": "🎬",
-        "html": "💻",
-        "professional": "✨",
-        "code": "⌨️",
-        "cinema": "🎥",
-        "video": "📹",
-        "frame": "🖼️"
+        hyperframes: "🎬",
+        html: "💻",
+        professional: "✨",
+        code: "⌨️",
+        cinema: "🎥",
+        video: "📹",
+        frame: "🖼️",
       };
 
       var TRANSCRIPT = [
-        {"text": "Every", "start": 0.0, "end": 0.3},
-        {"text": "great", "start": 0.3, "end": 0.55},
-        {"text": "video", "start": 0.55, "end": 0.85},
-        {"text": "starts", "start": 0.85, "end": 1.1},
-        {"text": "with", "start": 1.1, "end": 1.25},
-        {"text": "a", "start": 1.25, "end": 1.35},
-        {"text": "single", "start": 1.35, "end": 1.65},
-        {"text": "frame.", "start": 1.65, "end": 2.0},
-        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
-        {"text": "lets", "start": 2.65, "end": 2.85},
-        {"text": "you", "start": 2.85, "end": 2.95},
-        {"text": "write", "start": 2.95, "end": 3.15},
-        {"text": "HTML", "start": 3.15, "end": 3.55},
-        {"text": "and", "start": 3.55, "end": 3.65},
-        {"text": "render", "start": 3.65, "end": 3.95},
-        {"text": "professional", "start": 3.95, "end": 4.45},
-        {"text": "video.", "start": 4.45, "end": 4.8},
-        {"text": "No", "start": 4.9, "end": 5.05},
-        {"text": "timeline.", "start": 5.05, "end": 5.45},
-        {"text": "No", "start": 5.5, "end": 5.65},
-        {"text": "drag", "start": 5.65, "end": 5.85},
-        {"text": "and", "start": 5.85, "end": 5.95},
-        {"text": "drop.", "start": 5.95, "end": 6.25},
-        {"text": "Just", "start": 6.35, "end": 6.55},
-        {"text": "code", "start": 6.55, "end": 6.8},
-        {"text": "that", "start": 6.8, "end": 6.95},
-        {"text": "becomes", "start": 6.95, "end": 7.3},
-        {"text": "cinema.", "start": 7.3, "end": 7.7}
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
       ];
 
       function normalizeWords(rawWords) {
-        return rawWords.map(function (item) {
-          var text = String(item.word || item.text || "").trim();
-          var clean = text.toLowerCase().replace(/[^a-z]/g, "");
-          return {
-            text: text,
-            start: Math.max(0, Number(item.start) || 0),
-            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-            emoji: WORD_EMOJI[clean] || null,
-          };
-        }).filter(function (word) { return word.text.length > 0; });
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              emoji: WORD_EMOJI[clean] || null,
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
       }
 
       function seededRandom(seed) {
@@ -272,7 +325,12 @@
           current.push(word);
           var punctuation = /[,.:!?]$/.test(word.text);
           var pause = nextWord ? nextWord.start - word.end : 0;
-          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
             groups.push(makeGroup(current, groups.length));
             current = [];
           }
@@ -285,9 +343,18 @@
         var colors = assignWordColors(words, groupIndex);
         var emoji = null;
         for (var i = 0; i < words.length; i++) {
-          if (words[i].emoji) { emoji = words[i].emoji; break; }
+          if (words[i].emoji) {
+            emoji = words[i].emoji;
+            break;
+          }
         }
-        return { words: words.slice(), colors: colors, emoji: emoji, start: words[0].start, end: words[words.length - 1].end };
+        return {
+          words: words.slice(),
+          colors: colors,
+          emoji: emoji,
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
       }
 
       function shadowForColor(color) {
@@ -295,7 +362,21 @@
         var r = parseInt(hex.slice(0, 2), 16);
         var g = parseInt(hex.slice(2, 4), 16);
         var b = parseInt(hex.slice(4, 6), 16);
-        return "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" + r + "," + g + "," + b + ",1), 0 0 8px rgba(" + r + "," + g + "," + b + ",0.6)";
+        return (
+          "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 8px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.6)"
+        );
       }
 
       function buildCaptions(groups) {
@@ -343,7 +424,9 @@
         return Math.max(0, group.start - entryLead);
       });
 
-      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
 
       GROUPS.forEach(function (group, groupIndex) {
         var groupEl = allGroupEls[groupIndex];
@@ -356,8 +439,16 @@
         });
 
         tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
-        tl.to(groupEl, { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
-        tl.to(groupEl, { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true }, exitStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
+          exitStart,
+        );
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
diff --git a/registry/components/caption-emoji-pop/demo.html b/registry/components/caption-emoji-pop/demo.html
index 10f4b9573..7f017d19c 100644
--- a/registry/components/caption-emoji-pop/demo.html
+++ b/registry/components/caption-emoji-pop/demo.html
@@ -6,7 +6,10 @@
     <title>Emoji Pop</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=Gabarito:wght@900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@900&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -155,67 +158,117 @@
       var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
       var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
       var TRANSITION_WORDS = new Set([
-        "the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
-        "to", "of", "in", "on", "at", "for", "with", "by", "from", "as",
-        "it", "its", "this", "that", "these", "those", "be", "been",
-        "have", "has", "had", "do", "does", "did", "will", "would", "could",
-        "should", "may", "might", "must", "can", "if", "then", "so", "just",
-        "not", "no", "yes", "up", "out", "about"
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
       ]);
 
       // Emoji map for key words
       var WORD_EMOJI = {
-        "hyperframes": "🎬",
-        "html": "💻",
-        "professional": "✨",
-        "code": "⌨️",
-        "cinema": "🎥",
-        "video": "📹",
-        "frame": "🖼️"
+        hyperframes: "🎬",
+        html: "💻",
+        professional: "✨",
+        code: "⌨️",
+        cinema: "🎥",
+        video: "📹",
+        frame: "🖼️",
       };
 
       var TRANSCRIPT = [
-        {"text": "Every", "start": 0.0, "end": 0.3},
-        {"text": "great", "start": 0.3, "end": 0.55},
-        {"text": "video", "start": 0.55, "end": 0.85},
-        {"text": "starts", "start": 0.85, "end": 1.1},
-        {"text": "with", "start": 1.1, "end": 1.25},
-        {"text": "a", "start": 1.25, "end": 1.35},
-        {"text": "single", "start": 1.35, "end": 1.65},
-        {"text": "frame.", "start": 1.65, "end": 2.0},
-        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
-        {"text": "lets", "start": 2.65, "end": 2.85},
-        {"text": "you", "start": 2.85, "end": 2.95},
-        {"text": "write", "start": 2.95, "end": 3.15},
-        {"text": "HTML", "start": 3.15, "end": 3.55},
-        {"text": "and", "start": 3.55, "end": 3.65},
-        {"text": "render", "start": 3.65, "end": 3.95},
-        {"text": "professional", "start": 3.95, "end": 4.45},
-        {"text": "video.", "start": 4.45, "end": 4.8},
-        {"text": "No", "start": 4.9, "end": 5.05},
-        {"text": "timeline.", "start": 5.05, "end": 5.45},
-        {"text": "No", "start": 5.5, "end": 5.65},
-        {"text": "drag", "start": 5.65, "end": 5.85},
-        {"text": "and", "start": 5.85, "end": 5.95},
-        {"text": "drop.", "start": 5.95, "end": 6.25},
-        {"text": "Just", "start": 6.35, "end": 6.55},
-        {"text": "code", "start": 6.55, "end": 6.8},
-        {"text": "that", "start": 6.8, "end": 6.95},
-        {"text": "becomes", "start": 6.95, "end": 7.3},
-        {"text": "cinema.", "start": 7.3, "end": 7.7}
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
       ];
 
       function normalizeWords(rawWords) {
-        return rawWords.map(function (item) {
-          var text = String(item.word || item.text || "").trim();
-          var clean = text.toLowerCase().replace(/[^a-z]/g, "");
-          return {
-            text: text,
-            start: Math.max(0, Number(item.start) || 0),
-            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-            emoji: WORD_EMOJI[clean] || null,
-          };
-        }).filter(function (word) { return word.text.length > 0; });
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              emoji: WORD_EMOJI[clean] || null,
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
       }
 
       function seededRandom(seed) {
@@ -272,7 +325,12 @@
           current.push(word);
           var punctuation = /[,.:!?]$/.test(word.text);
           var pause = nextWord ? nextWord.start - word.end : 0;
-          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
             groups.push(makeGroup(current, groups.length));
             current = [];
           }
@@ -285,9 +343,18 @@
         var colors = assignWordColors(words, groupIndex);
         var emoji = null;
         for (var i = 0; i < words.length; i++) {
-          if (words[i].emoji) { emoji = words[i].emoji; break; }
+          if (words[i].emoji) {
+            emoji = words[i].emoji;
+            break;
+          }
         }
-        return { words: words.slice(), colors: colors, emoji: emoji, start: words[0].start, end: words[words.length - 1].end };
+        return {
+          words: words.slice(),
+          colors: colors,
+          emoji: emoji,
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
       }
 
       function shadowForColor(color) {
@@ -295,7 +362,21 @@
         var r = parseInt(hex.slice(0, 2), 16);
         var g = parseInt(hex.slice(2, 4), 16);
         var b = parseInt(hex.slice(4, 6), 16);
-        return "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" + r + "," + g + "," + b + ",1), 0 0 8px rgba(" + r + "," + g + "," + b + ",0.6)";
+        return (
+          "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 8px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.6)"
+        );
       }
 
       function buildCaptions(groups) {
@@ -343,7 +424,9 @@
         return Math.max(0, group.start - entryLead);
       });
 
-      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
 
       GROUPS.forEach(function (group, groupIndex) {
         var groupEl = allGroupEls[groupIndex];
@@ -356,8 +439,16 @@
         });
 
         tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
-        tl.to(groupEl, { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
-        tl.to(groupEl, { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true }, exitStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: "power2.in", force3D: true },
+          exitStart,
+        );
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
diff --git a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
index 8b6758751..307113d4c 100644
--- a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
+++ b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
@@ -6,50 +6,89 @@
     <title>Glitch RGB</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=Space+Grotesk:wght@700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body {
-        width: 1920px; height: 1080px; margin: 0;
-        overflow: hidden; background: #0a0a0a;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #glitch-rgb {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #gl-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .gl-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
       }
       .gl-scanlines {
-        position: absolute; inset: 0; z-index: 5; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        pointer-events: none;
         background: repeating-linear-gradient(
           to bottom,
-          transparent 0px, transparent 3px,
-          rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
+          transparent 0px,
+          transparent 3px,
+          rgba(0, 0, 0, 0.08) 3px,
+          rgba(0, 0, 0, 0.08) 4px
         );
       }
       #gl-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .gl-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 100px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
       }
       .gl-word {
-        font-family: 'Space Grotesk', sans-serif;
-        font-weight: 700; font-size: 88px;
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 88px;
         text-transform: uppercase;
-        color: rgba(180,230,255,0.45);
-        display: inline-block; letter-spacing: 0.05em; line-height: 1;
+        color: rgba(180, 230, 255, 0.45);
+        display: inline-block;
+        letter-spacing: 0.05em;
+        line-height: 1;
         will-change: transform, text-shadow, color;
       }
     </style>
@@ -64,124 +103,190 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="gl-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="gl-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="gl-overlay"></div>
       <div class="gl-scanlines"></div>
       <div id="gl-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-      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 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 },
+        ];
 
-      // Keywords get white + glow on activation
-      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        // Keywords get white + glow on activation
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      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.35, nextStart - 0.05);
-        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
-      });
+        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.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
 
-      var BASE_FONT = 88;
-      var container = document.getElementById('gl-container');
-      var tl = gsap.timeline({ paused: true });
+        var BASE_FONT = 88;
+        var container = document.getElementById("gl-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 = 'gl-group';
-        grp.id = 'gl-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "gl-group";
+          grp.id = "gl-grp-" + gi;
 
-        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';
-          grp.appendChild(span);
-        });
+          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";
+            grp.appendChild(span);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible' }, g.start);
-        tl.fromTo(grp,
-          { opacity: 0, x: -8 },
-          { opacity: 1, x: 0, duration: 0.18, ease: 'power3.out' },
-          g.start
-        );
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, x: -8 },
+            { opacity: 1, x: 0, duration: 0.18, ease: "power3.out" },
+            g.start,
+          );
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          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 sm = shadowMag.toFixed(1);
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            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 sm = shadowMag.toFixed(1);
 
-          tl.to(wordEl, { x: j1, color: '#ffffff', textShadow: sm + 'px 0 #ff003c, -' + sm + 'px 0 #00e5ff', duration: 0.045, ease: 'none' }, w.start);
-          tl.to(wordEl, { x: j2, textShadow: '-' + (shadowMag * 0.7).toFixed(1) + 'px 0 #ff003c, ' + (shadowMag * 0.7).toFixed(1) + 'px 0 #00e5ff', duration: 0.038, ease: 'none' }, w.start + 0.045);
-          tl.to(wordEl, { x: j3, textShadow: sm + 'px 0 #ff003c, -' + sm + 'px 0 #00e5ff', duration: 0.03, ease: 'none' }, w.start + 0.083);
-          tl.to(wordEl, { x: 0, textShadow: 'none', color: isKW ? '#ffffff' : '#00e5ff', duration: 0.05, ease: 'power2.out' }, w.start + 0.113);
-          tl.to(wordEl, { color: 'rgba(180,230,255,0.4)', textShadow: 'none', duration: 0.12 }, w.end);
-        });
+            tl.to(
+              wordEl,
+              {
+                x: j1,
+                color: "#ffffff",
+                textShadow: sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff",
+                duration: 0.045,
+                ease: "none",
+              },
+              w.start,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: j2,
+                textShadow:
+                  "-" +
+                  (shadowMag * 0.7).toFixed(1) +
+                  "px 0 #ff003c, " +
+                  (shadowMag * 0.7).toFixed(1) +
+                  "px 0 #00e5ff",
+                duration: 0.038,
+                ease: "none",
+              },
+              w.start + 0.045,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: j3,
+                textShadow: sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff",
+                duration: 0.03,
+                ease: "none",
+              },
+              w.start + 0.083,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: 0,
+                textShadow: "none",
+                color: isKW ? "#ffffff" : "#00e5ff",
+                duration: 0.05,
+                ease: "power2.out",
+              },
+              w.start + 0.113,
+            );
+            tl.to(
+              wordEl,
+              { color: "rgba(180,230,255,0.4)", textShadow: "none", duration: 0.12 },
+              w.end,
+            );
+          });
 
-        tl.to(grp, { opacity: 0, x: 8, duration: 0.15 }, g.end - 0.15);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+          tl.to(grp, { opacity: 0, x: 8, duration: 0.15 }, g.end - 0.15);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      tl.seek(0);
-      window.__timelines['glitch-rgb'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["glitch-rgb"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-glitch-rgb/demo.html b/registry/components/caption-glitch-rgb/demo.html
index 8b6758751..307113d4c 100644
--- a/registry/components/caption-glitch-rgb/demo.html
+++ b/registry/components/caption-glitch-rgb/demo.html
@@ -6,50 +6,89 @@
     <title>Glitch RGB</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=Space+Grotesk:wght@700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body {
-        width: 1920px; height: 1080px; margin: 0;
-        overflow: hidden; background: #0a0a0a;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #glitch-rgb {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #gl-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .gl-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
       }
       .gl-scanlines {
-        position: absolute; inset: 0; z-index: 5; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        pointer-events: none;
         background: repeating-linear-gradient(
           to bottom,
-          transparent 0px, transparent 3px,
-          rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
+          transparent 0px,
+          transparent 3px,
+          rgba(0, 0, 0, 0.08) 3px,
+          rgba(0, 0, 0, 0.08) 4px
         );
       }
       #gl-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .gl-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 100px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
       }
       .gl-word {
-        font-family: 'Space Grotesk', sans-serif;
-        font-weight: 700; font-size: 88px;
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 88px;
         text-transform: uppercase;
-        color: rgba(180,230,255,0.45);
-        display: inline-block; letter-spacing: 0.05em; line-height: 1;
+        color: rgba(180, 230, 255, 0.45);
+        display: inline-block;
+        letter-spacing: 0.05em;
+        line-height: 1;
         will-change: transform, text-shadow, color;
       }
     </style>
@@ -64,124 +103,190 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="gl-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="gl-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="gl-overlay"></div>
       <div class="gl-scanlines"></div>
       <div id="gl-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-      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 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 },
+        ];
 
-      // Keywords get white + glow on activation
-      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        // Keywords get white + glow on activation
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      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.35, nextStart - 0.05);
-        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
-      });
+        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.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
+        });
 
-      var BASE_FONT = 88;
-      var container = document.getElementById('gl-container');
-      var tl = gsap.timeline({ paused: true });
+        var BASE_FONT = 88;
+        var container = document.getElementById("gl-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 = 'gl-group';
-        grp.id = 'gl-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "gl-group";
+          grp.id = "gl-grp-" + gi;
 
-        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';
-          grp.appendChild(span);
-        });
+          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";
+            grp.appendChild(span);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible' }, g.start);
-        tl.fromTo(grp,
-          { opacity: 0, x: -8 },
-          { opacity: 1, x: 0, duration: 0.18, ease: 'power3.out' },
-          g.start
-        );
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, x: -8 },
+            { opacity: 1, x: 0, duration: 0.18, ease: "power3.out" },
+            g.start,
+          );
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          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 sm = shadowMag.toFixed(1);
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            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 sm = shadowMag.toFixed(1);
 
-          tl.to(wordEl, { x: j1, color: '#ffffff', textShadow: sm + 'px 0 #ff003c, -' + sm + 'px 0 #00e5ff', duration: 0.045, ease: 'none' }, w.start);
-          tl.to(wordEl, { x: j2, textShadow: '-' + (shadowMag * 0.7).toFixed(1) + 'px 0 #ff003c, ' + (shadowMag * 0.7).toFixed(1) + 'px 0 #00e5ff', duration: 0.038, ease: 'none' }, w.start + 0.045);
-          tl.to(wordEl, { x: j3, textShadow: sm + 'px 0 #ff003c, -' + sm + 'px 0 #00e5ff', duration: 0.03, ease: 'none' }, w.start + 0.083);
-          tl.to(wordEl, { x: 0, textShadow: 'none', color: isKW ? '#ffffff' : '#00e5ff', duration: 0.05, ease: 'power2.out' }, w.start + 0.113);
-          tl.to(wordEl, { color: 'rgba(180,230,255,0.4)', textShadow: 'none', duration: 0.12 }, w.end);
-        });
+            tl.to(
+              wordEl,
+              {
+                x: j1,
+                color: "#ffffff",
+                textShadow: sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff",
+                duration: 0.045,
+                ease: "none",
+              },
+              w.start,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: j2,
+                textShadow:
+                  "-" +
+                  (shadowMag * 0.7).toFixed(1) +
+                  "px 0 #ff003c, " +
+                  (shadowMag * 0.7).toFixed(1) +
+                  "px 0 #00e5ff",
+                duration: 0.038,
+                ease: "none",
+              },
+              w.start + 0.045,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: j3,
+                textShadow: sm + "px 0 #ff003c, -" + sm + "px 0 #00e5ff",
+                duration: 0.03,
+                ease: "none",
+              },
+              w.start + 0.083,
+            );
+            tl.to(
+              wordEl,
+              {
+                x: 0,
+                textShadow: "none",
+                color: isKW ? "#ffffff" : "#00e5ff",
+                duration: 0.05,
+                ease: "power2.out",
+              },
+              w.start + 0.113,
+            );
+            tl.to(
+              wordEl,
+              { color: "rgba(180,230,255,0.4)", textShadow: "none", duration: 0.12 },
+              w.end,
+            );
+          });
 
-        tl.to(grp, { opacity: 0, x: 8, duration: 0.15 }, g.end - 0.15);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+          tl.to(grp, { opacity: 0, x: 8, duration: 0.15 }, g.end - 0.15);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      tl.seek(0);
-      window.__timelines['glitch-rgb'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["glitch-rgb"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html
index cd34918b4..92bb8f3da 100644
--- a/registry/components/caption-gradient-fill/caption-gradient-fill.html
+++ b/registry/components/caption-gradient-fill/caption-gradient-fill.html
@@ -6,40 +6,74 @@
     <title>Gradient Fill</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=Nunito:wght@900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&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;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #gradient-fill {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #gr-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .gr-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.42); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.42);
+        z-index: 1;
+        pointer-events: none;
       }
       #gr-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .gr-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 80px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
       }
       .gr-word {
-        font-family: 'Nunito', sans-serif;
-        font-weight: 900; font-size: 100px;
-        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        font-family: "Nunito", sans-serif;
+        font-weight: 900;
+        font-size: 100px;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
@@ -57,131 +91,139 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="gr-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="gr-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="gr-overlay"></div>
       <div id="gr-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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 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 GROUPS = [
-        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
-        {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},
-      ];
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { 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 },
+        ];
 
-      // Enhanced gradient palette with accent for keywords
-      var GRADS = [
-        "linear-gradient(135deg,#FF6B6B,#FFD700)",
-        "linear-gradient(135deg,#4ADE80,#22D3EE)",
-        "linear-gradient(135deg,#818CF8,#E879F9)",
-        "linear-gradient(135deg,#FFD700,#FF6B35)",
-        "linear-gradient(135deg,#22D3EE,#4ADE80)",
-        "linear-gradient(135deg,#E879F9,#818CF8)",
-        "linear-gradient(135deg,#FF3366,#FF6B35)"
-      ];
-      var KEYWORD_GRADS = {
-        8:  "linear-gradient(135deg,#FF6B6B,#FFD700,#FF6B6B)", // HyperFrames
-        12: "linear-gradient(135deg,#22D3EE,#ffffff,#22D3EE)",  // HTML
-        15: "linear-gradient(135deg,#818CF8,#E879F9,#818CF8)",  // professional
-        24: "linear-gradient(135deg,#00F5D4,#22D3EE,#00F5D4)",  // code
-        27: "linear-gradient(135deg,#FFD700,#FF6B35,#FFD700)"   // cinema.
-      };
+        // Enhanced gradient palette with accent for keywords
+        var GRADS = [
+          "linear-gradient(135deg,#FF6B6B,#FFD700)",
+          "linear-gradient(135deg,#4ADE80,#22D3EE)",
+          "linear-gradient(135deg,#818CF8,#E879F9)",
+          "linear-gradient(135deg,#FFD700,#FF6B35)",
+          "linear-gradient(135deg,#22D3EE,#4ADE80)",
+          "linear-gradient(135deg,#E879F9,#818CF8)",
+          "linear-gradient(135deg,#FF3366,#FF6B35)",
+        ];
+        var KEYWORD_GRADS = {
+          8: "linear-gradient(135deg,#FF6B6B,#FFD700,#FF6B6B)", // HyperFrames
+          12: "linear-gradient(135deg,#22D3EE,#ffffff,#22D3EE)", // HTML
+          15: "linear-gradient(135deg,#818CF8,#E879F9,#818CF8)", // professional
+          24: "linear-gradient(135deg,#00F5D4,#22D3EE,#00F5D4)", // code
+          27: "linear-gradient(135deg,#FFD700,#FF6B35,#FFD700)", // cinema.
+        };
 
-      var container = document.getElementById('gr-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("gr-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 = 'gr-group';
-        grp.id = 'gr-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "gr-group";
+          grp.id = "gr-grp-" + gi;
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var span = document.createElement('span');
-          span.className = 'gr-word';
-          span.id = 'gr-w-' + wi;
-          span.textContent = w.text;
-          span.style.fontSize = '100px';
-          var grad = KEYWORD_GRADS[wi] || GRADS[wi % 7];
-          span.style.background = grad;
-          span.style.webkitBackgroundClip = 'text';
-          span.style.backgroundClip = 'text';
-          span.style.color = 'transparent';
-          grp.appendChild(span);
-        });
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "gr-word";
+            span.id = "gr-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = "100px";
+            var grad = KEYWORD_GRADS[wi] || GRADS[wi % 7];
+            span.style.background = grad;
+            span.style.webkitBackgroundClip = "text";
+            span.style.backgroundClip = "text";
+            span.style.color = "transparent";
+            grp.appendChild(span);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        var gs = g.start;
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var el = document.getElementById('gr-w-' + wi);
-          tl.set(el, { opacity: 0, y: 55, scale: 0.35 }, gs);
-          tl.fromTo(el,
-            { y: 55, scale: 0.35, opacity: 0 },
-            { y: 0, scale: 1, opacity: 0.35, duration: 0.55, ease: 'elastic.out(1.6,0.4)' },
-            gs + i * 0.05
-          );
-        });
+          var gs = g.start;
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("gr-w-" + wi);
+            tl.set(el, { opacity: 0, y: 55, scale: 0.35 }, gs);
+            tl.fromTo(
+              el,
+              { y: 55, scale: 0.35, opacity: 0 },
+              { y: 0, scale: 1, opacity: 0.35, duration: 0.55, ease: "elastic.out(1.6,0.4)" },
+              gs + i * 0.05,
+            );
+          });
 
-        tl.set(grp, { visibility: 'visible', opacity: 1 }, gs);
+          tl.set(grp, { visibility: "visible", opacity: 1 }, gs);
 
-        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);
-        });
+          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(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+          tl.to(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      window.__timelines['gradient-fill'] = tl;
-    })();
+        window.__timelines["gradient-fill"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-gradient-fill/demo.html b/registry/components/caption-gradient-fill/demo.html
index cd34918b4..92bb8f3da 100644
--- a/registry/components/caption-gradient-fill/demo.html
+++ b/registry/components/caption-gradient-fill/demo.html
@@ -6,40 +6,74 @@
     <title>Gradient Fill</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=Nunito:wght@900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&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;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #gradient-fill {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #gr-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .gr-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.42); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.42);
+        z-index: 1;
+        pointer-events: none;
       }
       #gr-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .gr-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 80px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
       }
       .gr-word {
-        font-family: 'Nunito', sans-serif;
-        font-weight: 900; font-size: 100px;
-        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        font-family: "Nunito", sans-serif;
+        font-weight: 900;
+        font-size: 100px;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
         -webkit-background-clip: text;
         background-clip: text;
         color: transparent;
@@ -57,131 +91,139 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="gr-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="gr-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="gr-overlay"></div>
       <div id="gr-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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 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 GROUPS = [
-        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
-        {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},
-      ];
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { 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 },
+        ];
 
-      // Enhanced gradient palette with accent for keywords
-      var GRADS = [
-        "linear-gradient(135deg,#FF6B6B,#FFD700)",
-        "linear-gradient(135deg,#4ADE80,#22D3EE)",
-        "linear-gradient(135deg,#818CF8,#E879F9)",
-        "linear-gradient(135deg,#FFD700,#FF6B35)",
-        "linear-gradient(135deg,#22D3EE,#4ADE80)",
-        "linear-gradient(135deg,#E879F9,#818CF8)",
-        "linear-gradient(135deg,#FF3366,#FF6B35)"
-      ];
-      var KEYWORD_GRADS = {
-        8:  "linear-gradient(135deg,#FF6B6B,#FFD700,#FF6B6B)", // HyperFrames
-        12: "linear-gradient(135deg,#22D3EE,#ffffff,#22D3EE)",  // HTML
-        15: "linear-gradient(135deg,#818CF8,#E879F9,#818CF8)",  // professional
-        24: "linear-gradient(135deg,#00F5D4,#22D3EE,#00F5D4)",  // code
-        27: "linear-gradient(135deg,#FFD700,#FF6B35,#FFD700)"   // cinema.
-      };
+        // Enhanced gradient palette with accent for keywords
+        var GRADS = [
+          "linear-gradient(135deg,#FF6B6B,#FFD700)",
+          "linear-gradient(135deg,#4ADE80,#22D3EE)",
+          "linear-gradient(135deg,#818CF8,#E879F9)",
+          "linear-gradient(135deg,#FFD700,#FF6B35)",
+          "linear-gradient(135deg,#22D3EE,#4ADE80)",
+          "linear-gradient(135deg,#E879F9,#818CF8)",
+          "linear-gradient(135deg,#FF3366,#FF6B35)",
+        ];
+        var KEYWORD_GRADS = {
+          8: "linear-gradient(135deg,#FF6B6B,#FFD700,#FF6B6B)", // HyperFrames
+          12: "linear-gradient(135deg,#22D3EE,#ffffff,#22D3EE)", // HTML
+          15: "linear-gradient(135deg,#818CF8,#E879F9,#818CF8)", // professional
+          24: "linear-gradient(135deg,#00F5D4,#22D3EE,#00F5D4)", // code
+          27: "linear-gradient(135deg,#FFD700,#FF6B35,#FFD700)", // cinema.
+        };
 
-      var container = document.getElementById('gr-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("gr-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 = 'gr-group';
-        grp.id = 'gr-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "gr-group";
+          grp.id = "gr-grp-" + gi;
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var span = document.createElement('span');
-          span.className = 'gr-word';
-          span.id = 'gr-w-' + wi;
-          span.textContent = w.text;
-          span.style.fontSize = '100px';
-          var grad = KEYWORD_GRADS[wi] || GRADS[wi % 7];
-          span.style.background = grad;
-          span.style.webkitBackgroundClip = 'text';
-          span.style.backgroundClip = 'text';
-          span.style.color = 'transparent';
-          grp.appendChild(span);
-        });
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "gr-word";
+            span.id = "gr-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = "100px";
+            var grad = KEYWORD_GRADS[wi] || GRADS[wi % 7];
+            span.style.background = grad;
+            span.style.webkitBackgroundClip = "text";
+            span.style.backgroundClip = "text";
+            span.style.color = "transparent";
+            grp.appendChild(span);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        var gs = g.start;
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var el = document.getElementById('gr-w-' + wi);
-          tl.set(el, { opacity: 0, y: 55, scale: 0.35 }, gs);
-          tl.fromTo(el,
-            { y: 55, scale: 0.35, opacity: 0 },
-            { y: 0, scale: 1, opacity: 0.35, duration: 0.55, ease: 'elastic.out(1.6,0.4)' },
-            gs + i * 0.05
-          );
-        });
+          var gs = g.start;
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("gr-w-" + wi);
+            tl.set(el, { opacity: 0, y: 55, scale: 0.35 }, gs);
+            tl.fromTo(
+              el,
+              { y: 55, scale: 0.35, opacity: 0 },
+              { y: 0, scale: 1, opacity: 0.35, duration: 0.55, ease: "elastic.out(1.6,0.4)" },
+              gs + i * 0.05,
+            );
+          });
 
-        tl.set(grp, { visibility: 'visible', opacity: 1 }, gs);
+          tl.set(grp, { visibility: "visible", opacity: 1 }, gs);
 
-        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);
-        });
+          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(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+          tl.to(grp, { y: -26, opacity: 0, duration: 0.18 }, g.end - 0.18);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      window.__timelines['gradient-fill'] = tl;
-    })();
+        window.__timelines["gradient-fill"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
index 11a70bc3d..6a7c826fc 100644
--- a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
+++ b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
@@ -9,35 +9,61 @@
     <link href="https://fonts.googleapis.com/css2?family=Anton&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;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #kinetic-slam {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #kt-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .kt-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
       }
       #kt-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .kt-word {
-        font-family: 'Anton', sans-serif;
+        font-family: "Anton", sans-serif;
         font-weight: 400;
         text-transform: uppercase;
         color: #ffffff;
-        position: absolute; left: 0; width: 100%;
-        text-align: center; top: 50%;
-        letter-spacing: 0.04em; line-height: 1;
-        opacity: 0; visibility: hidden;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        opacity: 0;
+        visibility: hidden;
       }
     </style>
   </head>
@@ -51,107 +77,119 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="kt-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="kt-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="kt-overlay"></div>
       <div id="kt-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-      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 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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      var container = document.getElementById('kt-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("kt-container");
+        var tl = gsap.timeline({ paused: true });
 
-      WORDS.forEach(function(w, wi) {
-        var el = document.createElement('div');
-        el.className = 'kt-word';
-        el.id = 'kt-w-' + wi;
-        el.textContent = w.text.toUpperCase();
-        el.style.fontSize = '220px';
-        if (KEYWORDS.has(wi)) el.style.color = '#FFD700';
-        container.appendChild(el);
+        WORDS.forEach(function (w, wi) {
+          var el = document.createElement("div");
+          el.className = "kt-word";
+          el.id = "kt-w-" + wi;
+          el.textContent = w.text.toUpperCase();
+          el.style.fontSize = "220px";
+          if (KEYWORDS.has(wi)) el.style.color = "#FFD700";
+          container.appendChild(el);
 
-        gsap.set(el, { yPercent: -50 });
+          gsap.set(el, { yPercent: -50 });
 
-        var entranceMode = wi % 4;
-        tl.set(el, { visibility: 'visible' }, w.start);
-        if (entranceMode === 0) {
-          tl.fromTo(el,
-            { y: -120, opacity: 0 },
-            { y: 0, opacity: 1, duration: 0.22, ease: 'back.out(1.7)' },
-            w.start
-          );
-        } else if (entranceMode === 1) {
-          tl.fromTo(el,
-            { x: -300, opacity: 0 },
-            { x: 0, opacity: 1, duration: 0.2, ease: 'expo.out' },
-            w.start
-          );
-        } else if (entranceMode === 2) {
-          tl.fromTo(el,
-            { x: 300, opacity: 0 },
-            { x: 0, opacity: 1, duration: 0.2, ease: 'expo.out' },
-            w.start
-          );
-        } else {
-          tl.fromTo(el,
-            { scale: 0.4, opacity: 0 },
-            { scale: 1, opacity: 1, duration: 0.24, ease: 'back.out(2.2)' },
-            w.start
-          );
-        }
+          var entranceMode = wi % 4;
+          tl.set(el, { visibility: "visible" }, w.start);
+          if (entranceMode === 0) {
+            tl.fromTo(
+              el,
+              { y: -120, opacity: 0 },
+              { y: 0, opacity: 1, duration: 0.22, ease: "back.out(1.7)" },
+              w.start,
+            );
+          } else if (entranceMode === 1) {
+            tl.fromTo(
+              el,
+              { x: -300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else if (entranceMode === 2) {
+            tl.fromTo(
+              el,
+              { x: 300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else {
+            tl.fromTo(
+              el,
+              { scale: 0.4, opacity: 0 },
+              { scale: 1, opacity: 1, duration: 0.24, ease: "back.out(2.2)" },
+              w.start,
+            );
+          }
 
-        tl.to(el, { opacity: 0, duration: 0.1, ease: 'power2.in' }, w.end);
-        tl.set(el, { opacity: 0, visibility: 'hidden' }, w.end + 0.1);
-      });
+          tl.to(el, { opacity: 0, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(el, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
 
-      tl.seek(0);
-      window.__timelines['kinetic-slam'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["kinetic-slam"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-kinetic-slam/demo.html b/registry/components/caption-kinetic-slam/demo.html
index 11a70bc3d..6a7c826fc 100644
--- a/registry/components/caption-kinetic-slam/demo.html
+++ b/registry/components/caption-kinetic-slam/demo.html
@@ -9,35 +9,61 @@
     <link href="https://fonts.googleapis.com/css2?family=Anton&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;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #kinetic-slam {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #kt-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .kt-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
       }
       #kt-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .kt-word {
-        font-family: 'Anton', sans-serif;
+        font-family: "Anton", sans-serif;
         font-weight: 400;
         text-transform: uppercase;
         color: #ffffff;
-        position: absolute; left: 0; width: 100%;
-        text-align: center; top: 50%;
-        letter-spacing: 0.04em; line-height: 1;
-        opacity: 0; visibility: hidden;
+        position: absolute;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        top: 50%;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        opacity: 0;
+        visibility: hidden;
       }
     </style>
   </head>
@@ -51,107 +77,119 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="kt-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="kt-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="kt-overlay"></div>
       <div id="kt-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
 
-      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 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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      var container = document.getElementById('kt-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("kt-container");
+        var tl = gsap.timeline({ paused: true });
 
-      WORDS.forEach(function(w, wi) {
-        var el = document.createElement('div');
-        el.className = 'kt-word';
-        el.id = 'kt-w-' + wi;
-        el.textContent = w.text.toUpperCase();
-        el.style.fontSize = '220px';
-        if (KEYWORDS.has(wi)) el.style.color = '#FFD700';
-        container.appendChild(el);
+        WORDS.forEach(function (w, wi) {
+          var el = document.createElement("div");
+          el.className = "kt-word";
+          el.id = "kt-w-" + wi;
+          el.textContent = w.text.toUpperCase();
+          el.style.fontSize = "220px";
+          if (KEYWORDS.has(wi)) el.style.color = "#FFD700";
+          container.appendChild(el);
 
-        gsap.set(el, { yPercent: -50 });
+          gsap.set(el, { yPercent: -50 });
 
-        var entranceMode = wi % 4;
-        tl.set(el, { visibility: 'visible' }, w.start);
-        if (entranceMode === 0) {
-          tl.fromTo(el,
-            { y: -120, opacity: 0 },
-            { y: 0, opacity: 1, duration: 0.22, ease: 'back.out(1.7)' },
-            w.start
-          );
-        } else if (entranceMode === 1) {
-          tl.fromTo(el,
-            { x: -300, opacity: 0 },
-            { x: 0, opacity: 1, duration: 0.2, ease: 'expo.out' },
-            w.start
-          );
-        } else if (entranceMode === 2) {
-          tl.fromTo(el,
-            { x: 300, opacity: 0 },
-            { x: 0, opacity: 1, duration: 0.2, ease: 'expo.out' },
-            w.start
-          );
-        } else {
-          tl.fromTo(el,
-            { scale: 0.4, opacity: 0 },
-            { scale: 1, opacity: 1, duration: 0.24, ease: 'back.out(2.2)' },
-            w.start
-          );
-        }
+          var entranceMode = wi % 4;
+          tl.set(el, { visibility: "visible" }, w.start);
+          if (entranceMode === 0) {
+            tl.fromTo(
+              el,
+              { y: -120, opacity: 0 },
+              { y: 0, opacity: 1, duration: 0.22, ease: "back.out(1.7)" },
+              w.start,
+            );
+          } else if (entranceMode === 1) {
+            tl.fromTo(
+              el,
+              { x: -300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else if (entranceMode === 2) {
+            tl.fromTo(
+              el,
+              { x: 300, opacity: 0 },
+              { x: 0, opacity: 1, duration: 0.2, ease: "expo.out" },
+              w.start,
+            );
+          } else {
+            tl.fromTo(
+              el,
+              { scale: 0.4, opacity: 0 },
+              { scale: 1, opacity: 1, duration: 0.24, ease: "back.out(2.2)" },
+              w.start,
+            );
+          }
 
-        tl.to(el, { opacity: 0, duration: 0.1, ease: 'power2.in' }, w.end);
-        tl.set(el, { opacity: 0, visibility: 'hidden' }, w.end + 0.1);
-      });
+          tl.to(el, { opacity: 0, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(el, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
 
-      tl.seek(0);
-      window.__timelines['kinetic-slam'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["kinetic-slam"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-matrix-decode/caption-matrix-decode.html b/registry/components/caption-matrix-decode/caption-matrix-decode.html
index ac5176793..41e20e81c 100644
--- a/registry/components/caption-matrix-decode/caption-matrix-decode.html
+++ b/registry/components/caption-matrix-decode/caption-matrix-decode.html
@@ -6,45 +6,86 @@
     <title>Matrix Decode</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=Space+Grotesk:wght@700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body {
-        width: 1920px; height: 1080px; margin: 0;
-        overflow: hidden; background: #000;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
       }
       #matrix-decode {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #000;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
       }
       #sc-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .sc-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.85); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.85);
+        z-index: 1;
+        pointer-events: none;
       }
       #sc-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .sc-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 80px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
       }
       .sc-word-wrap {
-        font-family: 'Space Grotesk', sans-serif;
-        font-weight: 700; font-size: 96px;
-        color: #00FF41;
-        display: inline-block; letter-spacing: 0.04em; line-height: 1; position: relative;
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 96px;
+        color: #00ff41;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        position: relative;
+      }
+      .sc-real {
+        display: none;
+      }
+      .sc-scr0 {
+        display: none;
+      }
+      .sc-scr1 {
+        display: none;
       }
-      .sc-real { display: none; }
-      .sc-scr0 { display: none; }
-      .sc-scr1 { display: none; }
     </style>
   </head>
   <body>
@@ -57,141 +98,149 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="sc-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="sc-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="sc-overlay"></div>
       <div id="sc-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
-
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
-
-      var ALPHANUM = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
-      function scrambleChars(seed) {
-        var rng = mulberry32(seed);
-        var result = '';
-        for (var i = 0; i < 4; i++) {
-          result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
         }
-        return result;
-      }
-
-      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 GROUPS = [
-        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
-        {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},
-      ];
-
-      var container = document.getElementById('sc-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 = 'sc-group';
-        grp.id = 'sc-grp-' + gi;
-
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var wordWrap = document.createElement('span');
-          wordWrap.className = 'sc-word-wrap';
-          wordWrap.id = 'sc-ww-' + wi;
-          wordWrap.style.fontSize = '96px';
-
-          var real = document.createElement('span');
-          real.className = 'sc-real';
-          real.id = 'sc-real-' + wi;
-          real.textContent = w.text;
-          wordWrap.appendChild(real);
-
-          var scr0 = document.createElement('span');
-          scr0.className = 'sc-scr0';
-          scr0.id = 'sc-scr0-' + wi;
-          scr0.textContent = scrambleChars(wi * 1000 + 0);
-          wordWrap.appendChild(scr0);
-
-          var scr1 = document.createElement('span');
-          scr1.className = 'sc-scr1';
-          scr1.id = 'sc-scr1-' + wi;
-          scr1.textContent = scrambleChars(wi * 1000 + 1);
-          wordWrap.appendChild(scr1);
-
-          grp.appendChild(wordWrap);
-        });
-
-        container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible', opacity: 0 }, g.start);
-        tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+        var ALPHANUM = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var realEl  = document.getElementById('sc-real-'  + wi);
-          var scr0El  = document.getElementById('sc-scr0-'  + wi);
-          var scr1El  = document.getElementById('sc-scr1-'  + wi);
+        function scrambleChars(seed) {
+          var rng = mulberry32(seed);
+          var result = "";
+          for (var i = 0; i < 4; i++) {
+            result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+          }
+          return result;
+        }
 
-          tl.set(scr0El, { display: 'inline' }, w.start);
-          tl.set(scr1El, { display: 'inline' }, w.start + 0.05);
-          tl.set(scr0El, { display: 'none' },   w.start + 0.05);
-          tl.set(realEl, { display: 'inline' },  w.start + 0.1);
-          tl.set(scr1El, { display: 'none' },    w.start + 0.1);
+        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 GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { 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 },
+        ];
+
+        var container = document.getElementById("sc-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 = "sc-group";
+          grp.id = "sc-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordWrap = document.createElement("span");
+            wordWrap.className = "sc-word-wrap";
+            wordWrap.id = "sc-ww-" + wi;
+            wordWrap.style.fontSize = "96px";
+
+            var real = document.createElement("span");
+            real.className = "sc-real";
+            real.id = "sc-real-" + wi;
+            real.textContent = w.text;
+            wordWrap.appendChild(real);
+
+            var scr0 = document.createElement("span");
+            scr0.className = "sc-scr0";
+            scr0.id = "sc-scr0-" + wi;
+            scr0.textContent = scrambleChars(wi * 1000 + 0);
+            wordWrap.appendChild(scr0);
+
+            var scr1 = document.createElement("span");
+            scr1.className = "sc-scr1";
+            scr1.id = "sc-scr1-" + wi;
+            scr1.textContent = scrambleChars(wi * 1000 + 1);
+            wordWrap.appendChild(scr1);
+
+            grp.appendChild(wordWrap);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var realEl = document.getElementById("sc-real-" + wi);
+            var scr0El = document.getElementById("sc-scr0-" + wi);
+            var scr1El = document.getElementById("sc-scr1-" + wi);
+
+            tl.set(scr0El, { display: "inline" }, w.start);
+            tl.set(scr1El, { display: "inline" }, w.start + 0.05);
+            tl.set(scr0El, { display: "none" }, w.start + 0.05);
+            tl.set(realEl, { display: "inline" }, w.start + 0.1);
+            tl.set(scr1El, { display: "none" }, w.start + 0.1);
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
-
-      window.__timelines['matrix-decode'] = tl;
-    })();
+        window.__timelines["matrix-decode"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-matrix-decode/demo.html b/registry/components/caption-matrix-decode/demo.html
index ac5176793..41e20e81c 100644
--- a/registry/components/caption-matrix-decode/demo.html
+++ b/registry/components/caption-matrix-decode/demo.html
@@ -6,45 +6,86 @@
     <title>Matrix Decode</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=Space+Grotesk:wght@700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body {
-        width: 1920px; height: 1080px; margin: 0;
-        overflow: hidden; background: #000;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
       }
       #matrix-decode {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #000;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
       }
       #sc-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .sc-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.85); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.85);
+        z-index: 1;
+        pointer-events: none;
       }
       #sc-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .sc-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 80px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
       }
       .sc-word-wrap {
-        font-family: 'Space Grotesk', sans-serif;
-        font-weight: 700; font-size: 96px;
-        color: #00FF41;
-        display: inline-block; letter-spacing: 0.04em; line-height: 1; position: relative;
+        font-family: "Space Grotesk", sans-serif;
+        font-weight: 700;
+        font-size: 96px;
+        color: #00ff41;
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        position: relative;
+      }
+      .sc-real {
+        display: none;
+      }
+      .sc-scr0 {
+        display: none;
+      }
+      .sc-scr1 {
+        display: none;
       }
-      .sc-real { display: none; }
-      .sc-scr0 { display: none; }
-      .sc-scr1 { display: none; }
     </style>
   </head>
   <body>
@@ -57,141 +98,149 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="sc-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="sc-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="sc-overlay"></div>
       <div id="sc-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
-
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
-
-      var ALPHANUM = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
-      function scrambleChars(seed) {
-        var rng = mulberry32(seed);
-        var result = '';
-        for (var i = 0; i < 4; i++) {
-          result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
         }
-        return result;
-      }
-
-      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 GROUPS = [
-        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
-        {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},
-      ];
-
-      var container = document.getElementById('sc-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 = 'sc-group';
-        grp.id = 'sc-grp-' + gi;
-
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var wordWrap = document.createElement('span');
-          wordWrap.className = 'sc-word-wrap';
-          wordWrap.id = 'sc-ww-' + wi;
-          wordWrap.style.fontSize = '96px';
-
-          var real = document.createElement('span');
-          real.className = 'sc-real';
-          real.id = 'sc-real-' + wi;
-          real.textContent = w.text;
-          wordWrap.appendChild(real);
-
-          var scr0 = document.createElement('span');
-          scr0.className = 'sc-scr0';
-          scr0.id = 'sc-scr0-' + wi;
-          scr0.textContent = scrambleChars(wi * 1000 + 0);
-          wordWrap.appendChild(scr0);
-
-          var scr1 = document.createElement('span');
-          scr1.className = 'sc-scr1';
-          scr1.id = 'sc-scr1-' + wi;
-          scr1.textContent = scrambleChars(wi * 1000 + 1);
-          wordWrap.appendChild(scr1);
-
-          grp.appendChild(wordWrap);
-        });
-
-        container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible', opacity: 0 }, g.start);
-        tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+        var ALPHANUM = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var realEl  = document.getElementById('sc-real-'  + wi);
-          var scr0El  = document.getElementById('sc-scr0-'  + wi);
-          var scr1El  = document.getElementById('sc-scr1-'  + wi);
+        function scrambleChars(seed) {
+          var rng = mulberry32(seed);
+          var result = "";
+          for (var i = 0; i < 4; i++) {
+            result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];
+          }
+          return result;
+        }
 
-          tl.set(scr0El, { display: 'inline' }, w.start);
-          tl.set(scr1El, { display: 'inline' }, w.start + 0.05);
-          tl.set(scr0El, { display: 'none' },   w.start + 0.05);
-          tl.set(realEl, { display: 'inline' },  w.start + 0.1);
-          tl.set(scr1El, { display: 'none' },    w.start + 0.1);
+        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 GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { 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 },
+        ];
+
+        var container = document.getElementById("sc-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 = "sc-group";
+          grp.id = "sc-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordWrap = document.createElement("span");
+            wordWrap.className = "sc-word-wrap";
+            wordWrap.id = "sc-ww-" + wi;
+            wordWrap.style.fontSize = "96px";
+
+            var real = document.createElement("span");
+            real.className = "sc-real";
+            real.id = "sc-real-" + wi;
+            real.textContent = w.text;
+            wordWrap.appendChild(real);
+
+            var scr0 = document.createElement("span");
+            scr0.className = "sc-scr0";
+            scr0.id = "sc-scr0-" + wi;
+            scr0.textContent = scrambleChars(wi * 1000 + 0);
+            wordWrap.appendChild(scr0);
+
+            var scr1 = document.createElement("span");
+            scr1.className = "sc-scr1";
+            scr1.id = "sc-scr1-" + wi;
+            scr1.textContent = scrambleChars(wi * 1000 + 1);
+            wordWrap.appendChild(scr1);
+
+            grp.appendChild(wordWrap);
+          });
+
+          container.appendChild(grp);
+
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var realEl = document.getElementById("sc-real-" + wi);
+            var scr0El = document.getElementById("sc-scr0-" + wi);
+            var scr1El = document.getElementById("sc-scr1-" + wi);
+
+            tl.set(scr0El, { display: "inline" }, w.start);
+            tl.set(scr1El, { display: "inline" }, w.start + 0.05);
+            tl.set(scr0El, { display: "none" }, w.start + 0.05);
+            tl.set(realEl, { display: "inline" }, w.start + 0.1);
+            tl.set(scr1El, { display: "none" }, w.start + 0.1);
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
-
-      window.__timelines['matrix-decode'] = tl;
-    })();
+        window.__timelines["matrix-decode"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-neon-accent/caption-neon-accent.html b/registry/components/caption-neon-accent/caption-neon-accent.html
index ff4e9c9e5..cf879ad34 100644
--- a/registry/components/caption-neon-accent/caption-neon-accent.html
+++ b/registry/components/caption-neon-accent/caption-neon-accent.html
@@ -6,7 +6,10 @@
     <title>Neon Accent</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" />
+    <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>
       *,
@@ -154,44 +157,94 @@
       var PRIMARY_COLOR = "#FFFFFF";
       var ACCENT_COLORS = ["#53FF01", "#FF0002", "#FCFF00"];
       var TRANSITION_WORDS = new Set([
-        "the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
-        "to", "of", "in", "on", "at", "for", "with", "by", "from", "as",
-        "it", "its", "this", "that", "these", "those", "be", "been",
-        "have", "has", "had", "do", "does", "did", "will", "would", "could",
-        "should", "may", "might", "must", "can", "if", "then", "so", "just",
-        "not", "no", "yes", "up", "out", "about", "lets", "you", "write", "render"
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+        "lets",
+        "you",
+        "write",
+        "render",
       ]);
       var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
 
       var TRANSCRIPT = [
-        {"text": "Every", "start": 0.0, "end": 0.3},
-        {"text": "great", "start": 0.3, "end": 0.55},
-        {"text": "video", "start": 0.55, "end": 0.85},
-        {"text": "starts", "start": 0.85, "end": 1.1},
-        {"text": "with", "start": 1.1, "end": 1.25},
-        {"text": "a", "start": 1.25, "end": 1.35},
-        {"text": "single", "start": 1.35, "end": 1.65},
-        {"text": "frame.", "start": 1.65, "end": 2.0},
-        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
-        {"text": "lets", "start": 2.65, "end": 2.85},
-        {"text": "you", "start": 2.85, "end": 2.95},
-        {"text": "write", "start": 2.95, "end": 3.15},
-        {"text": "HTML", "start": 3.15, "end": 3.55},
-        {"text": "and", "start": 3.55, "end": 3.65},
-        {"text": "render", "start": 3.65, "end": 3.95},
-        {"text": "professional", "start": 3.95, "end": 4.45},
-        {"text": "video.", "start": 4.45, "end": 4.8},
-        {"text": "No", "start": 4.9, "end": 5.05},
-        {"text": "timeline.", "start": 5.05, "end": 5.45},
-        {"text": "No", "start": 5.5, "end": 5.65},
-        {"text": "drag", "start": 5.65, "end": 5.85},
-        {"text": "and", "start": 5.85, "end": 5.95},
-        {"text": "drop.", "start": 5.95, "end": 6.25},
-        {"text": "Just", "start": 6.35, "end": 6.55},
-        {"text": "code", "start": 6.55, "end": 6.8},
-        {"text": "that", "start": 6.8, "end": 6.95},
-        {"text": "becomes", "start": 6.95, "end": 7.3},
-        {"text": "cinema.", "start": 7.3, "end": 7.7}
+        { 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 },
       ];
 
       gsap.registerPlugin && gsap.registerPlugin();
@@ -201,13 +254,17 @@
       }
 
       function normalizeWords(rawWords) {
-        return rawWords.map(function (item) {
-          return {
-            text: cleanText(item.word || item.text),
-            start: Math.max(0, Number(item.start) || 0),
-            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-          };
-        }).filter(function (word) { return word.text.length > 0; });
+        return rawWords
+          .map(function (item) {
+            return {
+              text: cleanText(item.word || item.text),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
       }
 
       var measureCanvas = document.createElement("canvas");
@@ -247,24 +304,42 @@
 
       function measureLineWidth(words, colors, fontSize) {
         return words.reduce(function (total, word, index) {
-          return total + measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) + (index ? WORD_SPACING : 0);
+          return (
+            total +
+            measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) +
+            (index ? WORD_SPACING : 0)
+          );
         }, 0);
       }
 
       function splitLinesForGroup(words, colors, fontSize) {
         var maxLineWidth = SAFE_ZONE_WIDTH;
-        if (words.some(function (word, i) { return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth; })) return null;
-        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth) return [{ words: words, colors: colors }];
+        if (
+          words.some(function (word, i) {
+            return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth;
+          })
+        )
+          return null;
+        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth)
+          return [{ words: words, colors: colors }];
         var best = null;
         var bestDiff = Infinity;
         for (var split = 1; split < words.length; split++) {
-          var fw = words.slice(0, split), sw = words.slice(split);
-          var fc = colors.slice(0, split), sc = colors.slice(split);
+          var fw = words.slice(0, split),
+            sw = words.slice(split);
+          var fc = colors.slice(0, split),
+            sc = colors.slice(split);
           var fW = measureLineWidth(fw, fc, fontSize);
           var sW = measureLineWidth(sw, sc, fontSize);
           if (fW <= maxLineWidth && sW <= maxLineWidth) {
             var diff = Math.abs(fW - sW);
-            if (diff < bestDiff) { best = [{ words: fw, colors: fc }, { words: sw, colors: sc }]; bestDiff = diff; }
+            if (diff < bestDiff) {
+              best = [
+                { words: fw, colors: fc },
+                { words: sw, colors: sc },
+              ];
+              bestDiff = diff;
+            }
           }
         }
         return best;
@@ -287,7 +362,12 @@
           current.push(word);
           var punctuation = /[,.:!?]$/.test(word.text);
           var pause = nextWord ? nextWord.start - word.end : 0;
-          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
             groups.push(makeGroup(current, groups.length));
             current = [];
           }
@@ -299,11 +379,16 @@
       function makeGroup(words, groupIndex) {
         var colors = assignWordColors(words, groupIndex);
         var fontSize = BASE_FONT_SIZE;
-        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) { fontSize -= 2; }
+        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) {
+          fontSize -= 2;
+        }
         return {
-          words: words.slice(), colors: colors, fontSize: fontSize,
+          words: words.slice(),
+          colors: colors,
+          fontSize: fontSize,
           lines: splitLinesForGroup(words, colors, fontSize) || [{ words: words, colors: colors }],
-          start: words[0].start, end: words[words.length - 1].end,
+          start: words[0].start,
+          end: words[words.length - 1].end,
         };
       }
 
@@ -312,7 +397,32 @@
         var r = parseInt(hex.slice(0, 2), 16);
         var g = parseInt(hex.slice(2, 4), 16);
         var b = parseInt(hex.slice(4, 6), 16);
-        var glow = "0 0 4px rgba(" + r + "," + g + "," + b + ",1), 0 0 10px rgba(" + r + "," + g + "," + b + ",0.9), 0 0 20px rgba(" + r + "," + g + "," + b + ",0.7), 0 0 40px rgba(" + r + "," + g + "," + b + ",0.4)";
+        var glow =
+          "0 0 4px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 10px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.9), 0 0 20px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.7), 0 0 40px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.4)";
         return "0 8px 16px rgba(0,0,0,0.8), 0 16px 40px rgba(0,0,0,0.6), " + glow;
       }
 
@@ -333,7 +443,8 @@
               wordEl.className = color === PRIMARY_COLOR ? "caption-word" : "caption-word accent";
               wordEl.textContent = word.text.toUpperCase();
               wordEl.style.color = color;
-              wordEl.style.fontSize = color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
+              wordEl.style.fontSize =
+                color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
               wordEl.style.textShadow = shadowForColor(color);
               lineEl.appendChild(wordEl);
             });
@@ -358,7 +469,9 @@
         return Math.max(0, group.start - entryLead);
       });
 
-      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
 
       GROUPS.forEach(function (group, groupIndex) {
         var groupEl = allGroupEls[groupIndex];
@@ -373,8 +486,24 @@
         });
 
         tl.set(groupEl, { opacity: 0, scale: 0.65, x: 0, y: 0 }, visibleStart);
-        tl.to(groupEl, { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
-        tl.to(groupEl, { x: D, y: D, duration: WIGGLE_CYCLE / 2, ease: "sine.inOut", yoyo: true, repeat: Math.max(0, wiggleCycles * 2 - 1), force3D: true }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          {
+            x: D,
+            y: D,
+            duration: WIGGLE_CYCLE / 2,
+            ease: "sine.inOut",
+            yoyo: true,
+            repeat: Math.max(0, wiggleCycles * 2 - 1),
+            force3D: true,
+          },
+          visibleStart,
+        );
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
diff --git a/registry/components/caption-neon-accent/demo.html b/registry/components/caption-neon-accent/demo.html
index ff4e9c9e5..cf879ad34 100644
--- a/registry/components/caption-neon-accent/demo.html
+++ b/registry/components/caption-neon-accent/demo.html
@@ -6,7 +6,10 @@
     <title>Neon Accent</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" />
+    <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>
       *,
@@ -154,44 +157,94 @@
       var PRIMARY_COLOR = "#FFFFFF";
       var ACCENT_COLORS = ["#53FF01", "#FF0002", "#FCFF00"];
       var TRANSITION_WORDS = new Set([
-        "the", "a", "an", "and", "or", "but", "is", "are", "was", "were",
-        "to", "of", "in", "on", "at", "for", "with", "by", "from", "as",
-        "it", "its", "this", "that", "these", "those", "be", "been",
-        "have", "has", "had", "do", "does", "did", "will", "would", "could",
-        "should", "may", "might", "must", "can", "if", "then", "so", "just",
-        "not", "no", "yes", "up", "out", "about", "lets", "you", "write", "render"
+        "the",
+        "a",
+        "an",
+        "and",
+        "or",
+        "but",
+        "is",
+        "are",
+        "was",
+        "were",
+        "to",
+        "of",
+        "in",
+        "on",
+        "at",
+        "for",
+        "with",
+        "by",
+        "from",
+        "as",
+        "it",
+        "its",
+        "this",
+        "that",
+        "these",
+        "those",
+        "be",
+        "been",
+        "have",
+        "has",
+        "had",
+        "do",
+        "does",
+        "did",
+        "will",
+        "would",
+        "could",
+        "should",
+        "may",
+        "might",
+        "must",
+        "can",
+        "if",
+        "then",
+        "so",
+        "just",
+        "not",
+        "no",
+        "yes",
+        "up",
+        "out",
+        "about",
+        "lets",
+        "you",
+        "write",
+        "render",
       ]);
       var KEYWORDS = new Set(["hyperframes", "html", "professional", "code", "cinema"]);
 
       var TRANSCRIPT = [
-        {"text": "Every", "start": 0.0, "end": 0.3},
-        {"text": "great", "start": 0.3, "end": 0.55},
-        {"text": "video", "start": 0.55, "end": 0.85},
-        {"text": "starts", "start": 0.85, "end": 1.1},
-        {"text": "with", "start": 1.1, "end": 1.25},
-        {"text": "a", "start": 1.25, "end": 1.35},
-        {"text": "single", "start": 1.35, "end": 1.65},
-        {"text": "frame.", "start": 1.65, "end": 2.0},
-        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
-        {"text": "lets", "start": 2.65, "end": 2.85},
-        {"text": "you", "start": 2.85, "end": 2.95},
-        {"text": "write", "start": 2.95, "end": 3.15},
-        {"text": "HTML", "start": 3.15, "end": 3.55},
-        {"text": "and", "start": 3.55, "end": 3.65},
-        {"text": "render", "start": 3.65, "end": 3.95},
-        {"text": "professional", "start": 3.95, "end": 4.45},
-        {"text": "video.", "start": 4.45, "end": 4.8},
-        {"text": "No", "start": 4.9, "end": 5.05},
-        {"text": "timeline.", "start": 5.05, "end": 5.45},
-        {"text": "No", "start": 5.5, "end": 5.65},
-        {"text": "drag", "start": 5.65, "end": 5.85},
-        {"text": "and", "start": 5.85, "end": 5.95},
-        {"text": "drop.", "start": 5.95, "end": 6.25},
-        {"text": "Just", "start": 6.35, "end": 6.55},
-        {"text": "code", "start": 6.55, "end": 6.8},
-        {"text": "that", "start": 6.8, "end": 6.95},
-        {"text": "becomes", "start": 6.95, "end": 7.3},
-        {"text": "cinema.", "start": 7.3, "end": 7.7}
+        { 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 },
       ];
 
       gsap.registerPlugin && gsap.registerPlugin();
@@ -201,13 +254,17 @@
       }
 
       function normalizeWords(rawWords) {
-        return rawWords.map(function (item) {
-          return {
-            text: cleanText(item.word || item.text),
-            start: Math.max(0, Number(item.start) || 0),
-            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-          };
-        }).filter(function (word) { return word.text.length > 0; });
+        return rawWords
+          .map(function (item) {
+            return {
+              text: cleanText(item.word || item.text),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
       }
 
       var measureCanvas = document.createElement("canvas");
@@ -247,24 +304,42 @@
 
       function measureLineWidth(words, colors, fontSize) {
         return words.reduce(function (total, word, index) {
-          return total + measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) + (index ? WORD_SPACING : 0);
+          return (
+            total +
+            measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) +
+            (index ? WORD_SPACING : 0)
+          );
         }, 0);
       }
 
       function splitLinesForGroup(words, colors, fontSize) {
         var maxLineWidth = SAFE_ZONE_WIDTH;
-        if (words.some(function (word, i) { return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth; })) return null;
-        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth) return [{ words: words, colors: colors }];
+        if (
+          words.some(function (word, i) {
+            return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth;
+          })
+        )
+          return null;
+        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth)
+          return [{ words: words, colors: colors }];
         var best = null;
         var bestDiff = Infinity;
         for (var split = 1; split < words.length; split++) {
-          var fw = words.slice(0, split), sw = words.slice(split);
-          var fc = colors.slice(0, split), sc = colors.slice(split);
+          var fw = words.slice(0, split),
+            sw = words.slice(split);
+          var fc = colors.slice(0, split),
+            sc = colors.slice(split);
           var fW = measureLineWidth(fw, fc, fontSize);
           var sW = measureLineWidth(sw, sc, fontSize);
           if (fW <= maxLineWidth && sW <= maxLineWidth) {
             var diff = Math.abs(fW - sW);
-            if (diff < bestDiff) { best = [{ words: fw, colors: fc }, { words: sw, colors: sc }]; bestDiff = diff; }
+            if (diff < bestDiff) {
+              best = [
+                { words: fw, colors: fc },
+                { words: sw, colors: sc },
+              ];
+              bestDiff = diff;
+            }
           }
         }
         return best;
@@ -287,7 +362,12 @@
           current.push(word);
           var punctuation = /[,.:!?]$/.test(word.text);
           var pause = nextWord ? nextWord.start - word.end : 0;
-          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
             groups.push(makeGroup(current, groups.length));
             current = [];
           }
@@ -299,11 +379,16 @@
       function makeGroup(words, groupIndex) {
         var colors = assignWordColors(words, groupIndex);
         var fontSize = BASE_FONT_SIZE;
-        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) { fontSize -= 2; }
+        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) {
+          fontSize -= 2;
+        }
         return {
-          words: words.slice(), colors: colors, fontSize: fontSize,
+          words: words.slice(),
+          colors: colors,
+          fontSize: fontSize,
           lines: splitLinesForGroup(words, colors, fontSize) || [{ words: words, colors: colors }],
-          start: words[0].start, end: words[words.length - 1].end,
+          start: words[0].start,
+          end: words[words.length - 1].end,
         };
       }
 
@@ -312,7 +397,32 @@
         var r = parseInt(hex.slice(0, 2), 16);
         var g = parseInt(hex.slice(2, 4), 16);
         var b = parseInt(hex.slice(4, 6), 16);
-        var glow = "0 0 4px rgba(" + r + "," + g + "," + b + ",1), 0 0 10px rgba(" + r + "," + g + "," + b + ",0.9), 0 0 20px rgba(" + r + "," + g + "," + b + ",0.7), 0 0 40px rgba(" + r + "," + g + "," + b + ",0.4)";
+        var glow =
+          "0 0 4px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",1), 0 0 10px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.9), 0 0 20px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.7), 0 0 40px rgba(" +
+          r +
+          "," +
+          g +
+          "," +
+          b +
+          ",0.4)";
         return "0 8px 16px rgba(0,0,0,0.8), 0 16px 40px rgba(0,0,0,0.6), " + glow;
       }
 
@@ -333,7 +443,8 @@
               wordEl.className = color === PRIMARY_COLOR ? "caption-word" : "caption-word accent";
               wordEl.textContent = word.text.toUpperCase();
               wordEl.style.color = color;
-              wordEl.style.fontSize = color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
+              wordEl.style.fontSize =
+                color === PRIMARY_COLOR ? group.fontSize + "px" : group.fontSize * 1.2 + "px";
               wordEl.style.textShadow = shadowForColor(color);
               lineEl.appendChild(wordEl);
             });
@@ -358,7 +469,9 @@
         return Math.max(0, group.start - entryLead);
       });
 
-      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
 
       GROUPS.forEach(function (group, groupIndex) {
         var groupEl = allGroupEls[groupIndex];
@@ -373,8 +486,24 @@
         });
 
         tl.set(groupEl, { opacity: 0, scale: 0.65, x: 0, y: 0 }, visibleStart);
-        tl.to(groupEl, { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
-        tl.to(groupEl, { x: D, y: D, duration: WIGGLE_CYCLE / 2, ease: "sine.inOut", yoyo: true, repeat: Math.max(0, wiggleCycles * 2 - 1), force3D: true }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
+        tl.to(
+          groupEl,
+          {
+            x: D,
+            y: D,
+            duration: WIGGLE_CYCLE / 2,
+            ease: "sine.inOut",
+            yoyo: true,
+            repeat: Math.max(0, wiggleCycles * 2 - 1),
+            force3D: true,
+          },
+          visibleStart,
+        );
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
diff --git a/registry/components/caption-neon-glow/caption-neon-glow.html b/registry/components/caption-neon-glow/caption-neon-glow.html
index 39000033e..675d948e4 100644
--- a/registry/components/caption-neon-glow/caption-neon-glow.html
+++ b/registry/components/caption-neon-glow/caption-neon-glow.html
@@ -6,42 +6,76 @@
     <title>Neon Glow</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=Outfit:wght@900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&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: #000;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
       }
       #neon-glow {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #000;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
       }
       #ne-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .ne-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.75); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.75);
+        z-index: 1;
+        pointer-events: none;
       }
       #ne-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .ne-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 80px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
       }
       .ne-word {
-        font-family: 'Outfit', sans-serif;
-        font-weight: 900; font-size: 96px;
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 96px;
         text-transform: uppercase;
-        color: rgba(0,255,240,0.14);
-        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        color: rgba(0, 255, 240, 0.14);
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
       }
     </style>
   </head>
@@ -55,107 +89,124 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="ne-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="ne-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="ne-overlay"></div>
       <div id="ne-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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 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 GROUPS = [
-        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
-        {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},
-      ];
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { 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 },
+        ];
 
-      // Keywords get pink glow; others get cyan glow
-      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        // Keywords get pink glow; others get cyan glow
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      var container = document.getElementById('ne-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("ne-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 = 'ne-group';
-        grp.id = 'ne-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "ne-group";
+          grp.id = "ne-grp-" + gi;
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var span = document.createElement('span');
-          span.className = 'ne-word';
-          span.id = 'ne-w-' + wi;
-          span.textContent = w.text;
-          span.style.fontSize = '96px';
-          grp.appendChild(span);
-        });
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "ne-word";
+            span.id = "ne-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = "96px";
+            grp.appendChild(span);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible', opacity: 0 }, g.start);
-        tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: 'steps(1)' }, g.start);
-        tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: 'power3.out' }, g.start + 0.05);
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: "steps(1)" }, g.start);
+          tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: "power3.out" }, g.start + 0.05);
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var el = document.getElementById('ne-w-' + wi);
-          var isKW = KEYWORDS.has(wi);
-          var activeColor = isKW ? '#FF0099' : '#00FFF0';
-          tl.to(el, {
-            color: activeColor,
-            textShadow: '0 0 10px ' + activeColor + ', 0 0 35px ' + activeColor + ', 0 0 90px ' + activeColor,
-            duration: 0.06
-          }, w.start);
-          tl.to(el, { color: 'rgba(0,255,240,0.14)', textShadow: 'none', duration: 0.06 }, w.end);
-        });
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("ne-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+            var activeColor = isKW ? "#FF0099" : "#00FFF0";
+            tl.to(
+              el,
+              {
+                color: activeColor,
+                textShadow:
+                  "0 0 10px " +
+                  activeColor +
+                  ", 0 0 35px " +
+                  activeColor +
+                  ", 0 0 90px " +
+                  activeColor,
+                duration: 0.06,
+              },
+              w.start,
+            );
+            tl.to(el, { color: "rgba(0,255,240,0.14)", textShadow: "none", duration: 0.06 }, w.end);
+          });
 
-        tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: 'steps(1)' }, g.end - 0.1);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+          tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: "steps(1)" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      window.__timelines['neon-glow'] = tl;
-    })();
+        window.__timelines["neon-glow"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-neon-glow/demo.html b/registry/components/caption-neon-glow/demo.html
index 39000033e..675d948e4 100644
--- a/registry/components/caption-neon-glow/demo.html
+++ b/registry/components/caption-neon-glow/demo.html
@@ -6,42 +6,76 @@
     <title>Neon Glow</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=Outfit:wght@900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&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: #000;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
       }
       #neon-glow {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #000;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
       }
       #ne-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .ne-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.75); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.75);
+        z-index: 1;
+        pointer-events: none;
       }
       #ne-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .ne-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 80px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
       }
       .ne-word {
-        font-family: 'Outfit', sans-serif;
-        font-weight: 900; font-size: 96px;
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 96px;
         text-transform: uppercase;
-        color: rgba(0,255,240,0.14);
-        display: inline-block; letter-spacing: 0.04em; line-height: 1;
+        color: rgba(0, 255, 240, 0.14);
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
       }
     </style>
   </head>
@@ -55,107 +89,124 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="ne-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="ne-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="ne-overlay"></div>
       <div id="ne-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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 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 GROUPS = [
-        {wordStart:0,  wordEnd:3,  start:0.0,  end:1.05},
-        {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},
-      ];
+        var GROUPS = [
+          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },
+          { 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 },
+        ];
 
-      // Keywords get pink glow; others get cyan glow
-      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        // Keywords get pink glow; others get cyan glow
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      var container = document.getElementById('ne-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("ne-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 = 'ne-group';
-        grp.id = 'ne-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var grp = document.createElement("div");
+          grp.className = "ne-group";
+          grp.id = "ne-grp-" + gi;
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var span = document.createElement('span');
-          span.className = 'ne-word';
-          span.id = 'ne-w-' + wi;
-          span.textContent = w.text;
-          span.style.fontSize = '96px';
-          grp.appendChild(span);
-        });
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "ne-word";
+            span.id = "ne-w-" + wi;
+            span.textContent = w.text;
+            span.style.fontSize = "96px";
+            grp.appendChild(span);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible', opacity: 0 }, g.start);
-        tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: 'steps(1)' }, g.start);
-        tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: 'power3.out' }, g.start + 0.05);
+          tl.set(grp, { visibility: "visible", opacity: 0 }, g.start);
+          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: "steps(1)" }, g.start);
+          tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: "power3.out" }, g.start + 0.05);
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var el = document.getElementById('ne-w-' + wi);
-          var isKW = KEYWORDS.has(wi);
-          var activeColor = isKW ? '#FF0099' : '#00FFF0';
-          tl.to(el, {
-            color: activeColor,
-            textShadow: '0 0 10px ' + activeColor + ', 0 0 35px ' + activeColor + ', 0 0 90px ' + activeColor,
-            duration: 0.06
-          }, w.start);
-          tl.to(el, { color: 'rgba(0,255,240,0.14)', textShadow: 'none', duration: 0.06 }, w.end);
-        });
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var el = document.getElementById("ne-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+            var activeColor = isKW ? "#FF0099" : "#00FFF0";
+            tl.to(
+              el,
+              {
+                color: activeColor,
+                textShadow:
+                  "0 0 10px " +
+                  activeColor +
+                  ", 0 0 35px " +
+                  activeColor +
+                  ", 0 0 90px " +
+                  activeColor,
+                duration: 0.06,
+              },
+              w.start,
+            );
+            tl.to(el, { color: "rgba(0,255,240,0.14)", textShadow: "none", duration: 0.06 }, w.end);
+          });
 
-        tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: 'steps(1)' }, g.end - 0.1);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+          tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: "steps(1)" }, g.end - 0.1);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      window.__timelines['neon-glow'] = tl;
-    })();
+        window.__timelines["neon-glow"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-parallax-layers/caption-parallax-layers.html b/registry/components/caption-parallax-layers/caption-parallax-layers.html
index f94731714..95bbafb5f 100644
--- a/registry/components/caption-parallax-layers/caption-parallax-layers.html
+++ b/registry/components/caption-parallax-layers/caption-parallax-layers.html
@@ -6,7 +6,10 @@
     <title>Parallax Layers</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=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -113,9 +116,9 @@
         font-weight: 400;
         font-style: normal;
         line-height: 0.9;
-        color: #E50914;
-        -webkit-text-stroke: 5px #E50914;
-        text-shadow: 2px 4px 4px #A30610;
+        color: #e50914;
+        -webkit-text-stroke: 5px #e50914;
+        text-shadow: 2px 4px 4px #a30610;
       }
 
       .word--front-normal {
@@ -123,8 +126,10 @@
         font-size: 130px;
         font-weight: 400;
         font-style: normal;
-        color: #EEEEEE;
-        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
       }
 
       .word--front-italic {
@@ -132,8 +137,10 @@
         font-size: 130px;
         font-weight: 400;
         font-style: italic;
-        color: #EEEEEE;
-        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
       }
     </style>
   </head>
@@ -175,48 +182,48 @@
       var SLIDE_DUR = 0.2;
 
       var W = [
-        {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}
+        { 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 },
       ];
 
       // behind=red 3D emphasis words, front=normal white words
       var BLOCKS = [
-        { behind: null,    front: [[0],[1],[2]] },
-        { behind: [[3]],   front: [[4],[5]] },
-        { behind: [[6]],   front: [[7]] },
-        { behind: [[8]],   front: [[9],[10],[11]] },
-        { behind: [[12]],  front: [[13],[14]] },
-        { behind: [[15]],  front: [[16]] },
-        { behind: null,    front: [[17],[18]] },
-        { behind: null,    front: [[19],[20],[21],[22]] },
-        { behind: [[24]],  front: [[23],[25],[26]] },
-        { behind: [[27]],  front: null },
+        { behind: null, front: [[0], [1], [2]] },
+        { behind: [[3]], front: [[4], [5]] },
+        { behind: [[6]], front: [[7]] },
+        { behind: [[8]], front: [[9], [10], [11]] },
+        { behind: [[12]], front: [[13], [14]] },
+        { behind: [[15]], front: [[16]] },
+        { behind: null, front: [[17], [18]] },
+        { behind: null, front: [[19], [20], [21], [22]] },
+        { behind: [[24]], front: [[23], [25], [26]] },
+        { behind: [[27]], front: null },
       ];
 
       var behindStage = document.getElementById("behind-stage");
@@ -259,8 +266,12 @@
         frontStage.appendChild(fEl);
       });
 
-      var allBehind = BLOCKS.map(function (_, i) { return document.getElementById("bb" + i); });
-      var allFront  = BLOCKS.map(function (_, i) { return document.getElementById("fb" + i); });
+      var allBehind = BLOCKS.map(function (_, i) {
+        return document.getElementById("bb" + i);
+      });
+      var allFront = BLOCKS.map(function (_, i) {
+        return document.getElementById("fb" + i);
+      });
 
       function applyBehindScales() {
         BLOCKS.forEach(function (block, bi) {
@@ -293,8 +304,12 @@
         var bEl = allBehind[bi];
         var fEl = allFront[bi];
 
-        allBehind.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
-        allFront.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+        allBehind.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        allFront.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
 
         if (block.behind) {
           tl.set(bEl, { opacity: 1 }, start);
@@ -323,7 +338,9 @@
       tl.to({}, { duration: DURATION }, 0);
       window.__timelines["parallax-layers"] = tl;
 
-      document.fonts.ready.then(function () { applyBehindScales(); });
+      document.fonts.ready.then(function () {
+        applyBehindScales();
+      });
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-parallax-layers/demo.html b/registry/components/caption-parallax-layers/demo.html
index f94731714..95bbafb5f 100644
--- a/registry/components/caption-parallax-layers/demo.html
+++ b/registry/components/caption-parallax-layers/demo.html
@@ -6,7 +6,10 @@
     <title>Parallax Layers</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=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -113,9 +116,9 @@
         font-weight: 400;
         font-style: normal;
         line-height: 0.9;
-        color: #E50914;
-        -webkit-text-stroke: 5px #E50914;
-        text-shadow: 2px 4px 4px #A30610;
+        color: #e50914;
+        -webkit-text-stroke: 5px #e50914;
+        text-shadow: 2px 4px 4px #a30610;
       }
 
       .word--front-normal {
@@ -123,8 +126,10 @@
         font-size: 130px;
         font-weight: 400;
         font-style: normal;
-        color: #EEEEEE;
-        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
       }
 
       .word--front-italic {
@@ -132,8 +137,10 @@
         font-size: 130px;
         font-weight: 400;
         font-style: italic;
-        color: #EEEEEE;
-        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 4px 24px rgba(0, 0, 0, 0.35);
+        color: #eeeeee;
+        text-shadow:
+          0 2px 12px rgba(0, 0, 0, 0.6),
+          0 4px 24px rgba(0, 0, 0, 0.35);
       }
     </style>
   </head>
@@ -175,48 +182,48 @@
       var SLIDE_DUR = 0.2;
 
       var W = [
-        {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}
+        { 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 },
       ];
 
       // behind=red 3D emphasis words, front=normal white words
       var BLOCKS = [
-        { behind: null,    front: [[0],[1],[2]] },
-        { behind: [[3]],   front: [[4],[5]] },
-        { behind: [[6]],   front: [[7]] },
-        { behind: [[8]],   front: [[9],[10],[11]] },
-        { behind: [[12]],  front: [[13],[14]] },
-        { behind: [[15]],  front: [[16]] },
-        { behind: null,    front: [[17],[18]] },
-        { behind: null,    front: [[19],[20],[21],[22]] },
-        { behind: [[24]],  front: [[23],[25],[26]] },
-        { behind: [[27]],  front: null },
+        { behind: null, front: [[0], [1], [2]] },
+        { behind: [[3]], front: [[4], [5]] },
+        { behind: [[6]], front: [[7]] },
+        { behind: [[8]], front: [[9], [10], [11]] },
+        { behind: [[12]], front: [[13], [14]] },
+        { behind: [[15]], front: [[16]] },
+        { behind: null, front: [[17], [18]] },
+        { behind: null, front: [[19], [20], [21], [22]] },
+        { behind: [[24]], front: [[23], [25], [26]] },
+        { behind: [[27]], front: null },
       ];
 
       var behindStage = document.getElementById("behind-stage");
@@ -259,8 +266,12 @@
         frontStage.appendChild(fEl);
       });
 
-      var allBehind = BLOCKS.map(function (_, i) { return document.getElementById("bb" + i); });
-      var allFront  = BLOCKS.map(function (_, i) { return document.getElementById("fb" + i); });
+      var allBehind = BLOCKS.map(function (_, i) {
+        return document.getElementById("bb" + i);
+      });
+      var allFront = BLOCKS.map(function (_, i) {
+        return document.getElementById("fb" + i);
+      });
 
       function applyBehindScales() {
         BLOCKS.forEach(function (block, bi) {
@@ -293,8 +304,12 @@
         var bEl = allBehind[bi];
         var fEl = allFront[bi];
 
-        allBehind.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
-        allFront.forEach(function (other, oi) { if (oi !== bi) tl.set(other, { opacity: 0 }, start); });
+        allBehind.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
+        allFront.forEach(function (other, oi) {
+          if (oi !== bi) tl.set(other, { opacity: 0 }, start);
+        });
 
         if (block.behind) {
           tl.set(bEl, { opacity: 1 }, start);
@@ -323,7 +338,9 @@
       tl.to({}, { duration: DURATION }, 0);
       window.__timelines["parallax-layers"] = tl;
 
-      document.fonts.ready.then(function () { applyBehindScales(); });
+      document.fonts.ready.then(function () {
+        applyBehindScales();
+      });
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-particle-burst/caption-particle-burst.html b/registry/components/caption-particle-burst/caption-particle-burst.html
index cd06ba584..6664f4178 100644
--- a/registry/components/caption-particle-burst/caption-particle-burst.html
+++ b/registry/components/caption-particle-burst/caption-particle-burst.html
@@ -6,47 +6,87 @@
     <title>Particle Burst</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=Outfit:wght@900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&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;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #particle-burst {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #bs-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .bs-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
       }
       #bs-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .bs-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 100px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
       }
       .bs-word {
-        font-family: 'Outfit', sans-serif;
-        font-weight: 900; font-size: 88px;
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 88px;
         text-transform: uppercase;
-        color: rgba(255,255,255,0.45);
-        display: inline-block; letter-spacing: 0.05em; line-height: 1;
+        color: rgba(255, 255, 255, 0.45);
+        display: inline-block;
+        letter-spacing: 0.05em;
+        line-height: 1;
       }
       .bs-particle {
-        position: absolute; width: 10px; height: 10px;
-        border-radius: 50%; opacity: 0; pointer-events: none; z-index: 20;
-        left: 960px; bottom: 180px;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        z-index: 20;
+        left: 960px;
+        bottom: 180px;
       }
     </style>
   </head>
@@ -60,153 +100,193 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="bs-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="bs-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="bs-overlay"></div>
       <div id="bs-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
-
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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}
-      ];
-
-      // Keywords get particle burst + gold color
-      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
-
-      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.35, nextStart - 0.05);
-        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
-      });
-
-      var PARTICLE_COLORS = ['#FFD700','#FF6B35','#FF3C78','#9B5DE5','#00BBF9','#00F5D4','#ffffff','#F15BB5'];
-      var NUM_PARTICLES = 10;
-
-      var container = document.getElementById('bs-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 = 'bs-group';
-        grp.id = 'bs-grp-' + gi;
-
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var span = document.createElement('span');
-          span.className = 'bs-word';
-          span.id = 'bs-w-' + wi;
-          span.textContent = w.text.toUpperCase();
-          span.style.fontSize = '88px';
-          grp.appendChild(span);
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        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 },
+        ];
+
+        // Keywords get particle burst + gold color
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        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.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
         });
 
-        container.appendChild(grp);
-      });
-
-      // Create particles for keyword words
-      var particleData = {};
-      WORDS.forEach(function(w, wi) {
-        if (!KEYWORDS.has(wi)) return;
-        var rng = mulberry32(wi * 137 + 99);
-        particleData[wi] = [];
-        for (var p = 0; p < NUM_PARTICLES; p++) {
-          var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
-          var dist = 120 + rng() * 200;
-          var sz = 4 + rng() * 8;
-          var dx = Math.cos(angle) * dist;
-          var dy = -Math.sin(angle) * dist;
-          var dot = document.createElement('div');
-          dot.className = 'bs-particle';
-          dot.id = 'bs-p-' + wi + '-' + p;
-          dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
-          dot.style.width = sz.toFixed(1) + 'px';
-          dot.style.height = sz.toFixed(1) + 'px';
-          container.appendChild(dot);
-          particleData[wi].push({ el: dot, dx: dx, dy: dy });
-        }
-      });
-
-      GROUPS.forEach(function(g, gi) {
-        var grp = document.getElementById('bs-grp-' + gi);
-        var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
-
-        tl.set(grp, { visibility: 'visible' }, g.start);
-        tl.fromTo(grp,
-          { opacity: 0, scale: 0.92 },
-          { opacity: 1, scale: 1, duration: 0.2, ease: 'back.out(1.5)' },
-          g.start
-        );
-
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var wordEl = document.getElementById('bs-w-' + wi);
-          var isKW = KEYWORDS.has(wi);
-
-          tl.to(wordEl, { color: isKW ? '#FFD700' : '#ffffff', scale: isKW ? 1.12 : 1.05, duration: 0.08 }, w.start);
-          tl.to(wordEl, { color: 'rgba(255,255,255,0.4)', scale: 1.0, duration: 0.1 }, w.end);
-
-          if (isKW && particleData[wi]) {
-            particleData[wi].forEach(function(pd, pi) {
-              tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
-              tl.to(pd.el, { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: 'power3.out' }, w.start + pi * 0.018);
-              tl.to(pd.el, { opacity: 0, duration: 0.45, ease: 'power1.in' }, w.start + 0.12 + pi * 0.018);
-              tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
-            });
+        var PARTICLE_COLORS = [
+          "#FFD700",
+          "#FF6B35",
+          "#FF3C78",
+          "#9B5DE5",
+          "#00BBF9",
+          "#00F5D4",
+          "#ffffff",
+          "#F15BB5",
+        ];
+        var NUM_PARTICLES = 10;
+
+        var container = document.getElementById("bs-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 = "bs-group";
+          grp.id = "bs-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "bs-word";
+            span.id = "bs-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = "88px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+        });
+
+        // Create particles for keyword words
+        var particleData = {};
+        WORDS.forEach(function (w, wi) {
+          if (!KEYWORDS.has(wi)) return;
+          var rng = mulberry32(wi * 137 + 99);
+          particleData[wi] = [];
+          for (var p = 0; p < NUM_PARTICLES; p++) {
+            var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
+            var dist = 120 + rng() * 200;
+            var sz = 4 + rng() * 8;
+            var dx = Math.cos(angle) * dist;
+            var dy = -Math.sin(angle) * dist;
+            var dot = document.createElement("div");
+            dot.className = "bs-particle";
+            dot.id = "bs-p-" + wi + "-" + p;
+            dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
+            dot.style.width = sz.toFixed(1) + "px";
+            dot.style.height = sz.toFixed(1) + "px";
+            container.appendChild(dot);
+            particleData[wi].push({ el: dot, dx: dx, dy: dy });
           }
         });
 
-        tl.to(grp, { opacity: 0, duration: 0.14, ease: 'power2.in' }, g.end - 0.14);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+        GROUPS.forEach(function (g, gi) {
+          var grp = document.getElementById("bs-grp-" + gi);
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, scale: 0.92 },
+            { opacity: 1, scale: 1, duration: 0.2, ease: "back.out(1.5)" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("bs-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+
+            tl.to(
+              wordEl,
+              { color: isKW ? "#FFD700" : "#ffffff", scale: isKW ? 1.12 : 1.05, duration: 0.08 },
+              w.start,
+            );
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", scale: 1.0, duration: 0.1 }, w.end);
+
+            if (isKW && particleData[wi]) {
+              particleData[wi].forEach(function (pd, pi) {
+                tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
+                tl.to(
+                  pd.el,
+                  { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: "power3.out" },
+                  w.start + pi * 0.018,
+                );
+                tl.to(
+                  pd.el,
+                  { opacity: 0, duration: 0.45, ease: "power1.in" },
+                  w.start + 0.12 + pi * 0.018,
+                );
+                tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
+              });
+            }
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.14, ease: "power2.in" }, g.end - 0.14);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      tl.seek(0);
-      window.__timelines['particle-burst'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["particle-burst"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-particle-burst/demo.html b/registry/components/caption-particle-burst/demo.html
index cd06ba584..6664f4178 100644
--- a/registry/components/caption-particle-burst/demo.html
+++ b/registry/components/caption-particle-burst/demo.html
@@ -6,47 +6,87 @@
     <title>Particle Burst</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=Outfit:wght@900&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@900&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;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #particle-burst {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0a0a;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0a0a;
       }
       #bs-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .bs-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.45); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        z-index: 1;
+        pointer-events: none;
       }
       #bs-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .bs-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 100px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 100px;
+        opacity: 0;
+        visibility: hidden;
       }
       .bs-word {
-        font-family: 'Outfit', sans-serif;
-        font-weight: 900; font-size: 88px;
+        font-family: "Outfit", sans-serif;
+        font-weight: 900;
+        font-size: 88px;
         text-transform: uppercase;
-        color: rgba(255,255,255,0.45);
-        display: inline-block; letter-spacing: 0.05em; line-height: 1;
+        color: rgba(255, 255, 255, 0.45);
+        display: inline-block;
+        letter-spacing: 0.05em;
+        line-height: 1;
       }
       .bs-particle {
-        position: absolute; width: 10px; height: 10px;
-        border-radius: 50%; opacity: 0; pointer-events: none; z-index: 20;
-        left: 960px; bottom: 180px;
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        opacity: 0;
+        pointer-events: none;
+        z-index: 20;
+        left: 960px;
+        bottom: 180px;
       }
     </style>
   </head>
@@ -60,153 +100,193 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="bs-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="bs-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="bs-overlay"></div>
       <div id="bs-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
-
-      function mulberry32(seed) {
-        return function() {
-          seed |= 0; seed = seed + 0x6D2B79F5 | 0;
-          var t = Math.imul(seed ^ seed >>> 15, 1 | seed);
-          t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
-          return ((t ^ t >>> 14) >>> 0) / 4294967296;
-        };
-      }
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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}
-      ];
-
-      // Keywords get particle burst + gold color
-      var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
-
-      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.35, nextStart - 0.05);
-        return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
-      });
-
-      var PARTICLE_COLORS = ['#FFD700','#FF6B35','#FF3C78','#9B5DE5','#00BBF9','#00F5D4','#ffffff','#F15BB5'];
-      var NUM_PARTICLES = 10;
-
-      var container = document.getElementById('bs-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 = 'bs-group';
-        grp.id = 'bs-grp-' + gi;
-
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var span = document.createElement('span');
-          span.className = 'bs-word';
-          span.id = 'bs-w-' + wi;
-          span.textContent = w.text.toUpperCase();
-          span.style.fontSize = '88px';
-          grp.appendChild(span);
+        function mulberry32(seed) {
+          return function () {
+            seed |= 0;
+            seed = (seed + 0x6d2b79f5) | 0;
+            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+
+        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 },
+        ];
+
+        // Keywords get particle burst + gold color
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+
+        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.35, nextStart - 0.05);
+          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };
         });
 
-        container.appendChild(grp);
-      });
-
-      // Create particles for keyword words
-      var particleData = {};
-      WORDS.forEach(function(w, wi) {
-        if (!KEYWORDS.has(wi)) return;
-        var rng = mulberry32(wi * 137 + 99);
-        particleData[wi] = [];
-        for (var p = 0; p < NUM_PARTICLES; p++) {
-          var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
-          var dist = 120 + rng() * 200;
-          var sz = 4 + rng() * 8;
-          var dx = Math.cos(angle) * dist;
-          var dy = -Math.sin(angle) * dist;
-          var dot = document.createElement('div');
-          dot.className = 'bs-particle';
-          dot.id = 'bs-p-' + wi + '-' + p;
-          dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
-          dot.style.width = sz.toFixed(1) + 'px';
-          dot.style.height = sz.toFixed(1) + 'px';
-          container.appendChild(dot);
-          particleData[wi].push({ el: dot, dx: dx, dy: dy });
-        }
-      });
-
-      GROUPS.forEach(function(g, gi) {
-        var grp = document.getElementById('bs-grp-' + gi);
-        var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
-
-        tl.set(grp, { visibility: 'visible' }, g.start);
-        tl.fromTo(grp,
-          { opacity: 0, scale: 0.92 },
-          { opacity: 1, scale: 1, duration: 0.2, ease: 'back.out(1.5)' },
-          g.start
-        );
-
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var wordEl = document.getElementById('bs-w-' + wi);
-          var isKW = KEYWORDS.has(wi);
-
-          tl.to(wordEl, { color: isKW ? '#FFD700' : '#ffffff', scale: isKW ? 1.12 : 1.05, duration: 0.08 }, w.start);
-          tl.to(wordEl, { color: 'rgba(255,255,255,0.4)', scale: 1.0, duration: 0.1 }, w.end);
-
-          if (isKW && particleData[wi]) {
-            particleData[wi].forEach(function(pd, pi) {
-              tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
-              tl.to(pd.el, { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: 'power3.out' }, w.start + pi * 0.018);
-              tl.to(pd.el, { opacity: 0, duration: 0.45, ease: 'power1.in' }, w.start + 0.12 + pi * 0.018);
-              tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
-            });
+        var PARTICLE_COLORS = [
+          "#FFD700",
+          "#FF6B35",
+          "#FF3C78",
+          "#9B5DE5",
+          "#00BBF9",
+          "#00F5D4",
+          "#ffffff",
+          "#F15BB5",
+        ];
+        var NUM_PARTICLES = 10;
+
+        var container = document.getElementById("bs-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 = "bs-group";
+          grp.id = "bs-grp-" + gi;
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var span = document.createElement("span");
+            span.className = "bs-word";
+            span.id = "bs-w-" + wi;
+            span.textContent = w.text.toUpperCase();
+            span.style.fontSize = "88px";
+            grp.appendChild(span);
+          });
+
+          container.appendChild(grp);
+        });
+
+        // Create particles for keyword words
+        var particleData = {};
+        WORDS.forEach(function (w, wi) {
+          if (!KEYWORDS.has(wi)) return;
+          var rng = mulberry32(wi * 137 + 99);
+          particleData[wi] = [];
+          for (var p = 0; p < NUM_PARTICLES; p++) {
+            var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;
+            var dist = 120 + rng() * 200;
+            var sz = 4 + rng() * 8;
+            var dx = Math.cos(angle) * dist;
+            var dy = -Math.sin(angle) * dist;
+            var dot = document.createElement("div");
+            dot.className = "bs-particle";
+            dot.id = "bs-p-" + wi + "-" + p;
+            dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];
+            dot.style.width = sz.toFixed(1) + "px";
+            dot.style.height = sz.toFixed(1) + "px";
+            container.appendChild(dot);
+            particleData[wi].push({ el: dot, dx: dx, dy: dy });
           }
         });
 
-        tl.to(grp, { opacity: 0, duration: 0.14, ease: 'power2.in' }, g.end - 0.14);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+        GROUPS.forEach(function (g, gi) {
+          var grp = document.getElementById("bs-grp-" + gi);
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+
+          tl.set(grp, { visibility: "visible" }, g.start);
+          tl.fromTo(
+            grp,
+            { opacity: 0, scale: 0.92 },
+            { opacity: 1, scale: 1, duration: 0.2, ease: "back.out(1.5)" },
+            g.start,
+          );
+
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordEl = document.getElementById("bs-w-" + wi);
+            var isKW = KEYWORDS.has(wi);
+
+            tl.to(
+              wordEl,
+              { color: isKW ? "#FFD700" : "#ffffff", scale: isKW ? 1.12 : 1.05, duration: 0.08 },
+              w.start,
+            );
+            tl.to(wordEl, { color: "rgba(255,255,255,0.4)", scale: 1.0, duration: 0.1 }, w.end);
+
+            if (isKW && particleData[wi]) {
+              particleData[wi].forEach(function (pd, pi) {
+                tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);
+                tl.to(
+                  pd.el,
+                  { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: "power3.out" },
+                  w.start + pi * 0.018,
+                );
+                tl.to(
+                  pd.el,
+                  { opacity: 0, duration: 0.45, ease: "power1.in" },
+                  w.start + 0.12 + pi * 0.018,
+                );
+                tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);
+              });
+            }
+          });
+
+          tl.to(grp, { opacity: 0, duration: 0.14, ease: "power2.in" }, g.end - 0.14);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      tl.seek(0);
-      window.__timelines['particle-burst'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["particle-burst"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index 1e439742a..5cca10c90 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -6,7 +6,10 @@
     <title>Pill Karaoke</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -165,45 +168,49 @@
       var WORD_FADE_LEAD = 0.05;
 
       var TRANSCRIPT = [
-        {"text": "Every", "start": 0.0, "end": 0.3},
-        {"text": "great", "start": 0.3, "end": 0.55},
-        {"text": "video", "start": 0.55, "end": 0.85},
-        {"text": "starts", "start": 0.85, "end": 1.1},
-        {"text": "with", "start": 1.1, "end": 1.25},
-        {"text": "a", "start": 1.25, "end": 1.35},
-        {"text": "single", "start": 1.35, "end": 1.65},
-        {"text": "frame.", "start": 1.65, "end": 2.0},
-        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
-        {"text": "lets", "start": 2.65, "end": 2.85},
-        {"text": "you", "start": 2.85, "end": 2.95},
-        {"text": "write", "start": 2.95, "end": 3.15},
-        {"text": "HTML", "start": 3.15, "end": 3.55},
-        {"text": "and", "start": 3.55, "end": 3.65},
-        {"text": "render", "start": 3.65, "end": 3.95},
-        {"text": "professional", "start": 3.95, "end": 4.45},
-        {"text": "video.", "start": 4.45, "end": 4.8},
-        {"text": "No", "start": 4.9, "end": 5.05},
-        {"text": "timeline.", "start": 5.05, "end": 5.45},
-        {"text": "No", "start": 5.5, "end": 5.65},
-        {"text": "drag", "start": 5.65, "end": 5.85},
-        {"text": "and", "start": 5.85, "end": 5.95},
-        {"text": "drop.", "start": 5.95, "end": 6.25},
-        {"text": "Just", "start": 6.35, "end": 6.55},
-        {"text": "code", "start": 6.55, "end": 6.8},
-        {"text": "that", "start": 6.8, "end": 6.95},
-        {"text": "becomes", "start": 6.95, "end": 7.3},
-        {"text": "cinema.", "start": 7.3, "end": 7.7}
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
       ];
 
       function normalizeWords(rawWords) {
-        return rawWords.map(function (item) {
-          var text = String(item.word || item.text || "").trim();
-          return {
-            text: text,
-            start: Math.max(0, Number(item.start) || 0),
-            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-          };
-        }).filter(function (w) { return w.text.length > 0; });
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (w) {
+            return w.text.length > 0;
+          });
       }
 
       var measureCanvas = document.createElement("canvas");
@@ -216,13 +223,19 @@
 
       function measureLineWidth(words, fontSize) {
         return words.reduce(function (total, word, index) {
-          return total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0);
+          return (
+            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
+          );
         }, 0);
       }
 
       function splitLinesForGroup(words, fontSize) {
         var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
-        if (words.some(function (w) { return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth; })) {
+        if (
+          words.some(function (w) {
+            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+          })
+        ) {
           return null;
         }
         if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
@@ -269,7 +282,11 @@
           var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
           if (wouldExceedMaxWords || wouldExceedTwoLines) {
             if (current.length) {
-              groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+              groups.push({
+                words: current.slice(),
+                start: current[0].start,
+                end: current[current.length - 1].end,
+              });
             }
             current = [word];
             return;
@@ -280,17 +297,28 @@
           var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
           var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
           if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
-            groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+            groups.push({
+              words: current.slice(),
+              start: current[0].start,
+              end: current[current.length - 1].end,
+            });
             current = [];
           }
         });
-        if (current.length) groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+        if (current.length)
+          groups.push({
+            words: current.slice(),
+            start: current[0].start,
+            end: current[current.length - 1].end,
+          });
         return groups;
       }
 
       function fontSizeForGroup(words) {
         var size = BASE_FONT_SIZE;
-        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) { size -= 2; }
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+          size -= 2;
+        }
         return size;
       }
 
@@ -342,7 +370,9 @@
         var groupEl = document.getElementById("caption-group-" + groupIndex);
         var nextGroup = GROUPS[groupIndex + 1];
         var isLastGroup = groupIndex === GROUPS.length - 1;
-        var effectiveEnd = isLastGroup ? DURATION : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var effectiveEnd = isLastGroup
+          ? DURATION
+          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
         var visibleStart = Math.max(0, group.start);
         var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
 
@@ -355,7 +385,11 @@
           var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
           tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
           if (isFirstWord) return;
-          tl.to(wordEl, { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" }, wordStart);
+          tl.to(
+            wordEl,
+            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
+            wordStart,
+          );
         });
       });
 
diff --git a/registry/components/caption-pill-karaoke/demo.html b/registry/components/caption-pill-karaoke/demo.html
index 1e439742a..5cca10c90 100644
--- a/registry/components/caption-pill-karaoke/demo.html
+++ b/registry/components/caption-pill-karaoke/demo.html
@@ -6,7 +6,10 @@
     <title>Pill Karaoke</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -165,45 +168,49 @@
       var WORD_FADE_LEAD = 0.05;
 
       var TRANSCRIPT = [
-        {"text": "Every", "start": 0.0, "end": 0.3},
-        {"text": "great", "start": 0.3, "end": 0.55},
-        {"text": "video", "start": 0.55, "end": 0.85},
-        {"text": "starts", "start": 0.85, "end": 1.1},
-        {"text": "with", "start": 1.1, "end": 1.25},
-        {"text": "a", "start": 1.25, "end": 1.35},
-        {"text": "single", "start": 1.35, "end": 1.65},
-        {"text": "frame.", "start": 1.65, "end": 2.0},
-        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
-        {"text": "lets", "start": 2.65, "end": 2.85},
-        {"text": "you", "start": 2.85, "end": 2.95},
-        {"text": "write", "start": 2.95, "end": 3.15},
-        {"text": "HTML", "start": 3.15, "end": 3.55},
-        {"text": "and", "start": 3.55, "end": 3.65},
-        {"text": "render", "start": 3.65, "end": 3.95},
-        {"text": "professional", "start": 3.95, "end": 4.45},
-        {"text": "video.", "start": 4.45, "end": 4.8},
-        {"text": "No", "start": 4.9, "end": 5.05},
-        {"text": "timeline.", "start": 5.05, "end": 5.45},
-        {"text": "No", "start": 5.5, "end": 5.65},
-        {"text": "drag", "start": 5.65, "end": 5.85},
-        {"text": "and", "start": 5.85, "end": 5.95},
-        {"text": "drop.", "start": 5.95, "end": 6.25},
-        {"text": "Just", "start": 6.35, "end": 6.55},
-        {"text": "code", "start": 6.55, "end": 6.8},
-        {"text": "that", "start": 6.8, "end": 6.95},
-        {"text": "becomes", "start": 6.95, "end": 7.3},
-        {"text": "cinema.", "start": 7.3, "end": 7.7}
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
       ];
 
       function normalizeWords(rawWords) {
-        return rawWords.map(function (item) {
-          var text = String(item.word || item.text || "").trim();
-          return {
-            text: text,
-            start: Math.max(0, Number(item.start) || 0),
-            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-          };
-        }).filter(function (w) { return w.text.length > 0; });
+        return rawWords
+          .map(function (item) {
+            var text = String(item.word || item.text || "").trim();
+            return {
+              text: text,
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (w) {
+            return w.text.length > 0;
+          });
       }
 
       var measureCanvas = document.createElement("canvas");
@@ -216,13 +223,19 @@
 
       function measureLineWidth(words, fontSize) {
         return words.reduce(function (total, word, index) {
-          return total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0);
+          return (
+            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
+          );
         }, 0);
       }
 
       function splitLinesForGroup(words, fontSize) {
         var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
-        if (words.some(function (w) { return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth; })) {
+        if (
+          words.some(function (w) {
+            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+          })
+        ) {
           return null;
         }
         if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
@@ -269,7 +282,11 @@
           var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
           if (wouldExceedMaxWords || wouldExceedTwoLines) {
             if (current.length) {
-              groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+              groups.push({
+                words: current.slice(),
+                start: current[0].start,
+                end: current[current.length - 1].end,
+              });
             }
             current = [word];
             return;
@@ -280,17 +297,28 @@
           var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
           var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
           if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
-            groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+            groups.push({
+              words: current.slice(),
+              start: current[0].start,
+              end: current[current.length - 1].end,
+            });
             current = [];
           }
         });
-        if (current.length) groups.push({ words: current.slice(), start: current[0].start, end: current[current.length - 1].end });
+        if (current.length)
+          groups.push({
+            words: current.slice(),
+            start: current[0].start,
+            end: current[current.length - 1].end,
+          });
         return groups;
       }
 
       function fontSizeForGroup(words) {
         var size = BASE_FONT_SIZE;
-        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) { size -= 2; }
+        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+          size -= 2;
+        }
         return size;
       }
 
@@ -342,7 +370,9 @@
         var groupEl = document.getElementById("caption-group-" + groupIndex);
         var nextGroup = GROUPS[groupIndex + 1];
         var isLastGroup = groupIndex === GROUPS.length - 1;
-        var effectiveEnd = isLastGroup ? DURATION : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+        var effectiveEnd = isLastGroup
+          ? DURATION
+          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
         var visibleStart = Math.max(0, group.start);
         var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
 
@@ -355,7 +385,11 @@
           var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
           tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);
           if (isFirstWord) return;
-          tl.to(wordEl, { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" }, wordStart);
+          tl.to(
+            wordEl,
+            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: "none" },
+            wordStart,
+          );
         });
       });
 
diff --git a/registry/components/caption-texture-lava/caption-texture-lava.html b/registry/components/caption-texture-lava/caption-texture-lava.html
index 212240d2c..26d79304d 100644
--- a/registry/components/caption-texture-lava/caption-texture-lava.html
+++ b/registry/components/caption-texture-lava/caption-texture-lava.html
@@ -25,25 +25,46 @@
         mask-image: url("/assets/texture-mask-text/masks/lava.png");
       }
 
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body {
-        width: 1920px; height: 1080px; margin: 0;
-        overflow: hidden; background: #0a0805;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0805;
       }
       #texture-lava {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0805;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0805;
       }
       #lv-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .lv-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.55); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.55);
+        z-index: 1;
+        pointer-events: none;
       }
       #lv-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
 
       /* Lava-specific overrides for texture mask */
@@ -59,18 +80,22 @@
 
       .lv-shadow {
         position: absolute;
-        left: 0; width: 100%; text-align: center;
+        left: 0;
+        width: 100%;
+        text-align: center;
         top: 50%;
-        filter: drop-shadow(0 4px 24px rgba(255,100,20,0.55));
-        opacity: 0; visibility: hidden;
+        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));
+        opacity: 0;
+        visibility: hidden;
       }
       .lv-word {
-        font-family: 'Anton', sans-serif;
+        font-family: "Anton", sans-serif;
         font-weight: 400;
         text-transform: uppercase;
-        color: #FFD0A0;
+        color: #ffd0a0;
         display: inline-block;
-        letter-spacing: 0.04em; line-height: 1;
+        letter-spacing: 0.04em;
+        line-height: 1;
       }
     </style>
   </head>
@@ -84,89 +109,101 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="lv-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="lv-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="lv-overlay"></div>
       <div id="lv-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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 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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      var container = document.getElementById('lv-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("lv-container");
+        var tl = gsap.timeline({ paused: true });
 
-      WORDS.forEach(function(w, wi) {
-        var txt = w.text.toUpperCase();
-        var fontSize = 200;
+        WORDS.forEach(function (w, wi) {
+          var txt = w.text.toUpperCase();
+          var fontSize = 200;
 
-        var shadow = document.createElement('div');
-        shadow.className = 'lv-shadow';
-        shadow.id = 'lv-shadow-' + wi;
-        gsap.set(shadow, { yPercent: -50 });
+          var shadow = document.createElement("div");
+          shadow.className = "lv-shadow";
+          shadow.id = "lv-shadow-" + wi;
+          gsap.set(shadow, { yPercent: -50 });
 
-        var wordEl = document.createElement('div');
-        wordEl.className = 'hf-texture-text hf-texture-lava lv-texture-override lv-word';
-        wordEl.id = 'lv-word-' + wi;
-        wordEl.textContent = txt;
-        wordEl.style.fontSize = fontSize + 'px';
-        if (KEYWORDS.has(wi)) wordEl.style.color = '#FFAA44';
+          var wordEl = document.createElement("div");
+          wordEl.className = "hf-texture-text hf-texture-lava lv-texture-override lv-word";
+          wordEl.id = "lv-word-" + wi;
+          wordEl.textContent = txt;
+          wordEl.style.fontSize = fontSize + "px";
+          if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
 
-        shadow.appendChild(wordEl);
-        container.appendChild(shadow);
+          shadow.appendChild(wordEl);
+          container.appendChild(shadow);
 
-        var dur = Math.max(w.end - w.start + 0.3, 0.4);
+          var dur = Math.max(w.end - w.start + 0.3, 0.4);
 
-        tl.set(shadow, { visibility: 'visible', opacity: 0 }, w.start);
-        tl.fromTo(shadow,
-          { opacity: 0, scale: 0.88 },
-          { opacity: 1, scale: 1, duration: 0.18, ease: 'power3.out' },
-          w.start
-        );
-        tl.set(wordEl, { '--mask-position': '0% 50%' }, w.start);
-        tl.to(wordEl, { '--mask-position': '100% 50%', duration: dur, ease: 'sine.inOut' }, w.start);
+          tl.set(shadow, { visibility: "visible", opacity: 0 }, w.start);
+          tl.fromTo(
+            shadow,
+            { opacity: 0, scale: 0.88 },
+            { opacity: 1, scale: 1, duration: 0.18, ease: "power3.out" },
+            w.start,
+          );
+          tl.set(wordEl, { "--mask-position": "0% 50%" }, w.start);
+          tl.to(
+            wordEl,
+            { "--mask-position": "100% 50%", duration: dur, ease: "sine.inOut" },
+            w.start,
+          );
 
-        tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: 'power2.in' }, w.end);
-        tl.set(shadow, { opacity: 0, visibility: 'hidden' }, w.end + 0.1);
-      });
+          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(shadow, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
 
-      tl.seek(0);
-      window.__timelines['texture-lava'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["texture-lava"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-texture-lava/demo.html b/registry/components/caption-texture-lava/demo.html
index 212240d2c..26d79304d 100644
--- a/registry/components/caption-texture-lava/demo.html
+++ b/registry/components/caption-texture-lava/demo.html
@@ -25,25 +25,46 @@
         mask-image: url("/assets/texture-mask-text/masks/lava.png");
       }
 
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body {
-        width: 1920px; height: 1080px; margin: 0;
-        overflow: hidden; background: #0a0805;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #0a0805;
       }
       #texture-lava {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #0a0805;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0a0805;
       }
       #lv-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .lv-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.55); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.55);
+        z-index: 1;
+        pointer-events: none;
       }
       #lv-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
 
       /* Lava-specific overrides for texture mask */
@@ -59,18 +80,22 @@
 
       .lv-shadow {
         position: absolute;
-        left: 0; width: 100%; text-align: center;
+        left: 0;
+        width: 100%;
+        text-align: center;
         top: 50%;
-        filter: drop-shadow(0 4px 24px rgba(255,100,20,0.55));
-        opacity: 0; visibility: hidden;
+        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));
+        opacity: 0;
+        visibility: hidden;
       }
       .lv-word {
-        font-family: 'Anton', sans-serif;
+        font-family: "Anton", sans-serif;
         font-weight: 400;
         text-transform: uppercase;
-        color: #FFD0A0;
+        color: #ffd0a0;
         display: inline-block;
-        letter-spacing: 0.04em; line-height: 1;
+        letter-spacing: 0.04em;
+        line-height: 1;
       }
     </style>
   </head>
@@ -84,89 +109,101 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="lv-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="lv-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="lv-overlay"></div>
       <div id="lv-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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 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 KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
+        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.
 
-      var container = document.getElementById('lv-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("lv-container");
+        var tl = gsap.timeline({ paused: true });
 
-      WORDS.forEach(function(w, wi) {
-        var txt = w.text.toUpperCase();
-        var fontSize = 200;
+        WORDS.forEach(function (w, wi) {
+          var txt = w.text.toUpperCase();
+          var fontSize = 200;
 
-        var shadow = document.createElement('div');
-        shadow.className = 'lv-shadow';
-        shadow.id = 'lv-shadow-' + wi;
-        gsap.set(shadow, { yPercent: -50 });
+          var shadow = document.createElement("div");
+          shadow.className = "lv-shadow";
+          shadow.id = "lv-shadow-" + wi;
+          gsap.set(shadow, { yPercent: -50 });
 
-        var wordEl = document.createElement('div');
-        wordEl.className = 'hf-texture-text hf-texture-lava lv-texture-override lv-word';
-        wordEl.id = 'lv-word-' + wi;
-        wordEl.textContent = txt;
-        wordEl.style.fontSize = fontSize + 'px';
-        if (KEYWORDS.has(wi)) wordEl.style.color = '#FFAA44';
+          var wordEl = document.createElement("div");
+          wordEl.className = "hf-texture-text hf-texture-lava lv-texture-override lv-word";
+          wordEl.id = "lv-word-" + wi;
+          wordEl.textContent = txt;
+          wordEl.style.fontSize = fontSize + "px";
+          if (KEYWORDS.has(wi)) wordEl.style.color = "#FFAA44";
 
-        shadow.appendChild(wordEl);
-        container.appendChild(shadow);
+          shadow.appendChild(wordEl);
+          container.appendChild(shadow);
 
-        var dur = Math.max(w.end - w.start + 0.3, 0.4);
+          var dur = Math.max(w.end - w.start + 0.3, 0.4);
 
-        tl.set(shadow, { visibility: 'visible', opacity: 0 }, w.start);
-        tl.fromTo(shadow,
-          { opacity: 0, scale: 0.88 },
-          { opacity: 1, scale: 1, duration: 0.18, ease: 'power3.out' },
-          w.start
-        );
-        tl.set(wordEl, { '--mask-position': '0% 50%' }, w.start);
-        tl.to(wordEl, { '--mask-position': '100% 50%', duration: dur, ease: 'sine.inOut' }, w.start);
+          tl.set(shadow, { visibility: "visible", opacity: 0 }, w.start);
+          tl.fromTo(
+            shadow,
+            { opacity: 0, scale: 0.88 },
+            { opacity: 1, scale: 1, duration: 0.18, ease: "power3.out" },
+            w.start,
+          );
+          tl.set(wordEl, { "--mask-position": "0% 50%" }, w.start);
+          tl.to(
+            wordEl,
+            { "--mask-position": "100% 50%", duration: dur, ease: "sine.inOut" },
+            w.start,
+          );
 
-        tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: 'power2.in' }, w.end);
-        tl.set(shadow, { opacity: 0, visibility: 'hidden' }, w.end + 0.1);
-      });
+          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: "power2.in" }, w.end);
+          tl.set(shadow, { opacity: 0, visibility: "hidden" }, w.end + 0.1);
+        });
 
-      tl.seek(0);
-      window.__timelines['texture-lava'] = tl;
-    })();
+        tl.seek(0);
+        window.__timelines["texture-lava"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-typewriter/caption-typewriter.html b/registry/components/caption-typewriter/caption-typewriter.html
index 5df7d240a..e1f63bef2 100644
--- a/registry/components/caption-typewriter/caption-typewriter.html
+++ b/registry/components/caption-typewriter/caption-typewriter.html
@@ -6,49 +6,87 @@
     <title>Typewriter</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=JetBrains+Mono:wght@700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body {
-        width: 1920px; height: 1080px; margin: 0;
-        overflow: hidden; background: #000;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
       }
       #typewriter {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #000;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
       }
       #tw-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .tw-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.85); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.85);
+        z-index: 1;
+        pointer-events: none;
       }
       #tw-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .tw-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 80px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
       }
       .tw-word {
-        font-family: 'JetBrains Mono', monospace;
-        font-weight: 700; font-size: 76px;
-        color: #00FF41;
-        text-shadow: 0 0 12px rgba(0,255,65,0.5);
-        display: inline-block; letter-spacing: 0.04em; line-height: 1; white-space: nowrap;
+        font-family: "JetBrains Mono", monospace;
+        font-weight: 700;
+        font-size: 76px;
+        color: #00ff41;
+        text-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        white-space: nowrap;
+      }
+      .tw-char {
+        display: none;
       }
-      .tw-char { display: none; }
       .tw-cursor {
-        font-family: 'JetBrains Mono', monospace;
-        font-weight: 700; font-size: 76px;
-        color: #00FF41;
-        text-shadow: 0 0 12px rgba(0,255,65,0.5);
+        font-family: "JetBrains Mono", monospace;
+        font-weight: 700;
+        font-size: 76px;
+        color: #00ff41;
+        text-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
         display: none;
       }
     </style>
@@ -63,119 +101,126 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="tw-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="tw-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="tw-overlay"></div>
       <div id="tw-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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 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 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},
-      ];
+        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 },
+        ];
 
-      var container = document.getElementById('tw-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("tw-container");
+        var tl = gsap.timeline({ paused: true });
 
-      GROUPS.forEach(function(g, gi) {
-        var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
-        var fontSize = 76;
-        var grp = document.createElement('div');
-        grp.className = 'tw-group';
-        grp.id = 'tw-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var fontSize = 76;
+          var grp = document.createElement("div");
+          grp.className = "tw-group";
+          grp.id = "tw-grp-" + gi;
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var wordWrap = document.createElement('span');
-          wordWrap.className = 'tw-word';
-          wordWrap.id = 'tw-w-' + wi;
-          wordWrap.style.fontSize = fontSize + 'px';
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordWrap = document.createElement("span");
+            wordWrap.className = "tw-word";
+            wordWrap.id = "tw-w-" + wi;
+            wordWrap.style.fontSize = fontSize + "px";
 
-          w.text.split('').forEach(function(c, ci) {
-            var charEl = document.createElement('span');
-            charEl.className = 'tw-char';
-            charEl.id = 'tw-c-' + wi + '-' + ci;
-            charEl.textContent = c;
-            wordWrap.appendChild(charEl);
-          });
+            w.text.split("").forEach(function (c, ci) {
+              var charEl = document.createElement("span");
+              charEl.className = "tw-char";
+              charEl.id = "tw-c-" + wi + "-" + ci;
+              charEl.textContent = c;
+              wordWrap.appendChild(charEl);
+            });
 
-          var cursor = document.createElement('span');
-          cursor.className = 'tw-cursor';
-          cursor.id = 'tw-cur-' + wi;
-          cursor.textContent = '_';
-          cursor.style.fontSize = fontSize + 'px';
-          wordWrap.appendChild(cursor);
-          grp.appendChild(wordWrap);
-        });
+            var cursor = document.createElement("span");
+            cursor.className = "tw-cursor";
+            cursor.id = "tw-cur-" + wi;
+            cursor.textContent = "_";
+            cursor.style.fontSize = fontSize + "px";
+            wordWrap.appendChild(cursor);
+            grp.appendChild(wordWrap);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible', opacity: 1 }, g.start);
+          tl.set(grp, { visibility: "visible", opacity: 1 }, g.start);
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var chars = w.text.split('');
-          var wordDuration = Math.max(w.end - w.start, 0.1);
-          var charCount = chars.length;
-          var cursorEl = document.getElementById('tw-cur-' + wi);
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var chars = w.text.split("");
+            var wordDuration = Math.max(w.end - w.start, 0.1);
+            var charCount = chars.length;
+            var cursorEl = document.getElementById("tw-cur-" + wi);
 
-          tl.set(cursorEl, { display: 'inline' }, w.start);
-          chars.forEach(function(c, ci) {
-            var charEl = document.getElementById('tw-c-' + wi + '-' + ci);
-            tl.set(charEl, { display: 'inline' }, w.start + ci * (wordDuration / charCount));
+            tl.set(cursorEl, { display: "inline" }, w.start);
+            chars.forEach(function (c, ci) {
+              var charEl = document.getElementById("tw-c-" + wi + "-" + ci);
+              tl.set(charEl, { display: "inline" }, w.start + ci * (wordDuration / charCount));
+            });
+            tl.set(cursorEl, { display: "none" }, w.end);
           });
-          tl.set(cursorEl, { display: 'none' }, w.end);
-        });
 
-        tl.to(grp, { opacity: 0, duration: 0.2 }, g.end - 0.2);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+          tl.to(grp, { opacity: 0, duration: 0.2 }, g.end - 0.2);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      window.__timelines['typewriter'] = tl;
-    })();
+        window.__timelines["typewriter"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-typewriter/demo.html b/registry/components/caption-typewriter/demo.html
index 5df7d240a..e1f63bef2 100644
--- a/registry/components/caption-typewriter/demo.html
+++ b/registry/components/caption-typewriter/demo.html
@@ -6,49 +6,87 @@
     <title>Typewriter</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=JetBrains+Mono:wght@700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body {
-        width: 1920px; height: 1080px; margin: 0;
-        overflow: hidden; background: #000;
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        width: 1920px;
+        height: 1080px;
+        margin: 0;
+        overflow: hidden;
+        background: #000;
       }
       #typewriter {
-        position: relative; width: 1920px; height: 1080px;
-        overflow: hidden; background: #000;
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
       }
       #tw-video {
-        position: absolute; inset: 0; z-index: 0;
-        width: 100%; height: 100%; object-fit: cover;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
       .tw-overlay {
-        position: absolute; inset: 0;
-        background: rgba(0,0,0,0.85); z-index: 1; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.85);
+        z-index: 1;
+        pointer-events: none;
       }
       #tw-container {
-        position: absolute; inset: 0; z-index: 10; pointer-events: none;
+        position: absolute;
+        inset: 0;
+        z-index: 10;
+        pointer-events: none;
       }
       .tw-group {
         position: absolute;
-        bottom: 120px; left: 0; width: 100%;
-        display: flex; flex-wrap: wrap; align-items: flex-end;
-        justify-content: center; gap: 24px; padding: 0 80px;
-        opacity: 0; visibility: hidden;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: center;
+        gap: 24px;
+        padding: 0 80px;
+        opacity: 0;
+        visibility: hidden;
       }
       .tw-word {
-        font-family: 'JetBrains Mono', monospace;
-        font-weight: 700; font-size: 76px;
-        color: #00FF41;
-        text-shadow: 0 0 12px rgba(0,255,65,0.5);
-        display: inline-block; letter-spacing: 0.04em; line-height: 1; white-space: nowrap;
+        font-family: "JetBrains Mono", monospace;
+        font-weight: 700;
+        font-size: 76px;
+        color: #00ff41;
+        text-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
+        display: inline-block;
+        letter-spacing: 0.04em;
+        line-height: 1;
+        white-space: nowrap;
+      }
+      .tw-char {
+        display: none;
       }
-      .tw-char { display: none; }
       .tw-cursor {
-        font-family: 'JetBrains Mono', monospace;
-        font-weight: 700; font-size: 76px;
-        color: #00FF41;
-        text-shadow: 0 0 12px rgba(0,255,65,0.5);
+        font-family: "JetBrains Mono", monospace;
+        font-weight: 700;
+        font-size: 76px;
+        color: #00ff41;
+        text-shadow: 0 0 12px rgba(0, 255, 65, 0.5);
         display: none;
       }
     </style>
@@ -63,119 +101,126 @@
       data-width="1920"
       data-height="1080"
     >
-      <video id="tw-video" muted playsinline
-        data-start="0" data-duration="8" data-track-index="0" data-has-audio="false"></video>
+      <video
+        id="tw-video"
+        muted
+        playsinline
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        data-has-audio="false"
+      ></video>
       <div class="tw-overlay"></div>
       <div id="tw-container"></div>
     </div>
 
     <script>
-    (function () {
-      window.__timelines = window.__timelines || {};
+      (function () {
+        window.__timelines = window.__timelines || {};
 
-      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 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 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},
-      ];
+        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 },
+        ];
 
-      var container = document.getElementById('tw-container');
-      var tl = gsap.timeline({ paused: true });
+        var container = document.getElementById("tw-container");
+        var tl = gsap.timeline({ paused: true });
 
-      GROUPS.forEach(function(g, gi) {
-        var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
-        var fontSize = 76;
-        var grp = document.createElement('div');
-        grp.className = 'tw-group';
-        grp.id = 'tw-grp-' + gi;
+        GROUPS.forEach(function (g, gi) {
+          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);
+          var fontSize = 76;
+          var grp = document.createElement("div");
+          grp.className = "tw-group";
+          grp.id = "tw-grp-" + gi;
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var wordWrap = document.createElement('span');
-          wordWrap.className = 'tw-word';
-          wordWrap.id = 'tw-w-' + wi;
-          wordWrap.style.fontSize = fontSize + 'px';
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var wordWrap = document.createElement("span");
+            wordWrap.className = "tw-word";
+            wordWrap.id = "tw-w-" + wi;
+            wordWrap.style.fontSize = fontSize + "px";
 
-          w.text.split('').forEach(function(c, ci) {
-            var charEl = document.createElement('span');
-            charEl.className = 'tw-char';
-            charEl.id = 'tw-c-' + wi + '-' + ci;
-            charEl.textContent = c;
-            wordWrap.appendChild(charEl);
-          });
+            w.text.split("").forEach(function (c, ci) {
+              var charEl = document.createElement("span");
+              charEl.className = "tw-char";
+              charEl.id = "tw-c-" + wi + "-" + ci;
+              charEl.textContent = c;
+              wordWrap.appendChild(charEl);
+            });
 
-          var cursor = document.createElement('span');
-          cursor.className = 'tw-cursor';
-          cursor.id = 'tw-cur-' + wi;
-          cursor.textContent = '_';
-          cursor.style.fontSize = fontSize + 'px';
-          wordWrap.appendChild(cursor);
-          grp.appendChild(wordWrap);
-        });
+            var cursor = document.createElement("span");
+            cursor.className = "tw-cursor";
+            cursor.id = "tw-cur-" + wi;
+            cursor.textContent = "_";
+            cursor.style.fontSize = fontSize + "px";
+            wordWrap.appendChild(cursor);
+            grp.appendChild(wordWrap);
+          });
 
-        container.appendChild(grp);
+          container.appendChild(grp);
 
-        tl.set(grp, { visibility: 'visible', opacity: 1 }, g.start);
+          tl.set(grp, { visibility: "visible", opacity: 1 }, g.start);
 
-        groupWords.forEach(function(w, i) {
-          var wi = g.wordStart + i;
-          var chars = w.text.split('');
-          var wordDuration = Math.max(w.end - w.start, 0.1);
-          var charCount = chars.length;
-          var cursorEl = document.getElementById('tw-cur-' + wi);
+          groupWords.forEach(function (w, i) {
+            var wi = g.wordStart + i;
+            var chars = w.text.split("");
+            var wordDuration = Math.max(w.end - w.start, 0.1);
+            var charCount = chars.length;
+            var cursorEl = document.getElementById("tw-cur-" + wi);
 
-          tl.set(cursorEl, { display: 'inline' }, w.start);
-          chars.forEach(function(c, ci) {
-            var charEl = document.getElementById('tw-c-' + wi + '-' + ci);
-            tl.set(charEl, { display: 'inline' }, w.start + ci * (wordDuration / charCount));
+            tl.set(cursorEl, { display: "inline" }, w.start);
+            chars.forEach(function (c, ci) {
+              var charEl = document.getElementById("tw-c-" + wi + "-" + ci);
+              tl.set(charEl, { display: "inline" }, w.start + ci * (wordDuration / charCount));
+            });
+            tl.set(cursorEl, { display: "none" }, w.end);
           });
-          tl.set(cursorEl, { display: 'none' }, w.end);
-        });
 
-        tl.to(grp, { opacity: 0, duration: 0.2 }, g.end - 0.2);
-        tl.set(grp, { opacity: 0, visibility: 'hidden' }, g.end);
-      });
+          tl.to(grp, { opacity: 0, duration: 0.2 }, g.end - 0.2);
+          tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
+        });
 
-      window.__timelines['typewriter'] = tl;
-    })();
+        window.__timelines["typewriter"] = tl;
+      })();
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index 48a574fdc..020a13bec 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -6,7 +6,10 @@
     <title>Weight Shift</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@300;700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -145,44 +148,48 @@
       var FONT_WEIGHT_BOLD = 700;
 
       var TRANSCRIPT = [
-        {"text": "Every", "start": 0.0, "end": 0.3},
-        {"text": "great", "start": 0.3, "end": 0.55},
-        {"text": "video", "start": 0.55, "end": 0.85},
-        {"text": "starts", "start": 0.85, "end": 1.1},
-        {"text": "with", "start": 1.1, "end": 1.25},
-        {"text": "a", "start": 1.25, "end": 1.35},
-        {"text": "single", "start": 1.35, "end": 1.65},
-        {"text": "frame.", "start": 1.65, "end": 2.0},
-        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
-        {"text": "lets", "start": 2.65, "end": 2.85},
-        {"text": "you", "start": 2.85, "end": 2.95},
-        {"text": "write", "start": 2.95, "end": 3.15},
-        {"text": "HTML", "start": 3.15, "end": 3.55},
-        {"text": "and", "start": 3.55, "end": 3.65},
-        {"text": "render", "start": 3.65, "end": 3.95},
-        {"text": "professional", "start": 3.95, "end": 4.45},
-        {"text": "video.", "start": 4.45, "end": 4.8},
-        {"text": "No", "start": 4.9, "end": 5.05},
-        {"text": "timeline.", "start": 5.05, "end": 5.45},
-        {"text": "No", "start": 5.5, "end": 5.65},
-        {"text": "drag", "start": 5.65, "end": 5.85},
-        {"text": "and", "start": 5.85, "end": 5.95},
-        {"text": "drop.", "start": 5.95, "end": 6.25},
-        {"text": "Just", "start": 6.35, "end": 6.55},
-        {"text": "code", "start": 6.55, "end": 6.8},
-        {"text": "that", "start": 6.8, "end": 6.95},
-        {"text": "becomes", "start": 6.95, "end": 7.3},
-        {"text": "cinema.", "start": 7.3, "end": 7.7}
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
       ];
 
       function normalizeWords(rawWords) {
-        return rawWords.map(function (item) {
-          return {
-            text: String(item.word || item.text || "").trim(),
-            start: Math.max(0, Number(item.start) || 0),
-            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-          };
-        }).filter(function (word) { return word.text.length > 0; });
+        return rawWords
+          .map(function (item) {
+            return {
+              text: String(item.word || item.text || "").trim(),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
       }
 
       var measureCanvas = document.createElement("canvas");
@@ -214,7 +221,10 @@
           var w2 = measureLineWidth(words.slice(s));
           if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
             var diff = Math.abs(w1 - w2);
-            if (diff < bestDiff) { bestDiff = diff; bestSplit = s; }
+            if (diff < bestDiff) {
+              bestDiff = diff;
+              bestSplit = s;
+            }
           }
         }
         var result = [];
@@ -239,7 +249,12 @@
           current.push(word);
           var punctuation = /[,.:!?]$/.test(word.text);
           var pause = nextWord ? nextWord.start - word.end : 0;
-          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
             groups.push(makeGroup(current));
             current = [];
           }
@@ -249,7 +264,12 @@
       }
 
       function makeGroup(words) {
-        return { words: words.slice(), lines: splitLines(words), start: words[0].start, end: words[words.length - 1].end };
+        return {
+          words: words.slice(),
+          lines: splitLines(words),
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
       }
 
       function buildCaptions(groups) {
@@ -291,7 +311,9 @@
         return Math.max(0, group.start - entryLead);
       });
 
-      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
 
       GROUPS.forEach(function (group, groupIndex) {
         var groupEl = allGroupEls[groupIndex];
@@ -303,15 +325,27 @@
         });
 
         tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
-        tl.to(groupEl, { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
 
         if (group.lines.length === 2) {
           var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
           var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
           var line2FirstWord = group.lines[1].words[0];
           var switchTime = line2FirstWord.start;
-          tl.to(line1El, { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" }, switchTime);
-          tl.to(line2El, { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" }, switchTime);
+          tl.to(
+            line1El,
+            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+          tl.to(
+            line2El,
+            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
         }
 
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
diff --git a/registry/components/caption-weight-shift/demo.html b/registry/components/caption-weight-shift/demo.html
index 48a574fdc..020a13bec 100644
--- a/registry/components/caption-weight-shift/demo.html
+++ b/registry/components/caption-weight-shift/demo.html
@@ -6,7 +6,10 @@
     <title>Weight Shift</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@300;700&display=swap" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <style>
       *,
@@ -145,44 +148,48 @@
       var FONT_WEIGHT_BOLD = 700;
 
       var TRANSCRIPT = [
-        {"text": "Every", "start": 0.0, "end": 0.3},
-        {"text": "great", "start": 0.3, "end": 0.55},
-        {"text": "video", "start": 0.55, "end": 0.85},
-        {"text": "starts", "start": 0.85, "end": 1.1},
-        {"text": "with", "start": 1.1, "end": 1.25},
-        {"text": "a", "start": 1.25, "end": 1.35},
-        {"text": "single", "start": 1.35, "end": 1.65},
-        {"text": "frame.", "start": 1.65, "end": 2.0},
-        {"text": "HyperFrames", "start": 2.1, "end": 2.65},
-        {"text": "lets", "start": 2.65, "end": 2.85},
-        {"text": "you", "start": 2.85, "end": 2.95},
-        {"text": "write", "start": 2.95, "end": 3.15},
-        {"text": "HTML", "start": 3.15, "end": 3.55},
-        {"text": "and", "start": 3.55, "end": 3.65},
-        {"text": "render", "start": 3.65, "end": 3.95},
-        {"text": "professional", "start": 3.95, "end": 4.45},
-        {"text": "video.", "start": 4.45, "end": 4.8},
-        {"text": "No", "start": 4.9, "end": 5.05},
-        {"text": "timeline.", "start": 5.05, "end": 5.45},
-        {"text": "No", "start": 5.5, "end": 5.65},
-        {"text": "drag", "start": 5.65, "end": 5.85},
-        {"text": "and", "start": 5.85, "end": 5.95},
-        {"text": "drop.", "start": 5.95, "end": 6.25},
-        {"text": "Just", "start": 6.35, "end": 6.55},
-        {"text": "code", "start": 6.55, "end": 6.8},
-        {"text": "that", "start": 6.8, "end": 6.95},
-        {"text": "becomes", "start": 6.95, "end": 7.3},
-        {"text": "cinema.", "start": 7.3, "end": 7.7}
+        { text: "Every", start: 0.0, end: 0.3 },
+        { text: "great", start: 0.3, end: 0.55 },
+        { text: "video", start: 0.55, end: 0.85 },
+        { text: "starts", start: 0.85, end: 1.1 },
+        { text: "with", start: 1.1, end: 1.25 },
+        { text: "a", start: 1.25, end: 1.35 },
+        { text: "single", start: 1.35, end: 1.65 },
+        { text: "frame.", start: 1.65, end: 2.0 },
+        { text: "HyperFrames", start: 2.1, end: 2.65 },
+        { text: "lets", start: 2.65, end: 2.85 },
+        { text: "you", start: 2.85, end: 2.95 },
+        { text: "write", start: 2.95, end: 3.15 },
+        { text: "HTML", start: 3.15, end: 3.55 },
+        { text: "and", start: 3.55, end: 3.65 },
+        { text: "render", start: 3.65, end: 3.95 },
+        { text: "professional", start: 3.95, end: 4.45 },
+        { text: "video.", start: 4.45, end: 4.8 },
+        { text: "No", start: 4.9, end: 5.05 },
+        { text: "timeline.", start: 5.05, end: 5.45 },
+        { text: "No", start: 5.5, end: 5.65 },
+        { text: "drag", start: 5.65, end: 5.85 },
+        { text: "and", start: 5.85, end: 5.95 },
+        { text: "drop.", start: 5.95, end: 6.25 },
+        { text: "Just", start: 6.35, end: 6.55 },
+        { text: "code", start: 6.55, end: 6.8 },
+        { text: "that", start: 6.8, end: 6.95 },
+        { text: "becomes", start: 6.95, end: 7.3 },
+        { text: "cinema.", start: 7.3, end: 7.7 },
       ];
 
       function normalizeWords(rawWords) {
-        return rawWords.map(function (item) {
-          return {
-            text: String(item.word || item.text || "").trim(),
-            start: Math.max(0, Number(item.start) || 0),
-            end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-          };
-        }).filter(function (word) { return word.text.length > 0; });
+        return rawWords
+          .map(function (item) {
+            return {
+              text: String(item.word || item.text || "").trim(),
+              start: Math.max(0, Number(item.start) || 0),
+              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+            };
+          })
+          .filter(function (word) {
+            return word.text.length > 0;
+          });
       }
 
       var measureCanvas = document.createElement("canvas");
@@ -214,7 +221,10 @@
           var w2 = measureLineWidth(words.slice(s));
           if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
             var diff = Math.abs(w1 - w2);
-            if (diff < bestDiff) { bestDiff = diff; bestSplit = s; }
+            if (diff < bestDiff) {
+              bestDiff = diff;
+              bestSplit = s;
+            }
           }
         }
         var result = [];
@@ -239,7 +249,12 @@
           current.push(word);
           var punctuation = /[,.:!?]$/.test(word.text);
           var pause = nextWord ? nextWord.start - word.end : 0;
-          if (!nextWord || punctuation || pause >= PAUSE_THRESHOLD || current.length >= MAX_WORDS_PER_GROUP) {
+          if (
+            !nextWord ||
+            punctuation ||
+            pause >= PAUSE_THRESHOLD ||
+            current.length >= MAX_WORDS_PER_GROUP
+          ) {
             groups.push(makeGroup(current));
             current = [];
           }
@@ -249,7 +264,12 @@
       }
 
       function makeGroup(words) {
-        return { words: words.slice(), lines: splitLines(words), start: words[0].start, end: words[words.length - 1].end };
+        return {
+          words: words.slice(),
+          lines: splitLines(words),
+          start: words[0].start,
+          end: words[words.length - 1].end,
+        };
       }
 
       function buildCaptions(groups) {
@@ -291,7 +311,9 @@
         return Math.max(0, group.start - entryLead);
       });
 
-      var allGroupEls = GROUPS.map(function (_, i) { return document.getElementById("caption-group-" + i); });
+      var allGroupEls = GROUPS.map(function (_, i) {
+        return document.getElementById("caption-group-" + i);
+      });
 
       GROUPS.forEach(function (group, groupIndex) {
         var groupEl = allGroupEls[groupIndex];
@@ -303,15 +325,27 @@
         });
 
         tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
-        tl.to(groupEl, { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true }, visibleStart);
+        tl.to(
+          groupEl,
+          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+          visibleStart,
+        );
 
         if (group.lines.length === 2) {
           var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
           var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
           var line2FirstWord = group.lines[1].words[0];
           var switchTime = line2FirstWord.start;
-          tl.to(line1El, { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" }, switchTime);
-          tl.to(line2El, { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" }, switchTime);
+          tl.to(
+            line1El,
+            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
+          tl.to(
+            line2El,
+            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+            switchTime,
+          );
         }
 
         tl.set(groupEl, { opacity: 0 }, visibleEnd);

From bced3b6d7e671440ba293b77a2f3502bf1e1f19f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sun, 17 May 2026 20:13:10 +0000
Subject: [PATCH 3/7] feat: add CDN preview video URLs to caption registry
 items

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 registry/components/caption-clip-wipe/registry-item.json       | 3 ++-
 .../components/caption-editorial-emphasis/registry-item.json   | 3 ++-
 registry/components/caption-emoji-pop/registry-item.json       | 3 ++-
 registry/components/caption-glitch-rgb/registry-item.json      | 3 ++-
 registry/components/caption-gradient-fill/registry-item.json   | 3 ++-
 registry/components/caption-kinetic-slam/registry-item.json    | 3 ++-
 registry/components/caption-matrix-decode/registry-item.json   | 3 ++-
 registry/components/caption-neon-accent/registry-item.json     | 3 ++-
 registry/components/caption-neon-glow/registry-item.json       | 3 ++-
 registry/components/caption-parallax-layers/registry-item.json | 3 ++-
 registry/components/caption-particle-burst/registry-item.json  | 3 ++-
 registry/components/caption-pill-karaoke/registry-item.json    | 3 ++-
 registry/components/caption-texture-lava/registry-item.json    | 3 ++-
 registry/components/caption-typewriter/registry-item.json      | 3 ++-
 registry/components/caption-weight-shift/registry-item.json    | 3 ++-
 15 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/registry/components/caption-clip-wipe/registry-item.json b/registry/components/caption-clip-wipe/registry-item.json
index e1a545bb8..8fa1862a2 100644
--- a/registry/components/caption-clip-wipe/registry-item.json
+++ b/registry/components/caption-clip-wipe/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-clip-wipe.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4"
 }
diff --git a/registry/components/caption-editorial-emphasis/registry-item.json b/registry/components/caption-editorial-emphasis/registry-item.json
index d0f88ecf4..680256d42 100644
--- a/registry/components/caption-editorial-emphasis/registry-item.json
+++ b/registry/components/caption-editorial-emphasis/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-editorial-emphasis.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-editorial-emphasis/preview.mp4"
 }
diff --git a/registry/components/caption-emoji-pop/registry-item.json b/registry/components/caption-emoji-pop/registry-item.json
index 523126d4b..a86dc5227 100644
--- a/registry/components/caption-emoji-pop/registry-item.json
+++ b/registry/components/caption-emoji-pop/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-emoji-pop.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-emoji-pop/preview.mp4"
 }
diff --git a/registry/components/caption-glitch-rgb/registry-item.json b/registry/components/caption-glitch-rgb/registry-item.json
index 278d2e966..e8bb08e51 100644
--- a/registry/components/caption-glitch-rgb/registry-item.json
+++ b/registry/components/caption-glitch-rgb/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-glitch-rgb.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4"
 }
diff --git a/registry/components/caption-gradient-fill/registry-item.json b/registry/components/caption-gradient-fill/registry-item.json
index dbf8c92a3..76be8f37d 100644
--- a/registry/components/caption-gradient-fill/registry-item.json
+++ b/registry/components/caption-gradient-fill/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-gradient-fill.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4"
 }
diff --git a/registry/components/caption-kinetic-slam/registry-item.json b/registry/components/caption-kinetic-slam/registry-item.json
index fa3249229..4d060be53 100644
--- a/registry/components/caption-kinetic-slam/registry-item.json
+++ b/registry/components/caption-kinetic-slam/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-kinetic-slam.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-kinetic-slam/preview.mp4"
 }
diff --git a/registry/components/caption-matrix-decode/registry-item.json b/registry/components/caption-matrix-decode/registry-item.json
index 71379cd17..a93cbbecc 100644
--- a/registry/components/caption-matrix-decode/registry-item.json
+++ b/registry/components/caption-matrix-decode/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-matrix-decode.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-matrix-decode/preview.mp4"
 }
diff --git a/registry/components/caption-neon-accent/registry-item.json b/registry/components/caption-neon-accent/registry-item.json
index 01aabe703..b72348d9b 100644
--- a/registry/components/caption-neon-accent/registry-item.json
+++ b/registry/components/caption-neon-accent/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-neon-accent.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-accent/preview.mp4"
 }
diff --git a/registry/components/caption-neon-glow/registry-item.json b/registry/components/caption-neon-glow/registry-item.json
index 2a7824a54..aeef9ec4f 100644
--- a/registry/components/caption-neon-glow/registry-item.json
+++ b/registry/components/caption-neon-glow/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-neon-glow.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-neon-glow/preview.mp4"
 }
diff --git a/registry/components/caption-parallax-layers/registry-item.json b/registry/components/caption-parallax-layers/registry-item.json
index cdb5edfa5..85410bc02 100644
--- a/registry/components/caption-parallax-layers/registry-item.json
+++ b/registry/components/caption-parallax-layers/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-parallax-layers.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-parallax-layers/preview.mp4"
 }
diff --git a/registry/components/caption-particle-burst/registry-item.json b/registry/components/caption-particle-burst/registry-item.json
index d594310ea..0cf52345a 100644
--- a/registry/components/caption-particle-burst/registry-item.json
+++ b/registry/components/caption-particle-burst/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-particle-burst.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-particle-burst/preview.mp4"
 }
diff --git a/registry/components/caption-pill-karaoke/registry-item.json b/registry/components/caption-pill-karaoke/registry-item.json
index 1651c748f..1e616f42e 100644
--- a/registry/components/caption-pill-karaoke/registry-item.json
+++ b/registry/components/caption-pill-karaoke/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-pill-karaoke.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-pill-karaoke/preview.mp4"
 }
diff --git a/registry/components/caption-texture-lava/registry-item.json b/registry/components/caption-texture-lava/registry-item.json
index eadbe6c02..e53360b6e 100644
--- a/registry/components/caption-texture-lava/registry-item.json
+++ b/registry/components/caption-texture-lava/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-texture-lava.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4"
 }
diff --git a/registry/components/caption-typewriter/registry-item.json b/registry/components/caption-typewriter/registry-item.json
index 8e58c81ee..808e81977 100644
--- a/registry/components/caption-typewriter/registry-item.json
+++ b/registry/components/caption-typewriter/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-typewriter.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4"
 }
diff --git a/registry/components/caption-weight-shift/registry-item.json b/registry/components/caption-weight-shift/registry-item.json
index af641fcd8..eff07851f 100644
--- a/registry/components/caption-weight-shift/registry-item.json
+++ b/registry/components/caption-weight-shift/registry-item.json
@@ -11,5 +11,6 @@
       "target": "compositions/components/caption-weight-shift.html",
       "type": "hyperframes:snippet"
     }
-  ]
+  ],
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4"
 }

From b725066fb5c1616b024e213fb285d5295d538e89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sun, 17 May 2026 17:03:42 -0400
Subject: [PATCH 4/7] 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 | 38 +++++++++++++++++++
 .../components/caption-editorial-emphasis.mdx | 38 +++++++++++++++++++
 docs/catalog/components/caption-emoji-pop.mdx | 38 +++++++++++++++++++
 .../catalog/components/caption-glitch-rgb.mdx | 38 +++++++++++++++++++
 .../components/caption-gradient-fill.mdx      | 38 +++++++++++++++++++
 .../components/caption-kinetic-slam.mdx       | 38 +++++++++++++++++++
 .../components/caption-matrix-decode.mdx      | 38 +++++++++++++++++++
 .../components/caption-neon-accent.mdx        | 38 +++++++++++++++++++
 docs/catalog/components/caption-neon-glow.mdx | 38 +++++++++++++++++++
 .../components/caption-parallax-layers.mdx    | 38 +++++++++++++++++++
 .../components/caption-particle-burst.mdx     | 38 +++++++++++++++++++
 .../components/caption-pill-karaoke.mdx       | 38 +++++++++++++++++++
 .../components/caption-texture-lava.mdx       | 38 +++++++++++++++++++
 .../catalog/components/caption-typewriter.mdx | 38 +++++++++++++++++++
 .../components/caption-weight-shift.mdx       | 38 +++++++++++++++++++
 docs/docs.json                                | 20 ++++++++++
 .../caption-clip-wipe/caption-clip-wipe.html  | 18 ++++++++-
 .../components/caption-clip-wipe/demo.html    | 18 ++++++++-
 .../caption-clip-wipe/registry-item.json      |  2 +-
 .../caption-editorial-emphasis.html           | 35 +++++++++++++++++
 .../caption-editorial-emphasis/demo.html      | 35 +++++++++++++++++
 .../registry-item.json                        |  2 +-
 .../caption-emoji-pop/caption-emoji-pop.html  | 16 ++++++++
 .../components/caption-emoji-pop/demo.html    | 16 ++++++++
 .../caption-emoji-pop/registry-item.json      |  2 +-
 .../caption-glitch-rgb.html                   | 18 ++++++++-
 .../components/caption-glitch-rgb/demo.html   | 18 ++++++++-
 .../caption-glitch-rgb/registry-item.json     |  2 +-
 .../caption-gradient-fill.html                | 17 ++++++++-
 .../caption-gradient-fill/demo.html           | 17 ++++++++-
 .../caption-gradient-fill/registry-item.json  |  2 +-
 .../caption-kinetic-slam.html                 | 15 +++++++-
 .../components/caption-kinetic-slam/demo.html | 15 +++++++-
 .../caption-kinetic-slam/registry-item.json   |  2 +-
 .../caption-matrix-decode.html                | 17 ++++++++-
 .../caption-matrix-decode/demo.html           | 17 ++++++++-
 .../caption-matrix-decode/registry-item.json  |  2 +-
 .../caption-neon-accent.html                  | 16 +++++++-
 .../components/caption-neon-accent/demo.html  | 16 +++++++-
 .../caption-neon-accent/registry-item.json    |  2 +-
 .../caption-neon-glow/caption-neon-glow.html  | 17 ++++++++-
 .../components/caption-neon-glow/demo.html    | 17 ++++++++-
 .../caption-neon-glow/registry-item.json      |  2 +-
 .../caption-parallax-layers.html              | 23 ++++++++++-
 .../caption-parallax-layers/demo.html         | 23 ++++++++++-
 .../registry-item.json                        |  2 +-
 .../caption-particle-burst.html               | 17 ++++++++-
 .../caption-particle-burst/demo.html          | 17 ++++++++-
 .../caption-particle-burst/registry-item.json |  2 +-
 .../caption-pill-karaoke/registry-item.json   |  2 +-
 .../caption-texture-lava.html                 | 15 +++++++-
 .../components/caption-texture-lava/demo.html | 15 +++++++-
 .../caption-texture-lava/registry-item.json   |  2 +-
 .../caption-typewriter.html                   | 16 +++++++-
 .../components/caption-typewriter/demo.html   | 16 +++++++-
 .../caption-typewriter/registry-item.json     |  2 +-
 .../caption-weight-shift.html                 | 16 ++++++++
 .../components/caption-weight-shift/demo.html | 16 ++++++++
 .../caption-weight-shift/registry-item.json   |  2 +-
 59 files changed, 1093 insertions(+), 39 deletions(-)
 create mode 100644 docs/catalog/components/caption-clip-wipe.mdx
 create mode 100644 docs/catalog/components/caption-editorial-emphasis.mdx
 create mode 100644 docs/catalog/components/caption-emoji-pop.mdx
 create mode 100644 docs/catalog/components/caption-glitch-rgb.mdx
 create mode 100644 docs/catalog/components/caption-gradient-fill.mdx
 create mode 100644 docs/catalog/components/caption-kinetic-slam.mdx
 create mode 100644 docs/catalog/components/caption-matrix-decode.mdx
 create mode 100644 docs/catalog/components/caption-neon-accent.mdx
 create mode 100644 docs/catalog/components/caption-neon-glow.mdx
 create mode 100644 docs/catalog/components/caption-parallax-layers.mdx
 create mode 100644 docs/catalog/components/caption-particle-burst.mdx
 create mode 100644 docs/catalog/components/caption-pill-karaoke.mdx
 create mode 100644 docs/catalog/components/caption-texture-lava.mdx
 create mode 100644 docs/catalog/components/caption-typewriter.mdx
 create mode 100644 docs/catalog/components/caption-weight-shift.mdx

diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
new file mode 100644
index 000000000..fe8f4a820
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
new file mode 100644
index 000000000..c99ba48f5
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
new file mode 100644
index 000000000..9f9ac479b
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
new file mode 100644
index 000000000..b3b842561
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
new file mode 100644
index 000000000..11e054fe5
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
new file mode 100644
index 000000000..f4da5940a
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
new file mode 100644
index 000000000..c2b22f496
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
new file mode 100644
index 000000000..1011ce8b3
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
new file mode 100644
index 000000000..01404f3e0
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
new file mode 100644
index 000000000..e59841efe
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
new file mode 100644
index 000000000..173bdc1fc
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
new file mode 100644
index 000000000..4c7f27e6d
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-texture-lava.mdx b/docs/catalog/components/caption-texture-lava.mdx
new file mode 100644
index 000000000..504386ebc
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-typewriter.mdx b/docs/catalog/components/caption-typewriter.mdx
new file mode 100644
index 000000000..8b3d1a752
--- /dev/null
+++ b/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.
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
new file mode 100644
index 000000000..1a1ba03f2
--- /dev/null
+++ b/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.
diff --git a/docs/docs.json b/docs/docs.json
index de19051d5..f2b819da6 100644
--- a/docs/docs.json
+++ b/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": [
diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html
index 63a7aa1ec..94f2e1efb 100644
--- a/registry/components/caption-clip-wipe/caption-clip-wipe.html
+++ b/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);
           });
 
diff --git a/registry/components/caption-clip-wipe/demo.html b/registry/components/caption-clip-wipe/demo.html
index 63a7aa1ec..94f2e1efb 100644
--- a/registry/components/caption-clip-wipe/demo.html
+++ b/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);
           });
 
diff --git a/registry/components/caption-clip-wipe/registry-item.json b/registry/components/caption-clip-wipe/registry-item.json
index 8fa1862a2..95005f509 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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-clip-wipe/preview.mp4?v=1779051416"
 }
diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 999a01e09..57dd43aa3 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/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);
diff --git a/registry/components/caption-editorial-emphasis/demo.html b/registry/components/caption-editorial-emphasis/demo.html
index 999a01e09..57dd43aa3 100644
--- a/registry/components/caption-editorial-emphasis/demo.html
+++ b/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);
diff --git a/registry/components/caption-editorial-emphasis/registry-item.json b/registry/components/caption-editorial-emphasis/registry-item.json
index 680256d42..ea195e08c 100644
--- a/registry/components/caption-editorial-emphasis/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index 7f017d19c..8f8366a4b 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/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);
           });
diff --git a/registry/components/caption-emoji-pop/demo.html b/registry/components/caption-emoji-pop/demo.html
index 7f017d19c..8f8366a4b 100644
--- a/registry/components/caption-emoji-pop/demo.html
+++ b/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);
           });
diff --git a/registry/components/caption-emoji-pop/registry-item.json b/registry/components/caption-emoji-pop/registry-item.json
index a86dc5227..0fe401f5b 100644
--- a/registry/components/caption-emoji-pop/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
index 307113d4c..8fc43fcbe 100644
--- a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
+++ b/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);
           });
 
diff --git a/registry/components/caption-glitch-rgb/demo.html b/registry/components/caption-glitch-rgb/demo.html
index 307113d4c..8fc43fcbe 100644
--- a/registry/components/caption-glitch-rgb/demo.html
+++ b/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);
           });
 
diff --git a/registry/components/caption-glitch-rgb/registry-item.json b/registry/components/caption-glitch-rgb/registry-item.json
index e8bb08e51..e8f356737 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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-glitch-rgb/preview.mp4?v=1779051416"
 }
diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html
index 92bb8f3da..39be4d405 100644
--- a/registry/components/caption-gradient-fill/caption-gradient-fill.html
+++ b/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";
diff --git a/registry/components/caption-gradient-fill/demo.html b/registry/components/caption-gradient-fill/demo.html
index 92bb8f3da..39be4d405 100644
--- a/registry/components/caption-gradient-fill/demo.html
+++ b/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";
diff --git a/registry/components/caption-gradient-fill/registry-item.json b/registry/components/caption-gradient-fill/registry-item.json
index 76be8f37d..f76651f1b 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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-gradient-fill/preview.mp4?v=1779051416"
 }
diff --git a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
index 6a7c826fc..47b3fa365 100644
--- a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
+++ b/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);
 
diff --git a/registry/components/caption-kinetic-slam/demo.html b/registry/components/caption-kinetic-slam/demo.html
index 6a7c826fc..47b3fa365 100644
--- a/registry/components/caption-kinetic-slam/demo.html
+++ b/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);
 
diff --git a/registry/components/caption-kinetic-slam/registry-item.json b/registry/components/caption-kinetic-slam/registry-item.json
index 4d060be53..382b6c5b7 100644
--- a/registry/components/caption-kinetic-slam/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-matrix-decode/caption-matrix-decode.html b/registry/components/caption-matrix-decode/caption-matrix-decode.html
index 41e20e81c..cf6145d15 100644
--- a/registry/components/caption-matrix-decode/caption-matrix-decode.html
+++ b/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";
diff --git a/registry/components/caption-matrix-decode/demo.html b/registry/components/caption-matrix-decode/demo.html
index 41e20e81c..cf6145d15 100644
--- a/registry/components/caption-matrix-decode/demo.html
+++ b/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";
diff --git a/registry/components/caption-matrix-decode/registry-item.json b/registry/components/caption-matrix-decode/registry-item.json
index a93cbbecc..a4fd0015a 100644
--- a/registry/components/caption-matrix-decode/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-neon-accent/caption-neon-accent.html b/registry/components/caption-neon-accent/caption-neon-accent.html
index cf879ad34..833d92f57 100644
--- a/registry/components/caption-neon-accent/caption-neon-accent.html
+++ b/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;
         }
diff --git a/registry/components/caption-neon-accent/demo.html b/registry/components/caption-neon-accent/demo.html
index cf879ad34..833d92f57 100644
--- a/registry/components/caption-neon-accent/demo.html
+++ b/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;
         }
diff --git a/registry/components/caption-neon-accent/registry-item.json b/registry/components/caption-neon-accent/registry-item.json
index b72348d9b..655997e57 100644
--- a/registry/components/caption-neon-accent/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-neon-glow/caption-neon-glow.html b/registry/components/caption-neon-glow/caption-neon-glow.html
index 675d948e4..947972c0e 100644
--- a/registry/components/caption-neon-glow/caption-neon-glow.html
+++ b/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);
           });
 
diff --git a/registry/components/caption-neon-glow/demo.html b/registry/components/caption-neon-glow/demo.html
index 675d948e4..947972c0e 100644
--- a/registry/components/caption-neon-glow/demo.html
+++ b/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);
           });
 
diff --git a/registry/components/caption-neon-glow/registry-item.json b/registry/components/caption-neon-glow/registry-item.json
index aeef9ec4f..af20f33dc 100644
--- a/registry/components/caption-neon-glow/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-parallax-layers/caption-parallax-layers.html b/registry/components/caption-parallax-layers/caption-parallax-layers.html
index 95bbafb5f..7480aa963 100644
--- a/registry/components/caption-parallax-layers/caption-parallax-layers.html
+++ b/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);
diff --git a/registry/components/caption-parallax-layers/demo.html b/registry/components/caption-parallax-layers/demo.html
index 95bbafb5f..7480aa963 100644
--- a/registry/components/caption-parallax-layers/demo.html
+++ b/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);
diff --git a/registry/components/caption-parallax-layers/registry-item.json b/registry/components/caption-parallax-layers/registry-item.json
index 85410bc02..104f612dd 100644
--- a/registry/components/caption-parallax-layers/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-particle-burst/caption-particle-burst.html b/registry/components/caption-particle-burst/caption-particle-burst.html
index 6664f4178..ac407eeab 100644
--- a/registry/components/caption-particle-burst/caption-particle-burst.html
+++ b/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);
           });
 
diff --git a/registry/components/caption-particle-burst/demo.html b/registry/components/caption-particle-burst/demo.html
index 6664f4178..ac407eeab 100644
--- a/registry/components/caption-particle-burst/demo.html
+++ b/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);
           });
 
diff --git a/registry/components/caption-particle-burst/registry-item.json b/registry/components/caption-particle-burst/registry-item.json
index 0cf52345a..929dc4776 100644
--- a/registry/components/caption-particle-burst/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-pill-karaoke/registry-item.json b/registry/components/caption-pill-karaoke/registry-item.json
index 1e616f42e..e07be26c1 100644
--- a/registry/components/caption-pill-karaoke/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-texture-lava/caption-texture-lava.html b/registry/components/caption-texture-lava/caption-texture-lava.html
index 26d79304d..39b327133 100644
--- a/registry/components/caption-texture-lava/caption-texture-lava.html
+++ b/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";
diff --git a/registry/components/caption-texture-lava/demo.html b/registry/components/caption-texture-lava/demo.html
index 26d79304d..39b327133 100644
--- a/registry/components/caption-texture-lava/demo.html
+++ b/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";
diff --git a/registry/components/caption-texture-lava/registry-item.json b/registry/components/caption-texture-lava/registry-item.json
index e53360b6e..20ab9a891 100644
--- a/registry/components/caption-texture-lava/registry-item.json
+++ b/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"
 }
diff --git a/registry/components/caption-typewriter/caption-typewriter.html b/registry/components/caption-typewriter/caption-typewriter.html
index e1f63bef2..6cff7fe52 100644
--- a/registry/components/caption-typewriter/caption-typewriter.html
+++ b/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;
diff --git a/registry/components/caption-typewriter/demo.html b/registry/components/caption-typewriter/demo.html
index e1f63bef2..6cff7fe52 100644
--- a/registry/components/caption-typewriter/demo.html
+++ b/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;
diff --git a/registry/components/caption-typewriter/registry-item.json b/registry/components/caption-typewriter/registry-item.json
index 808e81977..f5eac06b2 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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-typewriter/preview.mp4?v=1779051416"
 }
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index 020a13bec..3d2d74391 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/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();
diff --git a/registry/components/caption-weight-shift/demo.html b/registry/components/caption-weight-shift/demo.html
index 020a13bec..3d2d74391 100644
--- a/registry/components/caption-weight-shift/demo.html
+++ b/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();
diff --git a/registry/components/caption-weight-shift/registry-item.json b/registry/components/caption-weight-shift/registry-item.json
index eff07851f..a5cd5924b 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"
+  "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-weight-shift/preview.mp4?v=1779051416"
 }

From ed5747a723b7c9296b5668b5911831f7437cbc8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sun, 17 May 2026 17:12:25 -0400
Subject: [PATCH 5/7] style: format caption component HTML files

---
 .../caption-clip-wipe/caption-clip-wipe.html     |  6 +++++-
 registry/components/caption-clip-wipe/demo.html  |  6 +++++-
 .../caption-editorial-emphasis.html              | 16 +++++++++++++---
 .../caption-editorial-emphasis/demo.html         | 16 +++++++++++++---
 .../caption-emoji-pop/caption-emoji-pop.html     | 14 ++++++++++++--
 registry/components/caption-emoji-pop/demo.html  | 14 ++++++++++++--
 .../caption-glitch-rgb/caption-glitch-rgb.html   |  6 +++++-
 registry/components/caption-glitch-rgb/demo.html |  6 +++++-
 .../caption-gradient-fill.html                   |  6 +++++-
 .../components/caption-gradient-fill/demo.html   |  6 +++++-
 .../caption-kinetic-slam.html                    |  3 ++-
 .../components/caption-kinetic-slam/demo.html    |  3 ++-
 .../caption-matrix-decode.html                   |  6 +++++-
 .../components/caption-matrix-decode/demo.html   |  6 +++++-
 .../caption-neon-accent/caption-neon-accent.html |  6 +++++-
 .../components/caption-neon-accent/demo.html     |  6 +++++-
 .../caption-neon-glow/caption-neon-glow.html     |  6 +++++-
 registry/components/caption-neon-glow/demo.html  |  6 +++++-
 .../caption-parallax-layers.html                 | 12 ++++++++++--
 .../components/caption-parallax-layers/demo.html | 12 ++++++++++--
 .../caption-particle-burst.html                  |  6 +++++-
 .../components/caption-particle-burst/demo.html  |  6 +++++-
 .../caption-typewriter/caption-typewriter.html   |  6 +++++-
 registry/components/caption-typewriter/demo.html |  6 +++++-
 .../caption-weight-shift.html                    | 14 ++++++++++++--
 .../components/caption-weight-shift/demo.html    | 14 ++++++++++++--
 26 files changed, 178 insertions(+), 36 deletions(-)

diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html
index 94f2e1efb..d93cc69a6 100644
--- a/registry/components/caption-clip-wipe/caption-clip-wipe.html
+++ b/registry/components/caption-clip-wipe/caption-clip-wipe.html
@@ -192,7 +192,11 @@
           grp.className = "wp-group";
           grp.id = "wp-grp-" + gi;
 
-          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
           var computedSize = fitFontSize(groupText, 88, "800", "Poppins", 1720);
 
           groupWords.forEach(function (w, i) {
diff --git a/registry/components/caption-clip-wipe/demo.html b/registry/components/caption-clip-wipe/demo.html
index 94f2e1efb..d93cc69a6 100644
--- a/registry/components/caption-clip-wipe/demo.html
+++ b/registry/components/caption-clip-wipe/demo.html
@@ -192,7 +192,11 @@
           grp.className = "wp-group";
           grp.id = "wp-grp-" + gi;
 
-          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          var groupText = groupWords
+            .map(function (w) {
+              return w.text.toUpperCase();
+            })
+            .join(" ");
           var computedSize = fitFontSize(groupText, 88, "800", "Poppins", 1720);
 
           groupWords.forEach(function (w, i) {
diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 57dd43aa3..871fb31c8 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -274,12 +274,22 @@
       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"; });
+        var hasEmphasis = linePairs.some(function (p) {
+          return p[1] === "e";
+        });
         if (hasEmphasis) {
-          var lineText = linePairs.map(function (p) { return W[p[0]].text; }).join(" ");
+          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(" ");
+        var lineText = linePairs
+          .map(function (p) {
+            return W[p[0]].text;
+          })
+          .join(" ");
         return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
       }
 
diff --git a/registry/components/caption-editorial-emphasis/demo.html b/registry/components/caption-editorial-emphasis/demo.html
index 57dd43aa3..871fb31c8 100644
--- a/registry/components/caption-editorial-emphasis/demo.html
+++ b/registry/components/caption-editorial-emphasis/demo.html
@@ -274,12 +274,22 @@
       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"; });
+        var hasEmphasis = linePairs.some(function (p) {
+          return p[1] === "e";
+        });
         if (hasEmphasis) {
-          var lineText = linePairs.map(function (p) { return W[p[0]].text; }).join(" ");
+          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(" ");
+        var lineText = linePairs
+          .map(function (p) {
+            return W[p[0]].text;
+          })
+          .join(" ");
         return fitFontSize(lineText, 86, "400", "Inter", SAFE_WIDTH);
       }
 
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index 8f8366a4b..46651434b 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -395,8 +395,18 @@
       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 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";
diff --git a/registry/components/caption-emoji-pop/demo.html b/registry/components/caption-emoji-pop/demo.html
index 8f8366a4b..46651434b 100644
--- a/registry/components/caption-emoji-pop/demo.html
+++ b/registry/components/caption-emoji-pop/demo.html
@@ -395,8 +395,18 @@
       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 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";
diff --git a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
index 8fc43fcbe..f2cd9fe00 100644
--- a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
+++ b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
@@ -208,7 +208,11 @@
           grp.className = "gl-group";
           grp.id = "gl-grp-" + gi;
 
-          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          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) {
diff --git a/registry/components/caption-glitch-rgb/demo.html b/registry/components/caption-glitch-rgb/demo.html
index 8fc43fcbe..f2cd9fe00 100644
--- a/registry/components/caption-glitch-rgb/demo.html
+++ b/registry/components/caption-glitch-rgb/demo.html
@@ -208,7 +208,11 @@
           grp.className = "gl-group";
           grp.id = "gl-grp-" + gi;
 
-          var groupText = groupWords.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+          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) {
diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html
index 39be4d405..8c26a02be 100644
--- a/registry/components/caption-gradient-fill/caption-gradient-fill.html
+++ b/registry/components/caption-gradient-fill/caption-gradient-fill.html
@@ -188,7 +188,11 @@
 
         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 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";
diff --git a/registry/components/caption-gradient-fill/demo.html b/registry/components/caption-gradient-fill/demo.html
index 39be4d405..8c26a02be 100644
--- a/registry/components/caption-gradient-fill/demo.html
+++ b/registry/components/caption-gradient-fill/demo.html
@@ -188,7 +188,11 @@
 
         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 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";
diff --git a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
index 47b3fa365..5d94eb99c 100644
--- a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
+++ b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
@@ -158,7 +158,8 @@
           el.className = "kt-word";
           el.id = "kt-w-" + wi;
           el.textContent = w.text.toUpperCase();
-          el.style.fontSize = fitFontSize(w.text.toUpperCase(), 220, "400", "'Anton', sans-serif", 1720) + "px";
+          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);
 
diff --git a/registry/components/caption-kinetic-slam/demo.html b/registry/components/caption-kinetic-slam/demo.html
index 47b3fa365..5d94eb99c 100644
--- a/registry/components/caption-kinetic-slam/demo.html
+++ b/registry/components/caption-kinetic-slam/demo.html
@@ -158,7 +158,8 @@
           el.className = "kt-word";
           el.id = "kt-w-" + wi;
           el.textContent = w.text.toUpperCase();
-          el.style.fontSize = fitFontSize(w.text.toUpperCase(), 220, "400", "'Anton', sans-serif", 1720) + "px";
+          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);
 
diff --git a/registry/components/caption-matrix-decode/caption-matrix-decode.html b/registry/components/caption-matrix-decode/caption-matrix-decode.html
index cf6145d15..bacdcf043 100644
--- a/registry/components/caption-matrix-decode/caption-matrix-decode.html
+++ b/registry/components/caption-matrix-decode/caption-matrix-decode.html
@@ -198,7 +198,11 @@
 
         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 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";
diff --git a/registry/components/caption-matrix-decode/demo.html b/registry/components/caption-matrix-decode/demo.html
index cf6145d15..bacdcf043 100644
--- a/registry/components/caption-matrix-decode/demo.html
+++ b/registry/components/caption-matrix-decode/demo.html
@@ -198,7 +198,11 @@
 
         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 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";
diff --git a/registry/components/caption-neon-accent/caption-neon-accent.html b/registry/components/caption-neon-accent/caption-neon-accent.html
index 833d92f57..7d769195e 100644
--- a/registry/components/caption-neon-accent/caption-neon-accent.html
+++ b/registry/components/caption-neon-accent/caption-neon-accent.html
@@ -391,7 +391,11 @@
 
       function makeGroup(words, groupIndex) {
         var colors = assignWordColors(words, groupIndex);
-        var groupText = words.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+        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;
diff --git a/registry/components/caption-neon-accent/demo.html b/registry/components/caption-neon-accent/demo.html
index 833d92f57..7d769195e 100644
--- a/registry/components/caption-neon-accent/demo.html
+++ b/registry/components/caption-neon-accent/demo.html
@@ -391,7 +391,11 @@
 
       function makeGroup(words, groupIndex) {
         var colors = assignWordColors(words, groupIndex);
-        var groupText = words.map(function (w) { return w.text.toUpperCase(); }).join(" ");
+        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;
diff --git a/registry/components/caption-neon-glow/caption-neon-glow.html b/registry/components/caption-neon-glow/caption-neon-glow.html
index 947972c0e..9a4520711 100644
--- a/registry/components/caption-neon-glow/caption-neon-glow.html
+++ b/registry/components/caption-neon-glow/caption-neon-glow.html
@@ -171,7 +171,11 @@
 
         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 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";
diff --git a/registry/components/caption-neon-glow/demo.html b/registry/components/caption-neon-glow/demo.html
index 947972c0e..9a4520711 100644
--- a/registry/components/caption-neon-glow/demo.html
+++ b/registry/components/caption-neon-glow/demo.html
@@ -171,7 +171,11 @@
 
         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 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";
diff --git a/registry/components/caption-parallax-layers/caption-parallax-layers.html b/registry/components/caption-parallax-layers/caption-parallax-layers.html
index 7480aa963..8c9c17578 100644
--- a/registry/components/caption-parallax-layers/caption-parallax-layers.html
+++ b/registry/components/caption-parallax-layers/caption-parallax-layers.html
@@ -247,7 +247,11 @@
         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 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";
@@ -267,7 +271,11 @@
         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 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";
diff --git a/registry/components/caption-parallax-layers/demo.html b/registry/components/caption-parallax-layers/demo.html
index 7480aa963..8c9c17578 100644
--- a/registry/components/caption-parallax-layers/demo.html
+++ b/registry/components/caption-parallax-layers/demo.html
@@ -247,7 +247,11 @@
         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 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";
@@ -267,7 +271,11 @@
         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 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";
diff --git a/registry/components/caption-particle-burst/caption-particle-burst.html b/registry/components/caption-particle-burst/caption-particle-burst.html
index ac407eeab..6c6086766 100644
--- a/registry/components/caption-particle-burst/caption-particle-burst.html
+++ b/registry/components/caption-particle-burst/caption-particle-burst.html
@@ -211,7 +211,11 @@
 
         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 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";
diff --git a/registry/components/caption-particle-burst/demo.html b/registry/components/caption-particle-burst/demo.html
index ac407eeab..6c6086766 100644
--- a/registry/components/caption-particle-burst/demo.html
+++ b/registry/components/caption-particle-burst/demo.html
@@ -211,7 +211,11 @@
 
         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 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";
diff --git a/registry/components/caption-typewriter/caption-typewriter.html b/registry/components/caption-typewriter/caption-typewriter.html
index 6cff7fe52..44dfa86bc 100644
--- a/registry/components/caption-typewriter/caption-typewriter.html
+++ b/registry/components/caption-typewriter/caption-typewriter.html
@@ -180,7 +180,11 @@
 
         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 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";
diff --git a/registry/components/caption-typewriter/demo.html b/registry/components/caption-typewriter/demo.html
index 6cff7fe52..44dfa86bc 100644
--- a/registry/components/caption-typewriter/demo.html
+++ b/registry/components/caption-typewriter/demo.html
@@ -180,7 +180,11 @@
 
         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 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";
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index 3d2d74391..ffb1508a5 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -288,8 +288,18 @@
       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 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;
diff --git a/registry/components/caption-weight-shift/demo.html b/registry/components/caption-weight-shift/demo.html
index 3d2d74391..ffb1508a5 100644
--- a/registry/components/caption-weight-shift/demo.html
+++ b/registry/components/caption-weight-shift/demo.html
@@ -288,8 +288,18 @@
       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 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;

From 7dc795f60fb299ca6d613ffcdada11d56785ac4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sun, 17 May 2026 17:16:37 -0400
Subject: [PATCH 6/7] fix(registry): self-contain lava texture asset and remove
 dead code

- Fix caption-texture-lava mask URL to use local lava.png instead of
  /assets/texture-mask-text/masks/ absolute path that 404s on install
- Add lava.png to registry-item.json files array so it ships with
  npx hyperframes add caption-texture-lava
- Remove unused mulberry32 function from caption-clip-wipe
---
 .../caption-clip-wipe/caption-clip-wipe.html           | 10 ----------
 registry/components/caption-clip-wipe/demo.html        | 10 ----------
 .../caption-texture-lava/caption-texture-lava.html     |  4 ++--
 registry/components/caption-texture-lava/demo.html     |  4 ++--
 .../components/caption-texture-lava/registry-item.json |  5 +++++
 5 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html
index d93cc69a6..4ffc09ef9 100644
--- a/registry/components/caption-clip-wipe/caption-clip-wipe.html
+++ b/registry/components/caption-clip-wipe/caption-clip-wipe.html
@@ -120,16 +120,6 @@
           return minSize;
         }
 
-        function mulberry32(seed) {
-          return function () {
-            seed |= 0;
-            seed = (seed + 0x6d2b79f5) | 0;
-            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-          };
-        }
-
         var WORDS = [
           { text: "Every", start: 0.0, end: 0.3 },
           { text: "great", start: 0.3, end: 0.55 },
diff --git a/registry/components/caption-clip-wipe/demo.html b/registry/components/caption-clip-wipe/demo.html
index d93cc69a6..4ffc09ef9 100644
--- a/registry/components/caption-clip-wipe/demo.html
+++ b/registry/components/caption-clip-wipe/demo.html
@@ -120,16 +120,6 @@
           return minSize;
         }
 
-        function mulberry32(seed) {
-          return function () {
-            seed |= 0;
-            seed = (seed + 0x6d2b79f5) | 0;
-            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
-            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
-            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-          };
-        }
-
         var WORDS = [
           { text: "Every", start: 0.0, end: 0.3 },
           { text: "great", start: 0.3, end: 0.55 },
diff --git a/registry/components/caption-texture-lava/caption-texture-lava.html b/registry/components/caption-texture-lava/caption-texture-lava.html
index 39b327133..9265e3504 100644
--- a/registry/components/caption-texture-lava/caption-texture-lava.html
+++ b/registry/components/caption-texture-lava/caption-texture-lava.html
@@ -21,8 +21,8 @@
         filter: contrast(var(--mask-contrast, 1));
       }
       .hf-texture-lava {
-        -webkit-mask-image: url("/assets/texture-mask-text/masks/lava.png");
-        mask-image: url("/assets/texture-mask-text/masks/lava.png");
+        -webkit-mask-image: url("lava.png");
+        mask-image: url("lava.png");
       }
 
       *,
diff --git a/registry/components/caption-texture-lava/demo.html b/registry/components/caption-texture-lava/demo.html
index 39b327133..9265e3504 100644
--- a/registry/components/caption-texture-lava/demo.html
+++ b/registry/components/caption-texture-lava/demo.html
@@ -21,8 +21,8 @@
         filter: contrast(var(--mask-contrast, 1));
       }
       .hf-texture-lava {
-        -webkit-mask-image: url("/assets/texture-mask-text/masks/lava.png");
-        mask-image: url("/assets/texture-mask-text/masks/lava.png");
+        -webkit-mask-image: url("lava.png");
+        mask-image: url("lava.png");
       }
 
       *,
diff --git a/registry/components/caption-texture-lava/registry-item.json b/registry/components/caption-texture-lava/registry-item.json
index 20ab9a891..19daa51c3 100644
--- a/registry/components/caption-texture-lava/registry-item.json
+++ b/registry/components/caption-texture-lava/registry-item.json
@@ -10,6 +10,11 @@
       "path": "caption-texture-lava.html",
       "target": "compositions/components/caption-texture-lava.html",
       "type": "hyperframes:snippet"
+    },
+    {
+      "path": "lava.png",
+      "target": "compositions/components/lava.png",
+      "type": "hyperframes:asset"
     }
   ],
   "preview": "https://static.heygen.ai/hyperframes-oss/registry/components/caption-texture-lava/preview.mp4?v=1779051416"

From ae193d99b90638e8a2d033c12baec643cac11497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Sun, 17 May 2026 17:19:42 -0400
Subject: [PATCH 7/7] fix(registry): align timeline IDs and regenerate catalog
 index

- Fix timeline_id_mismatch on all 15 caption components: __timelines key
  now matches data-composition-id (e.g. "caption-clip-wipe" not "clip-wipe")
- Regenerate docs/public/catalog-index.json with 15 new caption entries
- Add "Captions" group mapping to generate-catalog-pages.ts (priority 0)
- Regenerate docs.json nav and mdx pages via the catalog script
- Upload docs preview videos to docs/images CDN path
---
 docs/catalog/components/caption-clip-wipe.mdx |   2 +-
 .../components/caption-editorial-emphasis.mdx |   2 +-
 docs/catalog/components/caption-emoji-pop.mdx |   2 +-
 .../catalog/components/caption-glitch-rgb.mdx |   2 +-
 .../components/caption-gradient-fill.mdx      |   2 +-
 .../components/caption-kinetic-slam.mdx       |   2 +-
 .../components/caption-matrix-decode.mdx      |   2 +-
 .../components/caption-neon-accent.mdx        |   2 +-
 docs/catalog/components/caption-neon-glow.mdx |   2 +-
 .../components/caption-parallax-layers.mdx    |   2 +-
 .../components/caption-particle-burst.mdx     |   2 +-
 .../components/caption-pill-karaoke.mdx       |   2 +-
 .../components/caption-texture-lava.mdx       |   3 +-
 .../catalog/components/caption-typewriter.mdx |   2 +-
 .../components/caption-weight-shift.mdx       |   2 +-
 docs/docs.json                                |  20 +-
 docs/public/catalog-index.json                | 221 ++++++++++++++++++
 .../caption-clip-wipe/caption-clip-wipe.html  |   2 +-
 .../components/caption-clip-wipe/demo.html    |   2 +-
 .../caption-editorial-emphasis.html           |   2 +-
 .../caption-editorial-emphasis/demo.html      |   2 +-
 .../caption-emoji-pop/caption-emoji-pop.html  |   2 +-
 .../components/caption-emoji-pop/demo.html    |   2 +-
 .../caption-glitch-rgb.html                   |   2 +-
 .../components/caption-glitch-rgb/demo.html   |   2 +-
 .../caption-gradient-fill.html                |   2 +-
 .../caption-gradient-fill/demo.html           |   2 +-
 .../caption-kinetic-slam.html                 |   2 +-
 .../components/caption-kinetic-slam/demo.html |   2 +-
 .../caption-matrix-decode.html                |   2 +-
 .../caption-matrix-decode/demo.html           |   2 +-
 .../caption-neon-accent.html                  |   2 +-
 .../components/caption-neon-accent/demo.html  |   2 +-
 .../caption-neon-glow/caption-neon-glow.html  |   2 +-
 .../components/caption-neon-glow/demo.html    |   2 +-
 .../caption-parallax-layers.html              |   2 +-
 .../caption-parallax-layers/demo.html         |   2 +-
 .../caption-particle-burst.html               |   2 +-
 .../caption-particle-burst/demo.html          |   2 +-
 .../caption-pill-karaoke.html                 |   2 +-
 .../components/caption-pill-karaoke/demo.html |   2 +-
 .../caption-texture-lava.html                 |   2 +-
 .../components/caption-texture-lava/demo.html |   2 +-
 .../caption-typewriter.html                   |   2 +-
 .../components/caption-typewriter/demo.html   |   2 +-
 .../caption-weight-shift.html                 |   2 +-
 .../components/caption-weight-shift/demo.html |   2 +-
 scripts/generate-catalog-pages.ts             |   5 +-
 48 files changed, 280 insertions(+), 57 deletions(-)

diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index fe8f4a820..9816574f0 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-clip-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index c99ba48f5..35b3e17ff 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-editorial-emphasis.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index 9f9ac479b..a1914f97c 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-emoji-pop.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index b3b842561..a1344b546 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-glitch-rgb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index 11e054fe5..a81eea83b 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-gradient-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index f4da5940a..ec24d38d3 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-kinetic-slam.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index c2b22f496..dcc363a8a 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-matrix-decode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index 1011ce8b3..4a921810f 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-neon-accent.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index 01404f3e0..d2cb58a04 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-neon-glow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index e59841efe..72eda7492 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-parallax-layers.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index 173bdc1fc..d4f304dde 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-particle-burst.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index 4c7f27e6d..e16845939 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-pill-karaoke.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-texture-lava.mdx b/docs/catalog/components/caption-texture-lava.mdx
index 504386ebc..71e8156e9 100644
--- a/docs/catalog/components/caption-texture-lava.mdx
+++ b/docs/catalog/components/caption-texture-lava.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-texture-lava.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture-lava.png" autoPlay muted loop playsInline />
 
 ## Install
 
@@ -32,6 +32,7 @@ npx hyperframes add caption-texture-lava
 | File | Target | Type |
 | --- | --- | --- |
 | `caption-texture-lava.html` | `compositions/components/caption-texture-lava.html` | hyperframes:snippet |
+| `lava.png` | `compositions/components/lava.png` | hyperframes:asset |
 
 ## Usage
 
diff --git a/docs/catalog/components/caption-typewriter.mdx b/docs/catalog/components/caption-typewriter.mdx
index 8b3d1a752..5858bc321 100644
--- a/docs/catalog/components/caption-typewriter.mdx
+++ b/docs/catalog/components/caption-typewriter.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-typewriter.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-typewriter.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index 1a1ba03f2..f32439c52 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -9,7 +9,7 @@ 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 />
+<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-weight-shift.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png" autoPlay muted loop playsInline />
 
 ## Install
 
diff --git a/docs/docs.json b/docs/docs.json
index f2b819da6..45263e34f 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -98,21 +98,21 @@
           {
             "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-clip-wipe",
               "catalog/components/caption-editorial-emphasis",
-              "catalog/components/caption-parallax-layers",
+              "catalog/components/caption-emoji-pop",
               "catalog/components/caption-glitch-rgb",
-              "catalog/components/caption-typewriter",
+              "catalog/components/caption-gradient-fill",
+              "catalog/components/caption-kinetic-slam",
               "catalog/components/caption-matrix-decode",
+              "catalog/components/caption-neon-accent",
+              "catalog/components/caption-neon-glow",
+              "catalog/components/caption-parallax-layers",
               "catalog/components/caption-particle-burst",
+              "catalog/components/caption-pill-karaoke",
               "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"
+              "catalog/components/caption-typewriter",
+              "catalog/components/caption-weight-shift"
             ]
           },
           {
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index b25cab621..b533fb2cb 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -41,6 +41,227 @@
     "href": "/catalog/blocks/blue-sweater-intro-video",
     "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
   },
+  {
+    "name": "caption-clip-wipe",
+    "type": "component",
+    "title": "Clip Wipe",
+    "description": "Left-to-right clip-path wipe reveal per word",
+    "tags": [
+      "captions",
+      "caption-style",
+      "wipe",
+      "clip-path",
+      "reveal"
+    ],
+    "href": "/catalog/components/caption-clip-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png"
+  },
+  {
+    "name": "caption-editorial-emphasis",
+    "type": "component",
+    "title": "Editorial Emphasis",
+    "description": "Dual-font system with dramatic size contrast for emphasis words",
+    "tags": [
+      "captions",
+      "caption-style",
+      "editorial",
+      "typography",
+      "emphasis"
+    ],
+    "href": "/catalog/components/caption-editorial-emphasis",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png"
+  },
+  {
+    "name": "caption-emoji-pop",
+    "type": "component",
+    "title": "Emoji Pop",
+    "description": "Emoji integration with stroked text and horizontal squeeze entrance",
+    "tags": [
+      "captions",
+      "caption-style",
+      "emoji",
+      "social"
+    ],
+    "href": "/catalog/components/caption-emoji-pop",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png"
+  },
+  {
+    "name": "caption-glitch-rgb",
+    "type": "component",
+    "title": "Glitch RGB",
+    "description": "RGB chromatic aberration with CRT scanline overlay",
+    "tags": [
+      "captions",
+      "caption-style",
+      "glitch",
+      "cyber",
+      "tech"
+    ],
+    "href": "/catalog/components/caption-glitch-rgb",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png"
+  },
+  {
+    "name": "caption-gradient-fill",
+    "type": "component",
+    "title": "Gradient Fill",
+    "description": "Gradient-clipped text with elastic bounce entrance",
+    "tags": [
+      "captions",
+      "caption-style",
+      "gradient",
+      "colorful"
+    ],
+    "href": "/catalog/components/caption-gradient-fill",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
+  },
+  {
+    "name": "caption-kinetic-slam",
+    "type": "component",
+    "title": "Kinetic Slam",
+    "description": "Full-screen single-word display with alternating entrance directions",
+    "tags": [
+      "captions",
+      "caption-style",
+      "kinetic",
+      "typography",
+      "slam"
+    ],
+    "href": "/catalog/components/caption-kinetic-slam",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png"
+  },
+  {
+    "name": "caption-matrix-decode",
+    "type": "component",
+    "title": "Matrix Decode",
+    "description": "Character scramble animation before text reveal",
+    "tags": [
+      "captions",
+      "caption-style",
+      "matrix",
+      "scramble",
+      "decode"
+    ],
+    "href": "/catalog/components/caption-matrix-decode",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png"
+  },
+  {
+    "name": "caption-neon-accent",
+    "type": "component",
+    "title": "Neon Accent",
+    "description": "Multi-color neon glow accents with wiggle drift animation",
+    "tags": [
+      "captions",
+      "caption-style",
+      "neon",
+      "glow",
+      "accent"
+    ],
+    "href": "/catalog/components/caption-neon-accent",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png"
+  },
+  {
+    "name": "caption-neon-glow",
+    "type": "component",
+    "title": "Neon Glow",
+    "description": "Cyan and magenta neon glow with keyword accent colors",
+    "tags": [
+      "captions",
+      "caption-style",
+      "neon",
+      "glow",
+      "gaming"
+    ],
+    "href": "/catalog/components/caption-neon-glow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png"
+  },
+  {
+    "name": "caption-parallax-layers",
+    "type": "component",
+    "title": "Parallax Layers",
+    "description": "Behind-subject 3D text layering with vertical stretch effect",
+    "tags": [
+      "captions",
+      "caption-style",
+      "parallax",
+      "3d",
+      "depth"
+    ],
+    "href": "/catalog/components/caption-parallax-layers",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png"
+  },
+  {
+    "name": "caption-particle-burst",
+    "type": "component",
+    "title": "Particle Burst",
+    "description": "Keyword words trigger colored particle explosions",
+    "tags": [
+      "captions",
+      "caption-style",
+      "particles",
+      "burst",
+      "effects"
+    ],
+    "href": "/catalog/components/caption-particle-burst",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png"
+  },
+  {
+    "name": "caption-pill-karaoke",
+    "type": "component",
+    "title": "Pill Karaoke",
+    "description": "Pill-shaped container with per-word karaoke color highlight",
+    "tags": [
+      "captions",
+      "caption-style",
+      "karaoke",
+      "pill"
+    ],
+    "href": "/catalog/components/caption-pill-karaoke",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
+  },
+  {
+    "name": "caption-texture-lava",
+    "type": "component",
+    "title": "Texture Lava",
+    "description": "Flowing lava texture mask over large uppercase text",
+    "tags": [
+      "captions",
+      "caption-style",
+      "texture",
+      "lava",
+      "mask"
+    ],
+    "href": "/catalog/components/caption-texture-lava",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture-lava.png"
+  },
+  {
+    "name": "caption-typewriter",
+    "type": "component",
+    "title": "Typewriter",
+    "description": "Green terminal character-by-character reveal with blinking cursor",
+    "tags": [
+      "captions",
+      "caption-style",
+      "terminal",
+      "typewriter",
+      "hacker"
+    ],
+    "href": "/catalog/components/caption-typewriter",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-typewriter.png"
+  },
+  {
+    "name": "caption-weight-shift",
+    "type": "component",
+    "title": "Weight Shift",
+    "description": "Elegant font-weight transition between caption lines",
+    "tags": [
+      "captions",
+      "caption-style",
+      "minimal",
+      "typography"
+    ],
+    "href": "/catalog/components/caption-weight-shift",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png"
+  },
   {
     "name": "chromatic-radial-split",
     "type": "block",
diff --git a/registry/components/caption-clip-wipe/caption-clip-wipe.html b/registry/components/caption-clip-wipe/caption-clip-wipe.html
index 4ffc09ef9..986368d7f 100644
--- a/registry/components/caption-clip-wipe/caption-clip-wipe.html
+++ b/registry/components/caption-clip-wipe/caption-clip-wipe.html
@@ -234,7 +234,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["clip-wipe"] = tl;
+        window.__timelines["caption-clip-wipe"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-clip-wipe/demo.html b/registry/components/caption-clip-wipe/demo.html
index 4ffc09ef9..986368d7f 100644
--- a/registry/components/caption-clip-wipe/demo.html
+++ b/registry/components/caption-clip-wipe/demo.html
@@ -234,7 +234,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["clip-wipe"] = tl;
+        window.__timelines["caption-clip-wipe"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 871fb31c8..85067766d 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -424,7 +424,7 @@
       });
 
       tl.to({}, { duration: DURATION }, 0);
-      window.__timelines["editorial-emphasis"] = tl;
+      window.__timelines["caption-editorial-emphasis"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-editorial-emphasis/demo.html b/registry/components/caption-editorial-emphasis/demo.html
index 871fb31c8..85067766d 100644
--- a/registry/components/caption-editorial-emphasis/demo.html
+++ b/registry/components/caption-editorial-emphasis/demo.html
@@ -424,7 +424,7 @@
       });
 
       tl.to({}, { duration: DURATION }, 0);
-      window.__timelines["editorial-emphasis"] = tl;
+      window.__timelines["caption-editorial-emphasis"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index 46651434b..64ac88ec5 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -478,7 +478,7 @@
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
-      window.__timelines["emoji-pop"] = tl;
+      window.__timelines["caption-emoji-pop"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-emoji-pop/demo.html b/registry/components/caption-emoji-pop/demo.html
index 46651434b..64ac88ec5 100644
--- a/registry/components/caption-emoji-pop/demo.html
+++ b/registry/components/caption-emoji-pop/demo.html
@@ -478,7 +478,7 @@
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
-      window.__timelines["emoji-pop"] = tl;
+      window.__timelines["caption-emoji-pop"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
index f2cd9fe00..4b3c120d3 100644
--- a/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
+++ b/registry/components/caption-glitch-rgb/caption-glitch-rgb.html
@@ -305,7 +305,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["glitch-rgb"] = tl;
+        window.__timelines["caption-glitch-rgb"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-glitch-rgb/demo.html b/registry/components/caption-glitch-rgb/demo.html
index f2cd9fe00..4b3c120d3 100644
--- a/registry/components/caption-glitch-rgb/demo.html
+++ b/registry/components/caption-glitch-rgb/demo.html
@@ -305,7 +305,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["glitch-rgb"] = tl;
+        window.__timelines["caption-glitch-rgb"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-gradient-fill/caption-gradient-fill.html b/registry/components/caption-gradient-fill/caption-gradient-fill.html
index 8c26a02be..eb0fa9e05 100644
--- a/registry/components/caption-gradient-fill/caption-gradient-fill.html
+++ b/registry/components/caption-gradient-fill/caption-gradient-fill.html
@@ -241,7 +241,7 @@
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        window.__timelines["gradient-fill"] = tl;
+        window.__timelines["caption-gradient-fill"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-gradient-fill/demo.html b/registry/components/caption-gradient-fill/demo.html
index 8c26a02be..eb0fa9e05 100644
--- a/registry/components/caption-gradient-fill/demo.html
+++ b/registry/components/caption-gradient-fill/demo.html
@@ -241,7 +241,7 @@
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        window.__timelines["gradient-fill"] = tl;
+        window.__timelines["caption-gradient-fill"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
index 5d94eb99c..a3d4d7314 100644
--- a/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
+++ b/registry/components/caption-kinetic-slam/caption-kinetic-slam.html
@@ -202,7 +202,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["kinetic-slam"] = tl;
+        window.__timelines["caption-kinetic-slam"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-kinetic-slam/demo.html b/registry/components/caption-kinetic-slam/demo.html
index 5d94eb99c..a3d4d7314 100644
--- a/registry/components/caption-kinetic-slam/demo.html
+++ b/registry/components/caption-kinetic-slam/demo.html
@@ -202,7 +202,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["kinetic-slam"] = tl;
+        window.__timelines["caption-kinetic-slam"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-matrix-decode/caption-matrix-decode.html b/registry/components/caption-matrix-decode/caption-matrix-decode.html
index bacdcf043..3d91fb7c1 100644
--- a/registry/components/caption-matrix-decode/caption-matrix-decode.html
+++ b/registry/components/caption-matrix-decode/caption-matrix-decode.html
@@ -258,7 +258,7 @@
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        window.__timelines["matrix-decode"] = tl;
+        window.__timelines["caption-matrix-decode"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-matrix-decode/demo.html b/registry/components/caption-matrix-decode/demo.html
index bacdcf043..3d91fb7c1 100644
--- a/registry/components/caption-matrix-decode/demo.html
+++ b/registry/components/caption-matrix-decode/demo.html
@@ -258,7 +258,7 @@
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        window.__timelines["matrix-decode"] = tl;
+        window.__timelines["caption-matrix-decode"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-neon-accent/caption-neon-accent.html b/registry/components/caption-neon-accent/caption-neon-accent.html
index 7d769195e..3f9e294aa 100644
--- a/registry/components/caption-neon-accent/caption-neon-accent.html
+++ b/registry/components/caption-neon-accent/caption-neon-accent.html
@@ -525,7 +525,7 @@
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
-      window.__timelines["neon-accent"] = tl;
+      window.__timelines["caption-neon-accent"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-neon-accent/demo.html b/registry/components/caption-neon-accent/demo.html
index 7d769195e..3f9e294aa 100644
--- a/registry/components/caption-neon-accent/demo.html
+++ b/registry/components/caption-neon-accent/demo.html
@@ -525,7 +525,7 @@
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
-      window.__timelines["neon-accent"] = tl;
+      window.__timelines["caption-neon-accent"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-neon-glow/caption-neon-glow.html b/registry/components/caption-neon-glow/caption-neon-glow.html
index 9a4520711..0416d344f 100644
--- a/registry/components/caption-neon-glow/caption-neon-glow.html
+++ b/registry/components/caption-neon-glow/caption-neon-glow.html
@@ -224,7 +224,7 @@
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        window.__timelines["neon-glow"] = tl;
+        window.__timelines["caption-neon-glow"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-neon-glow/demo.html b/registry/components/caption-neon-glow/demo.html
index 9a4520711..0416d344f 100644
--- a/registry/components/caption-neon-glow/demo.html
+++ b/registry/components/caption-neon-glow/demo.html
@@ -224,7 +224,7 @@
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        window.__timelines["neon-glow"] = tl;
+        window.__timelines["caption-neon-glow"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-parallax-layers/caption-parallax-layers.html b/registry/components/caption-parallax-layers/caption-parallax-layers.html
index 8c9c17578..5a18a8822 100644
--- a/registry/components/caption-parallax-layers/caption-parallax-layers.html
+++ b/registry/components/caption-parallax-layers/caption-parallax-layers.html
@@ -363,7 +363,7 @@
       });
 
       tl.to({}, { duration: DURATION }, 0);
-      window.__timelines["parallax-layers"] = tl;
+      window.__timelines["caption-parallax-layers"] = tl;
 
       document.fonts.ready.then(function () {
         applyBehindScales();
diff --git a/registry/components/caption-parallax-layers/demo.html b/registry/components/caption-parallax-layers/demo.html
index 8c9c17578..5a18a8822 100644
--- a/registry/components/caption-parallax-layers/demo.html
+++ b/registry/components/caption-parallax-layers/demo.html
@@ -363,7 +363,7 @@
       });
 
       tl.to({}, { duration: DURATION }, 0);
-      window.__timelines["parallax-layers"] = tl;
+      window.__timelines["caption-parallax-layers"] = tl;
 
       document.fonts.ready.then(function () {
         applyBehindScales();
diff --git a/registry/components/caption-particle-burst/caption-particle-burst.html b/registry/components/caption-particle-burst/caption-particle-burst.html
index 6c6086766..b0a4306e4 100644
--- a/registry/components/caption-particle-burst/caption-particle-burst.html
+++ b/registry/components/caption-particle-burst/caption-particle-burst.html
@@ -304,7 +304,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["particle-burst"] = tl;
+        window.__timelines["caption-particle-burst"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-particle-burst/demo.html b/registry/components/caption-particle-burst/demo.html
index 6c6086766..b0a4306e4 100644
--- a/registry/components/caption-particle-burst/demo.html
+++ b/registry/components/caption-particle-burst/demo.html
@@ -304,7 +304,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["particle-burst"] = tl;
+        window.__timelines["caption-particle-burst"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index 5cca10c90..664825959 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -393,7 +393,7 @@
         });
       });
 
-      window.__timelines["pill-karaoke"] = tl;
+      window.__timelines["caption-pill-karaoke"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-pill-karaoke/demo.html b/registry/components/caption-pill-karaoke/demo.html
index 5cca10c90..664825959 100644
--- a/registry/components/caption-pill-karaoke/demo.html
+++ b/registry/components/caption-pill-karaoke/demo.html
@@ -393,7 +393,7 @@
         });
       });
 
-      window.__timelines["pill-karaoke"] = tl;
+      window.__timelines["caption-pill-karaoke"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-texture-lava/caption-texture-lava.html b/registry/components/caption-texture-lava/caption-texture-lava.html
index 9265e3504..1542ea6f9 100644
--- a/registry/components/caption-texture-lava/caption-texture-lava.html
+++ b/registry/components/caption-texture-lava/caption-texture-lava.html
@@ -215,7 +215,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["texture-lava"] = tl;
+        window.__timelines["caption-texture-lava"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-texture-lava/demo.html b/registry/components/caption-texture-lava/demo.html
index 9265e3504..1542ea6f9 100644
--- a/registry/components/caption-texture-lava/demo.html
+++ b/registry/components/caption-texture-lava/demo.html
@@ -215,7 +215,7 @@
         });
 
         tl.seek(0);
-        window.__timelines["texture-lava"] = tl;
+        window.__timelines["caption-texture-lava"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-typewriter/caption-typewriter.html b/registry/components/caption-typewriter/caption-typewriter.html
index 44dfa86bc..ee1e194b4 100644
--- a/registry/components/caption-typewriter/caption-typewriter.html
+++ b/registry/components/caption-typewriter/caption-typewriter.html
@@ -237,7 +237,7 @@
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        window.__timelines["typewriter"] = tl;
+        window.__timelines["caption-typewriter"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-typewriter/demo.html b/registry/components/caption-typewriter/demo.html
index 44dfa86bc..ee1e194b4 100644
--- a/registry/components/caption-typewriter/demo.html
+++ b/registry/components/caption-typewriter/demo.html
@@ -237,7 +237,7 @@
           tl.set(grp, { opacity: 0, visibility: "hidden" }, g.end);
         });
 
-        window.__timelines["typewriter"] = tl;
+        window.__timelines["caption-typewriter"] = tl;
       })();
     </script>
   </body>
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index ffb1508a5..b02ca8e52 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -377,7 +377,7 @@
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
-      window.__timelines["weight-shift"] = tl;
+      window.__timelines["caption-weight-shift"] = tl;
     </script>
   </body>
 </html>
diff --git a/registry/components/caption-weight-shift/demo.html b/registry/components/caption-weight-shift/demo.html
index ffb1508a5..b02ca8e52 100644
--- a/registry/components/caption-weight-shift/demo.html
+++ b/registry/components/caption-weight-shift/demo.html
@@ -377,7 +377,7 @@
         tl.set(groupEl, { opacity: 0 }, visibleEnd);
       });
 
-      window.__timelines["weight-shift"] = tl;
+      window.__timelines["caption-weight-shift"] = tl;
     </script>
   </body>
 </html>
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index bc235a014..56d634a88 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -519,7 +519,8 @@ function main(): void {
   // Items with the same first tag are grouped together. Items without tags
   // go into an "Other" group. Groups are sorted with a priority order.
   const GROUP_ORDER: Record<string, number> = {
-    "HTML-in-Canvas": 0,
+    Captions: 0,
+    "HTML-in-Canvas": 1,
     "Social Overlays": 2,
     "Shader Transitions": 3,
     "CSS Transitions": 4,
@@ -534,7 +535,7 @@ function main(): void {
     // Two-tag combos for specific grouping
     if (tags.includes("transition") && tags.includes("shader")) return "Shader Transitions";
     if (tags.includes("transition") && tags.includes("showcase")) return "CSS Transitions";
-    // HTML-in-Canvas and Captions categories
+    if (tags.includes("captions")) return "Captions";
     if (tags.includes("html-in-canvas")) return "HTML-in-Canvas";
     // Single-tag mapping
     if (tags.includes("social")) return "Social Overlays";