hyperframes 0.1.15 → 0.2.0-alpha.1

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

@@ -1,207 +0,0 @@
-<template id="graphics-template">
-  <div data-composition-id="graphics" data-width="1920" data-height="1080" data-duration="15">
-    <div class="grid-container">
-      <!-- Stat 1: 47% -->
-      <div id="stat1" class="stat-group">
-        <div class="stat-value">47%</div>
-        <div class="stat-label">NEED MOTION GRAPHICS</div>
-      </div>
-
-      <!-- Stat 2: 62% -->
-      <div id="stat2" class="stat-group">
-        <div class="stat-value">62%</div>
-        <div class="stat-label">LOSING ATTENTION</div>
-        <div class="progress-container">
-          <div class="progress-bar"></div>
-        </div>
-      </div>
-
-      <!-- Stat 3: 3 OF 4 -->
-      <div id="stat3" class="stat-group">
-        <div class="stat-value">3 OF 4</div>
-        <div class="stat-label">LACK EDITING SKILLS</div>
-        <div class="grid-blocks">
-          <div class="block gold"></div>
-          <div class="block gold"></div>
-          <div class="block gold"></div>
-          <div class="block navy"></div>
-        </div>
-      </div>
-    </div>
-
-    <style>
-      [data-composition-id="graphics"] {
-        font-family: "Helvetica", Arial, sans-serif;
-        color: #0a1e3d;
-        background: transparent;
-        width: 1920px;
-        height: 1080px;
-        position: relative;
-        overflow: hidden;
-      }
-
-      [data-composition-id="graphics"] .grid-container {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        grid-template-rows: repeat(12, 1fr);
-        width: 100%;
-        height: 100%;
-        padding: 80px;
-        gap: 20px;
-      }
-
-      [data-composition-id="graphics"] .stat-group {
-        opacity: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-items: flex-start;
-        background: #f2f2f2;
-        padding: 40px;
-        border-left: 10px solid #d4a017;
-        box-shadow: 20px 20px 0px rgba(10, 30, 61, 0.1);
-      }
-
-      /* Positioning Stats on Grid - Adjusted for A-roll structure */
-      [data-composition-id="graphics"] #stat1 {
-        grid-column: 2 / 6;
-        grid-row: 3 / 7;
-      }
-
-      [data-composition-id="graphics"] #stat2 {
-        grid-column: 2 / 6;
-        grid-row: 3 / 7;
-      }
-
-      [data-composition-id="graphics"] #stat3 {
-        grid-column: 7 / 12;
-        grid-row: 3 / 7;
-      }
-
-      [data-composition-id="graphics"] .stat-value {
-        font-size: 140px;
-        font-weight: 900;
-        color: #d4a017;
-        line-height: 0.8;
-        margin-bottom: 15px;
-      }
-
-      [data-composition-id="graphics"] .stat-label {
-        font-size: 24px;
-        font-weight: 300; /* Lighter weight */
-        color: #0a1e3d;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-      }
-
-      /* Progress Bar for Stat 2 */
-      [data-composition-id="graphics"] .progress-container {
-        width: 100%;
-        height: 24px;
-        background: #e0e0e0;
-        margin-top: 30px;
-        border: 2px solid #0a1e3d;
-        position: relative;
-      }
-
-      [data-composition-id="graphics"] .progress-bar {
-        width: 0%;
-        height: 100%;
-        background: #d4a017;
-      }
-
-      /* Grid Blocks for Stat 3 */
-      [data-composition-id="graphics"] .grid-blocks {
-        display: flex;
-        gap: 20px;
-        margin-top: 30px;
-      }
-
-      [data-composition-id="graphics"] .block {
-        width: 80px;
-        height: 80px;
-        border: 3px solid #0a1e3d;
-      }
-
-      [data-composition-id="graphics"] .block.gold {
-        background: #d4a017;
-      }
-
-      [data-composition-id="graphics"] .block.navy {
-        background: #0a1e3d;
-      }
-    </style>
-
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script>
-      (function () {
-        const tl = gsap.timeline({ paused: true });
-
-        // Timing Constants
-        const S1_START = 1.86;
-        const S1_END = 4.5;
-        const S2_START = 4.68;
-        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.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,
-        );
-        // 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",
-          { 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,
-        );
-        // Stagger blocks
-        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,
-        );
-
-        window.__timelines = window.__timelines || {};
-        window.__timelines["graphics"] = tl;
-      })();
-    </script>
-  </div>
-</template>

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

