hyperframes 0.1.1 → 0.1.4

package/dist/templates/vignelli/compositions/overlays.html

@@ -33,7 +33,7 @@
     <div class="overlay-item editing-skills-stat" id="stat-3-4">
       <div class="text-block">
         <span class="highlight">3 out of 4</span>
-        <br>lack editing skills
+        <br />lack editing skills
       </div>
       <div class="side-bar"></div>
     </div>
@@ -51,7 +51,7 @@
         position: relative;
         width: 1080px;
         height: 1920px;
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
         color: #000000;
         overflow: hidden;
         pointer-events: none;
@@ -87,13 +87,13 @@
         left: 0;
         width: 540px; /* 3 columns */
         height: 240px;
-        background: #FFFFFF;
+        background: #ffffff;
         flex-direction: row;
         align-items: stretch;
       }
       [data-composition-id="overlays"] #stat-47 .red-bar {
         width: 20px;
-        background: #CC0000;
+        background: #cc0000;
       }
       [data-composition-id="overlays"] #stat-47 .stat-content {
         padding: 40px;
@@ -128,7 +128,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background: #1A1A1A;
+        background: #1a1a1a;
       }
       [data-composition-id="overlays"] #stat-62 .full-content {
         position: relative;
@@ -142,14 +142,14 @@
       [data-composition-id="overlays"] #stat-62 .large-number {
         font-size: 400px;
         font-weight: 900;
-        color: #FFFFFF;
+        color: #ffffff;
         line-height: 0.8;
         letter-spacing: -10px;
       }
       [data-composition-id="overlays"] #stat-62 .large-label {
         font-size: 80px;
         font-weight: 700;
-        color: #FFFFFF;
+        color: #ffffff;
         text-transform: uppercase;
         margin-top: 20px;
         max-width: 600px;
@@ -160,7 +160,7 @@
         right: 0;
         width: 180px; /* 1 column */
         height: 100%;
-        background: #CC0000;
+        background: #cc0000;
       }
 
       /* 3. 3 out of 4 Stat Styles */
@@ -168,7 +168,7 @@
         top: 400px;
         right: 0;
         width: 360px; /* 2 columns */
-        background: #FFFFFF;
+        background: #ffffff;
         padding: 40px;
         flex-direction: row-reverse;
       }
@@ -179,7 +179,7 @@
         text-align: right;
       }
       [data-composition-id="overlays"] #stat-3-4 .highlight {
-        color: #CC0000;
+        color: #cc0000;
         font-size: 64px;
         font-weight: 900;
       }
@@ -216,7 +216,7 @@
       [data-composition-id="overlays"] #branding .logo-underline {
         width: 100%;
         height: 8px;
-        background: #CC0000;
+        background: #cc0000;
         margin-top: 10px;
         transform-origin: left;
       }
@@ -224,47 +224,99 @@
 
     <script>
       const tl = gsap.timeline({ paused: true });
