hyperframes 0.1.1 → 0.1.4

package/dist/templates/blank/compositions/captions.html

@@ -0,0 +1,92 @@
+<template id="captions-template">
+  <div
+    data-composition-id="captions"
+    data-width="1920"
+    data-height="1080"
+    data-duration="__VIDEO_DURATION__"
+  >
+    <div id="captions-container"></div>
+
+    <style>
+      [data-composition-id="captions"] {
+        width: 1920px;
+        height: 1080px;
+        pointer-events: none;
+      }
+
+      [data-composition-id="captions"] #captions-container {
+        position: absolute;
+        bottom: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 150px;
+      }
+
+      .caption-group {
+        position: absolute;
+        opacity: 0;
+        font-family: "Inter", sans-serif;
+        font-size: 48px;
+        font-weight: 700;
+        color: #ffffff;
+        text-shadow:
+          0 2px 8px rgba(0, 0, 0, 0.8),
+          0 0 2px rgba(0, 0, 0, 0.9);
+        white-space: nowrap;
+      }
+    </style>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+        const tl = gsap.timeline({ paused: true });
+
+        const script = [];
+
+        if (script.length === 0) {
+          window.__timelines["captions"] = tl;
+          return;
+        }
+
+        const container = document.getElementById("captions-container");
+
+        // Group words into lines (max 5 words per line)
+        const lines = [];
+        for (let i = 0; i < script.length; i += 5) {
+          const lineWords = script.slice(i, i + 5);
+          lines.push({
+            text: lineWords.map((w) => w.text).join(" "),
+            start: lineWords[0].start,
+            end: lineWords[lineWords.length - 1].end,
+          });
+        }
+
+        lines.forEach((line, index) => {
+          const el = document.createElement("div");
+          el.className = "caption-group";
+          el.textContent = line.text;
+          container.appendChild(el);
+
+          tl.fromTo(
+            el,
+            { opacity: 0, y: 20 },
+            { opacity: 1, y: 0, duration: 0.3, ease: "power3.out" },
+            line.start,
+          );
+
+          const hideTime =
+            index < lines.length - 1 ? Math.min(line.end, lines[index + 1].start) : line.end;
+
+          tl.to(el, { opacity: 0, y: -10, duration: 0.25, ease: "power2.in" }, hideTime - 0.25);
+        });
+
+        window.__timelines["captions"] = tl;
+      })();
+    </script>
+  </div>
+</template>

package/dist/templates/blank/index.html

@@ -0,0 +1,44 @@
+<div
+  id="root"
+  data-composition-id="main"
+  data-start="0"
+  data-duration="__VIDEO_DURATION__"
+  data-width="1920"
+  data-height="1080"
+>
+  <video
+    id="a-roll"
+    src="__VIDEO_SRC__"
+    muted
+    playsinline
+    data-start="0"
+    data-duration="__VIDEO_DURATION__"
+    data-track-index="0"
+  ></video>
+  <audio
+    id="a-roll-audio"
+    src="__VIDEO_SRC__"
+    data-start="0"
+    data-duration="__VIDEO_DURATION__"
+    data-track-index="2"
+    data-volume="1"
+  ></audio>
+
+  <div
+    id="captions-comp"
+    data-composition-id="captions"
+    data-composition-src="compositions/captions.html"
+    data-start="0"
+    data-duration="__VIDEO_DURATION__"
+    data-track-index="3"
+    data-width="1920"
+    data-height="1080"
+  ></div>
+
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  <script>
+    window.__timelines = window.__timelines || {};
+    const tl = gsap.timeline({ paused: true });
+    window.__timelines["main"] = tl;
+  </script>
+</div>

package/dist/templates/play-mode/compositions/captions.html

@@ -1,5 +1,10 @@
 <template id="captions-template">
-  <div data-composition-id="captions" data-width="1920" data-height="1080" data-duration="16.04">
+  <div
+    data-composition-id="captions"
+    data-width="1920"
+    data-height="1080"
+    data-duration="__VIDEO_DURATION__"
+  >
     <div id="captions-container"></div>
 
     <style>