@@ -1,131 +0,0 @@
-<template id="intro-template">
-  <div data-composition-id="intro" data-width="1920" data-height="1080" data-duration="1.86">
-    <div class="container">
-      <div class="grid-line"></div>
-      <div class="text-wrapper">
-        <h1 class="title">HYPERFRAMES</h1>
-        <h2 class="subtitle">THE SURVEY FINDINGS</h2>
-      </div>
-    </div>
-
-    <style>
-      [data-composition-id="intro"] {
-        background-color: #f5f5f5; /* Off-white */
-        width: 1920px;
-        height: 1080px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-        overflow: hidden;
-      }
-
-      [data-composition-id="intro"] .container {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding-left: 160px; /* Swiss grid alignment */
-      }
-
-      [data-composition-id="intro"] .grid-line {
-        position: absolute;
-        left: 160px;
-        top: 50%;
-        width: 0px;
-        height: 12px;
-        background-color: #0a1e3d; /* Navy */
-        transform: translateY(-180px); /* Positioned above the text */
-      }
-
-      [data-composition-id="intro"] .text-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 0;
-        overflow: hidden;
-      }
-
-      [data-composition-id="intro"] .title {
-        color: #0a1e3d;
-        font-size: 180px;
-        font-weight: 900; /* Black weight */
-        line-height: 0.9;
-        margin: 0;
-        letter-spacing: -0.04em;
-        text-transform: uppercase;
-        transform: translateX(-100%); /* Start off-screen left */
-      }
-
-      [data-composition-id="intro"] .subtitle {
-        color: #0a1e3d;
-        font-size: 64px;
-        font-weight: 300; /* Lighter weight for contrast */
-        line-height: 1.2;
-        margin: 0;
-        letter-spacing: 0.1em;
-        text-transform: uppercase;
-        transform: translateX(-100%); /* Start off-screen left */
-        margin-top: 20px;
-      }
-    </style>
-
-    <script>
-      (function () {
-        const tl = gsap.timeline({ paused: true });
-
-        // Mechanical timing: 200ms (0.2s)
-        const MECHANICAL_DURATION = 0.2;
-        const STAGGER = 0.1;
-
-        // 1. Animate the grid line first
-        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,
-        );
-
-        // 3. Slide in the subtitle with a slight 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,
-        );
-
-        window.__timelines = window.__timelines || {};
-        window.__timelines["intro"] = tl;
-      })();
-    </script>
-  </div>
-</template>

package/dist/templates/swiss-grid/index.html