-      const TRANSCRIPT = [{'text': 'We', 'start': 0.14, 'end': 0.239}, {'text': 'asked', 'start': 0.28, 'end': 0.459}, {'text': 'what', 'start': 0.5, 'end': 0.619}, {'text': 'you', 'start': 0.659, 'end': 0.779}, {'text': 'needed.', 'start': 0.8, 'end': 1.179}, {'text': 'Forty-seven', 'start': 1.199, 'end': 1.619}, {'text': 'percent', 'start': 1.699, 'end': 1.96}, {'text': 'of', 'start': 1.979, 'end': 2.059}, {'text': 'you', 'start': 2.099, 'end': 2.299}, {'text': 'said', 'start': 2.319, 'end': 2.499}, {'text': 'motion', 'start': 2.559, 'end': 2.839}, {'text': 'graphics,', 'start': 2.899, 'end': 3.759}, {'text': 'sixty-two', 'start': 3.799, 'end': 4.159}, {'text': 'percent', 'start': 4.239, 'end': 4.559}, {'text': 'said', 'start': 4.639, 'end': 4.799}, {'text': 'static', 'start': 4.859, 'end': 5.199}, {'text': 'content', 'start': 5.239, 'end': 5.639}, {'text': 'was', 'start': 5.679, 'end': 5.779}, {'text': 'costing', 'start': 5.859, 'end': 6.219}, {'text': 'you', 'start': 6.259, 'end': 6.339}, {'text': 'attention,', 'start': 6.379, 'end': 7.299}, {'text': 'and', 'start': 7.319, 'end': 7.439}, {'text': 'three', 'start': 7.48, 'end': 7.599}, {'text': 'out', 'start': 7.679, 'end': 7.779}, {'text': 'of', 'start': 7.799, 'end': 7.879}, {'text': 'four', 'start': 7.94, 'end': 8.139}, {'text': 'said', 'start': 8.279, 'end': 8.46}, {'text': 'you', 'start': 8.519, 'end': 8.6}, {'text': 'know', 'start': 8.619, 'end': 8.739}, {'text': 'the', 'start': 8.8, 'end': 8.88}, {'text': 'look', 'start': 8.92, 'end': 9.079}, {'text': 'you', 'start': 9.119, 'end': 9.259}, {'text': 'want', 'start': 9.279, 'end': 9.619}, {'text': 'but', 'start': 9.779, 'end': 9.88}, {'text': "don't", 'start': 9.92, 'end': 10.1}, {'text': 'have', 'start': 10.159, 'end': 10.3}, {'text': 'the', 'start': 10.3, 'end': 10.42}, {'text': 'editing', 'start': 10.5, 'end': 10.779}, {'text': 'skills', 'start': 10.86, 'end': 11.139}, {'text': 'to', 'start': 11.159, 'end': 11.239}, {'text': 'get', 'start': 11.279, 'end': 11.439}, {'text': 'there.', 'start': 11.46, 'end': 12.239}, {'text': 'So', 'start': 12.3, 'end': 12.38}, {'text': 'we', 'start': 12.399, 'end': 12.519}, {'text': 'built', 'start': 12.539, 'end': 12.759}, {'text': 'Hyperframes', 'start': 12.84, 'end': 13.119}];
+      const TRANSCRIPT = [
+        { text: "We", start: 0.14, end: 0.239 },
+        { text: "asked", start: 0.28, end: 0.459 },
+        { text: "what", start: 0.5, end: 0.619 },
+        { text: "you", start: 0.659, end: 0.779 },
+        { text: "needed.", start: 0.8, end: 1.179 },
+        { text: "Forty-seven", start: 1.199, end: 1.619 },
+        { text: "percent", start: 1.699, end: 1.96 },
+        { text: "of", start: 1.979, end: 2.059 },
+        { text: "you", start: 2.099, end: 2.299 },
+        { text: "said", start: 2.319, end: 2.499 },
+        { text: "motion", start: 2.559, end: 2.839 },
+        { text: "graphics,", start: 2.899, end: 3.759 },
+        { text: "sixty-two", start: 3.799, end: 4.159 },
+        { text: "percent", start: 4.239, end: 4.559 },
+        { text: "said", start: 4.639, end: 4.799 },
+        { text: "static", start: 4.859, end: 5.199 },
+        { text: "content", start: 5.239, end: 5.639 },
+        { text: "was", start: 5.679, end: 5.779 },
+        { text: "costing", start: 5.859, end: 6.219 },
+        { text: "you", start: 6.259, end: 6.339 },
+        { text: "attention,", start: 6.379, end: 7.299 },
+        { text: "and", start: 7.319, end: 7.439 },
+        { text: "three", start: 7.48, end: 7.599 },
+        { text: "out", start: 7.679, end: 7.779 },
+        { text: "of", start: 7.799, end: 7.879 },
+        { text: "four", start: 7.94, end: 8.139 },
+        { text: "said", start: 8.279, end: 8.46 },
+        { text: "you", start: 8.519, end: 8.6 },
+        { text: "know", start: 8.619, end: 8.739 },
+        { text: "the", start: 8.8, end: 8.88 },
+        { text: "look", start: 8.92, end: 9.079 },
+        { text: "you", start: 9.119, end: 9.259 },
+        { text: "want", start: 9.279, end: 9.619 },
+        { text: "but", start: 9.779, end: 9.88 },
+        { text: "don't", start: 9.92, end: 10.1 },
+        { text: "have", start: 10.159, end: 10.3 },
+        { text: "the", start: 10.3, end: 10.42 },
+        { text: "editing", start: 10.5, end: 10.779 },
+        { text: "skills", start: 10.86, end: 11.139 },
+        { text: "to", start: 11.159, end: 11.239 },
+        { text: "get", start: 11.279, end: 11.439 },
+        { text: "there.", start: 11.46, end: 12.239 },
+        { text: "So", start: 12.3, end: 12.38 },
+        { text: "we", start: 12.399, end: 12.519 },
+        { text: "built", start: 12.539, end: 12.759 },
+        { text: "Hyperframes", start: 12.84, end: 13.119 },
+      ];
 
       // Requirement 1: "47% Motion Graphics" (Start: 1.199, End: 3.759)
       // Positioned in bottom half, columns 1-3.
