hyperframes 0.1.1 → 0.1.4

package/dist/templates/warm-grain/compositions/captions.html

@@ -1,5 +1,10 @@
 <template id="captions-template">
-  <div data-composition-id="captions" data-width="1920" data-height="1080" data-duration="18">
+  <div
+    data-composition-id="captions"
+    data-width="1920"
+    data-height="1080"
+    data-duration="__VIDEO_DURATION__"
+  >
     <div class="captions-container">
       <div id="caption-box" class="caption-box">
         <span id="caption-text" class="caption-text"></span>
@@ -18,7 +23,7 @@
       }
 
       [data-composition-id="captions"] .caption-box {
-        background-color: #7A6248;
+        background-color: #7a6248;
         padding: 12px 32px;
         border-radius: 24px;
         display: flex;
@@ -31,8 +36,8 @@
       }
 
       [data-composition-id="captions"] .caption-text {
-        color: #F5F0E0;
-        font-family: 'Outfit', sans-serif;
+        color: #f5f0e0;
+        font-family: "Outfit", sans-serif;
         font-size: 48px;
         font-weight: 700;
         text-align: center;
@@ -42,54 +47,54 @@
     </style>
 
     <script>
-      (function() {
+      (function () {
         const script = [
-          {"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": 16.02}
+          { 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: 16.02 },
         ];
 
         // Group words into lines (max 5 words per line)
@@ -97,9 +102,9 @@
         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(' '),
+            text: lineWords.map((w) => w.text).join(" "),
             start: lineWords[0].start,
-            end: lineWords[lineWords.length - 1].end
+            end: lineWords[lineWords.length - 1].end,
           });
         }
 
@@ -109,23 +114,32 @@
 
         lines.forEach((line, index) => {
           // Fade in and set text
-          tl.to(box, {
-            opacity: 1,
-            duration: 0.1,
-            ease: "power2.out",
-            onStart: () => {
-              textEl.textContent = line.text;
-            }
-          }, line.start);
+          tl.to(
+            box,
+            {
+              opacity: 1,
+              duration: 0.1,
+              ease: "power2.out",
+              onStart: () => {
+                textEl.textContent = line.text;
+              },
+            },
+            line.start,
+          );
 
           // Fade out at the end of the line
-          tl.to(box, {
-            opacity: 0,
-            duration: 0.1,
-            ease: "power2.in"
-          }, line.end);
+          tl.to(
+            box,
+            {
+              opacity: 0,
+              duration: 0.1,
+              ease: "power2.in",
+            },
+            line.end,
+          );
         });
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["captions"] = tl;
       })();
     </script>

package/dist/templates/warm-grain/compositions/graphics.html

@@ -17,7 +17,10 @@
     <div id="moment-3" class="moment rect-stat">
       <div class="icon-shape">
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-          <path d="M20,20 Q50,0 80,20 Q100,50 80,80 Q50,100 20,80 Q0,50 20,20" fill="currentColor" />
+          <path
+            d="M20,20 Q50,0 80,20 Q100,50 80,80 Q50,100 20,80 Q0,50 20,20"
+            fill="currentColor"
+          />
         </svg>
       </div>
       <div class="stat-text">Editing Skills</div>
@@ -28,7 +31,7 @@
         position: relative;
         width: 1920px;
         height: 1080px;
-        font-family: 'Outfit', sans-serif;
+        font-family: "Outfit", sans-serif;
         color: white;
         overflow: hidden;
       }
@@ -46,7 +49,7 @@
       [data-composition-id="graphics"] #moment-1 {
         width: 500px;
         height: 500px;
-        background-color: #3B5E3A;
+        background-color: #3b5e3a;
         border-radius: 50%;
         left: 1400px;
         top: 540px;
@@ -72,7 +75,7 @@
       [data-composition-id="graphics"] #moment-2 {
         width: 500px;
         height: 220px;
-        background-color: #CC8832;
+        background-color: #cc8832;
         border-radius: 110px;
         left: 960px;
         top: 200px;
@@ -83,7 +86,7 @@
       [data-composition-id="graphics"] #moment-3 {
         width: 550px;
         height: 180px;
-        background-color: #C45D3E;
+        background-color: #c45d3e;
         border-radius: 40px;
         left: 400px;
         top: 540px;
@@ -117,41 +120,45 @@
     </style>
 
     <script>
