agent-trellis 0.8.0 → 0.9.0

package/docs/video/generate-video-ai.mjs

@@ -0,0 +1,334 @@
+// AI-generated demo video: MiniMax Hailuo dynamic clips + MiniMax Speech TTS
+// + caption overlays, assembled to a 1080x1920 vertical mp4.
+// Run: node docs/video/generate-video-ai.mjs
+// Requires MINIMAX_API_KEY in ~/.trellis/mcp/servers.local.env and ffmpeg.
+import { execFileSync } from "node:child_process";
+import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const repoRoot = dirname(dirname(dirname(fileURLToPath(import.meta.url))));
+const buildDir = join(repoRoot, "docs/video/build-ai");
+const clipsDir = join(buildDir, "clips");
+const audioDir = join(buildDir, "audio");
+const segDir = join(buildDir, "segments");
+const outputFile = join(repoRoot, "docs/video/trellis-demo-video-ai.mp4");
+for (const dir of [clipsDir, audioDir, segDir]) mkdirSync(dir, { recursive: true });
+
+const API = "https://api.minimax.cn";
+const apiKey = (() => {
+  const envFile = readFileSync(join(process.env.HOME, ".trellis/mcp/servers.local.env"), "utf-8");
+  return envFile.match(/^MINIMAX_API_KEY=(.+)$/m)?.[1]?.trim();
+})();
+if (!apiKey) throw new Error("MINIMAX_API_KEY not found in ~/.trellis/mcp/servers.local.env");
+const headers = { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json" };
+
+const posterB64 = readFileSync(join(repoRoot, "docs/assets/poster-series-v3/agent-trellis-poster-v3-unified-zh.png")).toString("base64");
+
+// ---------------------------------------------------------------------------
+// First frames drawn with our own diagram language (same motifs as the
+// poster series) so every AI clip animates something the video actually says.
+// ---------------------------------------------------------------------------
+
+const INK = "#161c24";
+const PAPER = "#fafaf8";
+const MUTED = "#69727d";
+const ACCENT = "#3457d5";
+const TEAL = "#0c7d6c";
+
+const hatchLines = (x, y, w, h, spacing) => {
+  const lines = [];
+  const span = Math.ceil((w + h) / spacing) + 1;
+  for (let k = -span; k <= span; k += 1) {
+    const x0 = x + k * spacing;
+    lines.push(`<path d="M${x0} ${y + h} L${x0 + h} ${y}"/><path d="M${x0} ${y} L${x0 + h} ${y + h}"/>`);
+  }
+  return lines.join("");
+};
+
+const latticePanel = (id, x, y, w, h, rx, strokeWidth) => `<g fill="none">
+  <defs><clipPath id="${id}"><rect x="${x + 8}" y="${y + 8}" width="${w - 16}" height="${h - 16}" rx="${Math.max(rx - 6, 4)}"/></clipPath></defs>
+  <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${rx}" stroke="${INK}" stroke-width="${strokeWidth}"/>
+  <g clip-path="url(#${id})" stroke="${MUTED}" stroke-width="2.4" opacity="0.85">${hatchLines(x + 8, y + 8, w - 16, h - 16, 24)}</g>
+</g>`;
+
+const agentNode = (x, y, label) => `
+  <rect x="${x - 16}" y="${y - 16}" width="32" height="32" rx="8" fill="none" stroke="${INK}" stroke-width="4"/>
+  <text x="${x}" y="${y + 46}" text-anchor="middle" font-family="Menlo, monospace" font-size="19" letter-spacing="1" fill="${MUTED}">${label}</text>`;
+
+const FRAME_W = 1920;
+const FRAME_H = 1080;
+
+const glowDefs = `<defs>
+  <radialGradient id="glow" cx="50%" cy="50%" r="55%">
+    <stop offset="0%" stop-color="#3457d5" stop-opacity="0.22"/>
+    <stop offset="100%" stop-color="#3457d5" stop-opacity="0"/>
+  </radialGradient>
+  <radialGradient id="warmglow" cx="50%" cy="50%" r="55%">
+    <stop offset="0%" stop-color="#c2410c" stop-opacity="0.16"/>
+    <stop offset="100%" stop-color="#c2410c" stop-opacity="0"/>
+  </radialGradient>
+</defs>`;
+
+const firstFrameSvgs = {
+  "02-pain": `${glowDefs}<rect width="${FRAME_W}" height="${FRAME_H}" fill="url(#warmglow)"/><g transform="translate(0 ${(FRAME_W - FRAME_H) / 2})">
+    ${agentNode(420, 360, "CLAUDE")}
+    ${agentNode(960, 620, "CODEX")}
+    ${agentNode(1420, 300, "KIMI")}
+    <g fill="none" stroke="#c2410c" stroke-width="4" stroke-dasharray="10 12" opacity="0.85">
+      <path d="M470 380 C 640 420 760 520 900 580"/>
+      <path d="M1000 590 C 1150 520 1280 400 1370 340"/>
+    </g>
+    <g fill="none" stroke="${MUTED}" stroke-width="2.5" opacity="0.9">
+      <rect x="330" y="470" width="70" height="52" rx="6"/><rect x="430" y="500" width="70" height="52" rx="6"/>
+      <rect x="880" y="720" width="70" height="52" rx="6"/><rect x="990" y="740" width="70" height="52" rx="6"/>
+      <rect x="1340" y="420" width="70" height="52" rx="6"/><rect x="1450" y="450" width="70" height="52" rx="6"/>
+    </g>
+  </g>`,
+  "03-solution": `${glowDefs}<rect width="${FRAME_W}" height="${FRAME_H}" fill="url(#glow)"/><g transform="translate(0 ${(FRAME_W - FRAME_H) / 2})">
+    ${agentNode(260, 340, "CLAUDE")}${agentNode(260, 540, "CODEX")}${agentNode(260, 740, "KIMI")}
+    ${latticePanel("ff-sol", 810, 330, 300, 340, 26, 5)}
+    <g fill="none" stroke="${ACCENT}" stroke-width="5">
+      <path d="M292 340 C 520 340 600 420 810 420"/>
+      <path d="M292 540 H810"/>
+      <path d="M292 740 C 520 740 600 660 810 660"/>
+      <path d="M1110 430 H1660 M1110 540 H1660 M1110 650 H1660"/>
+    </g>
+    <g fill="${ACCENT}">${[430, 540, 650].map((y) => `<circle cx="1672" cy="${y}" r="18" opacity="0.25"/><circle cx="1672" cy="${y}" r="10"/>`).join("")}</g>
+  </g>`,
+  "04-how": `${glowDefs}<rect width="${FRAME_W}" height="${FRAME_H}" fill="url(#glow)"/><g transform="translate(0 ${(FRAME_W - FRAME_H) / 2})">
+    <rect x="240" y="430" width="280" height="240" rx="18" fill="none" stroke="${MUTED}" stroke-width="4" stroke-dasharray="12 10"/>
+    <g stroke="${MUTED}" stroke-width="3.5" stroke-linecap="round">
+      ${[490, 550, 610].map((y) => `<circle cx="282" cy="${y}" r="6" fill="${MUTED}" stroke="none"/><path d="M306 ${y} H 476"/>`).join("")}
+    </g>
+    <g fill="none" stroke="${ACCENT}" stroke-width="6"><path d="M520 550 H700"/><path d="M900 550 H1080"/></g>
+    <path d="M688 536 L712 550 L688 564 Z" fill="${ACCENT}"/>
+    <path d="M1068 536 L1092 550 L1068 564 Z" fill="${ACCENT}"/>
+    <circle cx="800" cy="550" r="52" fill="none" stroke="${TEAL}" stroke-width="7"/>
+    <path d="M774 550 l18 20 l36 -42" fill="none" stroke="${TEAL}" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>
+    ${latticePanel("ff-how", 1120, 400, 260, 300, 24, 5)}
+  </g>`,
+  "05-safe": `${glowDefs}<rect width="${FRAME_W}" height="${FRAME_H}" fill="url(#glow)"/><g transform="translate(0 ${(FRAME_W - FRAME_H) / 2})">
+    <path d="M280 380 H1640" fill="none" stroke="${MUTED}" stroke-width="4"/>
+    <path d="M280 720 H1640" fill="none" stroke="${MUTED}" stroke-width="4"/>
+    <path d="M280 380 H700 C 940 380 980 720 1220 720 H1640" fill="none" stroke="${ACCENT}" stroke-width="7" stroke-linecap="round"/>
+    <path d="M280 368 V392 M1640 368 V392 M280 708 V732 M1640 708 V732" fill="none" stroke="${MUTED}" stroke-width="3.5"/>
+    <circle cx="1560" cy="720" r="34" fill="none" stroke="#c2410c" stroke-width="4" opacity="0.5"/>
+    <circle cx="1560" cy="720" r="20" fill="none" stroke="#c2410c" stroke-width="4"/>
+    <circle cx="1560" cy="720" r="11" fill="#c2410c"/>
+  </g>`,
+};
+
+const quickLookDir = "/tmp/trellis-video-ai-ql";
+mkdirSync(quickLookDir, { recursive: true });
+const renderFirstFrame = (id, body) => {
+  const svgPath = join(quickLookDir, `${id}.svg`);
+  writeFileSync(svgPath, `<svg xmlns="http://www.w3.org/2000/svg" width="${FRAME_W}" height="${FRAME_W}" viewBox="0 0 ${FRAME_W} ${FRAME_W}"><rect width="${FRAME_W}" height="${FRAME_W}" fill="${PAPER}"/>${body}</svg>`);
+  execFileSync("qlmanage", ["-t", "-s", "1920", "-o", quickLookDir, svgPath], { stdio: "ignore" });
+  const out = join(buildDir, `first-frame-${id}.png`);
+  execFileSync("sips", ["--cropToHeightWidth", String(FRAME_H), String(FRAME_W), join(quickLookDir, `${id}.svg.png`), "--out", out], { stdio: "ignore" });
+  return readFileSync(out).toString("base64");
+};
+
+const firstFrames = Object.fromEntries(Object.entries(firstFrameSvgs).map(([id, body]) => [id, `data:image/png;base64,${renderFirstFrame(id, body)}`]));
+
+if (process.env.FRAMES_ONLY === "1") {
+  console.log("first frames rendered to", buildDir);
+  process.exit(0);
+}
+
+const scenes = [
+  {
+    id: "01-hook",
+    caption: "谁懂啊！Code Agent 装了一堆\n配置全乱套",
+    narration: "家人们，谁懂啊！电脑里装了好几个 Code Agent，技能、插件、配置各管各的，乱到崩溃。今天分享一个开源小工具，Trellis。",
+    prompt: "镜头缓慢推近，白色海报上的黑色线条棚架字母T标志活了过来，线条发出柔和的靛蓝色微光，光点沿线条流动拖尾，细线如藤蔓生长延伸，柔和光晕，高级感科技风",
+    firstFrame: `data:image/png;base64,${posterB64}`,
+    duration: 6,
+  },
+  {
+    id: "02-pain",
+    caption: "同一个技能\n要复制好几遍",
+    narration: "同一个技能想给所有 Agent 用，得复制好几遍；改个配置，得挨个文件去改，谁改谁知道。",
+    prompt: "保持原有构图，几个方块节点各自独立闪烁，周围漂浮的文件卡片轻轻晃动，节点之间的橙色虚线忽明忽暗最后断开，缓慢运镜，柔和光晕，电影感",
+    firstFrame: firstFrames["02-pain"],
+    duration: 6,
+  },
+  {
+    id: "03-solution",
+    caption: "改一处，全部生效",
+    narration: "Trellis 就把配置收拢到一个地方统一管，自动发给每个 Agent。改一处，全都生效。",
+    prompt: "保持原有构图，靛蓝色发光光点从左侧三个节点沿曲线流向中央的网格面板，光线拖尾，网格面板被逐层点亮发出柔光，右侧三颗光点依次亮起，电影感光效",
+    firstFrame: firstFrames["03-solution"],
+    duration: 6,
+  },
+  {
+    id: "04-how",
+    caption: "一条命令，直接开始",
+    narration: "用法也简单：安装就一行，onboard 一条命令直接开始，不用先做任何准备。",
+    prompt: "保持原有构图，靛蓝色发光光点从左侧虚线框流出，沿箭头经过发光的绿色对勾，流入右侧网格面板，光线拖尾持续流动，面板微微发亮，电影感光效",
+    firstFrame: firstFrames["04-how"],
+    duration: 6,
+  },
+  {
+    id: "05-safe",
+    caption: "不满意？一键退回",
+    narration: "它会先问你两个问题，然后自动迁移、同步，每步先备份。不满意，rollback 一键退回。",
+    prompt: "保持原有构图，橙色发光圆点沿S形曲线从上方轨道平稳滑向下方轨道并继续前进，靛蓝色光线沿轨道流动拖尾，圆点逆流回退一次再前进，丝滑动效，电影感光晕",
+    firstFrame: firstFrames["05-safe"],
+    duration: 10,
+  },
+  {
+    id: "06-closing",
+    caption: "开源免费，链接在简介",
+    narration: "经常在多个 Code Agent 之间切换，或者想迁移到新 Agent 的朋友，希望这个工具能帮到你。链接在简介，冲。",
+    prompt: "纯净浅色背景中央，黑色细线条构成的字母T标志，横梁是精致的网格纹理，细线如藤蔓缓慢生长缠绕又舒展，边缘泛起柔和靛蓝色光晕，极简优雅，高级感",
+    duration: 6,
+  },
+];
+
+// ---------------------------------------------------------------------------
+// MiniMax Hailuo video generation (async task API).
+// ---------------------------------------------------------------------------
+
+const submitTask = async (scene) => {
+  const body = {
+    model: "MiniMax-Hailuo-02",
+    prompt: scene.prompt,
+    duration: scene.duration,
+    resolution: scene.duration > 6 ? "768P" : "1080P",
+    prompt_optimizer: true,
+    ...(scene.firstFrame ? { first_frame_image: scene.firstFrame } : {}),
+  };
+  const response = await fetch(`${API}/v1/video_generation`, { method: "POST", headers, body: JSON.stringify(body) });
+  const data = await response.json();
+  if (data.base_resp?.status_code !== 0 || !data.task_id) {
+    throw new Error(`submit ${scene.id} failed: ${data.base_resp?.status_msg ?? JSON.stringify(data).slice(0, 300)}`);
+  }
+  return data.task_id;
+};
+
+const pollTask = async (scene, taskId) => {
+  const clipPath = join(clipsDir, `${scene.id}.mp4`);
+  const deadline = Date.now() + 12 * 60_000;
+  while (Date.now() < deadline) {
+    await new Promise((resolve) => setTimeout(resolve, 10_000));
+    const response = await fetch(`${API}/v1/query/video_generation?task_id=${taskId}`, { headers });
+    const data = await response.json();
+    if (data.status === "Success" && data.file_id) {
+      const fileResponse = await fetch(`${API}/v1/files/retrieve?file_id=${data.file_id}`, { headers });
+      const fileData = await fileResponse.json();
+      const url = fileData.file?.download_url;
+      if (!url) throw new Error(`${scene.id}: no download_url in retrieve response`);
+      execFileSync("curl", ["-sSL", url, "-o", clipPath], { timeout: 300_000 });
+      return clipPath;
+    }
+    if (data.status === "Failed") throw new Error(`${scene.id}: generation failed`);
+  }
+  throw new Error(`${scene.id}: timed out waiting for generation`);
+};
+
+console.log("[1/4] generating AI clips with Hailuo (cached clips are reused)...");
+const pending = [];
+for (const scene of scenes) {
+  const clipPath = join(clipsDir, `${scene.id}.mp4`);
+  if (existsSync(clipPath)) {
+    scene.clip = clipPath;
+    console.log(`  ${scene.id}: cached`);
+    continue;
+  }
+  // Persist the task id right after submit so a rerun can resume polling
+  // instead of paying for a duplicate generation.
+  const taskFile = join(clipsDir, `${scene.id}.task`);
+  pending.push((async () => {
+    let taskId = existsSync(taskFile) ? readFileSync(taskFile, "utf-8").trim() : null;
+    if (!taskId) {
+      taskId = await submitTask(scene);
+      writeFileSync(taskFile, taskId);
+      console.log(`  ${scene.id}: task ${taskId} submitted`);
+    } else {
+      console.log(`  ${scene.id}: resuming task ${taskId}`);
+    }
+    scene.clip = await pollTask(scene, taskId);
+    rmSync(taskFile, { force: true });
+    console.log(`  ${scene.id}: downloaded`);
+  })());
+}
+await Promise.all(pending);
+
+// ---------------------------------------------------------------------------
+// TTS narration.
+// ---------------------------------------------------------------------------
+
+console.log("[2/4] synthesizing narration...");
+const audioDuration = (file) => {
+  const info = execFileSync("afinfo", [file], { encoding: "utf-8" });
+  return Number(info.match(/estimated duration: ([\d.]+)/)?.[1] ?? 3);
+};
+for (const scene of scenes) {
+  scene.audio = join(audioDir, `${scene.id}.mp3`);
+  if (existsSync(scene.audio)) {
+    scene.ttsSeconds = audioDuration(scene.audio);
+    console.log(`  ${scene.id}: cached ${scene.ttsSeconds.toFixed(1)}s`);
+    continue;
+  }
+  const body = JSON.stringify({
+    model: "speech-2.6-hd",
+    text: scene.narration,
+    voice_setting: { voice_id: "male-qn-jingying", speed: 1.2, vol: 1, pitch: 0 },
+    audio_setting: { format: "mp3", sample_rate: 44100, channel: 1 },
+  });
+  const response = execFileSync("curl", ["-sS", "-X", "POST", `${API}/v1/t2a_v2`, "-H", `Authorization: Bearer ${apiKey}`, "-H", "Content-Type: application/json", "-d", body], { encoding: "utf-8", maxBuffer: 64 * 1024 * 1024, timeout: 120_000 });
+  const parsed = JSON.parse(response);
+  if (parsed.base_resp?.status_code !== 0 || !parsed.data?.audio) {
+    throw new Error(`TTS ${scene.id} failed: ${parsed.base_resp?.status_msg ?? response.slice(0, 300)}`);
+  }
+  writeFileSync(scene.audio, Buffer.from(parsed.data.audio, "hex"));
+  scene.ttsSeconds = audioDuration(scene.audio);
+  console.log(`  ${scene.id}: ${scene.ttsSeconds.toFixed(1)}s`);
+}
+
+// ---------------------------------------------------------------------------
+// Per-scene segment: landscape clip → blurred-fill 1080x1920 + caption + TTS.
+// ---------------------------------------------------------------------------
+
+console.log("[3/4] assembling segments...");
+// This ffmpeg build has no drawtext filter, so captions are rendered as
+// white-on-black full-frame PNGs (qlmanage handles CJK perfectly) and
+// composited with a screen blend — black vanishes, text stays.
+const renderCaption = (scene) => {
+  const lines = scene.caption.split("\n");
+  const lineWidth = (s) => [...s].reduce((w, ch) => w + (/[^\x00-\xff]/.test(ch) ? 58 : 32), 0);
+  const pillW = Math.min(Math.max(...lines.map(lineWidth)) + 116, 1000);
+  const pillH = (lines.length - 1) * 68 + 100;
+  const svgPath = join(quickLookDir, `cap-${scene.id}.svg`);
+  const text = lines.map((line, i) => `<text x="100" y="${160 + i * 68}" font-family="PingFang SC, sans-serif" font-size="56" font-weight="800" fill="${INK}">${line.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")}</text>`).join("");
+  writeFileSync(svgPath, `<svg xmlns="http://www.w3.org/2000/svg" width="${FRAME_W}" height="${FRAME_W}" viewBox="0 0 ${FRAME_W} ${FRAME_W}"><rect width="${FRAME_W}" height="${FRAME_W}" fill="#00ff00"/><g transform="translate(0 ${(FRAME_W - FRAME_H) / 2})"><rect x="44" y="88" width="${pillW}" height="${pillH}" rx="18" fill="#ffffff" opacity="0.94"/><rect x="64" y="112" width="10" height="${(lines.length - 1) * 68 + 52}" fill="${ACCENT}"/>${text}</g></svg>`);
+  execFileSync("qlmanage", ["-t", "-s", "1920", "-o", quickLookDir, svgPath], { stdio: "ignore" });
+  const out = join(segDir, `cap-${scene.id}.png`);
+  execFileSync("sips", ["--cropToHeightWidth", String(FRAME_H), String(FRAME_W), join(quickLookDir, `cap-${scene.id}.svg.png`), "--out", out], { stdio: "ignore" });
+  return out;
+};
+
+for (const scene of scenes) {
+  const captionPng = renderCaption(scene);
+  const filter = [
+    "[0:v]split[va][vb]",
+    "[va]scale=1080:1920:force_original_aspect_ratio=increase,crop=1080:1920,boxblur=24[bg]",
+    "[vb]scale=1080:-2[fg]",
+    "[bg][fg]overlay=(W-w)/2:(H-h)/2,format=yuv420p[base]",
+    "[1:v]colorkey=0x00ff00:0.3:0.25[capa]",
+    "[base][capa]overlay=0:0[out]",
+  ].join(";");
+  execFileSync("ffmpeg", ["-y", "-i", scene.clip, "-loop", "1", "-i", captionPng, "-i", scene.audio, "-filter_complex", filter, "-map", "[out]", "-map", "2:a",
+    "-c:v", "libx264", "-preset", "medium", "-crf", "20", "-pix_fmt", "yuv420p",
+    "-c:a", "aac", "-b:a", "160k", "-ar", "44100", "-shortest", join(segDir, `${scene.id}.mp4`)], { stdio: "ignore" });
+}
+
+console.log("[4/4] final concat...");
+const finalList = join(segDir, "final.txt");
+writeFileSync(finalList, scenes.map((scene) => `file '${join(segDir, `${scene.id}.mp4`)}'`).join("\n") + "\n");
+if (existsSync(outputFile)) rmSync(outputFile);
+execFileSync("ffmpeg", ["-y", "-f", "concat", "-safe", "0", "-i", finalList, "-c", "copy", "-movflags", "+faststart", outputFile], { stdio: "ignore" });
+
+console.log(`Done: ${outputFile}`);

package/docs/video/generate-video-posters.mjs

@@ -0,0 +1,204 @@
+// Poster-motion demo video: our own posters + slow Ken Burns moves + caption
+// pills + MiniMax TTS. No AI video generation — zero API cost on reruns.
+// Run: node docs/video/generate-video-posters.mjs
+import { execFileSync } from "node:child_process";
+import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const repoRoot = dirname(dirname(dirname(fileURLToPath(import.meta.url))));
+const buildDir = join(repoRoot, "docs/video/build-posters");
+const audioDir = join(buildDir, "audio");
+const segDir = join(buildDir, "segments");
+const quickLookDir = "/tmp/trellis-video-posters-ql";
+const outputFile = join(repoRoot, "docs/video/trellis-demo-video.mp4");
+for (const dir of [audioDir, segDir, quickLookDir]) mkdirSync(dir, { recursive: true });
+
+const FRAME_W = 1920; // square canvas for qlmanage
+const CARD_W = 1080;
+const CARD_H = 1920;
+const INK = "#161c24";
+const PAPER = "#fafaf8";
+const MUTED = "#69727d";
+const ACCENT = "#3457d5";
+
+const poster = (slug) => join(repoRoot, `docs/assets/poster-series-v3/agent-trellis-poster-v3-${slug}-zh.png`);
+
+const scenes = [
+  {
+    id: "01-hook",
+    card: "opening",
+    caption: "谁懂啊！Code Agent 装了一堆\n配置全乱套",
+    narration: "家人们，谁懂啊！电脑里装了好几个 Code Agent，技能、插件、配置各管各的，乱到崩溃。今天分享一个开源小工具，Trellis。",
+    move: "out",
+  },
+  {
+    id: "02-pain",
+    image: poster("migrate"),
+    caption: "同一个技能\n要复制好几遍",
+    narration: "同一个技能想给所有 Agent 用，得复制好几遍；改个配置，得挨个文件去改，谁改谁知道。",
+    move: "out",
+  },
+  {
+    id: "03-solution",
+    image: poster("unified"),
+    caption: "改一处，全部生效",
+    narration: "Trellis 就把配置收拢到一个地方统一管，自动发给每个 Agent。改一处，全都生效。",
+    move: "in",
+  },
+  {
+    id: "04-how",
+    image: poster("switch"),
+    caption: "一条命令，直接开始",
+    narration: "用法也简单：安装就一行，onboard 一条命令直接开始，不用先做任何准备。",
+    move: "out",
+  },
+  {
+    id: "05-safe",
+    image: poster("memory"),
+    caption: "不满意？一键退回",
+    narration: "它会先问你两个问题，然后自动迁移、同步，每步先备份。不满意，rollback 一键退回。",
+    move: "in",
+  },
+  {
+    id: "06-closing",
+    card: "closing",
+    caption: "开源免费，链接在简介",
+    narration: "经常在多个 Code Agent 之间切换，或者想迁移到新 Agent 的朋友，希望这个工具能帮到你。链接在简介，冲。",
+    move: "out",
+  },
+];
+
+// ---------------------------------------------------------------------------
+// Brand cards (opening / closing) and caption pills, rendered via qlmanage.
+// ---------------------------------------------------------------------------
+
+const hatchLines = (x, y, w, h, spacing) => {
+  const lines = [];
+  const span = Math.ceil((w + h) / spacing) + 1;
+  for (let k = -span; k <= span; k += 1) {
+    const x0 = x + k * spacing;
+    lines.push(`<path d="M${x0} ${y + h} L${x0 + h} ${y}"/><path d="M${x0} ${y} L${x0 + h} ${y + h}"/>`);
+  }
+  return lines.join("");
+};
+
+const logoMark = (x, y, scale, color = INK) => `<g transform="translate(${x} ${y}) scale(${scale})" fill="none" stroke="${color}" stroke-linecap="round">
+  <defs><clipPath id="beam-${x}"><rect x="21" y="23" width="54" height="9" rx="4.5"/></clipPath></defs>
+  <rect x="16" y="18" width="64" height="18" rx="9" stroke-width="5.5"/>
+  <g stroke-width="2.6" clip-path="url(#beam-${x})">${hatchLines(25.5, 23, 54, 9, 18)}</g>
+  <path d="M48 36 V78" stroke-width="8"/>
+</g>`;
+
+const cardText = (value, x, y, options = {}) => {
+  const { size = 40, weight = 400, fill = INK, anchor = "start", family = "Helvetica Neue, PingFang SC, sans-serif", letterSpacing = 0 } = options;
+  return String(value).split("\n").map((line, i) =>
+    `<text x="${x}" y="${y + i * Math.round(size * 1.35)}" text-anchor="${anchor}" font-family="${family}" font-size="${size}" font-weight="${weight}" letter-spacing="${letterSpacing}" fill="${fill}">${line.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")}</text>`).join("");
+};
+
+const cardSvg = (kind) => {
+  const bg = `<rect width="${FRAME_W}" height="${FRAME_W}" fill="${PAPER}"/><g transform="translate(${(FRAME_W - CARD_W) / 2} 0)">`;
+  if (kind === "opening") return `${bg}
+    ${logoMark(444, 560, 2)}
+    ${cardText("Trellis", 540, 920, { size: 92, weight: 800, anchor: "middle", letterSpacing: -1 })}
+    ${cardText("一个 Runtime，统一所有 Code Agent", 540, 986, { size: 36, weight: 450, fill: MUTED, anchor: "middle" })}
+    <rect x="460" y="1030" width="160" height="5" fill="${ACCENT}"/>
+  </g>`;
+  return `${bg}
+    ${logoMark(444, 530, 2)}
+    ${cardText("开源 · MIT", 540, 890, { size: 72, weight: 800, anchor: "middle" })}
+    ${cardText("早期版本，欢迎试用，欢迎 Issue", 540, 958, { size: 34, fill: MUTED, anchor: "middle" })}
+    <rect x="150" y="1030" width="780" height="80" rx="14" fill="none" stroke="${INK}" stroke-width="3"/>
+    ${cardText("github.com/paul-leo/Trellis", 540, 1083, { size: 36, weight: 500, family: "Menlo, monospace", anchor: "middle" })}
+  </g>`;
+};
+
+const renderPng = (name, svgBody) => {
+  const svgPath = join(quickLookDir, `${name}.svg`);
+  writeFileSync(svgPath, `<svg xmlns="http://www.w3.org/2000/svg" width="${FRAME_W}" height="${FRAME_W}" viewBox="0 0 ${FRAME_W} ${FRAME_W}">${svgBody}</svg>`);
+  execFileSync("qlmanage", ["-t", "-s", "1920", "-o", quickLookDir, svgPath], { stdio: "ignore" });
+  const out = join(buildDir, `${name}.png`);
+  execFileSync("sips", ["--cropToHeightWidth", String(CARD_H), String(CARD_W), join(quickLookDir, `${name}.svg.png`), "--out", out], { stdio: "ignore" });
+  return out;
+};
+
+// Caption pill on a green key background (nothing else in the pill is green).
+const renderCaption = (scene) => {
+  const lines = scene.caption.split("\n");
+  const lineWidth = (s) => [...s].reduce((w, ch) => w + (/[^\x00-\xff]/.test(ch) ? 58 : 32), 0);
+  const pillW = Math.min(Math.max(...lines.map(lineWidth)) + 116, 1000);
+  const pillH = (lines.length - 1) * 68 + 100;
+  const text = lines.map((line, i) => `<text x="100" y="${160 + i * 68}" font-family="PingFang SC, sans-serif" font-size="56" font-weight="800" fill="${INK}">${line.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")}</text>`).join("");
+  return renderPng(`cap-${scene.id}`, `<rect width="${FRAME_W}" height="${FRAME_W}" fill="#00ff00"/><g transform="translate(${(FRAME_W - CARD_W) / 2} 0)"><rect x="44" y="88" width="${pillW}" height="${pillH}" rx="18" fill="#ffffff" opacity="0.94"/><rect x="64" y="112" width="10" height="${(lines.length - 1) * 68 + 52}" fill="${ACCENT}"/>${text}</g>`);
+};
+
+console.log("[1/3] rendering cards and captions...");
+for (const scene of scenes) {
+  scene.still = scene.card ? renderPng(`card-${scene.id}`, cardSvg(scene.card)) : scene.image;
+  scene.captionPng = renderCaption(scene);
+}
+
+// ---------------------------------------------------------------------------
+// TTS (MiniMax Speech; cached per scene id).
+// ---------------------------------------------------------------------------
+
+console.log("[2/3] synthesizing narration...");
+const apiKey = readFileSync(join(process.env.HOME, ".trellis/mcp/servers.local.env"), "utf-8").match(/^MINIMAX_API_KEY=(.+)$/m)?.[1]?.trim();
+const audioDuration = (file) => {
+  const info = execFileSync("afinfo", [file], { encoding: "utf-8" });
+  return Number(info.match(/estimated duration: ([\d.]+)/)?.[1] ?? 3);
+};
+for (const scene of scenes) {
+  scene.audio = join(audioDir, `${scene.id}.mp3`);
+  if (!existsSync(scene.audio)) {
+    if (!apiKey) throw new Error("MINIMAX_API_KEY not found");
+    const body = JSON.stringify({
+      model: "speech-2.6-hd",
+      text: scene.narration,
+      voice_setting: { voice_id: "male-qn-jingying", speed: 1.05, vol: 1, pitch: 0 },
+      audio_setting: { format: "mp3", sample_rate: 44100, channel: 1 },
+    });
+    const response = execFileSync("curl", ["-sS", "-X", "POST", "https://api.minimax.cn/v1/t2a_v2", "-H", `Authorization: Bearer ${apiKey}`, "-H", "Content-Type: application/json", "-d", body], { encoding: "utf-8", maxBuffer: 64 * 1024 * 1024, timeout: 120_000 });
+    const parsed = JSON.parse(response);
+    if (parsed.base_resp?.status_code !== 0 || !parsed.data?.audio) {
+      throw new Error(`TTS ${scene.id} failed: ${parsed.base_resp?.status_msg ?? response.slice(0, 300)}`);
+    }
+    writeFileSync(scene.audio, Buffer.from(parsed.data.audio, "hex"));
+  }
+  scene.ttsSeconds = audioDuration(scene.audio);
+  scene.duration = Math.max(scene.ttsSeconds + 1.2, 6);
+  console.log(`  ${scene.id}: ${scene.ttsSeconds.toFixed(1)}s narration, ${scene.duration.toFixed(1)}s segment`);
+}
+
+// ---------------------------------------------------------------------------
+// Segments: blur-fill 1080x1920 + slow zoompan + caption key overlay + TTS.
+// ---------------------------------------------------------------------------
+
+console.log("[3/3] assembling segments...");
+for (const scene of scenes) {
+  const frames = Math.ceil(scene.duration * 30);
+  const zoom = scene.move === "in"
+    ? `z='min(zoom+0.0006,1.16)':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)'`
+    : `z='if(lte(on,1),1.16,max(pzoom-0.0006,1.0))':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)'`;
+  const filter = [
+    "[0:v]split[va][vb]",
+    "[va]scale=1080:1920:force_original_aspect_ratio=increase,crop=1080:1920,gblur=sigma=30[bg]",
+    "[vb]scale=1080:-2[fg]",
+    "[bg][fg]overlay=(W-w)/2:(H-h)/2[base]",
+    `[base]zoompan=${zoom}:d=${frames}:s=1080x1920:fps=30[moved]`,
+    "[1:v]colorkey=0x00ff00:0.22:0.15[capa]",
+    "[moved][capa]overlay=0:0[out]",
+  ].join(";");
+  execFileSync("ffmpeg", ["-y", "-loop", "1", "-framerate", "30", "-i", scene.still, "-loop", "1", "-framerate", "30", "-i", scene.captionPng, "-i", scene.audio,
+    "-filter_complex", filter, "-map", "[out]", "-map", "2:a",
+    "-c:v", "libx264", "-preset", "medium", "-crf", "20", "-pix_fmt", "yuv420p",
+    "-c:a", "aac", "-b:a", "160k", "-ar", "44100", "-t", String(scene.duration), join(segDir, `${scene.id}.mp4`)], { stdio: "ignore" });
+}
+
+const finalList = join(segDir, "final.txt");
+writeFileSync(finalList, scenes.map((scene) => `file '${join(segDir, `${scene.id}.mp4`)}'`).join("\n") + "\n");
+if (existsSync(outputFile)) rmSync(outputFile);
+execFileSync("ffmpeg", ["-y", "-f", "concat", "-safe", "0", "-i", finalList, "-c", "copy", "-movflags", "+faststart", outputFile], { stdio: "ignore" });
+
+console.log(`Done: ${outputFile}`);
+console.log(`Scenes: ${scenes.length}, total ~${scenes.reduce((sum, s) => sum + s.duration, 0).toFixed(0)}s`);