motion-broll

动态 B-roll

为创作者的视频制作动态图形片段。每个片段都是一个始终不断切的形状：它会在不同状态间改变尺寸、圆角和颜色，同时通过短暂的模糊效果切换内容。光标通过真实的点击和拖动来驱动变化，而且每次变化都会与一个口播词同步。

输出是一组片段，创作者可以直接放进自己的剪辑软件。你还要提供一份已剪入这些片段的视频预览渲染，以及两个 HTML 页面：一个用于逐个浏览片段，另一个用于对比前后效果。

所需的一切都在此技能文件夹中：

• engine/：动态引擎（motion.js）、页面外壳（base.css）、build.py（将片段转换为独立 HTML）、render.js（带动态模糊的逐帧渲染）、beats.js（静帧联系表）、字体（Geist、OFL）。
• scripts/：setup.sh、inspect_video.py、words.py、composite.py、make_pages.py。
• reference/engine-api.md：如何编写片段。编写第一个片段前，请先阅读。
• examples/opus-aoe2/：为一段真实的 54 秒视频制作的六个完整片段。请以此作为质量标准和起点。

下文中的 $SKILL 指此技能文件夹。请在用户项目中的 motion/ 文件夹内工作。

1. 设置（仅首次运行）

bash $SKILL/scripts/setup.sh ./motion

这会检查 Node、Python 3 和 ffmpeg，并将 Playwright + Chromium 安装到 motion/node_modules。运行所有引擎脚本时都要使用 NODE_PATH=./motion/node_modules。

2. 询问

使用 AskUserQuestion 工具；只进行一轮询问。你需要了解：

• 视频。 一个路径。将视频复制到 motion/work/source.*，或在此处引用。
• 转录稿。 带时间戳的 SRT 或 VTT 最合适。如果只有纯文本，请从音频获取词级时间戳（pip install faster-whisper），或请用户提供 SRT。
• 密度：
  • 低：每分钟 2–4 个片段，只选最精彩的时刻。
  • 中（默认）：每分钟 4–7 个。
  • 高：覆盖大多数台词，脸部画面之间只留较短间隔。
• 视觉风格：
  • 默认配色：暖灰色画布、黑白组件、一个橙色点缀。
  • 或采用用户的品牌风格：颜色，以及可选的字体。请用户将徽标、截图或品牌色放入 motion/inputs/，并查看这些素材。
• 需要避免或包含的内容。 需要保留人物画面的台词、要展示的真实数字或名称、需要重现的产品截图。

跳过用户已经回答过的问题。

3. 检查素材

python3 $SKILL/scripts/inspect_video.py motion/work/source.mp4 motion/work
python3 $SKILL/scripts/words.py transcript.srt > motion/work/words.txt   # .vtt works too

请亲自查看 motion/work/contact.png。video.json 提供分辨率、fps 和布局分段：

• full： 说话者占满画面。
• pip： 说话者位于一个方框内，其余部分为空。还会包含方框位置，以及方框尺寸发生变化或移动时的警告。
• black： 整个画面为黑色（淡入、片头或片尾）。

片段必须与视频的分辨率和 fps 一致。SRT 或 VTT 中的词语时间只是估算值（±0.2s）；请将其视为近似值。

4. 规划，并在编写任何代码前获得批准

用表格展示，每个片段占一行：

| # | 入点–出点 | 对应台词 | 图形如何呈现、对应哪些词 | 处理方式 | 原因 |

创意方向：决定每个片段占据画面的多少。 这是最重要的判断；请逐个片段决定并说明理由。

• 全屏切镜。 画面完全由演讲者占据，而台词描述的是值得观看的内容：产品、流程、对比、数字或章节变化。
  • 按一个想法持续的时间切镜（3–10 秒），然后切回演讲者。
  • 不要在开场钩子的第一秒或涉及个人、情感或观点的台词上切镜。
  • 每次切镜之间至少留出约 2 秒的演讲者画面。
• 在空白区域放置面板。 剪辑本身已留出空间：画中画框、分屏或纯色区域。
  • 在空白区域中央渲染透明片段（bg:null），并调整尺寸，确保任何时刻都不会遮挡演讲者画面。
  • 可以持续较长时间（15 秒以上），作为一个连续变形，因为演讲者始终在画面中。
  • 如果 inspect_video.py 报告画框发生变化，先询问这是否有意为之，然后按最大的画框调整尺寸，或在变化处拆分面板。
• 不添加内容。 台词与演讲者本人有关，或与相邻片段太接近。

内容规则：

