npm - hyperframes - Versions diffs - 0.1.15 → 0.2.0-alpha.1 - Mend

hyperframes 0.1.15 → 0.2.0-alpha.1

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 (41) hide show

package/README.md +3 -3
package/dist/cli.js +3968 -3297
package/dist/skills/hyperframes-captions/SKILL.md +1 -1
package/dist/skills/hyperframes-compose/SKILL.md +1 -0
package/dist/studio/assets/index-Bkp9HQbo.css +1 -0
package/dist/studio/assets/index-DfhSlTti.js +93 -0
package/dist/studio/index.html +2 -2
package/dist/templates/_shared/CLAUDE.md +1 -1
package/package.json +3 -2
package/dist/studio/assets/index-CLmYRLY-.css +0 -1
package/dist/studio/assets/index-CRvFpc0E.js +0 -84
package/dist/templates/decision-tree/compositions/decision_tree.html +0 -420
package/dist/templates/decision-tree/index.html +0 -56
package/dist/templates/generators.ts +0 -32
package/dist/templates/kinetic-type/compositions/main-graphics.html +0 -588
package/dist/templates/kinetic-type/index.html +0 -61
package/dist/templates/nyt-graph/compositions/nyt-chart.html +0 -450
package/dist/templates/nyt-graph/index.html +0 -51
package/dist/templates/play-mode/compositions/captions.html +0 -163
package/dist/templates/play-mode/compositions/intro.html +0 -107
package/dist/templates/play-mode/compositions/stats.html +0 -388
package/dist/templates/play-mode/index.html +0 -239
package/dist/templates/product-promo/assets/figma-cursors.svg +0 -30
package/dist/templates/product-promo/assets/figma-logo-pieces.svg +0 -15
package/dist/templates/product-promo/assets/figma-logo-pills.svg +0 -6
package/dist/templates/product-promo/compositions/scene1-logo-intro.html +0 -189
package/dist/templates/product-promo/compositions/scene2-4-canvas.html +0 -570
package/dist/templates/product-promo/compositions/scene5-logo-outro.html +0 -226
package/dist/templates/product-promo/index.html +0 -158
package/dist/templates/swiss-grid/assets/swiss-grid.svg +0 -116
package/dist/templates/swiss-grid/compositions/captions.html +0 -148
package/dist/templates/swiss-grid/compositions/graphics.html +0 -207
package/dist/templates/swiss-grid/compositions/intro.html +0 -131
package/dist/templates/swiss-grid/index.html +0 -234
package/dist/templates/vignelli/compositions/captions.html +0 -181
package/dist/templates/vignelli/compositions/overlays.html +0 -323
package/dist/templates/vignelli/index.html +0 -190
package/dist/templates/warm-grain/compositions/captions.html +0 -147
package/dist/templates/warm-grain/compositions/graphics.html +0 -164
package/dist/templates/warm-grain/compositions/intro.html +0 -86
package/dist/templates/warm-grain/index.html +0 -294

package/dist/templates/play-mode/index.html DELETED Viewed

