explainer-default

默认说明文案

一支沉稳、高端的产品演示视频，就像资金充足的初创公司放在首页上的那种。它的诀窍全在于克制：明亮通透的画面，每次只呈现一行简短文案，并将产品自己的界面重新精心构建，在使用过程中以近景拍摄。镜头负责讲故事：推近一行文字，跟随打字过程移动，拉远展示结果，再平滑过渡到下一个功能。

将其写成一个 HTML 页面，根据时间值渲染任意一帧，然后添加运动模糊和配乐，渲染为 MP4。

步骤 1：获取需求（发一条消息，然后开始）

在一条消息中问完所有问题，然后自行开始制作。只有产品信息是必需的；其他留空的部分由你自行决定，并说明你的选择。

1. 产品：名称，以及用几句话说明它的用途。最好提供网站 URL。
2. 观众必须记住的一件事（例如“输入一个想法，获得一个实时应用”）。
3. 品牌：颜色、字体、Logo 文件，或“使用网站上的素材”。如果没有，就使用下方的默认配色。
4. 格式：16:9（1920×1080）或 9:16（1080×1920）。默认为 16:9。
5. 时长：此风格的默认时长见下文。
6. 音乐：提供自有曲目（文件路径），或由你合成。默认：合成。
7. 方向（可选）：他们希望展示的场景、标语、行动号召，以及任何需要避免的内容。

如果他们提供了 URL，请先读取该网站（通过网页抓取），了解产品的真实措辞、功能、颜色和字体名称，再开始撰写。UI 标签和标语应使用他们的真实用语。

绝不编造事实。 不得虚构客户数量、收入、评分、推荐语或引言。只有用户或网站明确提及的数字才能使用；否则请使用相对进度条、进度展示和占位骨架线。UI 中的示例内容（提示词、文件名、项目名、收据上的价格）可以合理可信；但关于产品本身的说法（统计数据、用户数量、评分、优惠，例如“免费”）不能编造。行动号召只能使用用户或网站提供的 URL 或优惠信息；如果没有，就以名称和标语收尾。

Logo。 只有在用户提供文件，或这是他们自己的产品且他们明确要求使用时，才使用 Logo。否则，以品牌字体显示名称。第三方 Logo（集成服务）只有在用户提供时才使用；否则使用带圆角的中性方块并标注名称。

还要询问（可选）：希望展示的 3–5 个功能或工作流步骤，以及产品连接的服务（集成）。如果他们提供了 URL，请从网站获取这些信息。

此风格的默认时长：60 秒。范围为 45–90 秒。根据时长分配篇幅（优先删减可选部分）：

时长	功能	可选部分
45 秒	2–3 个，每个约 9 秒	证明或集成，二选一
60 秒	3–4 个，每个约 10 秒	证明或集成，二选一
90 秒	4–5 个，每个约 12 秒	两者

步骤 2：撰写脚本，然后制作

结构

先写好脚本和节拍表：每一行屏幕文字、紧随其后的 UI 画面，以及对应时长；将时长加总，并与上文的预算核对。屏幕文字是唯一的“声音”，因此必须独自讲好故事。

场景与摄像机如何配合： 每个场景（一行标题、一段 UI 画面）都是独立图层，各自拥有摄像机。在场景内，摄像机推近、跟随并拉远；场景之间，上一图层带着短暂模糊效果（0.3–0.4 秒）溶解到下一图层，而下一图层已经开始移动。

1. 开场（0–5 秒）。 纯浅色画布。中央淡入一个小词：Introducing。随后溶解过渡到品牌画面：柔和的品牌渐变扫入（丝绸般的斜向光带缓缓漂移），Logo 或名称小巧地居中显示。
2. 问题或需求（约 5 秒）。 一句观众熟悉的话（还在手动构建潜在客户名单吗？），或者直接展示产品输入界面：一个大型圆角输入框，里面为空，显示占位文字，下方有建议标签。
3. 功能章节（3–5 个，每个约 8–15 秒）。 每个章节包括：
   • 标题句： 一句简短的话，小号字体（1080p 下约 28 px），在纯色画布上居中显示。文字逐词打出或淡入。然后摄像机推近，直到这句话占据画面宽度的约 75%，并为一个关键词或短语添加高亮：一块柔和的品牌色方框从左向右扫过文字背景（直接联系决策者。）。
   • UI 画面： 产品的真实界面，以简洁的矢量 UI 形式重建（不要使用截图），裁剪出最重要的部分并放大显示。摄像机近距离跟随，让元素占据画面的大部分，并跟随操作移动：文字输入到输入框时（摄像机跟随光标；使用 measureText 测量文字，以确定光标位置）、Agent 的步骤逐一完成（旋转指示器 → 勾选标记，找到 247 个匹配结果）、结果卡片逐张叠加，远处的卡片模糊显示（景深）、表格逐行填充、光标点击单元格按钮并显示结果、新增一列，每个单元格先出现思考时的微光效果，再显示结果、弹出包含推理过程和来源的弹窗。
   • 拉远： 操作完成后，摄像机平滑拉远，短暂停留以展示整个屏幕，让观众了解当前所在位置，然后继续移动。