• 展示真实的主题对象：文件夹、终端、文件、产品、结果。根据台词提取对象，并将每个想法映射到 reference/engine-api.md 中的一种交互方式（胶囊标签 + 点击、进度、勾选、状态岛、带拖动操作的卡片、滑块、切换开关、标签页、图表 + 工具提示、搜索/筛选、文件拖放、终端输入、并排对比、章节卡片）。
• 绝不虚构数字、引言、价格或结果。 使用相对长度的条形、骨架屏文本行或取自转录稿的标签，并列出哪些内容仅供示意。只有用户提供的数据才能使用真实数字。
• 每个片段只表达一个想法。连续的一段内容（例如完整的画中画部分）可以作为一个较长片段，并包含多个状态。
• 根据语音而非音乐安排节奏：每个口语节拍对应一次变化，间隔约 0.4–1.2 秒。

等待用户批准或修改计划。

5. 构建

按照 reference/engine-api.md 和示例，为每个片段在 motion/clips/NN-name.html 中编写一个片段。然后构建：

python3 $SKILL/engine/build.py motion/dist motion/clips/*.html

将每次状态变化安排在对应的词上：片段本地时间 = 词语时间 − 片段入点。

6. 检查关键词时刻的静帧

NODE_PATH=./motion/node_modules node $SKILL/engine/beats.js motion/dist/NN-name.html motion/work/NN.png 0.4 1.2 2.1 …

选择每个状态稳定后的时刻，以及几个变形过程中的时刻。亲自检查每张图页。修复任何拥挤、裁切、难以辨认、不同步或光标移出画面的情况，然后再检查一次。面板片段在图页中会以黑色为背景渲染，方便判断。

7. 渲染

NODE_PATH=./motion/node_modules node $SKILL/engine/render.js motion/dist/NN-name.html motion/out/NN-name_0m32s40.mp4 30000/1001

• 使用视频的 fps。
• 面板片段（bg:null）必须写入 .mov，以获得带 alpha 通道的 ProRes 4444。
• 按时间线入点为每个文件命名（0m32s40 = 0:32.40）。
• 渲染每帧需要 4 个子帧，因此速度比实时慢。在多核机器上并行运行两个片段。

8. 交付

写入 motion/plan.json（架构见 reference/engine-api.md），然后：

python3 $SKILL/scripts/composite.py motion/plan.json motion/out/preview.mp4
python3 $SKILL/scripts/make_pages.py motion/plan.json motion/out/preview.mp4

用户会在 motion/out/ 中收到：

• 片段
• TIMING.md：文件、入点、出点、对应台词、处理方式以及仅供示意的内容
• preview.mp4：插入片段后的用户视频，使用硬切，保留原音频
• viewer.html：逐个查看片段
• compare.html：原视频与预览同步对比，可并排、上下堆叠或使用擦除效果

请明确说明，预览仅供审核：制作最终剪辑时，用户需要在自己的编辑器中放置片段，以便微调时间、添加转场并混合音频。

样式默认值

用户的品牌规范优先。

• **颜色：**画布 #E9E7E2、墨色 #0B0B0B、白色组件，唯一强调色为 #FF5A1F。深色素材上的面板裁剪使用浅色形状（#F4F2EE）。
• **字体和图标：**UI 文本使用 Geist，代码、文件名和终端使用 Geist Mono。使用一套图标，笔画粗细统一（M.icon）。
• **动效：**弹簧动效最多只能有轻微的过冲。引导边缘和尾随边缘使用不同的弹簧，让指示器产生拉伸效果。摄像机缩放，使每种状态都充满画面。
• **禁止：**弹跳缓动、粒子、光晕、UI 外框渐变、混用不同笔画的图标、空等时间、任何看起来像模板的内容、虚构数据。

注意事项

• 任何被摄像机缩放的元素都不要设置 will-change；文本会变模糊。
• 在形变容器中替换文本时，必须为文本设置独立的进入和退出时序（M.vis din/lin/lout），否则新旧文本会重叠。
• 使用 mix-blend-mode: difference 的标签必须放在自身应用了混合模式的图层中。带滤镜的父元素会将它们隔离。
• 滑入高亮区域的项目需要使用 M.FAST 弹簧，否则高亮行会短暂留空。
• 在每次摄像机缩放时都要让光标保持在画面内，包括形变期间。
• 根据 SRT 估算的词语位置会在一个字幕段内逐渐偏移；可以的话，将重要变化放在字幕段的第一个或最后一个词上。
• 片段结束时会停留在最后一个状态；如果合成片段的时长更长，则会保持最后一帧。