@@ -1,239 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hyperframes - Play Mode</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: #ffffff;
-        font-family: "Nunito", sans-serif;
-      }
-      #main-composition {
-        width: 1920px;
-        height: 1080px;
-        position: relative;
-      }
-      #bg-comp,
-      #aroll-comp,
-      #intro-comp,
-      #stats-comp,
-      #captions-comp {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-      #bg-comp {
-        z-index: 1;
-      }
-      #aroll-comp {
-        z-index: 10;
-      }
-      #intro-comp {
-        z-index: 100;
-      }
-      #stats-comp {
-        z-index: 150;
-      }
-      #captions-comp {
-        z-index: 200;
-      }
-      #aroll-container {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 0;
-      }
-      #short_mag_cut {
-        border-radius: 16px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-        border: 8px solid #ffffff;
-      }
-      #background-layer {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: #ffffff;
-        z-index: 0;
-      }
-    </style>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div
-      id="main-composition"
-      data-composition-id="main-video"
-      data-start="0"
-      data-duration="__VIDEO_DURATION__"
-      data-width="1920"
-      data-height="1080"
-    >
-      <!-- Background Layer Composition -->
-      <div
-        id="bg-comp"
-        data-composition-id="background"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-width="1920"
-        data-height="1080"
-        data-track-index="1"
-      >
-        <div id="background-layer"></div>
-        <style>
-          #background-layer {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: #ffffff;
-          }
-        </style>
-        <script>
-          (function () {
-            const tl = gsap.timeline({ paused: true });
-            const bg = document.getElementById("background-layer");
-            // Sync with A-roll framing 3 (4.659s)
-            tl.to(bg, { backgroundColor: "#0057FF", duration: 0.5 }, 4.659);
-            // Sync with A-roll framing 4 (8.88s)
-            tl.to(bg, { backgroundColor: "#FFFFFF", duration: 0.5 }, 8.88);
-            window.__timelines["background"] = tl;
-          })();
-        </script>
-      </div>
-      <!-- A-roll Layer Composition -->
-      <div
-        id="aroll-comp"
-        data-composition-id="aroll-layer"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-width="1920"
-        data-height="1080"
-        data-track-index="10"
-      >
-        <div id="aroll-container">
-          <video
-            id="short_mag_cut"
-            src="__VIDEO_SRC__"
-            muted
-            playsinline
-            data-start="0"
-            data-duration="__VIDEO_DURATION__"
-            data-track-index="1"
-            style="width: 100%; height: auto"
-          ></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>
-        <style>
-          #aroll-container {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          }
-          #short_mag_cut {
-            border-radius: 16px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-            border: 8px solid #ffffff;
-          }
-        </style>
-        <script>
-          (function () {
-            const tl = gsap.timeline({ paused: true });
-            const container = document.getElementById("aroll-container");
-            gsap.set(container, { y: -1100, scale: 0.8 });
-            tl.to(container, { y: 0, duration: 1.2, ease: "elastic.out(1, 0.6)" }, 0);
-            tl.to(container, { scale: 1.4, x: -300, duration: 1, ease: "back.out(1.7)" }, 1.839);
-            tl.to(container, { scale: 0.7, x: 400, duration: 1, ease: "back.out(1.7)" }, 4.659);
-            tl.to(container, { scale: 0.9, x: 0, duration: 1, ease: "back.out(1.7)" }, 8.88);
-            window.__timelines["aroll-layer"] = tl;
-          })();
-        </script>
-      </div>
-      <!-- Compositions -->
-      <div
-        id="intro-comp"
-        data-composition-id="intro"
-        data-composition-src="compositions/intro.html"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-width="1920"
-        data-height="1080"
-        data-track-index="100"
-      ></div>
-      <div
-        id="captions-comp"
-        data-composition-id="captions"
-        data-composition-src="compositions/captions.html"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-width="1920"
-        data-height="1080"
-        data-track-index="200"
-      ></div>
-      <div
-        id="stats-comp"
-        data-composition-id="stats"
-        data-composition-src="compositions/stats.html"
-        data-start="0"
-        data-duration="__VIDEO_DURATION__"
-        data-width="1920"
-        data-height="1080"
-        data-track-index="150"
-      ></div>
-      <!-- Audio Clips -->
-      <audio id="sfx-bounce-0" src="" data-start="0" data-track-index="5"></audio>
-      <audio id="sfx-whoosh-1" src="" data-start="1.839" data-track-index="6"></audio>
-      <audio id="sfx-pop-1" src="" data-start="2.039" data-track-index="7"></audio>
-      <audio id="sfx-whoosh-2" src="" data-start="4.659" data-track-index="6"></audio>
-      <audio id="sfx-pop-2" src="" data-start="4.859" data-track-index="7"></audio>
-      <audio id="sfx-whoosh-3" src="" data-start="8.88" data-track-index="6"></audio>
-      <audio id="sfx-pop-3" src="" data-start="9.08" data-track-index="7"></audio>
-      <script>
-        window.__timelines = window.__timelines || {};
-        const tl = gsap.timeline({ paused: true });
-        window.__timelines["main-video"] = tl;
-      </script>
-    </div>
-  </body>
-</html>

package/dist/templates/product-promo/assets/figma-cursors.svg DELETED Viewed

