hyperframes 0.1.15 → 0.2.0-alpha.1

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

@@ -1,147 +0,0 @@
-<template id="captions-template">
-  <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>
-      </div>
-    </div>
-
-    <style>
-      [data-composition-id="captions"] .captions-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: flex-end;
-        padding-bottom: 230px; /* Position at y: 850 (1080 - 230 = 850) */
-        pointer-events: none;
-      }
-
-      [data-composition-id="captions"] .caption-box {
-        background-color: #7a6248;
-        padding: 12px 32px;
-        border-radius: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        min-width: 100px;
-        max-width: 80%;
-        opacity: 0;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-      }
-
-      [data-composition-id="captions"] .caption-text {
-        color: #f5f0e0;
-        font-family: "Outfit", sans-serif;
-        font-size: 48px;
-        font-weight: 700;
-        text-align: center;
-        line-height: 1.2;
-        white-space: nowrap;
-      }
-    </style>
-
-    <script>
-      (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 },
-        ];
-
-        // 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,
-          });
-        }
-
-        const tl = gsap.timeline({ paused: true });
-        const box = document.querySelector('[data-composition-id="captions"] #caption-box');
-        const textEl = document.querySelector('[data-composition-id="captions"] #caption-text');
-
-        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,
-          );
-
-          // Fade out at the end of the line
-          tl.to(
-            box,
-            {
-              opacity: 0,
-              duration: 0.1,
-              ease: "power2.in",
-            },
-            line.end,
-          );
-        });
-
-        window.__timelines = window.__timelines || {};
-        window.__timelines["captions"] = tl;
-      })();
-    </script>
-  </div>
-</template>

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

@@ -1,164 +0,0 @@
-<template id="graphics-template">
-  <div data-composition-id="graphics" data-width="1920" data-height="1080" data-duration="14">
-    <!-- Moment 1: 47% Stat (1.8s - 4.5s) -->
-    <div id="moment-1" class="moment circle-stat">
-      <div class="stat-content">
-        <div class="stat-text">47%</div>
-        <div class="stat-desc">Need Motion Graphics</div>
-      </div>
-    </div>
-
-    <!-- Moment 2: 62% Stat (4.6s - 8.6s) -->
-    <div id="moment-2" class="moment pill-stat">
-      <div class="stat-text">62%</div>
-    </div>
-
-    <!-- Moment 3: Editing Skills (8.8s - 14s) -->
-    <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"
-          />
-        </svg>
-      </div>
-      <div class="stat-text">Editing Skills</div>
-    </div>
-
-    <style>
-      [data-composition-id="graphics"] {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        font-family: "Outfit", sans-serif;
-        color: white;
-        overflow: hidden;
-      }
-
-      [data-composition-id="graphics"] .moment {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-        /* We'll use GSAP to handle the centering and drift */
-      }
-
-      /* Moment 1: Forest Green Circle */
-      [data-composition-id="graphics"] #moment-1 {
-        width: 500px;
-        height: 500px;
-        background-color: #3b5e3a;
-        border-radius: 50%;
-        left: 1400px;
-        top: 540px;
-        transform: translate(-50%, -50%);
-      }
-
-      [data-composition-id="graphics"] .stat-content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-      }
-
-      [data-composition-id="graphics"] .stat-desc {
-        font-size: 36px;
-        font-weight: 400;
-        margin-top: 10px;
-        max-width: 300px;
-        line-height: 1.2;
-      }
-
-      /* Moment 2: Ochre Pill */
-      [data-composition-id="graphics"] #moment-2 {
-        width: 500px;
-        height: 220px;
-        background-color: #cc8832;
-        border-radius: 110px;
-        left: 960px;
-        top: 200px;
-        transform: translate(-50%, -50%);
-      }
-
-      /* Moment 3: Terracotta Rounded Rect */
-      [data-composition-id="graphics"] #moment-3 {
-        width: 550px;
-        height: 180px;
-        background-color: #c45d3e;
-        border-radius: 40px;
-        left: 400px;
-        top: 540px;
-        transform: translate(-50%, -50%);
-        padding: 0 40px;
-        justify-content: center;
-        gap: 30px;
-      }
-
-      [data-composition-id="graphics"] .stat-text {
-        font-size: 80px;
-        font-weight: 700;
-        letter-spacing: -2px;
-      }
-
-      [data-composition-id="graphics"] #moment-3 .stat-text {
-        font-size: 54px;
-        letter-spacing: -1px;
-      }
-
-      [data-composition-id="graphics"] .icon-shape {
-        width: 80px;
-        height: 80px;
-        color: rgba(255, 255, 255, 0.9);
-      }
-
-      [data-composition-id="graphics"] .icon-shape svg {
-        width: 100%;
-        height: 100%;
-      }
-    </style>
-
-    <script>
-      (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,
-        );
-        // Hold until 4.5s, then fade out
-        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,
-        );
-        // Hold until 8.6s, then fade out
-        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,
-        );
-        // Hold until end (14s)
-        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>

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