4. 证明（可选，仅使用真实数字）。 一句带数字的话，数字递增显示，并加以高亮（由包含 3 亿多份资料的数据库提供支持），背景是低调的点状地球或网格。
5. 集成（可选）。 居中显示 专为融入现有工作流而打造。，同时 8–12 个应用图块（圆角方块；仅在提供了真实 Logo 时使用）从不同深度的画面边缘飘入；如果集成选项较少，可重复展示。近处的图块较大且略微模糊，远处的图块较小且清晰，所有图块都带有视差效果漂移。这里让文字自行放大，而不是通过摄像机推近，这样图块就能留在画面内。
6. 结尾段。 在品牌渐变背景上显示一句话，其中的高亮词轮换展示不同用途（在 Product 中完成所有[潜在客户开发 / 研究 / 外联]。）；只有当产品确实支持时，才展示另一种使用方式（例如，为带有 Claude 连接器的产品展示 或者直接询问 Claude）；最后展示标语，并高亮其中的关键词组。
7. 结束卡片（3 秒）。 在品牌渐变背景上显示 Logo 或名称，下方小字显示 URL 或行动号召。

营造高级质感的规则

• 一次只呈现一件事。 屏幕上最多只能有一行文字和一个 UI 元素。文字与 UI 几乎从不同时出现在同一画面中：先是文字场景，再是 UI 场景。
• 镜头就是编辑器。 不要硬切。每次场景切换都通过镜头移动（推进、拉远、滑动）或在纯色画布上柔和地模糊溶解来完成。镜头移动采用平滑缓动（ease，持续 0.6–1.2 s）或阻尼很强的弹簧（z ≥ 0.95）；绝不弹跳。
• 真实 UI，简洁呈现。 根据你对产品的了解（或其网站）重建产品界面：保留真实的布局、标签、颜色、字体和圆角，并简化到场景所需的程度。界面内容使用符合产品情境、可信的示例数据。使用柔和阴影、1 px 边框和充足留白。
• 光标： 使用普通的 macOS 风格箭头，沿柔和曲线移动，在点击前稍作停顿，点击时轻轻下压，并在被点击的控件上出现柔和涟漪。悬停状态要有变化。
• 字体： 已知品牌字体时就使用；否则使用 Inter 或 Geist。标题行使用小号常规字重（通过镜头放大，而非增大字号）。大字要收紧字距。
• 默认配色： 画布 #F7F7F8，文字 #111114，次要文字 #8A8A94，UI 表面为白色，边框为 #E7E7EC，品牌强调色为 #2E6BFF，高亮框使用不透明度为 15–20% 的强调色。品牌渐变：白色 → 浅强调色 → 强调色，呈现缓慢的对角丝带效果（在画布上绘制，而不是使用 CSS 模糊）。使用品牌色替代强调色。
• 节奏： 每行标题落定后停留约 2 s；UI 操作按真实速度进行（打字速度约为每秒 25 个字符），每个结果出现后暂停 0.5 s，让观众有时间阅读。
• 禁止： UI 背后使用杂乱背景、使用多于一种强调色、弹跳缓动、表情符号、夸张的投影、到处使用玻璃拟态、编造指标或推荐语。

声音

使用 100–110 BPM 的振奋柔和背景音乐（轻柔的钢琴或拨弦和弦、开场后加入轻打击乐，结尾部分逐渐增强），安静而温暖。音效要轻巧：打字时加入按键轻响、柔和的点击声、每完成一个步骤时加入轻微的“滴”声、镜头大幅移动时加入柔和的呼啸声，片尾卡片出现时加入轻柔的钟声。音乐应像精心制作的产品视频中的背景音乐，而不是主导视频。

页面必须如何构建

使用一个独立的 HTML 文件（内嵌 CSS 和 JS；仅在用户提供图片时使用图片）。使用 DOM + CSS 变换、SVG 或一个全屏画布绘制，选择最合适的方式。

页面规范