-      tl.fromTo("#stat-47", 
-        { x: -540, opacity: 1 }, 
-        { x: 0, duration: 0.8, ease: "expo.out" }, 
-        1.199
-      );
-      tl.to("#stat-47", 
-        { x: -540, duration: 0.6, ease: "expo.in" }, 
-        3.759 - 0.6
+      tl.fromTo(
+        "#stat-47",
+        { x: -540, opacity: 1 },
+        { x: 0, duration: 0.8, ease: "expo.out" },
+        1.199,
       );
+      tl.to("#stat-47", { x: -540, duration: 0.6, ease: "expo.in" }, 3.759 - 0.6);
 
       // Requirement 2: "62% Static Content" (Start: 3.799, End: 7.299)
       // Full canvas moment. Large bold typography across columns.
       tl.set("#stat-62", { opacity: 1 }, 3.799);
       tl.from("#stat-62 .bg-charcoal", { x: "100%", duration: 0.8, ease: "expo.out" }, 3.799);
       tl.from("#stat-62 .red-accent", { x: "100%", duration: 0.8, ease: "expo.out" }, 3.899);
-      tl.from("#stat-62 .large-number", { y: 100, opacity: 0, duration: 1, ease: "expo.out" }, 4.099);
+      tl.from(
+        "#stat-62 .large-number",
+        { y: 100, opacity: 0, duration: 1, ease: "expo.out" },
+        4.099,
+      );
       tl.from("#stat-62 .large-label", { y: 50, opacity: 0, duration: 1, ease: "expo.out" }, 4.299);
-      
+
       tl.to("#stat-62", { x: "-100%", duration: 0.8, ease: "expo.in" }, 7.299 - 0.8);
 
       // Requirement 3: "3 out of 4 lack editing skills" (Start: 7.319, End: 12.239)
       // Positioned in columns 5-6 (right side) to avoid face (x: 300-776)
-      tl.fromTo("#stat-3-4", 
-        { x: 360, opacity: 1 }, 
-        { x: 0, duration: 0.8, ease: "expo.out" }, 
-        7.319
-      );
-      tl.to("#stat-3-4", 
-        { x: 360, duration: 0.6, ease: "expo.in" }, 
-        12.239 - 0.6
+      tl.fromTo(
+        "#stat-3-4",
+        { x: 360, opacity: 1 },
+        { x: 0, duration: 0.8, ease: "expo.out" },
+        7.319,
       );
+      tl.to("#stat-3-4", { x: 360, duration: 0.6, ease: "expo.in" }, 12.239 - 0.6);
 
       // Requirement 4: "Hyperframes" (Start: 12.84, End: 13.84)
       tl.set("#branding", { opacity: 1 }, 12.84);
-      tl.from("#branding .logo-text", { y: 20, opacity: 0, duration: 0.6, ease: "expo.out" }, 12.84);
+      tl.from(
+        "#branding .logo-text",
+        { y: 20, opacity: 0, duration: 0.6, ease: "expo.out" },
+        12.84,
+      );
       tl.from("#branding .logo-underline", { scaleX: 0, duration: 0.8, ease: "expo.out" }, 13.04);
 
+      window.__timelines = window.__timelines || {};
       window.__timelines["overlays"] = tl;
     </script>
   </div>

package/dist/templates/vignelli/index.html

@@ -1,171 +1,190 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Massimo Vignelli Video</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <style>
-        body,
-        html {
-            margin: 0;
-            padding: 0;
-            background: #FFFFFF;
-            overflow: hidden;
-            width: 1080px;
-            height: 1920px;
-            font-family: 'Helvetica', Arial, sans-serif;
-        }
-
-        /* 6-Column Grid System */
-        .grid-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 1080px;
-            height: 1920px;
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            pointer-events: none;
-            z-index: 1000;
-            opacity: 0; /* Keep grid invisible but present for layout references */
-        }
-
-        .grid-column {
-            border-right: 1px solid rgba(204, 0, 0, 0.2); /* Vignelli Red accent */
-        }
-
-        #main-composition {
-            position: relative;
-            width: 1080px;
-            height: 1920px;
-            background: #FFFFFF;
-            overflow: hidden;
-        }
-
-        /* Layer Hosts */
-        #a-roll-wrapper {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 10;
-            overflow: hidden;
-        }
-
-        #a-roll,
-        #a-roll-wrapper img.__render_frame__,
-        #a-roll-wrapper img.__preview_render_frame__ {
-            position: absolute;
-            inset: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
-        #overlays-comp,
-        #captions-comp {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 1080px;
-            height: 1920px;
-            pointer-events: none;
-        }
-
-        #overlays-comp {
-            z-index: 20;
-        }
-
-        #captions-comp {
-            z-index: 30;
-        }
-
-        /* Curtain Transition Layer */
-        .curtain {
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: #1A1A1A;
-            z-index: 25;
-            pointer-events: none;
-        }
-
-        .curtain.red {
-            background: #CC0000;
-            z-index: 26;
-        }
-
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+        background: #ffffff;
+        overflow: hidden;
+        width: 1080px;
+        height: 1920px;
+        font-family: "Helvetica", Arial, sans-serif;
+      }
+
+      /* 6-Column Grid System */
+      .grid-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1080px;
+        height: 1920px;
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        pointer-events: none;
+        z-index: 1000;
+        opacity: 0; /* Keep grid invisible but present for layout references */
+      }
+
+      .grid-column {
+        border-right: 1px solid rgba(204, 0, 0, 0.2); /* Vignelli Red accent */
+      }
+
+      #main-composition {
+        position: relative;
+        width: 1080px;
+        height: 1920px;
+        background: #ffffff;
+        overflow: hidden;
+      }
+
+      /* Layer Hosts */
+      #a-roll-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10;
+        overflow: hidden;
+      }
+
+      #a-roll,
+      #a-roll-wrapper img.__render_frame__,
+      #a-roll-wrapper img.__preview_render_frame__ {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      #overlays-comp,
+      #captions-comp {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1080px;
+        height: 1920px;
+        pointer-events: none;
+      }
+
+      #overlays-comp {
+        z-index: 20;
+      }
+
+      #captions-comp {
+        z-index: 30;
+      }
+
+      /* Curtain Transition Layer */
+      .curtain {
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: #1a1a1a;
+        z-index: 25;
+        pointer-events: none;
+      }
+
+      .curtain.red {
+        background: #cc0000;
+        z-index: 26;
+      }
     </style>