-      (function() {
+      (function () {
         const tl = gsap.timeline({ paused: true });
 
         // Moment 1: 1.8s - 4.5s
         // Gentle drift into place and settle
-        tl.fromTo('#moment-1', 
-          { opacity: 0, x: '+=40', y: '+=15', scale: 0.8 },
-          { opacity: 1, x: 0, y: 0, scale: 1, duration: 1.2, ease: 'back.out(1.7)' },
-          1.8
+        tl.fromTo(
+          "#moment-1",
+          { opacity: 0, x: "+=40", y: "+=15", scale: 0.8 },
+          { opacity: 1, x: 0, y: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
+          1.8,
         );
         // Hold until 4.5s, then fade out
-        tl.to('#moment-1', { opacity: 0, scale: 0.8, duration: 0.3, ease: 'power2.in' }, 4.2);
+        tl.to("#moment-1", { opacity: 0, scale: 0.8, duration: 0.3, ease: "power2.in" }, 4.2);
 
         // Moment 2: 4.6s - 8.6s
         // Gentle drift into place and settle
-        tl.fromTo('#moment-2',
-          { opacity: 0, y: '-=40', x: '+=10', scale: 0.8 },
-          { opacity: 1, y: 0, x: 0, scale: 1, duration: 1.2, ease: 'back.out(1.7)' },
-          4.6
+        tl.fromTo(
+          "#moment-2",
+          { opacity: 0, y: "-=40", x: "+=10", scale: 0.8 },
+          { opacity: 1, y: 0, x: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
+          4.6,
         );
         // Hold until 8.6s, then fade out
-        tl.to('#moment-2', { opacity: 0, scale: 0.8, duration: 0.3, ease: 'power2.in' }, 8.3);
+        tl.to("#moment-2", { opacity: 0, scale: 0.8, duration: 0.3, ease: "power2.in" }, 8.3);
 
         // Moment 3: 8.8s - 14s
         // Gentle drift into place and settle
-        tl.fromTo('#moment-3',
-          { opacity: 0, x: '-=40', y: '-=10', scale: 0.8 },
-          { opacity: 1, x: 0, y: 0, scale: 1, duration: 1.2, ease: 'back.out(1.7)' },
-          8.8
+        tl.fromTo(
+          "#moment-3",
+          { opacity: 0, x: "-=40", y: "-=10", scale: 0.8 },
+          { opacity: 1, x: 0, y: 0, scale: 1, duration: 1.2, ease: "back.out(1.7)" },
+          8.8,
         );
         // Hold until end (14s)
-        tl.to('#moment-3', { opacity: 0, duration: 0.5, ease: 'power2.in' }, 13.5);
+        tl.to("#moment-3", { opacity: 0, duration: 0.5, ease: "power2.in" }, 13.5);
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["graphics"] = tl;
       })();
     </script>
   </div>
-</template>
+</template>

package/dist/templates/warm-grain/compositions/intro.html

@@ -9,7 +9,7 @@
 
     <style>
       /* Import a rounded humanist sans-serif font */
-      @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap');
+      @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap");
 
       [data-composition-id="intro"] .container {
         width: 100%;
@@ -18,15 +18,15 @@
         justify-content: flex-start; /* Align to left for speaker card */
         align-items: center;
         padding-left: 5%;
-        font-family: 'Outfit', sans-serif;
+        font-family: "Outfit", sans-serif;
         background: transparent;
       }
 
       [data-composition-id="intro"] .title-card {
-        background-color: #3B5E3A; /* Forest Green for contrast */
+        background-color: #3b5e3a; /* Forest Green for contrast */
         padding: 40px 60px;
         border-radius: 30px;
-        box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
         text-align: left;
         opacity: 0;
         transform: translateX(-100%); /* Start off-screen left */
@@ -35,7 +35,7 @@
       [data-composition-id="intro"] .title {
         font-size: 100px;
         font-weight: 600;
-        color: #F5F0E0; /* Cream text on green card */
+        color: #f5f0e0; /* Cream text on green card */
         margin: 0;
         line-height: 1.1;
         letter-spacing: -2px;
@@ -44,32 +44,41 @@
       [data-composition-id="intro"] .subtitle {
         font-size: 50px;
         font-weight: 400;
-        color: #CC8832; /* Ochre accent */
+        color: #cc8832; /* Ochre accent */
         margin: 10px 0 0 0;
         line-height: 1.2;
       }
     </style>
 
     <script>
-      (function() {
+      (function () {
         const tl = gsap.timeline({ paused: true });
-        
+
         // Animation: Speaker card slides in from the left
-        tl.to('[data-composition-id="intro"] .title-card', {
-          opacity: 1,
-          x: 0,
-          duration: 0.8,
-          ease: 'power2.out'
-        }, 0.2);
+        tl.to(
+          '[data-composition-id="intro"] .title-card',
+          {
+            opacity: 1,
+            x: 0,
+            duration: 0.8,
+            ease: "power2.out",
+          },
+          0.2,
+        );
 
         // Exit: Slide off left at 1.8s (synced with 47% graphic)
-        tl.to('[data-composition-id="intro"] .title-card', {
-          x: '-120%',
-          opacity: 0,
-          duration: 0.6,
-          ease: 'power2.in'
-        }, 1.8);
+        tl.to(
+          '[data-composition-id="intro"] .title-card',
+          {
+            x: "-120%",
+            opacity: 0,
+            duration: 0.6,
+            ease: "power2.in",
+          },
+          1.8,
+        );
 
+        window.__timelines = window.__timelines || {};
         window.__timelines["intro"] = tl;
       })();
     </script>