@@ -1,30 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
-  <defs>
-    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.2"/>
-    </filter>
-    <g id="cursor-arrow">
-      <path d="M0 0 L 16 16 L 9.5 16 L 6.5 23 L 6.5 16 L 0 16 Z" fill="white" stroke="#000" stroke-width="1.5" stroke-linejoin="round" filter="url(#shadow)"/>
-    </g>
-  </defs>
-  <rect width="1920" height="1080" fill="#f0f0f0" />
-  <g id="cursor-designer" transform="translate(600, 500)">
-    <use href="#cursor-arrow" x="0" y="0"/>
-    <rect x="16" y="20" width="90" height="24" rx="4" fill="#A259FF"/>
-    <text x="61" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">Designer</text>
-  </g>
-  <g id="cursor-engineer" transform="translate(900, 400)">
-    <use href="#cursor-arrow" x="0" y="0"/>
-    <rect x="16" y="20" width="90" height="24" rx="4" fill="#1ABCFE"/>
-    <text x="61" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">Engineer</text>
-  </g>
-  <g id="cursor-pm" transform="translate(1200, 600)">
-    <use href="#cursor-arrow" x="0" y="0"/>
-    <rect x="16" y="20" width="50" height="24" rx="4" fill="#F24E1E"/>
-    <text x="41" y="36" font-family="Inter, sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">PM</text>
-  </g>
-</svg>

package/dist/templates/product-promo/assets/figma-logo-pieces.svg DELETED Viewed

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
-  <g transform="translate(880, 420)">
-    <!-- Top-left: rounded square -->
-    <path id="logo-tl" d="M 40 0 A 40 40 0 0 0 0 40 L 0 80 A 40 40 0 0 0 40 120 A 40 40 0 0 0 80 80 L 80 40 A 40 40 0 0 0 40 0 Z" fill="#F24E1E" />
-    <!-- Top-right: rounded square -->
-    <path id="logo-tr" d="M 120 0 A 40 40 0 0 0 80 40 L 80 80 A 40 40 0 0 0 120 120 A 40 40 0 0 0 160 80 L 160 40 A 40 40 0 0 0 120 0 Z" fill="#A259FF" />
-    <!-- Bottom-left: half-circle -->
-    <path id="logo-bl" d="M 0 120 A 40 120 0 0 0 80 120 Z" fill="#1ABCFE" />
-    <!-- Bottom-right: half-circle -->
-    <path id="logo-br" d="M 80 120 A 40 120 0 0 0 160 120 Z" fill="#0ACF83" />
-  </g>
-</svg>

package/dist/templates/product-promo/assets/figma-logo-pills.svg DELETED Viewed

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
-  <rect id="pill-tl" x="870" y="410" width="80" height="120" rx="40" fill="#F24E1E" />
-  <rect id="pill-tr" x="970" y="410" width="80" height="120" rx="40" fill="#A259FF" />
-  <rect id="pill-bl" x="870" y="550" width="80" height="120" rx="40" fill="#1ABCFE" />
-  <rect id="pill-br" x="970" y="550" width="80" height="120" rx="40" fill="#0ACF83" />
-</svg>

package/dist/templates/product-promo/compositions/scene1-logo-intro.html DELETED Viewed

