npm - @mevdragon/vidfarm-devcli - Versions diffs - 0.14.0 → 0.16.0 - Mend

@mevdragon/vidfarm-devcli 0.14.0 → 0.16.0

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

package/.agents/skills/talking-head-recut/references/styles/geom.html ADDED Viewed

@@ -0,0 +1,181 @@
+<!--
+  Style: geom — chartreuse + hot pink + black collision · bold Helvetica
+  ─────────────────────────────────────────────────────────────────────
+  Tokens
+    bg     #0a0a0a  (deep black for contrast)
+    ink    #ffffff
+    muted  #aaaaaa
+    accent #d4ff00  (chartreuse — primary slab)
+    accent2#ff2e88  (hot pink — secondary slab + dot)
+    accent3#ffffff  (white — line work)
+  Fonts
+    headline — Inter Black / ui-sans-serif with very wide weight
+    body     — Inter
+  Best with
+    layouts: pip, overlay, stack
+    frames:  clean, hairline
+    content: 产品发布 / 大胆宣言 / 撞色封面 / 短视频高光
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>style · geom</title>
+    <style>
+      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-geom">
+          <style>
+            .card[data-card-id="ref-geom"] .root {
+              --bg: #0a0a0a;
+              --ink: #ffffff;
+              --muted: #aaaaaa;
+              --accent: #d4ff00;
+              --accent2: #ff2e88;
+              --accent3: #ffffff;
+              --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+              --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+              width: 100%;
+              height: 100%;
+              position: relative;
+              overflow: hidden;
+              background: var(--bg);
+              color: var(--ink);
+              font-family: var(--font-sans);
+            }
+            .card[data-card-id="ref-geom"] .slab-1 {
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 540px;
+              height: 200px;
+              background: var(--accent);
+            }
+            .card[data-card-id="ref-geom"] .slab-2 {
+              position: absolute;
+              right: 0;
+              bottom: 0;
+              width: 360px;
+              height: 360px;
+              background: var(--accent2);
+            }
+            .card[data-card-id="ref-geom"] .stripe {
+              position: absolute;
+              left: -40px;
+              top: 760px;
+              height: 4px;
+              width: 600px;
+              background: var(--accent3);
+              transform: rotate(-6deg);
+            }
+            .card[data-card-id="ref-geom"] .content {
+              position: absolute;
+              left: 64px;
+              top: 240px;
+              right: 480px;
+              bottom: 80px;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              gap: 28px;
+            }
+            .card[data-card-id="ref-geom"] .kicker {
+              align-self: flex-start;
+              padding: 8px 14px;
+              background: var(--ink);
+              color: var(--bg);
+              font: 800 18px/1 var(--font-mono);
+              letter-spacing: 0.24em;
+            }
+            .card[data-card-id="ref-geom"] .title {
+              margin: 0;
+              font: 900 156px/0.92 var(--font-sans);
+              color: var(--ink);
+              letter-spacing: -0.04em;
+              text-transform: uppercase;
+            }
+            .card[data-card-id="ref-geom"] .stroke {
+              -webkit-text-stroke: 3px var(--accent);
+              color: transparent;
+            }
+            .card[data-card-id="ref-geom"] .detail {
+              margin: 0;
+              font: 600 26px/1.4 var(--font-sans);
+              color: var(--muted);
+              max-width: 88%;
+            }
+            .card[data-card-id="ref-geom"] .detail .pink {
+              color: var(--accent2);
+            }
+          </style>
+          <div class="root">
+            <span
+              class="slab-1"
+              data-anim="slide-in"
+              data-anim-at="0.1"
+              data-anim-duration="0.45"
+              data-anim-from="left"
+              data-anim-distance="540"
+            ></span>
+            <span
+              class="slab-2"
+              data-anim="slide-in"
+              data-anim-at="0.25"
+              data-anim-duration="0.45"
+              data-anim-from="right"
+              data-anim-distance="360"
+            ></span>
+            <span
+              class="stripe"
+              data-anim="grow-x"
+              data-anim-at="0.5"
+              data-anim-duration="0.5"
+              data-anim-target-w="600"
+            ></span>
+            <div class="content">
+              <span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
+                >TAKEAWAY</span
+              >
+              <h1 class="title" data-anim="fade-in" data-anim-at="0.55" data-anim-duration="0.5">
+                <span class="stroke">BIG</span><br />IDEA.
+              </h1>
+              <p class="detail" data-anim="fade-in" data-anim-at="0.95" data-anim-duration="0.4">
+                别再做温和的中间方案。要么<span class="pink">最大胆</span>，要么不做。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/.agents/skills/talking-head-recut/references/styles/minimal.html ADDED Viewed

