什么是 motion-graphics？
motion-graphics 是一个面向 Claude Code 及其他能够读取技能的智能体的专注型动效设计技能仓库。其首个可用技能 motion-broll 可根据源视频和文字稿创建动态图形 B-roll。
该技能会检查视频素材，估算语音的出现时间，提出合适的图形方案，并根据旁白时间渲染片段。每个片段都使用一个持续变形的形状，例如胶囊形可以变成卡片、终端或图表，而不是在互不相关的场景之间切换。光标会驱动视觉变化。
主要功能
- 基于文字稿的时间匹配： 图形会与文字稿中的语句对齐。
- 视频素材检查： 技能会读取分辨率、帧率、布局、画中画片段，以及演讲者画面尺寸的变化。
- 可审核的规划： 技能会准备片段计划，并在生成图形前等待你的批准。
- 两种输出样式： 全画幅转场片段会渲染为 MP4 文件；为演讲者旁边空白区域设计的面板则使用透明 ProRes 4444 MOV 文件。
- 连续动画： 元素会在不同状态之间变形，不产生视觉切换。
- 运动模糊： 片段会以源视频的帧率渲染，并使用子帧采样来实现更流畅的运动。
- 辅助审核文件： 输出内容包括预览、对比页面、片段查看器和时间文档。
- 数据克制： 技能不会虚构数字或结果。在提供真实数值前，它会使用相对的条形尺寸和骨架文本。
要求
安装技能前，请确保系统已安装以下软件：
- Node.js 18 或更高版本
- Python 3
- 带有 ProRes 编码器的 ffmpeg
README 指出，Homebrew 构建的 ffmpeg 通常已包含所需的 ProRes 编码器。首次运行时，该技能还会将 Playwright 和 Chromium 安装到本地的 motion/ 文件夹中。
安装 motion-broll
选项 1：使用 npx 安装
运行仓库提供的技能安装程序：
npx skills add Barty-Bart/motion-graphics出现提示时，选择 motion-broll。这种方式会从仓库安装技能，供 Claude Code 或其他能够读取技能的兼容智能体使用。
选项 2：手动复制技能
你也可以将 skills/motion-broll 目录复制到项目的 Claude 技能文件夹中：
.claude/skills/如需让技能在所有项目中可用，请将其复制到用户级技能文件夹：
~/.claude/skills/准备输入内容
你需要准备两项主要输入：
- 视频： 将添加动态图形的源视频素材。
- 文字稿： 按照文档工作流，支持使用从编辑器、Descript 或 YouTube 导出的 SRT 文件。
文字稿为技能提供语音内容，视频则提供帧率、尺寸以及演讲者周围可用空间等技术和构图信息。
生成动态图形 B-roll
步骤 1：启动技能
在兼容的智能体中调用：
/motion-broll回答相关问题，并将技能指向你的视频和文字稿。
步骤 2：让技能检查视频素材
技能会读取视频的分辨率、帧率和布局。它还会检查画中画片段，以及演讲者画面尺寸是否发生变化。这项分析有助于它判断透明面板可以放置的位置，以及何时更适合使用全画幅图形。
步骤 3：查看估算的时间
motion-broll 会根据文字稿估算每个词的时间。这些时间信息可以让图形过渡和视觉强调对应到具体的词语或短语。
步骤 4：批准片段计划
渲染前，技能会以表格形式展示计划。对于每个候选片段，它会选择以下三种处理方式之一：
- 全画幅转场
- 放置在空白区域的透明面板
- 不使用动态图形
计划还会说明每项选择的原因。请仔细审核，并在建议的位置符合你的剪辑意图时予以批准。
步骤 5：构建并验证片段
获得批准后，技能会构建每个片段，并检查关键词语处的静帧。随后，它可以修正与这些时刻未能正确对齐的元素。
步骤 6：渲染并审核
技能会以视频的帧率渲染片段，并添加运动模糊。随后，它会生成剪辑后视频的预览，以及用于在浏览器中检查结果的页面。
了解生成的文件
输出内容同时支持审核和最终剪辑。
- 按时间线命名的片段：文件名会标明片段所属位置，例如
04-master-prompt_0m32s40.mp4。 - MP4 转场片段：全画幅动态图形以 MP4 文件形式提供。
- 透明 MOV 面板：叠加面板以带透明通道的 ProRes 4444 MOV 文件渲染。
- 预览渲染：在源视频中插入片段后的版本，便于评估节奏和位置。
compare.html：此页面会同步原始版本和增强版本，支持并排、上下堆叠和擦除比较。viewer.html：此页面可让你逐个查看生成的片段。TIMING.md：此文档记录每个片段的入点、出点以及所覆盖的转录文本行。
生成的预览用于审核。制作最终剪辑时，请将各个片段导入你自己的视频编辑器。
工作流示例
实际的编辑工作流可以按以下步骤进行：
- 导出源视频和 SRT 转录文件。
- 运行
/motion-broll并提供这两个文件。 - 查看建议的转场片段、透明面板，以及有意保持简洁的部分。
- 批准方案，并让该技能渲染片段。
- 打开
compare.html，同时评估原始版本和增强版本。 - 使用
viewer.html检查单个动画。 - 查阅
TIMING.md获取精确的放置信息。 - 将 MP4 和透明 ProRes 4444 MOV 文件导入编辑器，完成最终组装。
渲染系统的工作原理
每一帧动画都作为时间的纯函数计算得出。引擎使用闭式弹簧阶跃响应，而目标反复变化的属性则表示为每次变化对应一个弹簧的总和。
由于系统不依赖 CSS 过渡或计时器，因此可以独立渲染任意帧。这对于确定性帧捕获和离线视频渲染非常有用。
每个片段都是一个基于共享引擎构建的小型 HTML 文件，引擎位于 skills/motion-broll/engine/motion.js。无头 Chromium 会在 180 度快门范围内，为每个输出帧捕获四个子帧。随后 ffmpeg 会混合这些采样，以生成运动模糊效果。
高级技巧
在投入渲染时间前检查方案
批准阶段是重要的编辑检查点。确认全画幅转场片段仅用于适合替换原始画面的时刻，并确保透明面板位于画面中真正空置的区域。
在编辑器中使用正确的输出
当 MP4 转场片段需要替换原始画面时，将其放置在主视觉轨道上。将 ProRes 4444 MOV 面板合成到源视频上方，以便利用透明度保留下方的镜头画面。
将真实数据与占位内容分开
如果尚未提供确切数值，应使用相对比例条和骨架文本，而不是编造数值。当成品图形需要传达具体结果时，请提供经过验证的数据。
同时检查时间安排和动画细节
使用 compare.html 检查整体节奏，使用 viewer.html 检查片段级细节。对于存疑的位置，请对照 TIMING.md 和对应的转录文本行进行核验。
研究随附的完整示例
目录 skills/motion-broll/examples/opus-aoe2/ 包含仓库演示中使用的六个片段。它有助于理解已完成片段的结构和预期视觉风格。
结语
motion-broll 提供了一种结构化方法，可将旁白转化为同步的动态图形 B-roll。它结合了画面分析、基于转录的规划、连续形状动画、确定性渲染和实用的审核工具。批准方案并检查预览后，你可以将按时间线命名的片段导入编辑器，制作最终视频。
本项目根据 MIT 许可证发布。其 Geist 字体使用 SIL Open Font License，其图标路径改编自 Lucide，并遵循 ISC 许可证。