hyperframes 0.1.15 → 0.2.0-alpha.1

package/dist/templates/product-promo/compositions/scene5-logo-outro.html

@@ -1,226 +0,0 @@
-<template id="scene5-logo-outro-template">
-  <div
-    data-composition-id="scene5-logo-outro"
-    data-width="1920"
-    data-height="1080"
-    data-duration="6"
-  >
-    <div class="canvas">
-      <!-- Glow effect behind the logo -->
-      <div class="logo-glow"></div>
-
-      <!-- Logo Container -->
-      <div class="logo-container">
-        <svg viewBox="0 0 160 240" width="160" height="240" class="logo-svg">
-          <!-- Figma Logo Pieces -->
-          <!-- Top-left: Red (#F24E1E) -->
-          <path
-            class="logo-piece logo-tl"
-            d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
-            fill="#F24E1E"
-          />
-          <!-- Top-right: Purple (#A259FF) -->
-          <path
-            class="logo-piece logo-tr"
-            d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
-            fill="#A259FF"
-          />
-          <!-- Middle-left: Pink (#FF7262) -->
-          <path
-            class="logo-piece logo-ml"
-            d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
-            fill="#FF7262"
-          />
-          <!-- Middle-right: Blue (#1ABCFE) -->
-          <circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
-          <!-- Bottom-left: Green (#0ACF83) -->
-          <path
-            class="logo-piece logo-bl"
-            d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
-            fill="#0ACF83"
-          />
-        </svg>
-      </div>
-
-      <div class="text-container">
-        <div class="tagline">Nothing great is made alone.</div>
-        <div class="url-pill">
-          <span class="url-text">figma.com</span>
-        </div>
-      </div>
-    </div>
-
-    <style>
-      [data-composition-id="scene5-logo-outro"] .canvas {
-        width: 1920px;
-        height: 1080px;
-        background: #0a0a0f;
-        position: relative;
-        overflow: hidden;
-        font-family: "Inter", sans-serif;
-      }
-
-      [data-composition-id="scene5-logo-outro"] .logo-container {
-        position: absolute;
-        left: 880px; /* Center X: 960 - 80 */
-        top: 380px; /* Adjusted for tagline space: 540 - 120 - 40 */
-        width: 160px;
-        height: 240px;
-        z-index: 2;
-      }
-
-      [data-composition-id="scene5-logo-outro"] .logo-piece {
-        transform-origin: center center;
-        opacity: 0;
-      }
-
-      [data-composition-id="scene5-logo-outro"] .logo-glow {
-        position: absolute;
-        left: 760px; /* 960 - 200 */
-        top: 300px; /* 500 - 200 */
-        width: 400px;
-        height: 400px;
-        background: radial-gradient(circle, rgba(162, 89, 255, 0.25) 0%, rgba(10, 10, 15, 0) 70%);
-        border-radius: 50%;
-        opacity: 0;
-        pointer-events: none;
-        z-index: 1;
-      }
-
-      [data-composition-id="scene5-logo-outro"] .text-container {
-        position: absolute;
-        top: 720px;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        z-index: 3;
-      }
-
-      [data-composition-id="scene5-logo-outro"] .tagline {
-        font-size: 44px;
-        font-weight: 500;
-        color: white;
-        opacity: 0;
-        margin-bottom: 32px;
-        text-align: center;
-      }
-
-      [data-composition-id="scene5-logo-outro"] .url-pill {
-        background: #1a1a1f;
-        border: 1px solid #2c2c2c;
-        border-radius: 100px;
-        padding: 8px 24px;
-        opacity: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      [data-composition-id="scene5-logo-outro"] .url-text {
-        font-size: 18px;
-        color: #666;
-        letter-spacing: 0.5px;
-      }
-    </style>
-
-    <script>
-      (function () {
-        const tl = gsap.timeline({ paused: true });
-
-        const pieces = {
-          tl: '[data-composition-id="scene5-logo-outro"] .logo-tl',
-          tr: '[data-composition-id="scene5-logo-outro"] .logo-tr',
-          ml: '[data-composition-id="scene5-logo-outro"] .logo-ml',
-          mr: '[data-composition-id="scene5-logo-outro"] .logo-mr',
-          bl: '[data-composition-id="scene5-logo-outro"] .logo-bl',
-        };
-
-        const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
-        const logoGlow = '[data-composition-id="scene5-logo-outro"] .logo-glow';
-        const tagline = '[data-composition-id="scene5-logo-outro"] .tagline';
-        const urlPill = '[data-composition-id="scene5-logo-outro"] .url-pill';
-
-        // 1. Pieces slide in from the RIGHT (x: 1920 -> 0) with a ripple stagger (0.08s). Duration: 1.2s.
-        pieceArray.forEach((piece, i) => {
-          tl.fromTo(
-            piece,
-            { x: 1920, opacity: 0 },
-            { x: 0, opacity: 1, duration: 1.2, ease: "power4.out" },
-            i * 0.08,
-          );
-        });
-
-        // 2. Once at the center (960, 540), the pieces should simply EXPAND (scale 1 -> 1.15)
-        // and then CLOSE back to their done state (scale 1.15 -> 1).
-        // NO positional 'explode' or pushing to corners.
-        const expandTime = 1.2; // Start right after the first piece arrives, or after all?
-        // Let's start it after the last piece has arrived or is near arrival for a fluid motion.
-        // The last piece starts at 0.32s and takes 1.2s to arrive (1.52s total).
-        // Let's trigger the expand at 1.2s so it feels like a continuous flow.
-
-        tl.to(
-          pieceArray,
-          {
-            scale: 1.15,
-            duration: 0.5,
-            ease: "back.out(1.7)",
-            stagger: 0.02,
-          },
-          expandTime,
-        );
-
-        tl.to(
-          pieceArray,
-          {
-            scale: 1,
-            duration: 0.4,
-            ease: "power2.inOut",
-          },
-          expandTime + 0.3,
-        );
-
-        // 3. Subtle glow bloom effect (optional but adds polish, keeping it from original as it fits the 'expand')
-        tl.fromTo(
-          logoGlow,
-          { opacity: 0, scale: 0.5 },
-          { opacity: 1, scale: 1.2, duration: 0.4, ease: "power2.out" },
-          expandTime,
-        );
-        tl.to(
-          logoGlow,
-          {
-            opacity: 0,
-            scale: 1.8,
-            duration: 1.2,
-            ease: "power2.out",
-          },
-          expandTime + 0.4,
-        );
-
-        // 4. Tagline and URL pill fade in as before.
-        const textStartTime = expandTime + 0.8;
-        tl.fromTo(
-          tagline,
-          { opacity: 0, y: 20 },
-          { opacity: 1, y: 0, duration: 1, ease: "power3.out" },
-          textStartTime,
-        );
-
-        tl.fromTo(
-          urlPill,
-          { opacity: 0, y: 15 },
-          { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" },
-          textStartTime + 0.4,
-        );
-
-        // 5. Remove the final pulse animation. (Omitted)
-        // 6. After they return to the done state, there should be NO MORE movement for the logo. (Ensured)
-
-        // Register timeline
-        window.__timelines = window.__timelines || {};
-        window.__timelines["scene5-logo-outro"] = tl;
-      })();
-    </script>
-  </div>
-</template>

package/dist/templates/product-promo/index.html

@@ -1,158 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=1920, height=1080" />
-    <title>Product Promo</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=block"
-      rel="stylesheet"
-    />
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      html,
-      body {
-        margin: 0;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-        background: #0a0a0f;
-        font-family: "Inter", sans-serif;
-      }
-      .scene {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-      .caption-text-wrapper {
-        position: absolute;
-        bottom: 150px;
-        left: 0;
-        right: 0;
-        display: flex;
-        justify-content: center;
-        pointer-events: none;
-        overflow: hidden;
-        padding: 10px 0;
-      }
-      .caption-line {
-        color: white;
-        font-size: 48px;
-        font-weight: 600;
-        letter-spacing: -0.02em;
-        text-align: center;
-        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
-        transform: translateY(100%);
-        opacity: 0;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="20"
-      data-width="1920"
-      data-height="1080"
-    >
-      <!-- Scene 1: Logo Intro -->
-      <div
-        id="scene-1"
-        class="scene"
-        data-composition-id="scene1-logo-intro"
-        data-composition-src="compositions/scene1-logo-intro.html"
-        data-start="0"
-        data-duration="1.5"
-        data-track-index="1"
-        data-width="1920"
-        data-height="1080"
-      ></div>
-
-      <!-- Scene 2-4: Continuous Canvas -->
-      <div
-        id="scene-2-4"
-        class="scene"
-        data-composition-id="scene2-4-canvas"
-        data-composition-src="compositions/scene2-4-canvas.html"
-        data-start="1.5"
-        data-duration="12.5"
-        data-track-index="1"
-        data-width="1920"
-        data-height="1080"
-      ></div>
-
-      <!-- Scene 5: Logo Outro -->
-      <div
-        id="scene-5"
-        class="scene"
-        data-composition-id="scene5-logo-outro"
-        data-composition-src="compositions/scene5-logo-outro.html"
-        data-start="14"
-        data-duration="6"
-        data-track-index="1"
-        data-width="1920"
-        data-height="1080"
-      ></div>
-
-      <!-- Captions -->
-      <div
-        id="captions-comp"
-        data-composition-id="captions"
-        data-start="1.5"
-        data-duration="12.5"
-        data-track-index="2"
-        data-width="1920"
-        data-height="1080"
-      >
-        <div class="caption-text-wrapper">
-          <div id="caption-text" class="caption-line">Starting with a blank canvas.</div>
-        </div>
-
-        <script>
-          (function () {
-            const tl = gsap.timeline({ paused: true });
-            const text = document.querySelector("#caption-text");
-
-            tl.to(text, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0);
-            tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 3.2);
-            tl.set(text, { innerText: "Three cursors. One file. Zero meetings.", y: 40 }, 3.5);
-            tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 3.5);
-            tl.to(text, { opacity: 0, y: -20, duration: 0.3, ease: "power3.in" }, 7.7);
-            tl.set(
-              text,
-              { innerText: "Components in. Feedback resolved. No one waited.", y: 40 },
-              8.0,
-            );
-            tl.to(text, { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" }, 8.0);
-            tl.to(text, { opacity: 0, y: -20, duration: 0.4, ease: "power3.in" }, 12.1);
-
-            window.__timelines = window.__timelines || {};
-            window.__timelines["captions"] = tl;
-          })();
-        </script>
-      </div>
-    </div>
-
-    <script>
-      window.__timelines = window.__timelines || {};
-      const mainTl = gsap.timeline({ paused: true });
-
-      mainTl.set("#scene-2-4", { scale: 1, filter: "blur(0px)" }, 1.5);
-      mainTl.to(
-        "#scene-2-4",
-        { duration: 0.25, scale: 0.94, filter: "blur(6px)", opacity: 0, ease: "power2.in" },
-        13.75,
-      );
-
-      window.__timelines["main"] = mainTl;
-    </script>
-  </body>
-</html>

package/dist/templates/swiss-grid/assets/swiss-grid.svg

@@ -1,116 +0,0 @@
-<svg viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
-  <rect width="1920" height="1080" fill="#F2F2F2" />
-  
-  <g id="thin-grid-lines" stroke="#0A1E3D" stroke-width="1" opacity="0.1">
-    <line id="v-thin-1" x1="60" y1="0" x2="60" y2="1080" />
-    <line id="v-thin-2" x1="120" y1="0" x2="120" y2="1080" />
-    <line id="v-thin-3" x1="180" y1="0" x2="180" y2="1080" />
-    <line id="v-thin-5" x1="300" y1="0" x2="300" y2="1080" />
-    <line id="v-thin-6" x1="360" y1="0" x2="360" y2="1080" />
-    <line id="v-thin-7" x1="420" y1="0" x2="420" y2="1080" />
-    <line id="v-thin-9" x1="540" y1="0" x2="540" y2="1080" />
-    <line id="v-thin-10" x1="600" y1="0" x2="600" y2="1080" />
-    <line id="v-thin-11" x1="660" y1="0" x2="660" y2="1080" />
-    <line id="v-thin-13" x1="780" y1="0" x2="780" y2="1080" />
-    <line id="v-thin-14" x1="840" y1="0" x2="840" y2="1080" />
-    <line id="v-thin-15" x1="900" y1="0" x2="900" y2="1080" />
-    <line id="v-thin-17" x1="1020" y1="0" x2="1020" y2="1080" />
-    <line id="v-thin-18" x1="1080" y1="0" x2="1080" y2="1080" />
-    <line id="v-thin-19" x1="1140" y1="0" x2="1140" y2="1080" />
-    <line id="v-thin-21" x1="1260" y1="0" x2="1260" y2="1080" />
-    <line id="v-thin-22" x1="1320" y1="0" x2="1320" y2="1080" />
-    <line id="v-thin-23" x1="1380" y1="0" x2="1380" y2="1080" />
-    <line id="v-thin-25" x1="1500" y1="0" x2="1500" y2="1080" />
-    <line id="v-thin-26" x1="1560" y1="0" x2="1560" y2="1080" />
-    <line id="v-thin-27" x1="1620" y1="0" x2="1620" y2="1080" />
-    <line id="v-thin-29" x1="1740" y1="0" x2="1740" y2="1080" />
-    <line id="v-thin-30" x1="1800" y1="0" x2="1800" y2="1080" />
-    <line id="v-thin-31" x1="1860" y1="0" x2="1860" y2="1080" />
-    <line id="h-thin-1" x1="0" y1="60" x2="1920" y2="60" />
-    <line id="h-thin-2" x1="0" y1="120" x2="1920" y2="120" />
-    <line id="h-thin-3" x1="0" y1="180" x2="1920" y2="180" />
-    <line id="h-thin-5" x1="0" y1="300" x2="1920" y2="300" />
-    <line id="h-thin-6" x1="0" y1="360" x2="1920" y2="360" />
-    <line id="h-thin-7" x1="0" y1="420" x2="1920" y2="420" />
-    <line id="h-thin-9" x1="0" y1="540" x2="1920" y2="540" />
-    <line id="h-thin-10" x1="0" y1="600" x2="1920" y2="600" />
-    <line id="h-thin-11" x1="0" y1="660" x2="1920" y2="660" />
-    <line id="h-thin-13" x1="0" y1="780" x2="1920" y2="780" />
-    <line id="h-thin-14" x1="0" y1="840" x2="1920" y2="840" />
-    <line id="h-thin-15" x1="0" y1="900" x2="1920" y2="900" />
-    <line id="h-thin-17" x1="0" y1="1020" x2="1920" y2="1020" />
-  </g>
-  
-  <g id="thick-grid-lines" stroke="#0A1E3D" stroke-width="3" opacity="0.2">
-    <line id="v-thick-1" x1="240" y1="0" x2="240" y2="1080" />
-    <line id="v-thick-2" x1="480" y1="0" x2="480" y2="1080" />
-    <line id="v-thick-3" x1="720" y1="0" x2="720" y2="1080" />
-    <line id="v-thick-4" x1="960" y1="0" x2="960" y2="1080" />
-    <line id="v-thick-5" x1="1200" y1="0" x2="1200" y2="1080" />
-    <line id="v-thick-6" x1="1440" y1="0" x2="1440" y2="1080" />
-    <line id="v-thick-7" x1="1680" y1="0" x2="1680" y2="1080" />
-    <line id="h-thick-1" x1="0" y1="240" x2="1920" y2="240" />
-    <line id="h-thick-2" x1="0" y1="480" x2="1920" y2="480" />
-    <line id="h-thick-3" x1="0" y1="720" x2="1920" y2="720" />
-    <line id="h-thick-4" x1="0" y1="960" x2="1920" y2="960" />
-  </g>
-  
-  <g id="intersections" stroke="#0A1E3D" stroke-width="2" opacity="0.3">
-    <line x1="230" y1="240" x2="250" y2="240" />
-    <line x1="240" y1="230" x2="240" y2="250" />
-    <line x1="230" y1="480" x2="250" y2="480" />
-    <line x1="240" y1="470" x2="240" y2="490" />
-    <line x1="230" y1="720" x2="250" y2="720" />
-    <line x1="240" y1="710" x2="240" y2="730" />
-    <line x1="230" y1="960" x2="250" y2="960" />
-    <line x1="240" y1="950" x2="240" y2="970" />
-    <line x1="470" y1="240" x2="490" y2="240" />
-    <line x1="480" y1="230" x2="480" y2="250" />
-    <line x1="470" y1="480" x2="490" y2="480" />
-    <line x1="480" y1="470" x2="480" y2="490" />
-    <line x1="470" y1="720" x2="490" y2="720" />
-    <line x1="480" y1="710" x2="480" y2="730" />
-    <line x1="470" y1="960" x2="490" y2="960" />
-    <line x1="480" y1="950" x2="480" y2="970" />
-    <line x1="710" y1="240" x2="730" y2="240" />
-    <line x1="720" y1="230" x2="720" y2="250" />
-    <line x1="710" y1="480" x2="730" y2="480" />
-    <line x1="720" y1="470" x2="720" y2="490" />
-    <line x1="710" y1="720" x2="730" y2="720" />
-    <line x1="720" y1="710" x2="720" y2="730" />
-    <line x1="710" y1="960" x2="730" y2="960" />
-    <line x1="720" y1="950" x2="720" y2="970" />
-    <line x1="950" y1="240" x2="970" y2="240" />
-    <line x1="960" y1="230" x2="960" y2="250" />
-    <line x1="950" y1="480" x2="970" y2="480" />
-    <line x1="960" y1="470" x2="960" y2="490" />
-    <line x1="950" y1="720" x2="970" y2="720" />
-    <line x1="960" y1="710" x2="960" y2="730" />
-    <line x1="950" y1="960" x2="970" y2="960" />
-    <line x1="960" y1="950" x2="960" y2="970" />
-    <line x1="1190" y1="240" x2="1210" y2="240" />
-    <line x1="1200" y1="230" x2="1200" y2="250" />
-    <line x1="1190" y1="480" x2="1210" y2="480" />
-    <line x1="1200" y1="470" x2="1200" y2="490" />
-    <line x1="1190" y1="720" x2="1210" y2="720" />
-    <line x1="1200" y1="710" x2="1200" y2="730" />
-    <line x1="1190" y1="960" x2="1210" y2="960" />
-    <line x1="1200" y1="950" x2="1200" y2="970" />
-    <line x1="1430" y1="240" x2="1450" y2="240" />
-    <line x1="1440" y1="230" x2="1440" y2="250" />
-    <line x1="1430" y1="480" x2="1450" y2="480" />
-    <line x1="1440" y1="470" x2="1440" y2="490" />
-    <line x1="1430" y1="720" x2="1450" y2="720" />
-    <line x1="1440" y1="710" x2="1440" y2="730" />
-    <line x1="1430" y1="960" x2="1450" y2="960" />
-    <line x1="1440" y1="950" x2="1440" y2="970" />
-    <line x1="1670" y1="240" x2="1690" y2="240" />
-    <line x1="1680" y1="230" x2="1680" y2="250" />
-    <line x1="1670" y1="480" x2="1690" y2="480" />
-    <line x1="1680" y1="470" x2="1680" y2="490" />
-    <line x1="1670" y1="720" x2="1690" y2="720" />
-    <line x1="1680" y1="710" x2="1680" y2="730" />
-    <line x1="1670" y1="960" x2="1690" y2="960" />
-    <line x1="1680" y1="950" x2="1680" y2="970" />
-  </g>
-</svg>

package/dist/templates/swiss-grid/compositions/captions.html

@@ -1,148 +0,0 @@
-<template id="captions-template">
-  <div
-    data-composition-id="captions"
-    data-width="1920"
-    data-height="1080"
-    data-duration="__VIDEO_DURATION__"
-  >
-    <div id="caption-container"></div>
-
-    <style>
-      [data-composition-id="captions"] {
-        width: 1920px;
-        height: 1080px;
-        position: relative;
-        font-family: "Helvetica", "Arial", sans-serif;
-        font-weight: bold;
-        overflow: hidden;
-      }
-
-      [data-composition-id="captions"] #caption-container {
-        position: absolute;
-        bottom: 120px; /* Consistent bottom positioning */
-        left: 50%;
-        transform: translateX(-50%);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 100%;
-      }
-
-      [data-composition-id="captions"] .caption-box {
-        background-color: #0a1e3d; /* Solid navy */
-        padding: 20px 40px;
-        display: none; /* Hidden by default, shown via GSAP */
-        justify-content: center;
-        align-items: center;
-        /* Swiss Grid: sharp corners, solid block */
-      }
-
-      [data-composition-id="captions"] .caption-text {
-        color: #f2f2f2; /* Off-white */
-        font-size: 72px;
-        text-transform: uppercase; /* Swiss style often uses uppercase for impact */
-        letter-spacing: -2px;
-        line-height: 1;
-        white-space: nowrap;
-        text-align: center;
-      }
-    </style>
-
-    <script>
-      (function () {
-        const TRANSCRIPT = [
-          { text: "We", start: 0.119, end: 0.259 },
-          { text: "asked", start: 0.319, end: 0.479 },
-          { text: "what", start: 0.519, end: 0.659 },
-          { text: "you", start: 0.699, end: 0.819 },
-          { text: "needed.", start: 0.859, end: 1.819 },
-          { text: "Forty-seven", start: 1.86, end: 2.299 },
-          { text: "percent", start: 2.399, end: 2.679 },
-          { text: "of", start: 2.7, end: 2.799 },
-          { text: "you", start: 2.839, end: 2.939 },
-          { text: "said", start: 3.039, end: 3.179 },
-          { text: "motion", start: 3.24, end: 3.559 },
-          { text: "graphics,", start: 3.579, end: 4.599 },
-          { text: "sixty-two", start: 4.679, end: 5.179 },
-          { text: "percent", start: 5.299, end: 5.759 },
-          { text: "said", start: 5.859, end: 5.98 },
-          { text: "static", start: 6.079, end: 6.399 },
-          { text: "content", start: 6.46, end: 6.879 },
-          { text: "was", start: 6.92, end: 7.079 },
-          { text: "costing", start: 7.099, end: 7.48 },
-          { text: "you", start: 7.5, end: 7.579 },
-          { text: "attention,", start: 7.679, end: 8.659 },
-          { text: "and", start: 8.699, end: 8.86 },
-          { text: "three", start: 8.88, end: 9.06 },
-          { text: "out", start: 9.079, end: 9.18 },
-          { text: "of", start: 9.199, end: 9.34 },
-          { text: "four", start: 9.38, end: 9.799 },
-          { text: "said", start: 9.84, end: 10.0 },
-          { text: "you", start: 10.019, end: 10.159 },
-          { text: "know", start: 10.179, end: 10.36 },
-          { text: "the", start: 10.38, end: 10.42 },
-          { text: "look", start: 10.519, end: 10.699 },
-          { text: "you", start: 10.739, end: 10.859 },
-          { text: "want", start: 10.98, end: 11.34 },
-          { text: "but", start: 11.359, end: 11.52 },
-          { text: "don't", start: 11.56, end: 11.779 },
-          { text: "have", start: 11.819, end: 11.94 },
-          { text: "the", start: 11.96, end: 12.06 },
-          { text: "editing", start: 12.079, end: 12.4 },
-          { text: "skills", start: 12.52, end: 12.86 },
-          { text: "to", start: 12.88, end: 13.0 },
-          { text: "get", start: 13.019, end: 13.18 },
-          { text: "there.", start: 13.22, end: 14.22 },
-          { text: "So", start: 14.239, end: 14.399 },
-          { text: "we", start: 14.42, end: 14.52 },
-          { text: "built", start: 14.619, end: 14.88 },
-          { text: "Hyperframes", start: 15.079, end: 15.42 },
-        ];
-        const container = document.getElementById("caption-container");
-        const tl = gsap.timeline({ paused: true });
-
-        if (!TRANSCRIPT || TRANSCRIPT.length === 0) {
-          window.__timelines = window.__timelines || {};
-          window.__timelines["captions"] = tl;
-          return;
-        }
-
-        // Group transcript into max 5 words per group
-        const groups = [];
-        let currentGroup = [];
-
-        TRANSCRIPT.forEach((word, index) => {
-          currentGroup.push(word);
-          // Group by 5 words OR if it's the last word
-          if (currentGroup.length === 5 || index === TRANSCRIPT.length - 1) {
-            groups.push([...currentGroup]);
-            currentGroup = [];
-          }
-        });
-
-        // Create DOM elements and timeline for each group
-        groups.forEach((group, i) => {
-          const box = document.createElement("div");
-          box.className = "caption-box";
-          box.id = `group-${i}`;
-
-          const text = document.createElement("div");
-          text.className = "caption-text";
-          text.textContent = group.map((w) => w.text).join(" ");
-
-          box.appendChild(text);
-          container.appendChild(box);
-
-          const startTime = group[0].start;
-          const endTime = group[group.length - 1].end;
-
-          // Hard cut animation (no fades) as requested
-          tl.set(box, { display: "flex" }, startTime);
-          tl.set(box, { display: "none" }, endTime);
-        });
-
-        window.__timelines["captions"] = tl;
-      })();
-    </script>
-  </div>
-</template>