hyperframes 0.1.1 → 0.1.2

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

@@ -31,8 +31,8 @@
 
     <style>
       [data-composition-id="graphics"] {
-        font-family: 'Helvetica', Arial, sans-serif;
-        color: #0A1E3D;
+        font-family: "Helvetica", Arial, sans-serif;
+        color: #0a1e3d;
         background: transparent;
         width: 1920px;
         height: 1080px;
@@ -56,9 +56,9 @@
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
-        background: #F2F2F2;
+        background: #f2f2f2;
         padding: 40px;
-        border-left: 10px solid #D4A017;
+        border-left: 10px solid #d4a017;
         box-shadow: 20px 20px 0px rgba(10, 30, 61, 0.1);
       }
 
@@ -81,7 +81,7 @@
       [data-composition-id="graphics"] .stat-value {
         font-size: 140px;
         font-weight: 900;
-        color: #D4A017;
+        color: #d4a017;
         line-height: 0.8;
         margin-bottom: 15px;
       }
@@ -89,7 +89,7 @@
       [data-composition-id="graphics"] .stat-label {
         font-size: 24px;
         font-weight: 300; /* Lighter weight */
-        color: #0A1E3D;
+        color: #0a1e3d;
         letter-spacing: 2px;
         text-transform: uppercase;
       }
@@ -98,16 +98,16 @@
       [data-composition-id="graphics"] .progress-container {
         width: 100%;
         height: 24px;
-        background: #E0E0E0;
+        background: #e0e0e0;
         margin-top: 30px;
-        border: 2px solid #0A1E3D;
+        border: 2px solid #0a1e3d;
         position: relative;
       }
 
       [data-composition-id="graphics"] .progress-bar {
         width: 0%;
         height: 100%;
-        background: #D4A017;
+        background: #d4a017;
       }
 
       /* Grid Blocks for Stat 3 */
@@ -120,23 +120,23 @@
       [data-composition-id="graphics"] .block {
         width: 80px;
         height: 80px;
-        border: 3px solid #0A1E3D;
+        border: 3px solid #0a1e3d;
       }
 
       [data-composition-id="graphics"] .block.gold {
-        background: #D4A017;
+        background: #d4a017;
       }
 
       [data-composition-id="graphics"] .block.navy {
-        background: #0A1E3D;
+        background: #0a1e3d;
       }
     </style>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
     <script>
