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/talking-head-recut/references/styles/academic.html CHANGED Viewed

@@ -1,172 +1,172 @@
-<!--
-  Style: academic — warm paper · serif · blue highlight · coral annotation
-  ─────────────────────────────────────────────────────────────────────
-  Tokens
-    bg     #f1ead8   (warm paper)
-    ink    #1a1d2b
-    muted  #5b5749
-    accent #2557a7   (blue, used for kicker chip + text highlight)
-    accent2#c14d2c   (coral, used for dashed quote box)
-  Fonts
-    headline & body — serif. Falls back to "ui-serif, 'Songti SC', serif"
-    mono — "ui-monospace, monospace"
-  Best with
-    layouts: split, stack, pip
-    frames:  clean, hairline
-    content: 访谈反思 / 学术总结 / 长视频拆解
--->
-<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="utf-8" />
-    <title>style · academic</title>
-    <style>
-      /* preview wrapper — NOT part of the card fragment */
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-        background: #0a0c12;
-        font-family: ui-sans-serif, system-ui, sans-serif;
-      }
-      .stage {
-        position: relative;
-        width: 1920px;
-        height: 1080px;
-        transform-origin: top left;
-        transform: scale(0.5);
-        overflow: hidden;
-      }
-      .card-host {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 1920px;
-        height: 1080px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="stage">
-      <div class="card-host">
-        <div class="card" data-card-id="ref-academic">
-          <style>
-            .card[data-card-id="ref-academic"] .root {
-              --bg: #f1ead8;
-              --ink: #1a1d2b;
-              --muted: #5b5749;
-              --accent: #2557a7;
-              --accent2: #c14d2c;
-              --font-head: ui-serif, "Songti SC", "Times New Roman", serif;
-              --font-body: ui-serif, "Songti SC", "Times New Roman", serif;
-              --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
-              width: 100%;
-              height: 100%;
-              position: relative;
-              overflow: hidden;
-              background-color: var(--bg);
-              background-image:
-                linear-gradient(rgba(91, 87, 73, 0.2) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(91, 87, 73, 0.2) 1px, transparent 1px),
-                radial-gradient(120% 80% at 50% 0%, #fff8e9 0%, transparent 60%);
-              background-size:
-                28px 28px,
-                28px 28px,
-                100% 100%;
-              padding: 32px 40px;
-              box-sizing: border-box;
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              gap: 16px;
-              color: var(--ink);
-              font-family: var(--font-body);
-            }
-            .card[data-card-id="ref-academic"] .meta {
-              display: flex;
-              align-items: baseline;
-              gap: 14px;
-            }
-            .card[data-card-id="ref-academic"] .kicker {
-              padding: 7px 14px;
-              background: var(--accent);
-              color: #fff;
-              font: 700 16px/1 var(--font-mono);
-              letter-spacing: 0.16em;
-            }
-            .card[data-card-id="ref-academic"] .time {
-              font: 15px/1 var(--font-mono);
-              color: var(--muted);
-              letter-spacing: 0.1em;
-            }
-            .card[data-card-id="ref-academic"] .title {
-              margin: 0;
-              font: 700 92px/1.05 var(--font-head);
-              color: var(--ink);
-              letter-spacing: 0.01em;
-              display: inline;
-              background: linear-gradient(
-                transparent 62%,
-                rgba(37, 87, 167, 0.2) 62%,
-                rgba(37, 87, 167, 0.2) 92%,
-                transparent 92%
-              );
-              -webkit-box-decoration-break: clone;
-              box-decoration-break: clone;
-              padding: 0 8px;
-            }
-            .card[data-card-id="ref-academic"] .detail {
-              margin: 0;
-              font: 30px/1.5 var(--font-body);
-              color: var(--muted);
-              max-width: 94%;
-            }
-            .card[data-card-id="ref-academic"] .hl {
-              background: linear-gradient(transparent 60%, rgba(37, 87, 167, 0.25) 60%);
-              padding: 0 4px;
-            }
-            .card[data-card-id="ref-academic"] .quote {
-              align-self: flex-start;
-              padding: 10px 18px;
-              border: 1.5px dashed var(--accent2);
-              color: var(--accent2);
-              font: italic 600 24px/1 var(--font-head);
-              transform: rotate(-1deg);
-            }
-          </style>
-          <div class="root">
-            <div class="meta">
-              <span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
-                >TAKEAWAY</span
-              >
-              <span class="time">00:18 → 00:46</span>
-            </div>
-            <h2
-              class="title"
-              data-anim="kinetic-chars"
-              data-anim-at="0.25"
-              data-anim-duration="0.55"
-              data-anim-stagger="0.04"
-              data-anim-pattern="pop"
-            >
-              <span class="char">少</span><span class="char">即</span><span class="char">是</span>
-              <span class="char">多</span>
-            </h2>
-            <p class="detail" data-anim="fade-in" data-anim-at="0.7" data-anim-duration="0.45">
-              复杂的解释往往是<span class="hl">未经压缩的思考</span
-              >。当你能用最少的词说清最重要的点时， 你也就真正想明白了这件事。
-            </p>
-            <div class="quote" data-anim="scale-pop" data-anim-at="1.05" data-anim-duration="0.5">
-              "Compression is comprehension."
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
+<!--
+  Style: academic — warm paper · serif · blue highlight · coral annotation
+  ─────────────────────────────────────────────────────────────────────
+  Tokens
+    bg     #f1ead8   (warm paper)
+    ink    #1a1d2b
+    muted  #5b5749
+    accent #2557a7   (blue, used for kicker chip + text highlight)
+    accent2#c14d2c   (coral, used for dashed quote box)
+  Fonts
+    headline & body — serif. Falls back to "ui-serif, 'Songti SC', serif"
+    mono — "ui-monospace, monospace"
+  Best with
+    layouts: split, stack, pip
+    frames:  clean, hairline
+    content: 访谈反思 / 学术总结 / 长视频拆解
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>style · academic</title>
+    <style>
+      /* preview wrapper — NOT part of the card fragment */
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        background: #0a0c12;
+        font-family: ui-sans-serif, system-ui, sans-serif;
+      }
+      .stage {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        transform-origin: top left;
+        transform: scale(0.5);
+        overflow: hidden;
+      }
+      .card-host {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="stage">
+      <div class="card-host">
+        <div class="card" data-card-id="ref-academic">
+          <style>
+            .card[data-card-id="ref-academic"] .root {
+              --bg: #f1ead8;
+              --ink: #1a1d2b;
+              --muted: #5b5749;
+              --accent: #2557a7;
+              --accent2: #c14d2c;
+              --font-head: ui-serif, "Songti SC", "Times New Roman", serif;
+              --font-body: ui-serif, "Songti SC", "Times New Roman", serif;
+              --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+              width: 100%;
+              height: 100%;
+              position: relative;
+              overflow: hidden;
+              background-color: var(--bg);
+              background-image:
+                linear-gradient(rgba(91, 87, 73, 0.2) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(91, 87, 73, 0.2) 1px, transparent 1px),
+                radial-gradient(120% 80% at 50% 0%, #fff8e9 0%, transparent 60%);
+              background-size:
+                28px 28px,
+                28px 28px,
+                100% 100%;
+              padding: 32px 40px;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              gap: 16px;
+              color: var(--ink);
+              font-family: var(--font-body);
+            }
+            .card[data-card-id="ref-academic"] .meta {
+              display: flex;
+              align-items: baseline;
+              gap: 14px;
+            }
+            .card[data-card-id="ref-academic"] .kicker {
+              padding: 7px 14px;
+              background: var(--accent);
+              color: #fff;
+              font: 700 16px/1 var(--font-mono);
+              letter-spacing: 0.16em;
+            }
+            .card[data-card-id="ref-academic"] .time {
+              font: 15px/1 var(--font-mono);
+              color: var(--muted);
+              letter-spacing: 0.1em;
+            }
+            .card[data-card-id="ref-academic"] .title {
+              margin: 0;
+              font: 700 92px/1.05 var(--font-head);
+              color: var(--ink);
+              letter-spacing: 0.01em;
+              display: inline;
+              background: linear-gradient(
+                transparent 62%,
+                rgba(37, 87, 167, 0.2) 62%,
+                rgba(37, 87, 167, 0.2) 92%,
+                transparent 92%
+              );
+              -webkit-box-decoration-break: clone;
+              box-decoration-break: clone;
+              padding: 0 8px;
+            }
+            .card[data-card-id="ref-academic"] .detail {
+              margin: 0;
+              font: 30px/1.5 var(--font-body);
+              color: var(--muted);
+              max-width: 94%;
+            }
+            .card[data-card-id="ref-academic"] .hl {
+              background: linear-gradient(transparent 60%, rgba(37, 87, 167, 0.25) 60%);
+              padding: 0 4px;
+            }
+            .card[data-card-id="ref-academic"] .quote {
+              align-self: flex-start;
+              padding: 10px 18px;
+              border: 1.5px dashed var(--accent2);
+              color: var(--accent2);
+              font: italic 600 24px/1 var(--font-head);
+              transform: rotate(-1deg);
+            }
+          </style>
+          <div class="root">
+            <div class="meta">
+              <span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
+                >TAKEAWAY</span
+              >
+              <span class="time">00:18 → 00:46</span>
+            </div>
+            <h2
+              class="title"
+              data-anim="kinetic-chars"
+              data-anim-at="0.25"
+              data-anim-duration="0.55"
+              data-anim-stagger="0.04"
+              data-anim-pattern="pop"
+            >
+              <span class="char">少</span><span class="char">即</span><span class="char">是</span>
+              <span class="char">多</span>
+            </h2>
+            <p class="detail" data-anim="fade-in" data-anim-at="0.7" data-anim-duration="0.45">
+              复杂的解释往往是<span class="hl">未经压缩的思考</span
+              >。当你能用最少的词说清最重要的点时， 你也就真正想明白了这件事。
+            </p>
+            <div class="quote" data-anim="scale-pop" data-anim-at="1.05" data-anim-duration="0.5">
+              "Compression is comprehension."
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>