@@ -0,0 +1,130 @@
+<!--
+  Style: minimal — pure black on white · huge type · generous space
+  ─────────────────────────────────────────────────────────────────────
+  Tokens
+    bg     #ffffff
+    ink    #000000
+    muted  #6b7280
+    accent #000000  (no color; weight & size do the work)
+  Fonts
+    headline & body — Inter, ui-sans-serif, system-ui, sans-serif
+  Best with
+    layouts: split, stack, overlay
+    frames:  clean, hairline
+    content: 极简陈述 / 数据揭示 / 大字标题
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>style · minimal</title>
+    <style>
+      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-minimal">
+          <style>
+            .card[data-card-id="ref-minimal"] .root {
+              --bg: #ffffff;
+              --ink: #000000;
+              --muted: #6b7280;
+              --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+              width: 100%;
+              height: 100%;
+              position: relative;
+              overflow: hidden;
+              background: var(--bg);
+              color: var(--ink);
+              padding: 80px 96px;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              gap: 56px;
+              font-family: var(--font-sans);
+            }
+            .card[data-card-id="ref-minimal"] .kicker {
+              font: 600 14px/1 var(--font-sans);
+              letter-spacing: 0.32em;
+              color: var(--ink);
+              text-transform: uppercase;
+            }
+            .card[data-card-id="ref-minimal"] .title {
+              margin: 0;
+              font: 900 132px/0.95 var(--font-sans);
+              color: var(--ink);
+              letter-spacing: -0.04em;
+            }
+            .card[data-card-id="ref-minimal"] .detail {
+              margin: 0;
+              font: 400 36px/1.4 var(--font-sans);
+              color: var(--muted);
+              max-width: 82%;
+              letter-spacing: -0.005em;
+            }
+            .card[data-card-id="ref-minimal"] .rule {
+              width: 0;
+              height: 4px;
+              background: var(--ink);
+            }
+          </style>
+          <div class="root">
+            <span class="kicker" data-anim="fade-in" data-anim-at="0.05" data-anim-duration="0.4"
+              >TAKEAWAY</span
+            >
+            <h1
+              class="title"
+              data-anim="kinetic-chars"
+              data-anim-at="0.3"
+              data-anim-duration="0.6"
+              data-anim-stagger="0.05"
+              data-anim-pattern="pop"
+            >
+              <span class="char">五</span><span class="char">秒</span><span class="char">决</span
+              ><span class="char">定</span> <span class="char">一</span><span class="char">切</span>
+            </h1>
+            <div
+              class="rule"
+              data-anim="grow-x"
+              data-anim-at="0.9"
+              data-anim-duration="0.5"
+              data-anim-target-w="240"
+            ></div>
+            <p class="detail" data-anim="fade-in" data-anim-at="1.05" data-anim-duration="0.45">
+              用户给一个新界面的时间不超过五秒。这意味着第一屏不需要解释，需要让人立刻知道这是什么、为什么有用。
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/.agents/skills/talking-head-recut/references/styles/spotlight.html ADDED Viewed