• window.VIDEO = {w, h, duration} 和 window.seek(t) 必须是时间的纯函数：它会将每个元素设为时间 t（秒）时的状态。不使用 CSS 过渡或动画，不使用 setTimeout，也不保留上一帧的状态。任何帧都必须能够单独以任意顺序正确渲染。在 seek 中测量布局（例如 offsetLeft、measureText）没有问题；这类测量是确定性的。
• 随机效果（颗粒、粒子、音频中的噪声）必须来自带种子的生成器，绝不使用 Math.random。
• 任何需要历史状态的内容（例如跟随移动物体的延迟摄像机、模拟）都必须在加载时预先烘焙一次：以 1/240 秒为步长，从 0 模拟到 duration，存储数值，并让 seek 通过插值读取这些数值。对于循环，应从循环开始时的状态启动模拟（参见该风格的接缝规则）。
• 循环： seek(t) 使用 t % duration；跨越接缝的效果（例如落地挤压、声音尾音）必须在两端绘制或混合。
• URL 中带有 ?render 时：不显示控件、不缩放预览；舞台在左上角，尺寸严格为 w × h。不带 ?render 时：使用 CSS 缩放舞台以适应窗口，并显示预览控件。
• 嵌入字体。 下载 woff2 文件（来自 Google Fonts 或品牌字体），并将其以内嵌 base64 的 @font-face 形式放入页面，确保渲染时不会悄然回退到其他字体。若要改变字重，使用带有字重范围（[email protected]）的可变字体。
• 图层： 场景图层使用透明背景，并由其后的一个舞台背景提供底色，这样后续图层就不会意外遮住前面的图层。绝对定位的文本需设置 white-space: nowrap。
• 速度： 大面积 CSS filter: blur() 和大范围模糊渐变会大幅拖慢截图渲染。应在加载时将渐变和光效绘制到画布（或作为图像），然后移动它们。

辅助代码：粘贴以下代码，并基于它们构建

// damped spring step response 0 -> 1. w = speed (8 slow, 14 normal, 22 snappy), z = damping (1 = no overshoot)
function spring(t, w = 14, z = 0.82) {
  if (t <= 0) return 0;
  if (z >= 1) return 1 - Math.exp(-w * t) * (1 + w * t);
  const wd = w * Math.sqrt(1 - z * z);
  return 1 - Math.exp(-z * w * t) * (Math.cos(wd * t) + (z * w / wd) * Math.sin(wd * t));
}
// a value that changes target many times, springing to each: track(start, [[time, value, w?, z?], ...]) -> f(t)
const track = (v0, keys) => t => { let v = v0, p = v0; for (const [tk, val, w, z] of keys) { v += (val - p) * spring(t - tk, w, z); p = val; } return v; };
// precise eased keyframes (best for camera moves): kf([[t0, v0], [t1, v1, easeFn?], ...]) -> f(t)
const kf = keys => t => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) { const [a, va] = keys[i - 1], [b, vb, e = ease] = keys[i]; if (t <= b) return lerp(va, vb, e((t - a) / (b - a))); } return keys[keys.length - 1][1]; };
const clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x));
const ease = x => (x = clamp(x), x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2);   // easeInOutCubic
const lerp = (a, b, k) => a + (b - a) * k;
const seg = (t, a, b) => clamp((t - a) / (b - a));      // 0..1 progress of t through [a, b]
const rng = s => () => (s = (s + 0x6D2B79F5) | 0, s = Math.imul(s ^ (s >>> 15), 1 | s), s ^= s + Math.imul(s ^ (s >>> 7), 61 | s), ((s ^ (s >>> 14)) >>> 0) / 4294967296);

• 打字效果：可见字符串为 full.slice(0, n(t))，光标根据 t 闪烁。递增计数：格式化 lerp(a, b, ease(seg(t, …)))。
• 摄像机是一个包装元素，其 transform: translate() scale() rotate() 由 kf 或 track 驱动。

声音

• window.buildAudio(ctx) 会使用与视觉效果相同的时间线数值，从时间 0 开始，基于传入的 AudioContext 或 OfflineAudioContext 调度整段音轨（音乐 + 音效）。使用振荡器、滤波噪声（来自带种子的缓冲区）和包络合成声音。如果用户提供了音乐文件，则使用 fetch + decodeAudioData 加载，将节拍网格设为其节奏（测量节奏），并仅在音乐上叠加音效。
• **预览播放：**首次播放时，将音轨渲染到缓冲区一次，然后从任意拖动位置开始播放。时钟驱动 seek：