@@ -1,86 +0,0 @@
-<template id="intro-template">
-  <div data-composition-id="intro" data-width="1920" data-height="1080" data-duration="3">
-    <div class="container">
-      <div class="title-card">
-        <h1 class="title">Hyperframes</h1>
-        <p class="subtitle">Design simplified.</p>
-      </div>
-    </div>
-
-    <style>
-      /* Import a rounded humanist sans-serif font */
-      @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap");
-
-      [data-composition-id="intro"] .container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: flex-start; /* Align to left for speaker card */
-        align-items: center;
-        padding-left: 5%;
-        font-family: "Outfit", sans-serif;
-        background: transparent;
-      }
-
-      [data-composition-id="intro"] .title-card {
-        background-color: #3b5e3a; /* Forest Green for contrast */
-        padding: 40px 60px;
-        border-radius: 30px;
-        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
-        text-align: left;
-        opacity: 0;
-        transform: translateX(-100%); /* Start off-screen left */
-      }
-
-      [data-composition-id="intro"] .title {
-        font-size: 100px;
-        font-weight: 600;
-        color: #f5f0e0; /* Cream text on green card */
-        margin: 0;
-        line-height: 1.1;
-        letter-spacing: -2px;
-      }
-
-      [data-composition-id="intro"] .subtitle {
-        font-size: 50px;
-        font-weight: 400;
-        color: #cc8832; /* Ochre accent */
-        margin: 10px 0 0 0;
-        line-height: 1.2;
-      }
-    </style>
-
-    <script>
-      (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,
-        );
-
-        // 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,
-        );
-
-        window.__timelines = window.__timelines || {};
-        window.__timelines["intro"] = tl;
-      })();
-    </script>
-  </div>
-</template>

package/dist/templates/warm-grain/index.html