-</head>
-<body>
-    <div id="main-composition" data-composition-id="main-comp" data-width="1080" data-height="1920" data-duration="13.88">
-        
-        <!-- A-Roll -->
-        <div id="a-roll-wrapper">
-            <video id="a-roll" 
-                   src="__VIDEO_SRC__"
-                   data-start="0" 
-                   data-duration="13.88" 
-                   data-track-index="0">
-            </video>
-        </div>
-
-        <!-- Transitions -->
-        <div id="curtain-black" class="curtain"></div>
-        <div id="curtain-red" class="curtain red"></div>
-
-        <!-- Overlays Composition -->
-        <div id="overlays-comp" 
-             data-composition-id="overlays" 
-             data-composition-src="compositions/overlays.html" 
-             data-start="0" 
-             data-duration="13.88" 
-             data-track-index="2">
-        </div>
-
-        <!-- Captions Composition -->
-        <div id="captions-comp" 
-             data-composition-id="captions" 
-             data-composition-src="compositions/captions.html" 
-             data-start="0" 
-             data-duration="13.88" 
-             data-track-index="3">
-        </div>
-
-        <!-- Grid Visualization -->
-        <div class="grid-container">
-            <div class="grid-column"></div>
-            <div class="grid-column"></div>
-            <div class="grid-column"></div>
-            <div class="grid-column"></div>
-            <div class="grid-column"></div>
-            <div class="grid-column"></div>
-        </div>
-
-        <script>
-            const tl = gsap.timeline({ paused: true });
-
-            // Transition: Curtain Pull logic
-            // A-roll leaves the screen at least once. 
-            // Timing: Let's do a curtain pull at 3.7s (transitioning to the 62% stat) 
-            // and return at 7.3s (end of attention stat).
-
-            // Curtain Out (A-roll hidden)
-            tl.to("#curtain-black", { left: "0%", duration: 0.2, ease: "power2.inOut" }, 3.5);
-            tl.to("#a-roll-wrapper", { opacity: 0, duration: 0 }, 3.7);
-            tl.to("#curtain-black", { left: "100%", duration: 0.4, ease: "power2.inOut" }, 3.7);
-
-            // Curtain In (A-roll return)
-            tl.set("#curtain-red", { left: "-100%" }, 7.1);
-            tl.to("#curtain-red", { left: "0%", duration: 0.2, ease: "power2.inOut" }, 7.1);
-            tl.to("#a-roll-wrapper", { opacity: 1, duration: 0 }, 7.3);
-            tl.to("#curtain-red", { left: "100%", duration: 0.4, ease: "power2.inOut" }, 7.3);
-
-            window.__timelines["main-comp"] = tl;
-        </script>
+  </head>
+  <body>
+    <div
+      id="main-composition"
+      data-composition-id="main-comp"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="__VIDEO_DURATION__"
+    >
+      <!-- A-Roll -->
+      <div id="a-roll-wrapper">
+        <video
+          id="a-roll"
+          src="__VIDEO_SRC__"
+          muted
+          playsinline
+          data-start="0"
+          data-duration="__VIDEO_DURATION__"
+          data-track-index="0"
+        ></video>
+      </div>
+      <audio
+        id="a-roll-audio"
+        src="__VIDEO_SRC__"
+        data-start="0"
+        data-duration="__VIDEO_DURATION__"
+        data-track-index="5"
+        data-volume="1"
+      ></audio>
+
+      <!-- Transitions -->
+      <div id="curtain-black" class="curtain"></div>
+      <div id="curtain-red" class="curtain red"></div>
+
+      <!-- Overlays Composition -->
+      <div
+        id="overlays-comp"
+        data-composition-id="overlays"
+        data-composition-src="compositions/overlays.html"
+        data-start="0"
+        data-duration="__VIDEO_DURATION__"
+        data-track-index="2"
+      ></div>
+
+      <!-- Captions Composition -->
+      <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"
+      ></div>
+
+      <!-- Grid Visualization -->
+      <div class="grid-container">
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+        <div class="grid-column"></div>
+      </div>
+
+      <script>
+        const tl = gsap.timeline({ paused: true });
+
+        // Transition: Curtain Pull logic
+        // A-roll leaves the screen at least once.
+        // Timing: Let's do a curtain pull at 3.7s (transitioning to the 62% stat)
+        // and return at 7.3s (end of attention stat).
+
+        // Curtain Out (A-roll hidden)
+        tl.to("#curtain-black", { left: "0%", duration: 0.2, ease: "power2.inOut" }, 3.5);
+        tl.to("#a-roll-wrapper", { opacity: 0, duration: 0 }, 3.7);
+        tl.to("#curtain-black", { left: "100%", duration: 0.4, ease: "power2.inOut" }, 3.7);
+
+        // Curtain In (A-roll return)
+        tl.set("#curtain-red", { left: "-100%" }, 7.1);
+        tl.to("#curtain-red", { left: "0%", duration: 0.2, ease: "power2.inOut" }, 7.1);
+        tl.to("#a-roll-wrapper", { opacity: 1, duration: 0 }, 7.3);
+        tl.to("#curtain-red", { left: "100%", duration: 0.4, ease: "power2.inOut" }, 7.3);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["main-comp"] = tl;
+      </script>
     </div>
-</body>
+  </body>
 </html>