let buf, ac, src, startAt = 0, offset = 0, playing = false;
async function play() {
  ac ??= new AudioContext();
  if (!buf) { const off = new OfflineAudioContext(2, Math.ceil(48000 * VIDEO.duration), 48000); await buildAudio(off); buf = await off.startRendering(); }
  src = ac.createBufferSource(); src.buffer = buf; src.connect(ac.destination);
  src.start(0, offset % VIDEO.duration); startAt = ac.currentTime; playing = true;
}
function pause() { if (!playing) return; offset += ac.currentTime - startAt; src.stop(); playing = false; }
function now() { return playing ? (offset + ac.currentTime - startAt) % VIDEO.duration : offset; }
(function loop() { seek(now()); requestAnimationFrame(loop); })();   // the scrubber sets offset (pause, set, play)

• 在脚本顶部用注释写出节拍表：每个时刻占一行，注明时间、发生的内容和对应的声音。

第 3 步：检查、渲染、交付

在工作文件夹中进行一次性设置：npm i playwright，如果尚未安装 Chromium，则运行 npx playwright install chromium；ffmpeg 必须位于 PATH 中。将本文末尾的脚本保存为 render.mjs。

1. 静帧。 运行 node render.mjs demo.html check.png --stills 0.5,1.2,…，每个节拍表行对应一个时间点（表格以可读大小显示，每行 3 项）。查看图像。修复任何被裁切、重叠、难以辨认、不符合品牌风格、构图不佳或空白的内容。再次检查。
2. 草稿。 运行 node render.mjs demo.html draft.mp4 30 1 4（速度快：30 fps、无运动模糊、4 个并行工作线程；将最后一个数字设为机器的核心数）。这是审阅版：将它与 HTML 一起发给用户，并在最终版制作前征求修改意见。
3. 最终版。 运行 node render.mjs demo.html demo.mp4 60 4 8。运动模糊会按子帧数成倍增加渲染时间；60 秒的最终版在笔记本电脑上可能需要 20–60 分钟，因此开始前请说明这一点。此命令会生成 demo.mp4（音频响度标准化至约 −16 LUFS）和 demo_silent.mp4。
4. 交付 HTML（用户可以实时拖动播放进度）、MP4 文件和一段简短说明：节拍表、占位内容以及第二版需要修改的内容。用一句话提供一个备选方向。

// render.mjs: turn a seek(t) page into an MP4 with motion blur and its own audio.
//   node render.mjs page.html out.mp4 [fps=60] [subframes=4] [workers=4]
//   node render.mjs page.html sheet.png --stills 0.5,1.2,3   (full-size contact sheet for checking)
// Optional: window.buildAudio(ctx) schedules the soundtrack on any (Offline)AudioContext.
import { chromium } from 'playwright';
import { spawn } from 'node:child_process';
import { writeFileSync, mkdirSync, rmSync } from 'node:fs';
import path from 'node:path';
import { pathToFileURL } from 'node:url';

const [, , html, out, a3 = '60', a4 = '4', a5 = '4'] = process.argv;
if (!html || !out) { console.log('usage: node render.mjs page.html out.mp4 [fps] [subframes] [workers]'); process.exit(1); }
const run = (args) => new Promise((res, rej) => { const p = spawn('ffmpeg', args, { stdio: 'inherit' }); p.on('close', c => c ? rej(new Error('ffmpeg ' + c)) : res()); });
const url = pathToFileURL(path.resolve(html)).href + '?render';
const proxy = process.env.HTTPS_PROXY || process.env.https_proxy;
const browser = await chromium.launch({ args: ['--allow-file-access-from-files'], ...(proxy ? { proxy: { server: proxy } } : {}) });

// Read the size first, then open every page at exactly that size (pages that measure themselves on load stay correct).
const probe = await browser.newPage();
await probe.goto(url);
await probe.waitForFunction(() => window.VIDEO && typeof window.seek === 'function');
const V = await probe.evaluate(() => window.VIDEO);
await probe.close();

async function openPage() {
  const page = await browser.newPage({ viewport: { width: V.w, height: V.h }, deviceScaleFactor: 1 });
  await page.goto(url);
  await page.waitForFunction(() => window.VIDEO && typeof window.seek === 'function');
  // load every declared font, even ones only used by scenes hidden at t=0
  const bad = await page.evaluate(async () => {
    await Promise.all([...document.fonts].map(f => f.load().catch(() => {})));
    await document.fonts.ready;
    return [...document.fonts].filter(f => f.status !== 'loaded').map(f => f.family);
  });
  if (bad.length) console.warn('WARNING: fonts did not load (fallback in use):', [...new Set(bad)].join(', '), '- embed them as base64.');
  return page;
}
const shot = async (page, t) => { await page.evaluate(t => window.seek(t), t); return page.screenshot({ type: 'jpeg', quality: 95 }); };