@@ -1,294 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Warm Grain - 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;
-        overflow: hidden;
-        background-color: #f5f0e0; /* Cream background */
-        font-family: "Outfit", "Lexend", sans-serif;
-      }
-
-      #main-composition {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        overflow: hidden;
-      }
-
-      /* Paper texture and Grain overlay */
-      #grain-overlay-comp {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        z-index: 100;
-      }
-
-      /* Grain animation */
-      @keyframes grain-noise {
-        0%,
-        100% {
-          transform: translate(0, 0);
-        }
-        10% {
-          transform: translate(-5%, -5%);
-        }
-        20% {
-          transform: translate(-10%, 5%);
-        }
-        30% {
-          transform: translate(5%, -10%);
-        }
-        40% {
-          transform: translate(-5%, 15%);
-        }
-        50% {
-          transform: translate(-10%, 5%);
-        }
-        60% {
-          transform: translate(15%, 0);
-        }
-        70% {
-          transform: translate(0, 10%);
-        }
-        80% {
-          transform: translate(-15%, 0);
-        }
-        90% {
-          transform: translate(10%, 5%);
-        }
-      }
-
-      .grain-texture {
-        position: absolute;
-        top: -50%;
-        left: -50%;
-        width: 200%;
-        height: 200%;
-        background: url("https://www.transparenttextures.com/patterns/natural-paper.png");
-        opacity: 0.15;
-        animation: grain-noise 0.5s steps(1) infinite;
-      }
-
-      #a-roll {
-        position: absolute;
-        border-radius: 16px;
-        object-fit: cover;
-        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-      }
-
-      .comp-layer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-      }
-    </style>
-  </head>
-  <body>
-    <div
-      id="main-composition"
-      data-composition-id="main-video"
-      data-width="1920"
-      data-height="1080"
-      data-start="0"
-      data-duration="__VIDEO_DURATION__"
-    >
-      <!-- Background Layer -->
-      <div
-        id="grain-overlay-comp"
-        data-composition-id="grain-overlay"
-        data-width="1920"
-        data-height="1080"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-track-index="100"
-      >
-        <div class="grain-texture"></div>
-        <script>
-          const grainTl = gsap.timeline({ paused: true });
-          window.__timelines = window.__timelines || {};
-          window.__timelines["grain-overlay"] = grainTl;
-        </script>
-      </div>
-
-      <!-- A-Roll Video (muted — audio is separate) -->
-      <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="5"
-        data-volume="1"
-      ></audio>
-
-      <!-- Compositions -->
-      <div
-        id="intro-layer"
-        class="comp-layer"
-        data-composition-id="intro"
-        data-composition-src="compositions/intro.html"
-        data-start="0"
-        data-duration="2.5"
-        data-track-index="1"
-      ></div>
-
-      <div
-        id="graphics-layer"
-        class="comp-layer"
-        data-composition-id="graphics"
-        data-composition-src="compositions/graphics.html"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-track-index="2"
-      ></div>
-
-      <div
-        id="captions-layer"
-        class="comp-layer"
-        data-composition-id="captions"
-        data-composition-src="compositions/captions.html"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-track-index="3"
-      ></div>
-
-      <!-- SFX -->
-      <audio
-        id="sfx-swipe-1"
-        src=""
-        data-start="1.8"
-        data-duration="1"
-        data-track-index="4"
-      ></audio>
-      <audio
-        id="sfx-swipe-2"
-        src=""
-        data-start="4.6"
-        data-duration="1"
-        data-track-index="4"
-      ></audio>
-      <audio
-        id="sfx-swipe-3"
-        src=""
-        data-start="8.8"
-        data-duration="1"
-        data-track-index="4"
-      ></audio>
-
-      <script>
-        const tl = gsap.timeline({ paused: true });
-
-        // A-Roll Framing Strategy
-        // 1. 0s-1.8s: Intro scale up from small (60%) to medium (80%) - Shifted right slightly to clear speaker card
-        // 2. 1.8s-4.6s: Grid view / Shift Left (x: 600, scale: 70%) for 47% graphic
-        // 3. 4.6s-8.8s: Shift Center-Bottom (y: 800, scale: 70%) for 62% graphic (top)
-        // 4. 8.8s-14s: Shift Right (x: 1320, scale: 75%) for Editing Skills graphic (left)
-        // 5. 14s-17s: Final Reveal (Center, scale: 100%)
-
-        // Initial state
-        gsap.set("#a-roll", {
-          x: 1100,
-          y: 540,
-          xPercent: -50,
-          yPercent: -50,
-          width: 1920 * 0.6,
-          height: 1080 * 0.6,
-        });
-
-        // 1. Intro Scale Up (0s - 1.8s)
-        tl.to(
-          "#a-roll",
-          {
-            x: 1200,
-            width: 1920 * 0.8,
-            height: 1080 * 0.8,
-            duration: 1.8,
-            ease: "power2.inOut",
-          },
-          0,
-        );
-
-        // 2. Moment 1: 47% Graphic Trigger (1.8s) - Shift Left
-        tl.to(
-          "#a-roll",
-          {
-            x: 600,
-            y: 540,
-            width: 1920 * 0.7,
-            height: 1080 * 0.7,
-            duration: 0.5,
-            ease: "power2.inOut",
-          },
-          1.8,
-        );
-
-        // 3. Moment 2: 62% Graphic Trigger (4.6s) - Shift Center-Bottom
-        tl.to(
-          "#a-roll",
-          {
-            x: 960,
-            y: 750,
-            width: 1920 * 0.7,
-            height: 1080 * 0.7,
-            duration: 0.5,
-            ease: "power2.inOut",
-          },
-          4.6,
-        );
-
-        // 4. Moment 3: Editing Skills Trigger (8.8s) - Shift Right
-        tl.to(
-          "#a-roll",
-          {
-            x: 1320,
-            y: 540,
-            width: 1920 * 0.75,
-            height: 1080 * 0.75,
-            duration: 0.5,
-            ease: "power2.inOut",
-          },
-          8.8,
-        );
-
-        // 5. Final Reveal (14s - 17s)
-        tl.to(
-          "#a-roll",
-          {
-            x: 960,
-            y: 540,
-            width: 1920 * 1.0,
-            height: 1080 * 1.0,
-            duration: 1.0,
-            ease: "power2.inOut",
-          },
-          14,
-        );
-
-        window.__timelines["main-video"] = tl;
-      </script>
-    </div>
-  </body>
-</html>