Bang Motion — 非 PPT 的动态图形网页
属于动态解说库。 下方正文是独立 Bang Motion 导演手册，适用于单个自包含的 index.html（HTML + CSS + GSAP）。在此库中，相同外观也会作为三个引擎发布，并接入正常管线，因此短片可以像选择任何其他风格一样选用它：
style.json：清单（bang-motion，画布 1080x1920，30 fps，引擎remotion、fframes和kyfram）remotion/：kit/（GlowHorizon、GrainyMeshBlob、GlassCard、KineticTitle、StatusPill、BangBanner、GlassCaptions、LivingGrain）、template/、sync_kit.sh、CATALOG.md、AGENT_BRIEF.mdfframes/：Cargo.toml、src/（lib、tokens、kit、look、video、main）、tools/ff.shkyfram/PRELUDE.lgv：调色板令牌以及.lgv场景的节拍家具（drawBackdrop、drawBanner、drawCaptions、drawPanel、drawDot、drawFrame）docs/style-guide.md和docs/style-prompt.md：压缩样式表和便携提示
使用 ./core/new_episode.sh <series-dir> 01-slug Episode out-name --style bang-motion --engine remotion（或 --engine fframes|kyfram）搭建一集。管线技能将风格名称作为 $MOTION_STYLE 接收，因此工作流中的其他内容无需更改。
风格 DNA，一言以蔽之：一个连续的世界，至少两层的背景（深层基底加上发光地平线）始终移动，相对于 t 偏移的颗粒而非随机噪声，呼吸式摄像机而非静态画框，有动机的过渡而非单一重复的擦拭，以及每个镜头一个陈述而非一张幻灯片的全部信息。
v1.19.0 · 由 Bang Tutorial 提供 · MIT。 变更历史见 CHANGELOG.md；安装方法见 README.md。
此技能适用于任何 AI 编码代理（开放代理技能格式）。 内容是动态图形（像视频一样移动，而非演示文稿）的法则和配方 — 在编写代码前务必遵守。
先决条件 — 仅需浏览器
交付物（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 开关显示/隐藏 → 那就是幻灯片。场景变化应源于世界/摄像机的移动（摄像机移动、甩至另一角、推入、背景变换），而非通过淡入淡出切换 section。合法例外：舞台动画（references/kartun-panggung.md）使用剪/滑动 96 像素在舞台间切换 — 允许，因为每个舞台充满生命（≥10 个动作物体），而非淡入淡出的静止图像。 -
存在持续视觉主线：一个主题（连续动作）或一个由摄像机探索的拼贴/纸张/白色世界（动画、照片、目录、草图）。全出血照片交替出现，无共同世界 → PPT。每场景一张图片 + 一句话，场景切换 → 即使摄像机移动仍是幻灯片：每场景 3–5 个元素，按短语逐步进入（explainer.md“每场景=3–5个元素”）。
-
每场景计算文本层级：eyebrow/kicker + 标题 + 正文/图注 = 3 级 → PPT。最多两级：一个数字/大句子 + 一个世界标签。文档/印章/日期块包含 ≤ 3 行短文本计为对象，而非文本层级。
-
Ken Burns（照片缩放 1.0→1.05）作为唯⼀运动 → PPT。每秒运动必须来自背景运动语言，从
techniques.md§7c 的风格简报菜单中选择（纹理背景中呼吸的摄像机、渐变移动、漂浮斑点、生动颗粒、每段光扫、大形状缓慢旋转、粒子上升、呼吸网格、幻影文本偏移、Ken Burns + 视差…）。向侧面移动的条/线/片（“车道”、“范围”、“条纹”、“水平粒子雨”）已在连续两个项目中使用不同名称 — 那不是默认；仅在主题确实是速度/流动时，且不能连续两个项目使用。 -
所有剪切中仅使用淡入淡出 + 缩放凸起 + 光漏的过渡 → PPT 模板。甩向另一角、切换到工具（地图/速度计/个人资料）、推入。
-
Explainer 从其风格的启动器开始：
starter-explainer-kartun、-jurnalisme、-katalog、-sketsa（拼贴模式：摄像机探索静态资产）、starter-explainer（连续动作：世界流动）、或starter-explainer-panggung（舞台动画：每场景一个舞台，关节绑定，摄像机仅在舞台内）。拼贴模式有⼀套绑定；舞台模式有另⼀种。不是从assets/starter-opener.html（文本开场）开始，也不是从零开始。 -
缩略图就是幻灯片。 摄像机缩放 < 1.08 导致房屋拇指大小，空地面占半屏 → PPT，即使所有元素在移动。世界被分割为画框大小的舞台，而非一个被探索的大地图（
kartun-panggung.md法则 1）。 -
模板框架（开场/推广）。 检查运行表和代码：第一个场景是放大的文本然后向左退出；三个特性磁贴/卡片平行；输入框/搜索栏被输入；钩子 → 特性 → 特性 → 承诺 → 标志 → CTA 的顺序。两次或以上无概念要求 → 模板，即使外观新颖。从
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”并被拒绝。
硬规则：
- 对于开场：每场景一个短句 + 最多一个主要对象。 没有 kicker（“01 — 特性”）、副标题、说明段落、特性芯片/徽章或技术元数据（软件包名称、长 URL）。正在使用的产品 UI 部分的芯片、按钮和标签除外。
- 新信息 = 新的视觉反应。 在解说中，如果仍相关，在同一个世界中改变状态/动作；句子更改不一定需要更换镜头。
- 要点列表用视觉替代，而非自动三个磁贴。 从
references/opener-konsep.md的特性菜单中选择方式（演示一个特性、单词更改、对象转换、卡片洗牌、网格磁贴…）；连续两个开场不使用相同方式。 - 场景必须活跃。 对象携带动作时摄像机可以停留。移动摄像机以跟随或揭示某物；不要依赖在静态背景上淡入/滑动文本，或在所有片段中重复平移/缩放。
- “放大缩小” = 景别大小，非摄像机呼吸。 如果视频感觉静态或用户要求缩放，摄像机靠近正在讲述的元素（中近景 / 特写），然后根据内容节拍后退到广角；百分之几的呼吸几乎不可见（
techniques.md§3b）。
在设计场景之前阅读 references/anti-ppt.md — 包含实际违规及其修复的列表。
法则 #2 — 确定性或死亡
没有一行代码读取系统时间。所有视觉元素都是 tl.time()（GSAP 时间线时间）的纯函数：光谱、运行数字、粒子、摄像机抖动（高频正弦，非 Math.random()）、对象“流动”位置（缓冲距离，非逐帧速度累积）。结果：像 After Effects 时间线一样精确的拖动，且逐帧渲染到 MP4 每次产生相同图像。
法则 #3 — 风格来自主题，而非启动器，也非参考
常见失败：其他产品的开场与前一个产品的开场完全相同的外观 — 深色、蓝色强调、发光、星云、相同字体 — 因为模型从启动器提取样式。动画可能很好，但仍然失败：开场是产品的面孔，两个产品不能有相同面孔。
- 先写风格简报，后写代码。 在接触启动器之前，编写这六行，并向用户展示以及场景运行表：
- 主题/产品 + 描述期望留下的感受的三个形容词；
- 概念与结构指纹（开场/推广）：从
references/opener-konsep.md提供三个候选概念，选择⼀个并给出产品理由，然后概念 · 场景数量 · 每场景主要对象 · 开场 · 收尾； - 调色板：一个主要颜色来自品牌/主题（标志、应用图标、网站、包装），一个背景颜色，一个强调色 — 为每种颜色提供十六进制值和来源；非品牌颜色标记为“派生: 理由”；
- 具有与感受相符字符的展示字体（非 Poppins/Inter/Roboto/Montserrat/Arial）+ 辅助字体；例外：概念声明 → 方式 → 结果使用产品自己的 UI 字体（
references/opener-konsep.md）； - 文本强调：无单词高亮，或一种高亮形式（提及）— 单词强调可选，非每个开场的默认项；
- 每段的背景语言：从“风格方向”表中为所有片段选择一种方向，或计划变化（哪些段变化、变化成什么、为什么、触发什么）；
- 动作签名：一种重复作为身份的动作类型（对象擦拭、每词 3D 滚动、飞纸、绘图线条、色块撞击边缘…）；
- 背景运动：从
techniques.md§7c 菜单中选择一种语言 — 与动作签名不同，也非自动的“物体划过”；
…