Bang Motion — 动态网页动效，绝非PPT 是做什么的？
v1.19.0 · 由 Bang Tutorial 制作 · MIT 许可证。 变更历史请查看 CHANGELOG.md；安装方式请查看 README.md。
此技能适用于任何AI编码代理（Agent Skills 开放格式）。 内容包含用于创建电影级动态图形（而非演示文稿）的规则和配方——在编写代码前务必遵守。
先决条件——仅需浏览器
交付物（index.html）仅需现代浏览器 + 用于CDN（GSAP、字体）的网络连接。Python 和 Node 可选，仅用作工作工具：scripts/serve.py（无缓存服务器，仅在需要本地模块时使用），puppeteer（用于自动快照/验证，scripts/export-frames.mjs → MP4）。如果用户没有这两者：(1) 仍然构建单文件，双击打开；(2) 通过 ?debug=1（scrub面板）和关键帧手动截图进行视觉验证；(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 键重播，空格键暂停。scrub/时间面板仅在 ?debug=1 时显示（供审查），?clean=1 阻止自动播放以用于导出。有音频？尝试立即 play()；如果被浏览器阻止，则停留在第0帧，并在首次点击时开始播放——不要显示“点击开始”文字。此项功能已嵌入两个启动模板中。
结构性禁令——可机械检查的PPT检测
其他模型（以及你，如果累了）即使阅读了以下规则，也往往会陷入这种模式。在提交之前，检查代码，而不是凭感觉：
-
grep -c "class=\"scene\"\|\<section" index.html— 如果有≥3个场景是使用autoAlpha/opacity 进行开关的<section>→ 那是幻灯片。场景切换应该是因为世界/摄像机在移动（摄像机移动、扫射到另一个角落、推进、背景变化），而不是因为章节淡入淡出。合法例外：舞台卡通（references/kartun-panggung.md）使用场景间96像素的切换/滑动——允许，因为每个舞台都是充满活力的（≥10个动作中的物体），而不是被淡入淡出的静态图像。 -
存在一条持续的视觉主线：一个子�ject（连续动作）或一个被摄像机探索的拼贴/纸张/白色世界（卡通、照片、目录、素描）。全出血照片切换而无共享世界 → PPT。每个场景一张图片+一句话，场景之间切换→即使摄像机在移动，它仍然是幻灯片：每个场景应有3–5个元素，按短语逐步进入（explainer.md "一个场景 = 3–5 个元素"）。
-
每个场景的文本节点计数：眉毛文字/引语 + 标题 + 正文/字幕 = 3层 → PPT。最多两个：一个大数字/句子 + 一个世界标签。包含≤3行简短文字的文档/印章/日期块算作对象，而非文本层级。
-
Ken Burns（在照片上缩放 1.0→1.05）作为唯一的运动 → PPT。每一秒的运动必须来自在样式简报中从
techniques.md§7c 菜单中选择的背景运动语言（摄像机在纹理背景上呼吸、渐变移动、浮动斑点、动态颗粒、每段光线扫过、旋转的大形状、上升粒子、呼吸网格、移动的幻影文本、Ken Burns + 视差…）。侧面穿过的条/线/片（"lane"、"range"、"streak"、水平粒子雨）已连续用于两个不同的项目——它不是默认选项；仅当主题确实是速度/流动时才使用，且不能连续用于两个项目。 -
所有剪辑过渡仅为淡入淡出 + 缩放凸起 + 漏光 → PPT 模板。扫向另一个角落、切换到仪器（地图/速度计/个人简介）、推进。
-
Explainer 从其启动模板开始：
starter-explainer-kartun、-jurnalisme、-katalog、-sketsa（拼贴模式：摄像机探索静态资产）、starter-explainer（连续动作：世界流动），或starter-explainer-panggung（舞台卡通：每个场景一个舞台、关节装备、摄像机仅在舞台内）。拼贴式是一个装备；舞台式是另一个装备。不是从assets/starter-opener.html（文字开场）开始，也不是从零开始。 -
缩略图是幻灯片。 摄像机缩放 < 1.08，使房子如拇指大小，空旷地面占据半个屏幕 → PPT，即使所有元素都在移动。世界被分割成帧大小的舞台，而不是一个被探索的大地图（
kartun-panggung.md规则 1）。 -
模板框架（开场/宣传视频）。 检查大纲和代码：第一个场景是放大的文字然后向左退出；三个并排的功能磁贴/卡片；输入的搜索框/输入框；顺序为 钩子 → 功能 → 功能 → 承诺 → 标志 → 行动号召。两个或以上符合而无概念要求 → 模板，即使外表是新的。从
references/opener-konsep.md重新选择框架。
只要有一点不符合 → 在展示给用户之前进行重构。
涵盖的工作类型
此技能适用于通用网页动态图形。Explainer 只是其中一种类型——它有自己的文档，因为其结构不同，而不是因为它是最主要的。
启动模板根据其类别命名：starter-opener.html 用于开场、宣传视频、片花、介绍和动态文字排版；starter-explainer-*.html 用于解释视频，带有模式/风格后缀（-kartun、-jurnalisme、-katalog、-sketsa = 拼贴；无后缀 = 连续动作；-panggung = 舞台卡通）。舞台卡通是一种解释器模式（风格6），而非独立类别：其目标仍是通过 VO 进行解释，只是制作方式不同。
| 类型 | 常见时长 | 特征 | 配方 |
|---|---|---|---|
| 开场 / 产品宣传视频 | 25–40秒 | 一个从菜单中选择的概念（框架来源于产品，而非固定顺序）、一个特殊时刻、品牌结尾 | references/opener-konsep.md + 下方工作流 + references/techniques.md |
| 片花 / 标识 / 标志短篇 | 3–8秒 | 标志构建、一个有特色的运动、在观众意识到之前完成 | techniques.md（标志构建、漏光） |
| 频道介绍 / 结尾 | 5–12秒 | 频道名称 + 每集相同的特色运动 | 下方工作流 |
| 动态文字排版 / 歌词 | 15–60秒 | 文字是主体；按词/字母拆分；节奏跟随音频 | techniques.md（拆分 + 定向模糊、每词3D翻转） |
| 标题 / 下方第三 / 片段片花 | 2–6秒 | 在素材之上小元素，干净进出，透明背景 | techniques.md |
| Explainer / 解释视频 | 30–90秒 | 有来源的事实、实体出现、视角变化、五种风格 | references/explainer.md + 每种风格的启动模板 |
Explainer 和角色：在确定镜头前阅读
对于角色化的平面教育卡通解释视频（第六种风格，舞台卡通），或感觉像幻灯片/缩略图的修订，阅读 references/kartun-panggung.md：每个场景一个舞台，缩放 1.08–1.95，在舞台内连续，场景间切换/滑动 96 像素，使用手动变换的关节装备，零字幕，明亮平面调色板。区分句子、视觉节拍、构图和舞台切换。要直接在 After Effects 中构建，请阅读 references/ae-bridge-higgsfield.md。这些针对解释器的特定指南阐明了下面的开场规则；字体、场景数量和效果示例并非通用配方。
规则 #1 — 这是视频，不是幻灯片
最常见的疾病：模型像排列幻灯片一样排列场景——标题 + 副标题 + 正文 + 一排徽章。这直接读作"PPT"，将被拒绝。
硬性规则：
- 对于开场：每场景一个短句 + 最多一个主要对象。 没有引语（"01 — 功能"）、副标题、说明段落、功能芯片/徽章或技术元数据（包名、长URL）。正在使用的产品UI部分的芯片、按钮和标签不在此列。
- 新信息 = 新的视觉反应。 在解释视频中，如果仍然相关，则在同一个世界中改变状态/动作；换句不一定需要更换镜头。
- 项目符号列表改为视觉呈现，而不是默认为三个磁贴。 从
references/opener-konsep.md的功能菜单中选择方式（演示一个功能、文字变化、对象变换、卡片洗牌、网格磁贴…）；连续两个开场不能使用相同方式。 - 场景必须生动。 当对象携带动作时，摄像机可以静止。移动摄像机以跟随或揭示某些东西；不要依赖在静态背景上淡入/滑入文字，或在所有片段中重复平移/缩放。
- "放大-缩小" = 镜头尺寸，而非摄像机的呼吸。 如果视频感觉静态或用户要求缩放，摄像机靠近正在讲述故事的元素（中近景/特写），然后根据内容节拍退回到广角；百分之几的呼吸几乎不可见（
techniques.md§3b）。
在设计场景之前阅读 references/anti-ppt.md——它包含实际的违规列表及其修复方法。
规则 #2 — 要么确定性，要么死
没有一行代码读取系统时钟。所有视觉元素都是 tl.time()（GSAP 时间线时间）的纯函数：频谱、运行数字、粒子、摄像机抖动（高频正弦，非 Math.random()）、“流动”的对象位置（距离补间，非每帧速度累积）。后果：scrub 像 After Effects 时间线一样精确，并且逐帧渲染为 MP4 每次都会产生相同的图像。
规则 #3 — 风格源于主题，而非启动模板，也非参考
常见失败：另一个产品的开场穿戴了与上一个产品开场完全相同的外壳——暗色、蓝色点缀、发光、星云、相同的字体——因为模型从启动模板中汲取了风格。动画可能很好，但仍然失败：开场是产品的脸，两个产品不能有相同的脸。
- 先有样式简报，后有代码。 在接触启动模板之前，写下这六行并向用户展示，连同场景大纲：
- 主题/产品 + 三个想要留下的感觉形容词；
- 概念与结构指纹（开场/宣传视频）：从
references/opener-konsep.md中选出的三个候选概念，根据产品理由选择一个，然后概念 · 场景数量 · 每个场景的主要对象 · 开场 · 结尾； - 调色板：一个来自品牌/主题的主色（标志、应用图标、网站、包装）、一个背景色、一个点缀色——标明每个颜色的十六进制代码和来源；非来自品牌的颜色写为"衍色：理由"；
- 具有符合该感觉的特性的展示字体（非 Poppins/Inter/Roboto/Montserrat/Arial）+ 辅助字体；例外：概念声明 → 方式 → 结果使用产品本身的 UI 字体（
references/opener-konsep.md）； - 文字强调：无文字高亮，或一种高亮形式（说明）——文字高亮可选，不是每个开场的默认设置；
- 每个片段的背景语言：从“风格方向”表中为所有片段选择一个方向，或变更计划（哪些片段改变、变成什么、为什么、触发什么）；
- 标志性运动：一种作为身份重复使用的运动类型（对象擦除、每词3D翻转、飞纸、绘制线条、色块撞击边缘…）；
- 背景运动：从
techniques.md§7c 菜单中选择一种语言——与标志性运动不同，也不是默认的“物体穿过”； - 背景表面：从 §7d 菜单中选择（渐变/光线/纹理/颗粒渐变，≥2层）——非纯色；
- 对象渲染风格：从
techniques.md§7e 菜单中选择一个类别（扁平、粘土、光泽、玻璃、等轴、写实、霓虹线…）； - 照片资产（如果概念使用人物/地点/产品照片）：来源——用户照片、通过 Higgsfield MCP 生成，或授权库存——询问用户，加上每幕的镜头列表（
references/opener-konsep.md“开场中的照片”）； - 过渡：确定哪些边界需要效果，哪些只需剪辑；根据上下文从 §4c 菜单中选择，并非强制要求两种类型或强制使用 3D；
- 一个特殊时刻（最昂贵效果被使用的地方，仅一次）。
- 启动模板是架构，而非风格。
assets/starter-opener.html中的灰色、系统字体和 WebGL 背景是占位符。如果其中任何一个在结果中仍然可见，则风格尚未被提取。WebGL 背景（星云、尘埃、网格、光晕）只是八种背景语言之一；如果风格方向不同，则将其禁用。 - 参考 = 节奏，而非外壳。 从参考视频中获取：每个镜头的时长、过渡类型、注意力层次、能量、运动语言。不要获取：调色板、字体、纹理、布局、装饰形状、句子、场景顺序和独特时刻（特色开场/结尾、一次性噱头）。"做成这样"意味着"像这样有能量"，其余都是你的。