npm - hyperframes - Versions diffs - 0.1.13 → 0.1.15 - Mend

hyperframes 0.1.13 → 0.1.15

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

package/README.md +5 -1
package/dist/cli.js +940 -380
package/dist/hyperframe-runtime.js +8 -4
package/dist/hyperframe.manifest.json +1 -1
package/dist/hyperframe.runtime.iife.js +8 -4
package/dist/skills/hyperframes-captions/SKILL.md +195 -29
package/dist/skills/hyperframes-compose/SKILL.md +1 -0
package/dist/skills/hyperframes-compose/house-style.md +2 -2
package/dist/studio/assets/index-CLmYRLY-.css +1 -0
package/dist/studio/assets/index-CRvFpc0E.js +84 -0
package/dist/studio/index.html +2 -2
package/dist/templates/_shared/CLAUDE.md +14 -2
package/dist/templates/blank/compositions/captions.html +3 -0
package/dist/templates/blank/index.html +1 -1
package/dist/templates/decision-tree/compositions/decision_tree.html +420 -0
package/dist/templates/decision-tree/index.html +56 -0
package/dist/templates/generators.ts +32 -0
package/dist/templates/kinetic-type/compositions/main-graphics.html +588 -0
package/dist/templates/kinetic-type/index.html +61 -0
package/dist/templates/nyt-graph/compositions/nyt-chart.html +450 -0
package/dist/templates/nyt-graph/index.html +51 -0
package/dist/templates/product-promo/assets/figma-cursors.svg +30 -0
package/dist/templates/product-promo/assets/figma-logo-pieces.svg +15 -0
package/dist/templates/product-promo/assets/figma-logo-pills.svg +6 -0
package/dist/templates/product-promo/compositions/scene1-logo-intro.html +189 -0
package/dist/templates/product-promo/compositions/scene2-4-canvas.html +570 -0
package/dist/templates/product-promo/compositions/scene5-logo-outro.html +226 -0
package/dist/templates/product-promo/index.html +158 -0
package/package.json +2 -2
package/dist/studio/assets/index-2uBPlHR_.css +0 -1
package/dist/studio/assets/index-uQ8cgxb3.js +0 -92

package/dist/studio/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-uQ8cgxb3.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-2uBPlHR_.css">
+    <script type="module" crossorigin src="/assets/index-CRvFpc0E.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CLmYRLY-.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/templates/_shared/CLAUDE.md CHANGED Viewed

@@ -7,7 +7,7 @@
 | Skill                    | Command                 | When to use                                                                                            |
 | ------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------ |
 | **hyperframes-compose**  | `/hyperframes-compose`  | Creating or editing ANY HTML composition — videos, animations, title cards, overlays, sub-compositions |
-| **hyperframes-captions** | `/hyperframes-captions` | Building captions from whisper transcripts — style detection, per-word styling                         |
+| **hyperframes-captions** | `/hyperframes-captions` | Any text synced to audio: captions, subtitles, lyrics, karaoke. Also covers transcription strategy.    |
 | **gsap-core**            | `/gsap-core`            | GSAP tweens: `gsap.to()`, `from()`, `fromTo()`, easing, stagger, defaults                              |
 | **gsap-timeline**        | `/gsap-timeline`        | Timeline sequencing, position parameter, labels, nesting                                               |
 | **gsap-performance**     | `/gsap-performance`     | Animation performance — transforms over layout props, will-change, batching                            |
@@ -21,7 +21,9 @@
 ```bash
 npx hyperframes dev          # preview in browser (studio editor)
 npx hyperframes render       # render to MP4
-npx hyperframes lint         # validate compositions
+npx hyperframes lint         # validate compositions (errors + warnings)
+npx hyperframes lint --verbose  # include info-level findings
+npx hyperframes lint --json     # machine-readable output for CI
 npx hyperframes docs <topic> # reference docs in terminal
 ```
