npm - takomi - Versions diffs - 2.1.45 → 2.5.4 - Mend

takomi 2.1.45 → 2.5.4

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

package/assets/.agent/skills/embedded-captions/modes/cinematic/_archive/portrait-header/template.html CHANGED Viewed

@@ -1,170 +1,170 @@
-<!doctype html>
-<!--
-  TEMPLATE: portrait-header
-  STYLE LOCKED. LAYOUT OPEN.
-  Look: 9:16 portrait talking-head, captions on a horizontal strip across
-  the top above the subject. Optional crown at bottom if waist+ visible.
-  Locked: 5 typography slots (intro/phrase/emph/dream/crown), screen blend,
-          single-caption swap (caps absolute-positioned in header strip).
-  Open via plan.json: header strip top/height, crown enable+top, font_scale.
--->
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <style>
-      :root { --font-scale: {{FONT_SCALE}}; }
-      * { margin: 0; padding: 0; box-sizing: border-box; }
-      html, body {
-        margin: 0;
-        width: {{WIDTH}}px; height: {{HEIGHT}}px;
-        overflow: hidden;
-        background: #000;
-        font-family: "Inter", system-ui, sans-serif;
-      }
-      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
-      #stage {
-        position: absolute;
-        top: 0; left: 0;
-        width: {{WIDTH}}px; height: {{HEIGHT}}px;
-        pointer-events: none;
-        z-index: 2;
-      }
-      /* LAYOUT */
-      .header-plane {
-        position: absolute;
-        top: {{HEADER_TOP}}px;
-        left: 0; right: 0;
-        height: {{HEADER_HEIGHT}}px;
-        padding: 24px 40px;
-      }
-      .header-plane .cap {
-        position: absolute;
-        top: 24px;
-        left: 40px; right: 40px;
-        max-width: calc(100% - 80px);
-        text-align: center;
-      }
-      .crown-plane {
-        position: absolute;
-        top: {{CROWN_TOP}}px;
-        left: 0; right: 0;
-        text-align: center;
-        pointer-events: none;
-      }
-      /* STYLE (locked) */
-      .cap {
-        display: block;
-        position: relative;
-        line-height: 1.05;
-        opacity: 0;
-        mix-blend-mode: {{BLEND_MODE}};
-        color: {{CAP_COLOR}};
-        text-shadow: {{TEXT_SHADOW}};
-        filter: {{TEXT_FILTER}};
-        will-change: transform, opacity;
-      }
-      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
-      .cap-intro  { font-size: calc(72px * var(--font-scale));
-                    font-weight: 500; font-style: italic;
-                    letter-spacing: -0.005em; line-height: 1.1; }
-      .cap-phrase { font-size: calc(88px * var(--font-scale));
-                    font-weight: 600;
-                    letter-spacing: -0.015em; line-height: 1.05; }
-      .cap-emph   { font-size: calc(104px * var(--font-scale));
-                    font-weight: 800;
-                    letter-spacing: -0.025em; line-height: 1.0; }
-      .cap-dream  { font-size: calc(92px * var(--font-scale));
-                    font-weight: 700; font-style: italic;
-                    letter-spacing: -0.015em; line-height: 1.05; }
-      .cap-crown  { font-size: calc(130px * var(--font-scale));
-                    font-weight: 900;
-                    letter-spacing: -0.035em; text-transform: uppercase;
-                    line-height: 1.0; }
-    </style>
-  </head>
-  <body>
-    <div
-      id="root"
-      data-composition-id="main"
-      data-start="0"
-      data-duration="{{DURATION}}"
-      data-width="{{WIDTH}}"
-      data-height="{{HEIGHT}}"
-    >
-      <video
-        id="a-roll"
-        src="source.mp4"
-        muted
-        playsinline
-        data-duration="{{DURATION}}"
-        data-track-index="0"
-        style="z-index: 1"
-      ></video>
-      <div id="stage">
-        <div class="header-plane">{{GROUPS_HTML}}</div>
-        <div class="crown-plane">{{CROWN_HTML}}</div>
-      </div>
-      <audio
-        id="a-roll-audio"
-        src="source.mp4"
-        data-start="0"
-        data-duration="{{DURATION}}"
-        data-track-index="3"
-        data-volume="1"
-      ></audio>
-    </div>
-    <script>
-      window.__timelines = window.__timelines || {};
-      const tl = gsap.timeline({ paused: true });
-      const DUR = {{DURATION}};
-      const GROUPS = {{GROUPS_JSON}};
-      const CROWN  = {{CROWN_JSON}};
-      function animateGroup(g) {
-        var sel = "#" + g.id;
-        var isSoft = g.tone === "soft";
-        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
-        g.words.forEach(function (w, i) {
-          var wsel = sel + " .w[data-i='" + i + "']";
-          if (isSoft) {
-            tl.fromTo(wsel,
-              { opacity: 0, y: 8 },
-              { opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
-              w.start);
-          } else {
-            tl.fromTo(wsel,
-              { opacity: 0, y: 6, scale: 1.04 },
-              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
-                ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
-              w.start);
-          }
-        });
-        if (g.out < DUR) {
-          tl.to(sel, { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
-                g.out - 0.45);
-        }
-        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
-      }
-      GROUPS.forEach(animateGroup);
-      if (CROWN) animateGroup(CROWN);
-      tl.seek(0);
-      window.__timelines["main"] = tl;
-    </script>
-  </body>
-</html>
+<!doctype html>
+<!--
+  TEMPLATE: portrait-header
+  STYLE LOCKED. LAYOUT OPEN.
+  Look: 9:16 portrait talking-head, captions on a horizontal strip across
+  the top above the subject. Optional crown at bottom if waist+ visible.
+  Locked: 5 typography slots (intro/phrase/emph/dream/crown), screen blend,
+          single-caption swap (caps absolute-positioned in header strip).
+  Open via plan.json: header strip top/height, crown enable+top, font_scale.
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      :root { --font-scale: {{FONT_SCALE}}; }
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        overflow: hidden;
+        background: #000;
+        font-family: "Inter", system-ui, sans-serif;
+      }
+      #a-roll { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+      #stage {
+        position: absolute;
+        top: 0; left: 0;
+        width: {{WIDTH}}px; height: {{HEIGHT}}px;
+        pointer-events: none;
+        z-index: 2;
+      }
+      /* LAYOUT */
+      .header-plane {
+        position: absolute;
+        top: {{HEADER_TOP}}px;
+        left: 0; right: 0;
+        height: {{HEADER_HEIGHT}}px;
+        padding: 24px 40px;
+      }
+      .header-plane .cap {
+        position: absolute;
+        top: 24px;
+        left: 40px; right: 40px;
+        max-width: calc(100% - 80px);
+        text-align: center;
+      }
+      .crown-plane {
+        position: absolute;
+        top: {{CROWN_TOP}}px;
+        left: 0; right: 0;
+        text-align: center;
+        pointer-events: none;
+      }
+      /* STYLE (locked) */
+      .cap {
+        display: block;
+        position: relative;
+        line-height: 1.05;
+        opacity: 0;
+        mix-blend-mode: {{BLEND_MODE}};
+        color: {{CAP_COLOR}};
+        text-shadow: {{TEXT_SHADOW}};
+        filter: {{TEXT_FILTER}};
+        will-change: transform, opacity;
+      }
+      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
+      .cap-intro  { font-size: calc(72px * var(--font-scale));
+                    font-weight: 500; font-style: italic;
+                    letter-spacing: -0.005em; line-height: 1.1; }
+      .cap-phrase { font-size: calc(88px * var(--font-scale));
+                    font-weight: 600;
+                    letter-spacing: -0.015em; line-height: 1.05; }
+      .cap-emph   { font-size: calc(104px * var(--font-scale));
+                    font-weight: 800;
+                    letter-spacing: -0.025em; line-height: 1.0; }
+      .cap-dream  { font-size: calc(92px * var(--font-scale));
+                    font-weight: 700; font-style: italic;
+                    letter-spacing: -0.015em; line-height: 1.05; }
+      .cap-crown  { font-size: calc(130px * var(--font-scale));
+                    font-weight: 900;
+                    letter-spacing: -0.035em; text-transform: uppercase;
+                    line-height: 1.0; }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="{{DURATION}}"
+      data-width="{{WIDTH}}"
+      data-height="{{HEIGHT}}"
+    >
+      <video
+        id="a-roll"
+        src="source.mp4"
+        muted
+        playsinline
+        data-duration="{{DURATION}}"
+        data-track-index="0"
+        style="z-index: 1"
+      ></video>
+      <div id="stage">
+        <div class="header-plane">{{GROUPS_HTML}}</div>
+        <div class="crown-plane">{{CROWN_HTML}}</div>
+      </div>
+      <audio
+        id="a-roll-audio"
+        src="source.mp4"
+        data-start="0"
+        data-duration="{{DURATION}}"
+        data-track-index="3"
+        data-volume="1"
+      ></audio>
+    </div>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+      const DUR = {{DURATION}};
+      const GROUPS = {{GROUPS_JSON}};
+      const CROWN  = {{CROWN_JSON}};
+      function animateGroup(g) {
+        var sel = "#" + g.id;
+        var isSoft = g.tone === "soft";
+        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));
+        g.words.forEach(function (w, i) {
+          var wsel = sel + " .w[data-i='" + i + "']";
+          if (isSoft) {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.42, ease: "power2.out", overwrite: "auto" },
+              w.start);
+          } else {
+            tl.fromTo(wsel,
+              { opacity: 0, y: 6, scale: 1.04 },
+              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
+                ease: "power3.out", overwrite: "auto", transformOrigin: "50% 50%" },
+              w.start);
+          }
+        });
+        if (g.out < DUR) {
+          tl.to(sel, { opacity: 0, duration: 0.45, ease: "power2.in", overwrite: "auto" },
+                g.out - 0.45);
+        }
+        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
+      }
+      GROUPS.forEach(animateGroup);
+      if (CROWN) animateGroup(CROWN);
+      tl.seek(0);
+      window.__timelines["main"] = tl;
+    </script>
+  </body>
+</html>

