npm - hyperframes - Versions diffs - 0.6.107 → 0.6.109 - Mend

hyperframes 0.6.107 → 0.6.109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/cli.js +405 -79
package/dist/hyperframe-runtime.js +25 -23
package/dist/hyperframe.manifest.json +1 -1
package/dist/hyperframe.runtime.iife.js +25 -23
package/dist/studio/assets/{hyperframes-player-DgsMQSvV.js → hyperframes-player-67pq7USK.js} +2 -2
package/dist/studio/assets/index-BVqybwMG.css +1 -0
package/dist/studio/assets/{index-zIK7PWvk.js → index-CFCe0Xvn.js} +1 -1
package/dist/studio/assets/{index-P52mbTRb.js → index-SlMJloLR.js} +1 -1
package/dist/studio/assets/index-ho_f4axK.js +296 -0
package/dist/studio/index.html +2 -2
package/dist/templates/warm-grain/compositions/captions.html +154 -0
package/dist/templates/warm-grain/compositions/graphics.html +165 -0
package/dist/templates/warm-grain/compositions/intro.html +84 -0
package/dist/templates/warm-grain/index.html +271 -0
package/dist/templates/warm-grain/registry-item.json +34 -0
package/package.json +1 -1
package/dist/studio/assets/index-BrhJl2JY.css +0 -1
package/dist/studio/assets/index-CVHV-S-B.js +0 -296

package/dist/studio/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CVHV-S-B.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BrhJl2JY.css">
+    <script type="module" crossorigin src="/assets/index-ho_f4axK.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BVqybwMG.css">
   </head>
   <body>
     <div id="root"></div>

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

@@ -0,0 +1,154 @@
+<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: "Inter", sans-serif;
+        font-size: 48px;
+        font-weight: 700;
+        text-align: center;
+        line-height: 1.2;
+        white-space: nowrap;
+        max-width: 1600px;
+        overflow: hidden;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <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.set(box, { visibility: "visible" }, 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,
+          );
+          // Hard kill to ensure caption is hidden
+          tl.set(box, { opacity: 0, visibility: "hidden" }, line.end + 0.1);
+        });
+        window.__timelines = window.__timelines || {};
+        window.__timelines["captions"] = tl;
+      })();
+    </script>
+  </div>
+</template>

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

@@ -0,0 +1,165 @@
+<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 src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <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 ADDED Viewed

@@ -0,0 +1,84 @@
+<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>
+      [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: "Inter", 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 src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <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 ADDED Viewed

@@ -0,0 +1,271 @@
+<!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", 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>
+      <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>