@@ -0,0 +1,142 @@
+<!--
+  Style: spotlight — dark purple gradient · violet glow · dramatic
+  ─────────────────────────────────────────────────────────────────────
+  Tokens
+    bg     radial-gradient deep purple-blue (#0e0a24 → #1b1648)
+    ink    #f5f3ff   (off-white)
+    muted  #b6b4d0
+    accent #a78bfa   (violet) — used as glow + kicker dot
+    accent2#7c6bff   (deeper violet) — used as outer-glow second layer
+  Fonts
+    headline — ui-serif fallback for serif drama; or Playfair-like
+    body     — ui-sans-serif
+  Best with
+    layouts: overlay, pip
+    frames:  clean (skip hairline/polaroid — clashes with glow)
+    content: 情绪故事 / 旁白 / 角色弧线 / 黑暗时刻
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>style · spotlight</title>
+    <style>
+      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-spotlight">
+          <style>
+            .card[data-card-id="ref-spotlight"] .root {
+              --ink: #f5f3ff;
+              --muted: #b6b4d0;
+              --accent: #a78bfa;
+              --accent2: #7c6bff;
+              --font-head: ui-serif, "Songti SC", serif;
+              --font-body: ui-sans-serif, system-ui, sans-serif;
+              --font-mono: ui-monospace, monospace;
+              width: 100%;
+              height: 100%;
+              position: relative;
+              overflow: hidden;
+              color: var(--ink);
+              font-family: var(--font-body);
+              background:
+                radial-gradient(70% 55% at 28% 30%, rgba(167, 139, 250, 0.35) 0%, transparent 55%),
+                radial-gradient(80% 70% at 80% 80%, rgba(124, 107, 255, 0.22) 0%, transparent 60%),
+                linear-gradient(160deg, #1b1648 0%, #0e0a24 100%);
+              padding: 48px 56px;
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              gap: 22px;
+            }
+            .card[data-card-id="ref-spotlight"] .meta {
+              display: flex;
+              align-items: center;
+              gap: 14px;
+            }
+            .card[data-card-id="ref-spotlight"] .kicker-dot {
+              width: 10px;
+              height: 10px;
+              border-radius: 50%;
+              background: var(--accent);
+              box-shadow:
+                0 0 18px var(--accent),
+                0 0 4px var(--accent);
+            }
+            .card[data-card-id="ref-spotlight"] .kicker {
+              font: 600 16px/1 var(--font-mono);
+              letter-spacing: 0.26em;
+              color: var(--accent);
+            }
+            .card[data-card-id="ref-spotlight"] .title {
+              margin: 0;
+              font: 800 104px/1.05 var(--font-head);
+              color: var(--ink);
+              letter-spacing: -0.005em;
+              text-shadow: 0 4px 60px rgba(167, 139, 250, 0.45);
+            }
+            .card[data-card-id="ref-spotlight"] .hl {
+              color: var(--accent);
+              text-shadow: 0 0 24px rgba(167, 139, 250, 0.7);
+            }
+            .card[data-card-id="ref-spotlight"] .detail {
+              margin: 0;
+              font: 28px/1.55 var(--font-body);
+              color: var(--muted);
+              max-width: 88%;
+            }
+          </style>
+          <div class="root">
+            <div class="meta">
+              <span
+                class="kicker-dot"
+                data-anim="scale-pop"
+                data-anim-at="0.05"
+                data-anim-duration="0.4"
+              ></span>
+              <span class="kicker" data-anim="fade-in" data-anim-at="0.1" data-anim-duration="0.4"
+                >TAKEAWAY</span
+              >
+            </div>
+            <h2 class="title" data-anim="blur-in" data-anim-at="0.3" data-anim-duration="0.7">
+              在最暗的房间里，<span class="hl">一道光</span>就够了。
+            </h2>
+            <p class="detail" data-anim="fade-in" data-anim-at="1.0" data-anim-duration="0.5">
+              所有伟大决定都是在不确定的时候做出的。怕的不是黑，是不敢点亮那一根火柴。
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/.agents/skills/talking-head-recut/references/styles/swiss.html ADDED Viewed

@@ -0,0 +1,188 @@
+<!--
+  Style: swiss — pure white · Helvetica · strict double rules · red accent slab
+  ─────────────────────────────────────────────────────────────────────
+  Tokens
+    bg     #ffffff
+    ink    #111111
+    muted  #555555
+    accent #e8190f   (signal red — slab + number)
+  Fonts
+    headline & body — Helvetica / Inter / system sans
+  Best with
+    layouts: split, stack, overlay
+    frames:  clean, hairline
+    content: 严肃陈述 / 排版主导 / 文化机构 / 极简数据
+-->
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>style · swiss</title>
+    <style>
+      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-swiss">
+          <style>
+            .card[data-card-id="ref-swiss"] .root {
+              --bg: #ffffff;
+              --ink: #111111;
+              --muted: #555555;
+              --accent: #e8190f;
+              --font-sans:
+                "Helvetica Neue", Helvetica, "Inter", ui-sans-serif, system-ui, sans-serif;
+              --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+              width: 100%;
+              height: 100%;
+              position: relative;
+              overflow: hidden;
+              background: var(--bg);
+              color: var(--ink);
+              font-family: var(--font-sans);
+              padding: 48px 64px;
+              box-sizing: border-box;
+              display: grid;
+              grid-template-rows: auto 1fr auto;
+              gap: 24px;
+            }
+            .card[data-card-id="ref-swiss"] .top-rule {
+              height: 4px;
+              background: var(--ink);
+            }
+            .card[data-card-id="ref-swiss"] .top-meta {
+              display: flex;
+              justify-content: space-between;
+              align-items: baseline;
+              padding-top: 12px;
+              font: 700 14px/1 var(--font-mono);
+              letter-spacing: 0.26em;
+              color: var(--ink);
+              text-transform: uppercase;
+            }
+            .card[data-card-id="ref-swiss"] .top-meta .num {
+              color: var(--accent);
+            }
+            .card[data-card-id="ref-swiss"] .body {
+              display: grid;
+              grid-template-columns: 1fr 320px;
+              gap: 56px;
+              align-items: end;
+            }
+            .card[data-card-id="ref-swiss"] .title {
+              margin: 0;
+              font: 700 116px/0.95 var(--font-sans);
+              color: var(--ink);
+              letter-spacing: -0.025em;
+            }
+            .card[data-card-id="ref-swiss"] .title .red {
+              color: var(--accent);
+            }
+            .card[data-card-id="ref-swiss"] .detail {
+              margin: 0;
+              font: 400 24px/1.45 var(--font-sans);
+              color: var(--muted);
+            }
+            .card[data-card-id="ref-swiss"] .slab {
+              background: var(--accent);
+              color: #fff;
+              padding: 24px 28px;
+              font: 700 56px/1 var(--font-sans);
+              letter-spacing: -0.02em;
+              align-self: end;
+            }
+            .card[data-card-id="ref-swiss"] .slab small {
+              display: block;
+              font: 600 14px/1 var(--font-mono);
+              letter-spacing: 0.18em;
+              margin-top: 6px;
+              color: rgba(255, 255, 255, 0.85);
+            }
+            .card[data-card-id="ref-swiss"] .bottom-rule {
+              height: 1px;
+              background: var(--ink);
+            }
+            .card[data-card-id="ref-swiss"] .bottom-meta {
+              display: flex;
+              justify-content: space-between;
+              align-items: baseline;
+              padding-top: 12px;
+              font: 600 13px/1 var(--font-mono);
+              letter-spacing: 0.22em;
+              color: var(--muted);
+            }
+          </style>
+          <div class="root">
+            <div>
+              <div
+                class="top-rule"
+                data-anim="grow-x"
+                data-anim-at="0.05"
+                data-anim-duration="0.45"
+                data-anim-target-w="1792"
+              ></div>
+              <div
+                class="top-meta"
+                data-anim="fade-in"
+                data-anim-at="0.3"
+                data-anim-duration="0.35"
+              >
+                <span>V—TAKE / TAKEAWAY</span>
+                <span class="num">№ 09</span>
+              </div>
+            </div>
+            <div class="body">
+              <h2 class="title" data-anim="fade-in" data-anim-at="0.45" data-anim-duration="0.55">
+                <span class="red">设计</span>不是装饰，<br />而是结构。
+              </h2>
+              <div
+                class="slab"
+                data-anim="slide-in"
+                data-anim-at="0.55"
+                data-anim-duration="0.45"
+                data-anim-from="right"
+                data-anim-distance="120"
+              >
+                92<small>STRUCTURE INDEX</small>
+              </div>
+            </div>
+            <div>
+              <div class="bottom-rule"></div>
+              <div class="bottom-meta">
+                <span>RATIO 1 : 1.618</span>
+                <span>00:42 → 01:14</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>