package/assets/.agent/skills/embedded-captions/modes/cinematic/cinematic-cream/spec.md CHANGED Viewed

@@ -1,16 +1,16 @@
-# cinematic-cream — spec
-The authoritative spec lives in [template.html](template.html)'s header comment (DNA-only:
-what's LOCKED vs OPEN, the LAYOUT/planes contract, READING ORDER + hand-off, hero sizing).
-Read that header before authoring plan.json. Quick contract:
-- LOCKED: Inter, soft/present motion, warm-cream palette, screen blend, shadow logic.
-- OPEN per group (css field): size/weight/style/transform/spacing + position WITHIN a plane.
-- LAYOUT: run scripts/safe-zones.cjs first. Narration planes HUG the silhouette — use
-  zones.hugLeft/hugRight (2-6% gap from the subject's edge); a plane parked in the far
-  corner reads as disconnected floating text, not an embed. The ONE hero stays BIG
-  (~0.22-0.34·h) centered ON the subject (heroAnchor / heroBands.best), target ~30-55%
-  occlusion. fg is the LAST resort: only when heroBands.feasible=false (no band ≤62%).
-  hero BIG (~0.22-0.34·h) centered ON the subject (heroAnchor), target ~30-55% occlusion.
-- plan.json: groups[] with per-word transcript timings (use scripts/fill-timings.cjs),
-  fit via scripts/fit-fonts.cjs, compile via scripts/make-composition.cjs.
+# cinematic-cream — spec
+The authoritative spec lives in [template.html](template.html)'s header comment (DNA-only:
+what's LOCKED vs OPEN, the LAYOUT/planes contract, READING ORDER + hand-off, hero sizing).
+Read that header before authoring plan.json. Quick contract:
+- LOCKED: Inter, soft/present motion, warm-cream palette, screen blend, shadow logic.
+- OPEN per group (css field): size/weight/style/transform/spacing + position WITHIN a plane.
+- LAYOUT: run scripts/safe-zones.cjs first. Narration planes HUG the silhouette — use
+  zones.hugLeft/hugRight (2-6% gap from the subject's edge); a plane parked in the far
+  corner reads as disconnected floating text, not an embed. The ONE hero stays BIG
+  (~0.22-0.34·h) centered ON the subject (heroAnchor / heroBands.best), target ~30-55%
+  occlusion. fg is the LAST resort: only when heroBands.feasible=false (no band ≤62%).
+  hero BIG (~0.22-0.34·h) centered ON the subject (heroAnchor), target ~30-55% occlusion.
+- plan.json: groups[] with per-word transcript timings (use scripts/fill-timings.cjs),
+  fit via scripts/fit-fonts.cjs, compile via scripts/make-composition.cjs.