hyperframes 0.1.14 → 0.1.15

package/dist/cli.js

@@ -422,7 +422,7 @@ var VERSION;
 var init_version = __esm({
   "src/version.ts"() {
     "use strict";
-    VERSION = true ? "0.1.14" : "0.0.0-dev";
+    VERSION = true ? "0.1.15" : "0.0.0-dev";
   }
 });
 

package/dist/skills/hyperframes-captions/SKILL.md

@@ -193,7 +193,7 @@ Group size affects pacing. Fast content needs fast caption turnover.
 - **Conversational:** 3-5 words per group. Natural phrase length.
 - **Measured/calm:** 4-6 words per group. Longer groups match slower pace.
 
-Break groups on sentence boundaries (`.` `?` `!`), pauses (>150ms gap), or max word count — whichever comes first.
+Break groups on sentence boundaries (period, question mark, exclamation), pauses (150ms+ gap), or max word count — whichever comes first.
 
 ## Positioning
 

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

@@ -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

@@ -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

@@ -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" },
+];