if (a3 === '--stills') {
  const page = await openPage();
  const times = a4.split(',').map(Number), dir = out + '.frames';
  mkdirSync(dir, { recursive: true });
  for (let i = 0; i < times.length; i++) writeFileSync(`${dir}/${String(i).padStart(3, '0')}.jpg`, await shot(page, times[i]));
  await browser.close();
  const cols = Math.min(3, times.length), rows = Math.ceil(times.length / cols);
  await run(['-v', 'error', '-y', '-framerate', '1', '-i', `${dir}/%03d.jpg`, '-vf', `scale=${Math.min(960, V.w)}:-1,tile=${cols}x${rows}:padding=6:color=gray`, '-frames:v', '1', out]);
  rmSync(dir, { recursive: true });
  console.log('stills ->', out); process.exit(0);
}

const fps = +a3, sub = Math.max(1, +a4), workers = Math.max(1, +a5), N = Math.round(V.duration * fps);
const base = out.replace(/\.mp4$/, ''), silent = base + '_silent.mp4';
const vf = sub > 1 ? ['-vf', `tmix=frames=${sub},select='eq(mod(n\\,${sub})\\,${sub - 1})',setpts=N/(${fps}*TB)`] : [];
const t0 = Date.now(); let doneFrames = 0;
const per = Math.ceil(N / workers), segs = [];
await Promise.all(Array.from({ length: workers }, async (_, w) => {
  const a = w * per, b = Math.min(N, a + per); if (a >= b) return;
  const seg = `${base}_seg${w}.mp4`; segs[w] = seg;
  const page = await openPage();
  const ff = spawn('ffmpeg', ['-v', 'error', '-y', '-f', 'image2pipe', '-framerate', String(fps * sub), '-i', '-', ...vf,
    '-r', String(fps), '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-crf', '16', '-preset', 'medium', seg], { stdio: ['pipe', 'inherit', 'inherit'] });
  const closed = new Promise(r => ff.on('close', r));
  for (let f = a; f < b; f++) {
    for (let s = 0; s < sub; s++) {             // 180-degree shutter: sub-frames spread over half a frame
      const buf = await shot(page, (f + (sub > 1 ? (s / sub) * 0.5 : 0)) / fps);
      if (!ff.stdin.write(buf)) await new Promise(r => ff.stdin.once('drain', r));
    }
    if (++doneFrames % 30 === 0) process.stdout.write(`\r${doneFrames}/${N} frames  ${((Date.now() - t0) / 1000).toFixed(0)}s`);
  }
  ff.stdin.end(); await closed; await page.close();
}));
const list = base + '_segs.txt';
writeFileSync(list, segs.filter(Boolean).map(s => `file '${path.resolve(s)}'`).join('\n'));
await run(['-v', 'error', '-y', '-f', 'concat', '-safe', '0', '-i', list, '-c', 'copy', silent]);
segs.filter(Boolean).forEach(s => rmSync(s)); rmSync(list);
console.log(`\nvideo -> ${silent}  (${((Date.now() - t0) / 1000).toFixed(0)}s)`);

const page = await openPage();
const hasAudio = await page.evaluate(() => typeof window.buildAudio === 'function');
if (hasAudio) {
  const b64 = await page.evaluate(async (dur) => {
    const sr = 48000, ctx = new OfflineAudioContext(2, Math.ceil(sr * dur), sr);
    await window.buildAudio(ctx);
    const b = await ctx.startRendering(), L = b.getChannelData(0), R = b.getChannelData(b.numberOfChannels > 1 ? 1 : 0);
    const i16 = new Int16Array(L.length * 2);
    for (let i = 0; i < L.length; i++) { i16[2 * i] = Math.max(-1, Math.min(1, L[i])) * 32767; i16[2 * i + 1] = Math.max(-1, Math.min(1, R[i])) * 32767; }
    const u8 = new Uint8Array(i16.buffer); let s = '';
    for (let i = 0; i < u8.length; i += 0x8000) s += String.fromCharCode.apply(null, u8.subarray(i, i + 0x8000));
    return btoa(s);
  }, V.duration);
  const pcm = base + '.pcm'; writeFileSync(pcm, Buffer.from(b64, 'base64'));
  await run(['-v', 'error', '-y', '-i', silent, '-f', 's16le', '-ar', '48000', '-ac', '2', '-i', pcm,
    '-af', 'loudnorm=I=-16:TP=-1.5:LRA=11', '-c:v', 'copy', '-c:a', 'aac', '-b:a', '192k', '-shortest', out]);
  rmSync(pcm); console.log('with audio ->', out);
}
await browser.close();