bang-motion：浏览器中生成动效图文的代理技能

bangtutorial/bang-motion

一段用于在浏览器中制作动态图形（motion graphics）的智能体（agent）技能，产品开场与宣传片、过渡短片（bumpers）与台标短片（idents）、频道引入、动态排版（kinetic typography）、下三分之一字幕条（lower thirds），以及解释类动画（explainer）。

输出只有一个 index.html，双击即可播放。自动播放、循环播放，无播放器界面。

为什么让 AI 智能体去做"一支视频"，结果常常只是一组幻灯片

每个想法占一个 section、一张照片、一个标题，在淡入淡出之间切换。

Bang Motion 把一位在职动态设计师会坚持的原则，单一连续的世界、真正在运动的镜头、贯穿多个场景的主体、数字嵌入场景之内而非漂浮在场景之上，编码为智能体能在自己代码里自查的结构性检查，再配合让"正确的架构成为阻力最小的路径"的入门模板。

你能得到什么

通用动态图形，而非只会做解释类动画：开场、宣传片、过渡短片、台标短片、引入、动态排版、标题，共享同一套镜头装置、确定性时间线，以及反幻灯片规则。

风格源自主题，绝不源自模板或参考：一份必备的风格简介固定调色板（取自品牌）、有性格的展示字体、背景材质、背景运动、转场方式，以及动作签名（motion signature），每一项都从菜单中挑选，每一项都不得与上一个项目重复。参考资料贡献节奏，而不是皮肤。

菜单，而非默认值：凡是智能体最容易抄近路的地方（一片黑色星云、横向滑过的条纹、一块平推过画面的色块、一枚带闪光的小药丸），都被替换为菜单，八种风格方向、十一类背景运动、六种背景材质、九种转场、六种高亮形状，并附一条规则：同一选择不得在项目之间重复。

五种解释类风格，各自带自己的模板：卡通拼贴（cartoon collage）· 视觉新闻（visual journalism）· 白色目录（white catalog）· 复古素描（vintage sketch）· 连续动作（continuous action，纯矢量）。

一套装置，两种运动模式：流动的世界（视差（parallax）条带、一个主角、世界物体扫过），或者镜头穿行的拼贴（推入 → 滑行 → 落定）。

镜头目录让视角持续切换：地图模拟、速度计驾驶舱、海拔剖面、地图竞速、驾驶舱内部、正面逼近。

硬性反幻灯片检查：不得有淡入淡出的 <section>，必须有一条贯穿的视觉主线，至多两级文字层级，每秒都有运动，转场需富于变化。

合理的默认值：16:9、无字幕、无播放器、自动播放 + 循环；?debug=1 调出进度条，?clean=1 用于导出。

画外音（voice-over）工作流：智能体先把脚本交给你，你录制或生成后回传音频，时间线会被重新对齐到你的声音，在没装 ffmpeg 的情况下，使用仅靠浏览器即可运行的停顿检测器。

确定性时间线：每一帧都是时间的纯函数，因此逐帧拖动是精确的，逐帧导出不会丢帧。

五种风格

| 风格 | 外观 | 最适合 |
| --- | --- | --- |
| 卡通拼贴 | 米色纸张、扁平插画剪贴、手写备注、彩色高亮药丸 | 科学、教育 |
| 视觉新闻 | 黑色、真实照片带出处标签、黄色荧光笔、虚线批注 | 新闻、时事 |
| 白色目录 | 白色网格、照片剪贴、混排排版、涂鸦 | 产品、品牌 |
| 复古素描 | 棕褐纸张、版画风格插图、经典衬线体、铁锈色批注 | 历史、人物 |
| 连续动作 | 流动的矢量世界、始终不离场的一个主角、世界之内的数字、变化的视角 | 速度、路线、流程 |

快速上手

开场片："帮我做一个 30 秒的开场片，用于我的笔记应用，logo 在这里。"

