Bang Motion: 不是PPT的网络动态图形
v1.19.0 · 作者 Bang Tutorial · MIT 协议。 变更历史见上游 CHANGELOG.md；安装说明见上游 README.md。此副本为上游技能的英文翻译。
本技能适用于任何AI编码代理（开放Agent技能格式）。 它包含使动态图形像视频而非演示文稿一样运动的规则和配方。在编写代码之前请遵循它们。
前置条件：只需一个浏览器
交付物（index.html）仅需一个现代浏览器以及互联网连接以加载CDN（GSAP、字体）。Python和Node是可选的，仅用于辅助工具：
scripts/serve.py（无缓存服务器，仅在使用本地模块时需要）、
puppeteer（自动截图/验证，scripts/export-frames.mjs → MP4）。
如果用户两者都没有：(1) 仍然构建单个文件并双击打开；
(2) 使用?debug=1（时间轴面板）和关键秒数的手动截图进行视觉验证；
(3) 通过屏幕录制（OBS / 浏览器标签录制）获取MP4，并解释屏幕录制可能掉帧，而逐帧渲染需要Node。永远不要制作需要npm install才能观看的交付物。
ffmpeg也是可选的。 先检查（ffmpeg -version）；如果缺失：
| 需求 | 有ffmpeg | 无ffmpeg |
|---|---|---|
| VO同步（句子/段落边界） | silencedetect | scripts/vo-pauses.html：在浏览器中打开，选择音频，复制SEG/PARA；结果相同（Web Audio，无需安装） |
| 音频时长/格式 | ffprobe | 来自vo-pauses.html的DUR数字；浏览器直接播放wav/mp3/m4a/ogg |
| MP4导出 | 合并export-frames.mjs产生的PNG | 无MP4：提供一键安装命令（winget install Gyan.FFmpeg / brew install ffmpeg）或屏幕录制 |
| 研究参考视频（提取帧） | fps= + tile= | 请用户发来关键秒数的截图，或在浏览器中打开视频并在特定秒数捕捉 |
即使没有ffmpeg，解说流程仍可完整进行至VO同步；只有MP4导出需要安装。
播放器：无，自动播放，循环
默认交付物：屏幕上无面板/播放器，打开时立即播放，结束后从头开始（onComplete → play(0)；如果有声音，音频也循环）。隐藏控制：R键重启，空格键暂停。时间轴/时钟面板仅在?debug=1时出现（供审查），?clean=1会保持自动播放以用于导出。有声音？立即尝试play()；如果浏览器阻止，保持在帧0，在第一次点击时开始，不带“点击开始”文字。此功能已内置在两个起始模板中。
结构禁止项：可机械执行的PPT检查
其他模型（以及你，当疲劳时）即使在阅读以下规则后也会陷入这些模式。在交付前，检查代码而不是你的感觉：
-
grep -c "class=\"scene\"\|<section" index.html：如果有≥3个场景是由<section>元素组成，并通过autoAlpha/opacity切换开关，那就是幻灯片。场景必须改变是因为世界/摄像机移动（摄像机移动、猛甩到另一个角落、推近、背景改变），而不是因为一个部分淡出。合法例外：卡通舞台（references/cartoon-stage.md）在舞台之间使用切换/96px滑动。这是允许的，因为每个舞台完全生动（≥10个活动对象），而不是正在淡出的静止图片。 -
存在一个持续的视觉主线：一个主题（连续动作）或一个摄像机在其上移动的拼贴/纸张/白色世界（卡通、照片、目录、素描）。全幅照片切换且没有共享世界 → PPT。每场景一张图片加一句话，每场景切换 → 仍然是幻灯片，即使摄像机移动：每个场景有3–5个元素按短语逐渐进入（explainer.md“一个场景 = 3–5个元素”）。
-
统计每个场景的文本节点：眉题/引文 + 标题 + 正文/致谢 = 3个层次 → PPT。最多两个：一个大的数字/句子 + 一个世界标签。一个由≤3短行组成的文档/印章/日期块算作一个对象，而不是文本层次。
-
仅使用Ken Burns效果（照片上的缩放1.0→1.05）作为唯一运动 → PPT。每秒的运动必须来自你从
techniques.md§7c菜单中选择的背景运动语言（纹理背景上的摄像机呼吸、渐变漂移、浮动斑点、实时颗粒、每段一次光线扫描、一个缓慢旋转的大形状、上升粒子、呼吸网格、鬼影文字漂移、Ken Burns + 视差…）。侧向移动的条/线/片（“车道”、“范围”、“条纹”、水平粒子雨）已经在两个连续项目中以不同名称使用过。它们不是默认值；仅当主题确实是速度/流动时才使用它们，并且绝不在两个连续项目中使用。 -
每次切换仅包含淡出+缩放凸起+漏光 → PPT模板。猛甩到另一个角落、切换到仪器（地图/速度表/轮廓）、推近。
-
解说视频从其风格的起始模板开始：
starter-explainer-cartoon、-journalism、-catalog、-sketch（拼贴模式：摄像机在静态资产上移动）、starter-explainer（连续动作：世界流动）或starter-explainer-stage（卡通舞台：每场景一个舞台，关节绑定，摄像机仅在舞台内部）。拼贴类共享一个绑定；舞台类有不同的绑定。不是从assets/starter-opener.html（文字开场）开始，也不是从零开始。 -
微缩模型就是幻灯片。 摄像机缩放< 1.08，因此房子是拇指大小，空地占据屏幕一半 → PPT，即使所有东西都在动。将世界分割成帧大小的舞台，而不是一个要探索的大地图（
cartoon-stage.md法则1）。 -
模板骨架（开场/宣传片）。 检查流程和代码：第一个场景是文字生长然后向左退出；三个特性瓷砖/卡片并排；一个输入框/搜索栏正在输入；顺序钩子 → 特性 → 特性 → 承诺 → 标志 → 行动号召。如果概念不要求，两个或更多 → 模板，即使换了新皮肤。从
references/opener-concepts.md重新选择骨架。
即使仅一点不符合 → 在向用户展示前返工。
涵盖的工作类型
本技能适用于一般的网络动态图形。解说视频只是其中一种；它有自己独立的文档是因为其结构不同，而不是因为它是主要的。
起始模板按类别命名：starter-opener.html用于开场、宣传片、片花、片头和动态文字；starter-explainer-*.html用于解说视频，带有模式/风格后缀（-cartoon、-journalism、-catalog、-sketch = 拼贴；无后缀 = 连续动作；-stage = 卡通舞台）。卡通舞台是一种解说模式（风格6），本身不是一个类别：其目标仍然是用VO进行解说，只是制作方式不同。
| 类型 | 通常时长 | 特征 | 配方 |
|---|---|---|---|
| 开场 / 产品宣传片 | 25–40秒 | 从菜单中选择一个概念（骨架来自产品，而非固定顺序），一个特殊时刻，品牌收尾 | references/opener-concepts.md + 下方工作流 + references/techniques.md |
| 片花 / 标识 / 标志过渡 | 3–8秒 | 标志构建，一个标志性动作，在观众注意到之前完成 | techniques.md（标志构建，漏光） |
| 频道片头 / 片尾 | 5–12秒 | 频道名称 + 每集相同的标志性动作 | 下方工作流 |
| 动态文字 / 歌词 | 15–60秒 | 文字是主体；按单词/字母拆分；节奏跟随音频 | techniques.md（拆分 + 方向模糊，每词3D平移） |
| 标题 / 下部三分之一 / 片段片花 | 2–6秒 | 在素材上的小元素，干净进出，透明背景 | techniques.md |
| 解说 / 解说视频 | 30–90秒 | 有源事实，展示实体，变化视角，五种风格 | references/explainer.md + 每种风格的起始模板 |
解说视频与角色：在决定镜头前先阅读
对于扁平教育类卡通解说视频（第六种风格，卡通舞台），或感觉像幻灯片/微缩模型的改稿，请阅读references/cartoon-stage.md：每场景一个舞台，缩放1.08–1.95，舞台内连续，舞台间用切换/96px滑动，带有手动变换的关节绑定，零字幕，明亮扁平调色板。区分句子、视觉节拍、构图和舞台变换。要直接在After Effects中构建，请阅读references/ae-bridge-higgsfield.md。此解说特定指南细化了下方开场规则；示例字体、场景数量和效果并非通用配方。
法则 #1：这是视频，不是幻灯片
最常见的病：模型像摆幻灯片一样布局场景，带有标题 + 副标题 + 正文 + 一行徽章。这立即会读作“PPT”并被拒绝。
硬性规则：
- 对于开场：每场景一个短句 + 至多一个主要对象。 无眉题（"01 — 特性"）、副标题、说明段落、特性芯片/徽章或技术元数据（包名、长URL）。使用时属于产品UI的芯片、按钮和标签不计算在内。
- 新信息 = 新的视觉反应。 在解说视频中，当仍然相关时，在同一个世界中改变状态/动作；新的句子不一定要改变镜头。
- 用视觉替代项目符号列表，不要自动使用三个瓷砖。 从
references/opener-concepts.md的“特性菜单”中选择方式（一个特性演示，文字交换，对象变换，洗牌卡片，瓷砖网格…）；连续两个开场不使用相同的方式。 - 场景必须生动。 摄像机可以休息，但对象要承载动作。移动摄像机以跟随或揭示某物；不要依赖在静止背景上文字淡出/滑动，或在每个片段中重复平移/缩放。
- “放大缩小”= 镜头尺寸，不是摄像机呼吸。 当视频感觉静态或用户要求缩放时，摄像机移动到讲述故事的元素上（中近景 / 特写），然后根据内容的节拍拉回到广角；几个百分点的呼吸几乎不可见（
techniques.md§3b）。
在设计场景之前请阅读references/anti-ppt.md。它列出了真实的违规案例及其修正方案。
法则 #2：确定性，否则作废
没有一行代码读取系统时钟。每个视觉无例外地是tl.time()（GSAP时间线时间）的纯函数：频谱、跑动数字、粒子、摄像机震动（高频正弦波，而不是Math.random()）、“流动”对象的位置（补间距离，不每帧累积速度）。结果是：像After Effects时间线一样精确拖动，逐帧渲染到MP4产生完全相同的图像。
法则 #3：风格源于主题，而非起始模板，也非参考案例
一个常见的失败：为不同产品制作的开场，结果却与前一个产品的开场皮肤完全相同：深色、蓝色强调、发光、星云、相同的字体，因为模型从起始模板中提取了风格。动画可能很好，但仍然失败：开场是一个产品的面孔，两个产品不能共享一张面孔。
- 先写风格简报，再写代码。 在接触起始模板之前，写下这几行并连同场景流程一起展示给用户：
- 主题/产品 + 三个描述期望留下感觉的形容词；
- 概念与结构指纹（开场/宣传片）：来自
references/opener-concepts.md的三个候选概念，其中一个根据产品原因被选中，然后概念 · 场景数量 · 每场景主要对象 · 开场 · 收尾； - 调色板：一个取自品牌/主题的主要颜色（标志、应用图标、网站、包装），一个背景颜色，一个强调色。说明每种颜色的十六进制值和来源；不从品牌提取的颜色写为“衍生：原因”；
- 一个具有与感受相匹配特性的显示字体（非Poppins/Inter/Roboto/Montserrat/Arial）+ 一个搭配字体；例外：主张 → 方式 → 结果概念使用产品自身的UI字体（
references/opener-concepts.md）； - 文字强调：无文字高亮，或一种高亮形式（命名它）。文字高亮是可选的，不是每个开场的默认项；
- 每段的背景语言：从“风格方向”表中选择一个方向用于全部，或一个变化计划（哪个片段变化，变成什么，为什么，由什么触发）；
- 标志性动作：一种作为身份重复的运动类型（对象擦拭、每词3D滚动、飞纸、线条绘制、色块撞边缘…）；
- 背景运动：从
techniques.md§7c菜单中选择一种语言。它不等同于标志性动作，也不自动是“对象穿越”； - 背景表面：从§7d菜单中选择（渐变/光/纹理/颗粒渐变，≥ 2层），不是平面的；
- 对象渲染风格：从
techniques.md§7e菜单中选择一个家族（扁平、粘土、光泽、玻璃、等轴、写实、霓虹线…）； - 照片资产（当概念使用人物/地点/产品照片时）：向用户询问来源（用户照片、通过Higgsfield MCP生成、或授权图库），加上每幕的镜头列表（
references/opener-concepts.md，“开场中的照片”）； - 过渡：决定哪些边界需要效果，哪些可以是普通切换；从§4c菜单中选择适合上下文的；两种类型或3D不是必须的；
- 一个特殊时刻（最昂贵的效果只使用一次）。
- 起始模板是架构，不是风格。
assets/starter-opener.html中的灰色、系统字体和WebGL背景只是占位符。如果其中任何一个在结果中仍然可见，则表示风格未被提取。WebGL背景（星云、dust…）不应出现在开场中，除非产品本身是太空/科学主题；如果是，它必须是互动/有纹理的，而不是一个单一的Canvas着色器。 - 连续两个开场不得相同。 如果用户的最后一个开场使用“主张 → 方式 → 结果”，则此开场必须使用另一个概念（“突出特性”、“问题/痛苦”、“对比”、“动态标志构建”、“一个镜头”…）。返回
references/opener-concepts.md并选择另一个或返回零。如果用户的最后一个开场是暗色+蓝色+发光+星星，则此开场必须是浅色+柔和色调+手绘+无发光。如果最后一个开场使用“Poppins”，则此开场使用“Bebas Neue”或“Playfair Display”或“Unbounded”——任何完全不同样式的字体。 - 如果没有足够的品牌材料来摆脱模板，请使用该产品的实际颜色。 如果该产品是深绿色的，使用深绿色调色板，而不是黑色加蓝色强调色。
- 不要将你自己的设计偏好强加于产品之上。 如果一个产品是正式的（银行、保险、健康），白色、干净、实心的颜色，使用非常谨慎或根本不使用发光/粒子，干净的国际字体（尽管是#3；在这种情况下，使用源的字体）。
这种风格简报本身并不是一种风格。这是一个读者的练习：在继续之前确保你有一个真正的概念。
法则 #4：GSAP是引擎
GSAP（GreenSock Animation Platform）是唯一的动画引擎。CSS过渡仅用于悬停效果（UI点击状态除外）或提示出现。Three.js/WebGL可用于粒子、真实渲染或从多个角度无缝展示的3D模型，但必须通过OnUpdate钩子驱动GSAP时间线，以便剩余时间也被驱动（t.quickSetter() / t.quickTo()）。WebGL层必须是被动的，与GSAP同步并以tl.time()驱动，而不是反过来。
法则 #5：不要在一个摄像机上毁掉两个工作
要处理解说视频中的连续动作（事物在世界中流动，摄像机保持广角/跟随），请阅读references/explainer.md第3–4节（场景构建）。要处理背景[速度线/运动剪辑/所有东西快速向左移动]，请阅读相同的部分。
法则 #6：在UI中，我们虚构地使用徽章；在动态图形中，我们不使用
动态图形中没有UI。 没有按钮（除了隐藏的R/Space）、进度条、仪表盘、“观看此！”、搜索栏、下拉菜单、显示器上的UI、框架中的框架、分页点、滚动条或“点击这里”。没有键盘/外部设备来表示正在观看动态图形时它正在被观看（在解说视频中，在道具中使用它们时除外——例如，在显示电话时在它的屏幕上）。显示器的设备框架仅在设备本身是产品（手机、笔记本电脑、平板电脑）且是完整产品和品牌正面镜头时才可接受。
例外：仅在镜头内且从第二人称视角观看并作为对象组合一部分的UI元素是允许的——如果艺术风格恰好包含<input>，它仍然属于UI。
法则 #7：布局不需要PPI
不要为特定的屏幕分辨率或物理设备尺寸进行设计。布局基于CSS中的vw/vh和%。没有px单位，除了用户界面（赞/订阅按钮）或像素完美的文本对齐，1px框用于框架：永远不需要。
开始构建
1. 收集原始材料
在开始之前询问初始信息：
- 公司/产品/品牌名称（总是需要）；
- 如果存在，指向其网站/标志/调色板的链接；
- 如果这是对一个视觉参考的反应（解释该视觉）；
- 目录/为了展示的面板数量（仅当它是目录风格时）；
- 一个描述事件顺序的简短概念；
- 作品长度（秒）；
- 如果存在，一个链接到该视频的现有视频，或该产品的VoD/短片。
2. 编写风格简报
按照法则 #3中的简报结构： ...风格简报在这里...
3. 构建场景流程
编写一个基于概念的、对每场景的描述，由此产生的长度，以及一个故事板样式的快速视野。对于开场，概念和流程之间的一对一映射是必须的：概念决定这些场景是什么——references/opener-concepts.md。构建流程。
对于解说，请遵循references/explainer.md中的场景组合规则。
4. 编写环境
背景颜色、背景运动、材质、深度语言——从风格简报合并而来。
5. 导入起始模板
不是从头开始，而是基于类型（开场或解说）选择一个预建模板：assets/starter-opener.html或assets/starter-explainer-*.html。作为另一个技能工作的一部分时，使用你可靠的官方副本。
6. 构建场景并连接摄像机
编写GSAP时间线。修改场景行为以匹配你的流程。确保摄像机移动感觉是导演的，而不是任意的。摄像机摇晃、猛甩和推近。
7. 润色
- 运行PPT检查（参见上面的“结构禁止项”）。
- 如果有声音，添加VO同步（使用vo-pauses.html生成
SEG）。 - 添加
?debug=1用于审查。 - 运行无错误。
- 添加LOGO初始/结束。
可选：输出到MP4
Node + puppeteer (scripts/export-frames.mjs)：逐帧渲染PNG序列，ffmpeg将其合并为MP4。
未来改进
- 更好的平滑/滚动背景
- 通过
?lang选项进行本地化
参考文档
此技能附带以下参考文档（在references/目录中）并应被引用：
anti-ppt.md：视频与演示文稿的定性检查表techniques.md：详细的GSAP配方、转换、光照、粒子模式opener-concepts.md：开场概念与流程生成器explainer.md：解说结构（场景组合、节奏）cartoon-stage.md：卡通舞台解说构建规则ae-bridge-higgsfield.md：Higgsfield MCP桥接用于After Effects渲染
从opener-concepts.md而来的开场概念：概念 → 流程
| 概念 | 流程 |
|---|---|
| 突出特性 | 标志 → 特性1展示 → 特性2展示 → 承诺 → 行动号召 |
| 主张-方式-结果 | … |
（等等）。