-      (function() {
+      (function () {
         const tl = gsap.timeline({ paused: true });
-        
+
         // Timing Constants
         const S1_START = 1.86;
         const S1_END = 4.5;
@@ -144,55 +144,63 @@
         const S2_END = 8.6;
         const S3_START = 8.88;
         const S3_END = 14.2;
-        
+
         const SLIDE_DUR = 0.25; // 250ms
         const SHARP_EASE = "power2.out";
 
         // Stat 1 Animation
-        tl.fromTo('#stat1', 
-          { x: -200, opacity: 0 }, 
-          { x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE }, 
-          S1_START
+        tl.fromTo(
+          "#stat1",
+          { x: -200, opacity: 0 },
+          { x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
+          S1_START,
         );
-        tl.to('#stat1', 
-          { x: 200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" }, 
-          S1_END - SLIDE_DUR
+        tl.to(
+          "#stat1",
+          { x: 200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
+          S1_END - SLIDE_DUR,
         );
 
         // Stat 2 Animation
-        tl.fromTo('#stat2', 
-          { y: 200, opacity: 0 }, 
-          { y: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE }, 
-          S2_START
+        tl.fromTo(
+          "#stat2",
+          { y: 200, opacity: 0 },
+          { y: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
+          S2_START,
         );
         // Progress bar fill
-        tl.to('#stat2 .progress-bar', 
-          { width: '62%', duration: S2_END - S2_START - (SLIDE_DUR * 2), ease: "none" }, 
-          S2_START + SLIDE_DUR
+        tl.to(
+          "#stat2 .progress-bar",
+          { width: "62%", duration: S2_END - S2_START - SLIDE_DUR * 2, ease: "none" },
+          S2_START + SLIDE_DUR,
         );
-        tl.to('#stat2', 
-          { y: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" }, 
-          S2_END - SLIDE_DUR
+        tl.to(
+          "#stat2",
+          { y: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
+          S2_END - SLIDE_DUR,
         );
 
         // Stat 3 Animation
-        tl.fromTo('#stat3', 
-          { x: 200, opacity: 0 }, 
-          { x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE }, 
-          S3_START
+        tl.fromTo(
+          "#stat3",
+          { x: 200, opacity: 0 },
+          { x: 0, opacity: 1, duration: SLIDE_DUR, ease: SHARP_EASE },
+          S3_START,
         );
         // Stagger blocks
-        tl.from('#stat3 .block', 
-          { scale: 0, duration: 0.3, stagger: 0.1, ease: "back.out(1.7)" }, 
-          S3_START + SLIDE_DUR
+        tl.from(
+          "#stat3 .block",
+          { scale: 0, duration: 0.3, stagger: 0.1, ease: "back.out(1.7)" },
+          S3_START + SLIDE_DUR,
         );
-        tl.to('#stat3', 
-          { x: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" }, 
-          S3_END - SLIDE_DUR
+        tl.to(
+          "#stat3",
+          { x: -200, opacity: 0, duration: SLIDE_DUR, ease: "power2.in" },
+          S3_END - SLIDE_DUR,
         );
 
         window.__timelines["graphics"] = tl;
       })();
     </script>
   </div>
-</template>
+</template>

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

@@ -10,7 +10,7 @@
 
     <style>
       [data-composition-id="intro"] {
-        background-color: #F5F5F5; /* Off-white */
+        background-color: #f5f5f5; /* Off-white */
         width: 1920px;
         height: 1080px;
         display: flex;
@@ -36,7 +36,7 @@
         top: 50%;
         width: 0px;
         height: 12px;
-        background-color: #0A1E3D; /* Navy */
+        background-color: #0a1e3d; /* Navy */
         transform: translateY(-180px); /* Positioned above the text */
       }
 
@@ -48,7 +48,7 @@
       }
 
       [data-composition-id="intro"] .title {
-        color: #0A1E3D;
+        color: #0a1e3d;
         font-size: 180px;
         font-weight: 900; /* Black weight */
         line-height: 0.9;
@@ -59,7 +59,7 @@
       }
 
       [data-composition-id="intro"] .subtitle {
-        color: #0A1E3D;
+        color: #0a1e3d;
         font-size: 64px;
         font-weight: 300; /* Lighter weight for contrast */
         line-height: 1.2;
@@ -72,7 +72,7 @@
     </style>
 
     <script>
-      (function() {
+      (function () {
         const tl = gsap.timeline({ paused: true });
 
         // Mechanical timing: 200ms (0.2s)
@@ -80,32 +80,48 @@
         const STAGGER = 0.1;
 
         // 1. Animate the grid line first
-        tl.to('.grid-line', {
-          width: '1200px',
-          duration: 0.4,
-          ease: 'power4.out'
-        }, 0.2);
+        tl.to(
+          ".grid-line",
+          {
+            width: "1200px",
+            duration: 0.4,
+            ease: "power4.out",
+          },
+          0.2,
+        );
 
         // 2. Slide in the title
-        tl.to('.title', {
-          x: 0,
-          duration: MECHANICAL_DURATION,
-          ease: 'power2.inOut'
-        }, 0.5);
+        tl.to(
+          ".title",
+          {
+            x: 0,
+            duration: MECHANICAL_DURATION,
+            ease: "power2.inOut",
+          },
+          0.5,
+        );
 
         // 3. Slide in the subtitle with a slight stagger
-        tl.to('.subtitle', {
-          x: 0,
-          duration: MECHANICAL_DURATION,
-          ease: 'power2.inOut'
-        }, 0.5 + STAGGER);
+        tl.to(
+          ".subtitle",
+          {
+            x: 0,
+            duration: MECHANICAL_DURATION,
+            ease: "power2.inOut",
+          },
+          0.5 + STAGGER,
+        );
 
         // 4. Subtle ambient motion (slow drift) to keep it alive
-        tl.to('.text-wrapper', {
-          x: 30,
-          duration: 1.16, // Adjusted to fit 1.86s total
-          ease: 'none'
-        }, 0.7);
+        tl.to(
+          ".text-wrapper",
+          {
+            x: 30,
+            duration: 1.16, // Adjusted to fit 1.86s total
+            ease: "none",
+          },
+          0.7,
+        );
 
         window.__timelines["intro"] = tl;
       })();