智能体先写一份风格简介（取自你 logo 的调色板、一款有性格的展示字体、一种背景语言、一个动作签名），一份场景清单，然后才写代码。两个不同的产品，绝不会穿着同一套皮肤出场。

解释类动画："做一个关于 Whoosh 高速列车的解释动画。"

它只问一个问题：风格（五选一 + 推荐）、宽高比、时长、声音。

你会拿到 index.html（直接打开就能播）和画外音脚本。

用任意声音录制或生成画外音，把音频发回 → 智能体会把视频同步上去。

安装 Bang Motion

采用开放的 Agent Skills 布局：一个包含 SKILL.md（前置元数据 + 说明）、references/、assets/、scripts/ 的文件夹。它也以 Claude Code 插件形式发布，因此可以用两条命令完成安装与更新。

作为插件（Claude Code）

/plugin marketplace add bangtutorial/bang-motion/plugin
install bang-motion@bang-motion

这个技能随后会出现在你的技能列表中，并可通过以下命令保持可更新：

/plugin marketplace update bang-motion

手动安装（任意智能体）

git clone https://github.com/bangtutorial/bang-motion

| 智能体 | 安装位置 |
| --- | --- |
| Claude Code | ~/.claude/skills/bang-motion（Windows：C:\Users\<you>\.claude/skills/bang-motion） |
| Codex CLI | 你的 Codex skills 文件夹，或加入 AGENTS.md："涉及动态图形 / 解释类动画时，请阅读并遵循 bang-motion/SKILL.md。" |
| Gemini CLI · Cursor · 其他 | 复制进项目，再在 GEMINI.md、.cursor/rules 或系统提示中引用 SKILL.md |
| 纯聊天（无智能体） | 把 SKILL.md 与 references/explainer.md 作为指令粘贴；从 assets/ 附上一份模板 |该技能会在诸如"做一个解释动画……"、"宣传视频……"、"开场片……"之类的请求，或对一段网页动画"看起来像 PowerPoint"的抱怨时触发。

需求

| 你想做什么 | 你需要 |
| --- | --- |
| 观看成果 | 一个浏览器 + 网络（GSAP 和字体从 CDN 加载）。仅此而已。 |
| 自动校验帧 | Node + puppeteer（scripts/snap.mjs），可选；?debug=1 可手动操作 |
| 导出 MP4 | Node + puppeteer + ffmpeg（scripts/export-frames.mjs），可选 |
| 把视频同步到画外音 | ffmpeg，或者什么都不装：scripts/vo-pauses.html 可在浏览器内检测停顿 |一件交付物永远不需要 npm install 就能观看。

规则如何运作

风格简介先行：主题、品牌调色板、展示字体、背景材质、背景运动、转场方式、动作签名、一处特别时刻，在写任何代码之前先确认；开场片模板被刻意做成灰色，每个 WebGL 颜色都绑定到 CSS 变量，这样残留之处一目了然。

规则之内自由发挥：规则锁住的是结构、对比与新意，而不是品味。丰富的渐变、光感、三维景深、纹理与大胆配色都是被鼓励的；唯一被禁止的是最偷懒、最重复的默认值。当两个选项都过关时，选更勇敢的那个。

"活"的文字、克制的背景：句首大写、中等字重、每行一个被高亮的关键词（高亮形状按项目选择，不可继承），标点最后才出现，字号与入场方向交替变化，文字所在的背景始终保持深（或浅），不与文字争抢注意力。

结构性禁令，智能体在交付前会在代码里自查：场景切换是因为世界或镜头在运动，而不是因为某个 section 淡入淡出；存在一个贯穿的主体或共享世界；至多两级文字层级；背景运动来自一种被选定的语言，而不是物体一掠而过；至少使用两种转场，其中一种发生在真实景深中（不允许平面色块擦过画面）；背景必须分层，绝不平涂；解释类动画必须从该风格的模板开始。