@@ -1,189 +0,0 @@
-<template id="scene1-logo-intro-template">
-  <div
-    data-composition-id="scene1-logo-intro"
-    data-width="1920"
-    data-height="1080"
-    data-duration="1.5"
-  >
-    <div class="canvas">
-      <!-- Logo Container -->
-      <div class="logo-container">
-        <svg viewBox="0 0 160 240" width="160" height="240">
-          <!-- Figma Logo Pieces -->
-          <!-- Top-left: Red (F24E1E) -->
-          <path
-            class="logo-piece logo-tl"
-            d="M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z"
-            fill="#F24E1E"
-          />
-          <!-- Top-right: Purple (A259FF) -->
-          <path
-            class="logo-piece logo-tr"
-            d="M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z"
-            fill="#A259FF"
-          />
-          <!-- Middle-left: Pink (FF7262) -->
-          <path
-            class="logo-piece logo-ml"
-            d="M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z"
-            fill="#FF7262"
-          />
-          <!-- Middle-right: Blue (1ABCFE) -->
-          <circle class="logo-piece logo-mr" cx="120" cy="120" r="40" fill="#1ABCFE" />
-          <!-- Bottom-left: Green (0ACF83) -->
-          <path
-            class="logo-piece logo-bl"
-            d="M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z"
-            fill="#0ACF83"
-          />
-        </svg>
-      </div>
-      <!-- Expanding Ring -->
-      <div class="ring-container">
-        <svg viewBox="0 0 400 400" width="400" height="400">
-          <circle
-            class="ring"
-            cx="200"
-            cy="200"
-            r="80"
-            fill="none"
-            stroke="#FFFFFF"
-            stroke-width="4"
-          />
-        </svg>
-      </div>
-    </div>
-    <style>
-      [data-composition-id="scene1-logo-intro"] .canvas {
-        width: 1920px;
-        height: 1080px;
-        background-color: #0a0a0f;
-        position: relative;
-        overflow: hidden;
-      }
-      [data-composition-id="scene1-logo-intro"] .logo-container {
-        position: absolute;
-        left: 880px; /* Center X: 960 - 80 */
-        top: 420px; /* Center Y: 540 - 120 */
-        width: 160px;
-        height: 240px;
-        transform-origin: center center;
-      }
-      [data-composition-id="scene1-logo-intro"] .ring-container {
-        position: absolute;
-        left: 760px; /* 960 - 200 */
-        top: 340px; /* 540 - 200 */
-        width: 400px;
-        height: 400px;
-        pointer-events: none;
-      }
-      [data-composition-id="scene1-logo-intro"] .ring {
-        transform-origin: center center;
-        opacity: 0;
-      }
-    </style>
-    <script>
-      (function () {
-        const tl = gsap.timeline({ paused: true });
-        const pieces = {
-          tl: '[data-composition-id="scene1-logo-intro"] .logo-tl',
-          tr: '[data-composition-id="scene1-logo-intro"] .logo-tr',
-          ml: '[data-composition-id="scene1-logo-intro"] .logo-ml',
-          mr: '[data-composition-id="scene1-logo-intro"] .logo-mr',
-          bl: '[data-composition-id="scene1-logo-intro"] .logo-bl',
-        };
-        const ring = '[data-composition-id="scene1-logo-intro"] .ring';
-        const logoContainer = '[data-composition-id="scene1-logo-intro"] .logo-container';
-        // Initial positions: Corners of the screen
-        // Viewport is 1920x1080. Center is 960, 540.
-        // logo-container is at 880, 420.
-        tl.set(pieces.tl, { x: -960, y: -540 });
-        tl.set(pieces.tr, { x: 960, y: -540 });
-        tl.set(pieces.ml, { x: -960, y: 0 });
-        tl.set(pieces.mr, { x: 960, y: 0 });
-        tl.set(pieces.bl, { x: -960, y: 540 });
-        // 1. Converge to center with 3-frame stagger (approx 0.05s at 60fps)
-        // 2. Collide with slight bounce (overshoot 1.1x)
-        const convergeDuration = 0.6;
-        const stagger = 0.05;
-        const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];
-        pieceArray.forEach((piece, i) => {
-          tl.to(
-            piece,
-            {
-              x: 0,
-              y: 0,
-              duration: convergeDuration,
-              ease: "back.out(1.1)",
-            },
-            i * stagger,
-          );
-        });
-        // 3. On collision (approx at 0.6 + 4*0.05 = 0.8s), white ring expands
-        const collisionTime = convergeDuration + (pieceArray.length - 1) * stagger;
-        tl.fromTo(
-          ring,
-          { scale: 0.2, opacity: 1 },
-          {
-            scale: 2.5,
-            opacity: 0,
-            duration: 0.4,
-            ease: "power2.out",
-          },
-          collisionTime,
-        );
-        // 4. Logo pulses slightly
-        tl.to(
-          logoContainer,
-          {
-            scale: 1.05,
-            duration: 0.15,
-            ease: "power2.out",
-          },
-          collisionTime,
-        );
-        tl.to(
-          logoContainer,
-          {
-            scale: 1,
-            duration: 0.15,
-            ease: "power2.in",
-          },
-          collisionTime + 0.15,
-        );
-        // 5. Scale down to 0
-        tl.to(
-          logoContainer,
-          {
-            scale: 0,
-            duration: 0.3,
-            ease: "expo.in",
-            delay: 0.1,
-          },
-          collisionTime + 0.3,
-        );
-        window.__timelines = window.__timelines || {};
-        window.__timelines["scene1-logo-intro"] = tl;
-      })();
-    </script>
-  </div>
-</template>