@@ -1,234 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Swiss Grid - Hyperframes</title>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      body,
-      html {
-        margin: 0;
-        padding: 0;
-        width: 1920px;
-        height: 1080px;
-        background-color: #f2f2f2;
-        overflow: hidden;
-        font-family: "Helvetica", Arial, sans-serif;
-      }
-
-      #master-root {
-        width: 1920px;
-        height: 1080px;
-        position: relative;
-      }
-
-      .background-grid {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 0;
-      }
-
-      /* A-roll styling */
-      #short_mag_cut_frame {
-        position: absolute;
-        border-radius: 8px; /* Required */
-        z-index: 1;
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-        overflow: hidden;
-        background: #000;
-      }
-
-      #short_mag_cut,
-      #short_mag_cut_frame > img.__render_frame__,
-      #short_mag_cut_frame > img.__preview_render_frame__ {
-        position: absolute;
-        inset: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-        display: block;
-      }
-
-      /* Overlay layers */
-      .overlay-layer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-      }
-
-      #intro-comp {
-        z-index: 2;
-      }
-      #graphics-comp {
-        z-index: 3;
-      }
-      #captions-comp {
-        z-index: 4;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="master-root"
-      data-composition-id="master"
-      data-width="1920"
-      data-height="1080"
-      data-start="0"
-      data-duration="__VIDEO_DURATION__"
-    >
-      <!-- Background Grid -->
-      <img
-        id="bg-grid"
-        class="background-grid"
-        src="assets/swiss-grid.svg"
-        alt="Grid"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-track-index="0"
-      />
-
-      <!-- A-roll Video -->
-      <div id="short_mag_cut_frame">
-        <video
-          id="short_mag_cut"
-          src="__VIDEO_SRC__"
-          muted
-          playsinline
-          data-start="0"
-          data-duration="__VIDEO_DURATION__"
-          data-track-index="1"
-        ></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>
-
-      <!-- Intro Sub-composition -->
-      <div
-        id="intro-comp"
-        class="overlay-layer"
-        data-composition-id="intro"
-        data-composition-src="compositions/intro.html"
-        data-start="0"
-        data-duration="1.86"
-        data-track-index="2"
-      ></div>
-
-      <!-- Graphics Sub-composition -->
-      <div
-        id="graphics-comp"
-        class="overlay-layer"
-        data-composition-id="graphics"
-        data-composition-src="compositions/graphics.html"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-track-index="3"
-      ></div>
-
-      <!-- Captions Sub-composition -->
-      <div
-        id="captions-comp"
-        class="overlay-layer"
-        data-composition-id="captions"
-        data-composition-src="compositions/captions.html"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-track-index="4"
-      ></div>
-
-      <!-- Sound Effects (src set dynamically; omitted to avoid 404s) -->
-      <audio id="sfx-intro" data-start="0" data-track-index="5" data-duration="1"></audio>
-      <audio id="sfx-stat1" data-start="1.86" data-track-index="5" data-duration="1"></audio>
-      <audio id="sfx-stat2" data-start="4.68" data-track-index="5" data-duration="1"></audio>
-      <audio id="sfx-stat3" data-start="8.88" data-track-index="5" data-duration="1"></audio>
-
-      <script>
-        window.__timelines = window.__timelines || {};
-
-        const masterTL = gsap.timeline({ paused: true });
-        const v = document.getElementById("short_mag_cut_frame");
-
-        // --- A-ROLL MOVEMENT (Structured Swiss Layout) ---
-
-        // 1. Entrance (0-1.86s): Slide in from left, settle centered for Intro
-        masterTL.fromTo(
-          v,
-          { x: -1000, y: 120, width: 960, height: 840 },
-          { x: 480, y: 120, width: 960, height: 840, duration: 0.8, ease: "power2.out" },
-          0,
-        );
-
-        // 2. Stat 1 (1.86s - 4.68s): Move to right side (Graphic is on left)
-        masterTL.to(
-          v,
-          {
-            x: 1080,
-            y: 120,
-            width: 720,
-            height: 720,
-            duration: 0.25,
-            ease: "expo.out",
-          },
-          1.86,
-        );
-
-        // 3. Stat 2 (4.68s - 8.88s): Stay right, zoom in slightly
-        masterTL.to(
-          v,
-          {
-            x: 1080,
-            y: 60,
-            width: 780,
-            height: 780,
-            duration: 0.25,
-            ease: "expo.out",
-          },
-          4.68,
-        );
-
-        // 4. Stat 3 (8.88s - 14.2s): Move to left side (Graphic is on right)
-        masterTL.to(
-          v,
-          {
-            x: 120,
-            y: 120,
-            width: 720,
-            height: 720,
-            duration: 0.25,
-            ease: "expo.out",
-          },
-          8.88,
-        );
-
-        // 5. Conclusion (14.2s - 16.04s): Center large
-        masterTL.to(
-          v,
-          {
-            x: 240,
-            y: 60,
-            width: 1440,
-            height: 810,
-            duration: 0.5,
-            ease: "expo.out",
-          },
-          14.2,
-        );
-
-        window.__timelines["master"] = masterTL;
-      </script>
-    </div>
-  </body>
-</html>