@@ -48,6 +50,16 @@ https://hyperframes.heygen.com/llms.txt
 - `meta.json` — project metadata (id, name)
 - `transcript.json` — whisper word-level transcript (if generated)
+## Linting — ALWAYS RUN AFTER CHANGES
+After creating or editing any `.html` composition, **always** run the linter before considering the task complete:
+```bash
+npx hyperframes lint
+```
+Fix all errors before presenting the result. Warnings are informational and usually safe to ignore.
 ## Key Rules
 1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`

package/dist/templates/blank/compositions/captions.html CHANGED Viewed

@@ -37,6 +37,8 @@
           0 2px 8px rgba(0, 0, 0, 0.8),
           0 0 2px rgba(0, 0, 0, 0.9);
         white-space: nowrap;
+        max-width: 1600px;
+        overflow: hidden;
       }
     </style>
@@ -83,6 +85,7 @@
             index < lines.length - 1 ? Math.min(line.end, lines[index + 1].start) : line.end;
           tl.to(el, { opacity: 0, y: -10, duration: 0.25, ease: "power2.in" }, hideTime - 0.25);
+          tl.set(el, { opacity: 0, visibility: "hidden" }, hideTime);
         });
         window.__timelines["captions"] = tl;

package/dist/templates/blank/index.html CHANGED Viewed

@@ -31,10 +31,10 @@
     >
       <video
         id="a-roll"
+        class="clip"
         src="__VIDEO_SRC__"
         muted
         playsinline
-        data-start="0"
         data-duration="__VIDEO_DURATION__"
         data-track-index="0"
         style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover"

package/dist/templates/decision-tree/compositions/decision_tree.html ADDED Viewed

@@ -0,0 +1,420 @@
+<template id="decision-tree-template">
+  <div data-composition-id="decision-tree" data-width="1920" data-height="1080" data-duration="12">
+    <div class="canvas">
+      <svg class="connectors" width="1920" height="1080" viewBox="0 0 1920 1080">
+        <!-- Level 1 to 2 -->
+        <path
+          id="path-1-L"
+          class="connector"
+          d="M 960 130 L 960 200 L 600 200 L 600 270"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+        <path
+          id="path-1-R"
+          class="connector"
+          d="M 960 130 L 960 200 L 1320 200 L 1320 270"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+        <!-- Level 2 to 3 (Left side) -->
+        <path
+          id="path-2-LL"
+          class="connector"
+          d="M 600 330 L 600 400 L 400 400 L 400 470"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+        <path
+          id="path-2-LR"
+          class="connector"
+          d="M 600 330 L 600 400 L 800 400 L 800 470"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+        <!-- Level 2 to 3 (Right side) -->
+        <path
+          id="path-2-RL"
+          class="connector"
+          d="M 1320 330 L 1320 400 L 1120 400 L 1120 470"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+        <path
+          id="path-2-RR"
+          class="connector"
+          d="M 1320 330 L 1320 400 L 1520 400 L 1520 470"
+          fill="none"
+          stroke="#333"
+          stroke-width="4"
+        />
+      </svg>
+      <div id="label-yes" class="connector-label">Yes</div>
+      <div id="label-not-sure" class="connector-label">Not sure</div>
+      <!-- Level 1 -->
+      <div id="node-root" class="node sticky yellow" style="left: 960px; top: 100px">
+        Should I learn to code?
+      </div>
+      <!-- Level 2 -->
+      <div id="node-yes" class="node sticky green" style="left: 600px; top: 300px">Yes</div>
+      <div id="node-not-sure" class="node sticky peach" style="left: 1320px; top: 300px">
+        Not sure
+      </div>
+      <!-- Level 3 -->
+      <div id="node-python" class="node sticky lavender" style="left: 400px; top: 500px">
+        <div style="position: relative; display: inline-block">
+          <span id="python-text">Start with Pythom</span>
+          <svg class="squiggle-container" width="64" height="6" viewBox="0 0 64 6">
+            <path
+              id="squiggle"
+              d="M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3"
+              fill="none"
+              stroke="#E53935"
+              stroke-width="2"
+            />
+          </svg>
+        </div>
+      </div>
+      <div id="node-nocode" class="node sticky blue" style="left: 800px; top: 500px">
+        Try no-code first
+      </div>
+      <div id="node-website" class="node sticky pink" style="left: 1120px; top: 500px">
+        Build a personal website
+      </div>
+      <div id="node-course" class="node sticky yellow" style="left: 1520px; top: 500px">
+        Take a free intro course
+      </div>
+      <!-- Cursor -->
+      <div id="cursor" class="cursor-container">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
+            fill="white"
+            stroke="black"
+          />
+        </svg>
+        <div class="cursor-tag">You</div>
+      </div>
+      <!-- Emoji -->
+      <div id="emoji-thumb" class="emoji">👍</div>
+      <!-- Overlay -->
+      <div id="fade-overlay"></div>
+    </div>
+    <style>
+      [data-composition-id="decision-tree"] {
+        width: 1920px;
+        height: 1080px;
+        background-color: #ffffff;
+        background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
+        background-size: 20px 20px;
+        position: absolute;
+        overflow: hidden;
+        font-family: "Inter", sans-serif;
+      }
+      [data-composition-id="decision-tree"] .canvas {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        transform: scale(1.2);
+        transform-origin: 960px 300px;
+      }
+      [data-composition-id="decision-tree"] .node {
+        position: absolute;
+        transform: translate(-50%, -50%) scale(0);
+        padding: 16px 24px;
+        border-radius: 12px;
+        font-size: 18px;
+        font-weight: 500;
+        color: #333;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        white-space: nowrap;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+      }
+      [data-composition-id="decision-tree"] .node.yellow {
+        background-color: #e8d44d;
+      }
+      [data-composition-id="decision-tree"] .node.green {
+        background-color: #c2e8a0;
+      }
+      [data-composition-id="decision-tree"] .node.peach {
+        background-color: #f5c5a3;
+      }
+      [data-composition-id="decision-tree"] .node.lavender {
+        background-color: #d4c5f9;
+      }
+      [data-composition-id="decision-tree"] .node.blue {
+        background-color: #a8d8f0;
+      }
+      [data-composition-id="decision-tree"] .node.pink {
+        background-color: #f8b4c8;
+      }
+      [data-composition-id="decision-tree"] .connectors {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 5;
+        pointer-events: none;
+      }
+      [data-composition-id="decision-tree"] .connector {
+        stroke-dasharray: 1000;
+        stroke-dashoffset: 1000;
+      }
+      [data-composition-id="decision-tree"] .connector-label {
+        position: absolute;
+        font-size: 14px;
+        font-weight: 600;
+        color: #333;
+        background: white;
+        padding: 2px 6px;
+        border-radius: 4px;
+        opacity: 0;
+        z-index: 6;
+        transform: translate(-50%, -50%);
+      }
+      #label-yes {
+        left: 780px;
+        top: 230px;
+      }
+      #label-not-sure {
+        left: 1140px;
+        top: 230px;
+      }
+      [data-composition-id="decision-tree"] .cursor-container {
+        position: absolute;
+        left: 1920px;
+        top: 1080px;
+        z-index: 100;
+        pointer-events: none;
+        display: flex;
+        align-items: flex-start;
+      }
+      [data-composition-id="decision-tree"] .cursor-tag {
+        background-color: #9747ff;
+        color: white;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        margin-left: 4px;
+        margin-top: 12px;
+      }
+      [data-composition-id="decision-tree"] .squiggle-container {
+        position: absolute;
+        right: 0;
+        bottom: -4px;
+        opacity: 0;
+      }
+      [data-composition-id="decision-tree"] .emoji {
+        position: absolute;
+        font-size: 32px;
+        left: 510px;
+        top: 500px;
+        transform: translate(-50%, -50%) scale(0);
+        z-index: 20;
+      }
+      [data-composition-id="decision-tree"] #fade-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        opacity: 0;
+        z-index: 1000;
+        pointer-events: none;
+      }
+      .selection-border {
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        border: 2px solid #0b84f3;
+        border-radius: 16px;
+        pointer-events: none;
+        opacity: 0;
+      }
+      .text-highlight {
+        background-color: #d0e4ff;
+      }
+    </style>
+    <script>
+      (function () {
+        const tl = gsap.timeline({ paused: true });
+        // 1. Root node scales from 0→100% over 0.4s
+        tl.to("#node-root", { scale: 1, duration: 0.4, ease: "power2.out" });
+        // 2. Hold 0.6s
+        tl.addLabel("hold1", "+=0.6");
+        // 3. Two elbow connectors draw downward-left and downward-right simultaneously (0.5s)
+        tl.to(
+          ".connector#path-1-L, .connector#path-1-R",
+          {
+            strokeDashoffset: 0,
+            duration: 0.5,
+            ease: "none",
+          },
+          "hold1",
+        );
+        // Labels fade in at midpoint
+        tl.to(
+          "#label-yes, #label-not-sure",
+          {
+            opacity: 1,
+            duration: 0.2,
+          },
+          "hold1+=0.25",
+        );
+        // 4. Level 2 nodes scale in at endpoints with 0.2s stagger
+        tl.to("#node-yes", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.4");
+        tl.to("#node-not-sure", { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, "hold1+=0.6");
+        // 5. Hold 0.5s
+        tl.addLabel("hold2", "+=0.5");
+        // 6. Four connectors draw down from level 2 (0.4s)
+        tl.to(
+          ".connector#path-2-LL, .connector#path-2-LR, .connector#path-2-RL, .connector#path-2-RR",
+          {
+            strokeDashoffset: 0,
+            duration: 0.4,
+            ease: "none",
+          },
+          "hold2",
+        );
+        // 7. Four leaf nodes scale in with 0.15s stagger
+        const leafNodes = ["#node-python", "#node-nocode", "#node-website", "#node-course"];
+        leafNodes.forEach((id, i) => {
+          tl.to(id, { scale: 1, duration: 0.4, ease: "back.out(1.7)" }, `hold2+=${0.3 + i * 0.15}`);
+        });
+        // Red wavy underline appears with text
+        tl.to(".squiggle-container", { opacity: 1, duration: 0.1 }, "hold2+=0.3");
+        // 8. Hold 0.8s
+        tl.addLabel("hold3", "+=0.8");
+        // 9. Cursor drifts in from bottom-right (1s) to lavender sticky
+        tl.to(
+          "#cursor",
+          {
+            left: 450,
+            top: 540,
+            duration: 1,
+            ease: "power1.inOut",
+          },
+          "hold3",
+        );
+        // 10. Cursor clicks. Selection border appears.
+        tl.add(() => {
+          const node = document.querySelector("#node-python");
+          if (!node) return;
+          if (!node.querySelector(".selection-border")) {
+            const border = document.createElement("div");
+            border.className = "selection-border";
+            node.appendChild(border);
+          }
+          gsap.set(".selection-border", { opacity: 1 });
+        }, "hold3+=1");
+        // Visual click feedback
+        tl.to("#cursor", { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1 }, "hold3+=1");
+        // 11. Hold 0.3s
+        tl.addLabel("hold4", "+=0.3");
+        // 12. Cursor double-clicks "Pythom" — highlight in blue
+        tl.to("#cursor", { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3 }, "hold4");
+        tl.add(() => {
+          const textEl = document.querySelector("#python-text");
+          if (!textEl) return;
+          textEl.innerHTML = 'Start with <span class="text-highlight">Pythom</span>';
+        }, "hold4+=0.1");
+        // 13. Hold 0.2s
+        tl.addLabel("hold5", "+=0.2");
+        // 14. Highlighted text deletes and "Python" types in (fast)
+        // Squiggle disappears when last char lands
+        const typingStart = tl.labels["hold5"];
+        const words = ["P", "Py", "Pyt", "Pyth", "Pytho", "Python"];
+        words.forEach((word, i) => {
+          tl.add(
+            () => {
+              const el = document.querySelector("#python-text");
+              if (el) el.innerHTML = `Start with <span class="text-highlight">${word}</span>`;
+            },
+            typingStart + i * 0.05,
+          );
+        });
+        // Remove highlight and squiggle at the end of typing
+        const typingEnd = typingStart + words.length * 0.05;
+        tl.add(() => {
+          const pyEl = document.querySelector("#python-text");
+          if (pyEl) pyEl.innerHTML = "Start with Python";
+          gsap.set(".squiggle-container", { opacity: 0 });
+        }, typingEnd);
+        // 15. Hold 0.5s
+        tl.addLabel("hold6", typingEnd + 0.5);
+        // 16. Cursor moves slightly and clicks away to deselect
+        tl.to("#cursor", { left: 500, top: 580, duration: 0.3 }, "hold6");
+        tl.to("#cursor", { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1 }, "hold6+=0.3");
+        tl.to(".selection-border", { opacity: 0, duration: 0.1 }, "hold6+=0.3");
+        // 17. 👍 emoji pops in
+        tl.to("#emoji-thumb", { scale: 1, duration: 0.15, ease: "back.out(2)" }, "hold6+=0.4");
+        // 18. Hold 2s
+        tl.addLabel("hold7", "+=2");
+        // 19. Fade entire screen to white over 0.5s
+        tl.to("#fade-overlay", { opacity: 1, duration: 0.5 }, "hold7");
+        window.__timelines["decision-tree"] = tl;
+      })();
+    </script>
+  </div>
+</template>

package/dist/templates/decision-tree/index.html ADDED Viewed

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Decision Tree</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #ffffff;
+        font-family: "Inter", sans-serif;
+      }
+    </style>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=block"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="15"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="decision-tree-comp"
+        data-composition-id="decision-tree"
+        data-composition-src="compositions/decision_tree.html"
+        data-start="0"
+        data-duration="15"
+        data-track-index="0"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>

package/dist/templates/generators.ts ADDED Viewed

@@ -0,0 +1,32 @@
+export type TemplateId =
+  | "blank"
+  | "warm-grain"
+  | "play-mode"
+  | "swiss-grid"
+  | "vignelli"
+  | "decision-tree"
+  | "kinetic-type"
+  | "product-promo"
+  | "nyt-graph";
+export interface TemplateOption {
+  id: TemplateId;
+  label: string;
+  hint: string;
+}
+export const TEMPLATES: TemplateOption[] = [
+  { id: "blank", label: "Blank", hint: "Empty composition — just the scaffolding" },
+  { id: "warm-grain", label: "Warm Grain", hint: "Cream aesthetic with grain texture" },
+  { id: "play-mode", label: "Play Mode", hint: "Playful elastic animations" },
+  { id: "swiss-grid", label: "Swiss Grid", hint: "Structured grid layout" },
+  { id: "vignelli", label: "Vignelli", hint: "Bold typography with red accents" },
+  { id: "decision-tree", label: "Decision Tree", hint: "Animated flowchart with branching paths" },
+  { id: "kinetic-type", label: "Kinetic Type", hint: "Bold kinetic typography promo" },
+  {
+    id: "product-promo",
+    label: "Product Promo",
+    hint: "Multi-scene product showcase with SVG assets",
+  },
+  { id: "nyt-graph", label: "NYT Graph", hint: "Animated data chart in print editorial style" },
+];