@@ -23,11 +28,11 @@
 
       .caption-box {
         position: absolute; /* Stacked in the same place */
-        background-color: #FF2D8A;
+        background-color: #ff2d8a;
         color: white;
         padding: 20px 40px;
         border-radius: 16px;
-        font-family: 'Nunito', sans-serif;
+        font-family: "Nunito", sans-serif;
         font-weight: 900; /* Nunito Black */
         font-size: 64px;
         text-align: center;
@@ -41,9 +46,56 @@
     </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.839, '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.639}, {'text': 'Sixty-two', 'start': 4.659, 'end': 5.179}, {'text': 'percent', 'start': 5.299, 'end': 5.759}, {'text': 'said', 'start': 5.859, 'end': 5.98}, {'text': 'static', 'start': 6.099, '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.479}, {'text': 'look', 'start': 10.52, '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('captions-container');
+      (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.839, 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.639 },
+          { text: "Sixty-two", start: 4.659, end: 5.179 },
+          { text: "percent", start: 5.299, end: 5.759 },
+          { text: "said", start: 5.859, end: 5.98 },
+          { text: "static", start: 6.099, 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.479 },
+          { text: "look", start: 10.52, 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("captions-container");
         const tl = gsap.timeline({ paused: true });
 
         // Group transcript into lines (max 5 words)
@@ -53,43 +105,57 @@
         }
 
         lines.forEach((lineWords, index) => {
-          const lineText = lineWords.map(w => w.text).join(' ');
+          const lineText = lineWords.map((w) => w.text).join(" ");
           const startTime = lineWords[0].start;
           const endTime = lineWords[lineWords.length - 1].end;
-          
+
           // Create element
-          const el = document.createElement('div');
-          el.className = 'caption-box';
+          const el = document.createElement("div");
+          el.className = "caption-box";
           el.textContent = lineText;
           el.id = `caption-line-${index}`;
           container.appendChild(el);
 
           // Animation: Pop in with scale-up bounce (0% to 110% to 100%)
-          tl.to(el, {
-            autoAlpha: 1,
-            scale: 1.1,
-            duration: 0.2,
-            ease: "power2.out"
-          }, startTime);
-          
-          tl.to(el, {
-            scale: 1,
-            duration: 0.1,
-            ease: "power2.inOut"
-          }, startTime + 0.2);
+          tl.to(
+            el,
+            {
+              autoAlpha: 1,
+              scale: 1.1,
+              duration: 0.2,
+              ease: "power2.out",
+            },
+            startTime,
+          );
+
+          tl.to(
+            el,
+            {
+              scale: 1,
+              duration: 0.1,
+              ease: "power2.inOut",
+            },
+            startTime + 0.2,
+          );
 
           // Stay visible until next line or end of its duration
           // We hide it when the next line starts or at its own end time
-          const hideTime = (index < lines.length - 1) ? Math.min(endTime, lines[index+1][0].start) : endTime;
-          
-          tl.to(el, {
-            autoAlpha: 0,
-            scale: 0,
-            duration: 0.15,
-            ease: "power2.in"
-          }, hideTime);
+          const hideTime =
+            index < lines.length - 1 ? Math.min(endTime, lines[index + 1][0].start) : endTime;
+
+          tl.to(
+            el,
+            {
+              autoAlpha: 0,
+              scale: 0,
+              duration: 0.15,
+              ease: "power2.in",
+            },
+            hideTime,
+          );
         });
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["captions"] = tl;
       })();
     </script>

package/dist/templates/play-mode/compositions/intro.html

@@ -1,88 +1,107 @@
 <template id="intro-template">
-    <div id="intro-comp" data-composition-id="intro" data-start="0" data-duration="16.04" data-width="1920" data-height="1080">
-      <div class="intro-container">
-        <h1 class="title">HYPERFRAMES</h1>
-      </div>
+  <div
+    id="intro-comp"
+    data-composition-id="intro"
+    data-start="0"
+    data-duration="__VIDEO_DURATION__"
+    data-width="1920"
+    data-height="1080"
+  >
+    <div class="intro-container">
+      <h1 class="title">HYPERFRAMES</h1>
+    </div>
 
-      <style>
-        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap');
+    <style>
+      @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap");
 
-        [data-composition-id="intro"] .intro-container {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          pointer-events: none;
-        }
+      [data-composition-id="intro"] .intro-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none;
+      }
 
-        [data-composition-id="intro"] .title {
-          font-family: 'Nunito', sans-serif;
-          font-weight: 900;
-          font-size: 180px;
-          color: #FF2D8A; /* Hot Pink */
-          text-transform: uppercase;
-          transform: rotate(-5deg); /* Tilted 5 degrees */
-          margin: 0;
-          padding: 20px;
-          /* Layered offset shadow for depth without suffocating letterforms */
-          filter: drop-shadow(8px 8px 0 #FFFFFF) drop-shadow(15px 15px 0 rgba(0,0,0,0.1));
-          opacity: 0;
-          scale: 0;
-        }
-      </style>
+      [data-composition-id="intro"] .title {
+        font-family: "Nunito", sans-serif;
+        font-weight: 900;
+        font-size: 180px;
+        color: #ff2d8a; /* Hot Pink */
+        text-transform: uppercase;
+        transform: rotate(-5deg); /* Tilted 5 degrees */
+        margin: 0;
+        padding: 20px;
+        /* Layered offset shadow for depth without suffocating letterforms */
+        filter: drop-shadow(8px 8px 0 #ffffff) drop-shadow(15px 15px 0 rgba(0, 0, 0, 0.1));
+        opacity: 0;
+        scale: 0;
+      }
+    </style>
 
-      <script>
-        (function() {
-          const tl = gsap.timeline({ paused: true });
-          
-          // --- INTRO SEQUENCE ---
-          // Animation: Scale-up bounce (0% to 110% to 100%) with elastic overshoot
-          // Starts at 0.5s, lasts until 3s
-          tl.to('[data-composition-id="intro"] .title', {
-            opacity: 1,
-            scale: 1.1,
-            duration: 0.6,
-            ease: "back.out(1.7)",
-            delay: 0.5
-          })
+    <script>
+      (function () {
+        const tl = gsap.timeline({ paused: true });
+
+        // --- INTRO SEQUENCE ---
+        // Animation: Scale-up bounce (0% to 110% to 100%) with elastic overshoot
+        // Starts at 0.5s, lasts until 3s
+        tl.to('[data-composition-id="intro"] .title', {
+          opacity: 1,
+          scale: 1.1,
+          duration: 0.6,
+          ease: "back.out(1.7)",
+          delay: 0.5,
+        })
           .to('[data-composition-id="intro"] .title', {
             scale: 1,
             duration: 0.4,
-            ease: "elastic.out(1, 0.3)"
+            ease: "elastic.out(1, 0.3)",
           })
           // Ambient motion
-          .to('[data-composition-id="intro"] .title', {
-            rotation: "-3deg",
-            duration: 1,
-            repeat: 1,
-            yoyo: true,
-            ease: "sine.inOut"
-          }, "-=0.5")
+          .to(
+            '[data-composition-id="intro"] .title',
+            {
+              rotation: "-3deg",
+              duration: 1,
+              repeat: 1,
+              yoyo: true,
+              ease: "sine.inOut",
+            },
+            "-=0.5",
+          )
           // Exit intro
-          .to('[data-composition-id="intro"] .title', {
-            opacity: 0,
-            scale: 0.5,
-            duration: 0.3,
-            ease: "power2.in"
-          }, 1.4);
+          .to(
+            '[data-composition-id="intro"] .title',
+            {
+              opacity: 0,
+              scale: 0.5,
+              duration: 0.3,
+              ease: "power2.in",
+            },
+            1.4,
+          );
 
-          // --- END CARD SEQUENCE ---
-          // Appears at 14.619s (after Moment 3 finishes exiting at 14.239 + 0.3)
-          tl.to('[data-composition-id="intro"] .title', {
+        // --- END CARD SEQUENCE ---
+        // Appears at 14.619s (after Moment 3 finishes exiting at 14.239 + 0.3)
+        tl.to(
+          '[data-composition-id="intro"] .title',
+          {
             opacity: 1,
             scale: 1.1,
             duration: 0.6,
-            ease: "back.out(1.7)"
-          }, 14.619)
-          .to('[data-composition-id="intro"] .title', {
-            scale: 1,
-            duration: 0.4,
-            ease: "elastic.out(1, 0.3)"
-          });
+            ease: "back.out(1.7)",
+          },
+          14.619,
+        ).to('[data-composition-id="intro"] .title', {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.3)",
+        });
 
-          window.__timelines["intro"] = tl;
-        })();
-      </script>
-    </div>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["intro"] = tl;
+      })();
+    </script>
+  </div>
 </template>