bang-motion

Bang Motion — 不像 PPT 的动态网页

v1.19.0 · 作者：Bang Tutorial · MIT。 更新记录见 CHANGELOG.md； 安装方法见 README.md。

这项技能适用于任何 AI 编码 Agent（采用开放的 Agent Skills 格式）。 其中包含制作动态视觉效果的规则和指南，让画面像视频一样动起来，而不是演示文稿——编写代码前请遵守。

前提条件 — 只需浏览器

交付成果（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 重播，Space 暂停。擦洗面板/时钟仅在使用 ?debug=1 时显示（用于审核），而 ?clean=1 会阻止自动播放，便于导出。有声音？直接尝试调用 play()；如果浏览器拦截，则停在第 0 帧，并在首次点击时开始——不要显示“点击开始”文字。这些设置已内置于两个 starter 中。

结构性禁忌 — 可机械检查的 PPT 测试

其他模型（以及疲惫时的你）即使读过下面的规则，也会落入这些套路。提交前，检查代码，而不是凭感觉：

1. grep -c "class=\"scene\"\|<section" index.html — 若 ≥ 3 个场景通过 autoAlpha/opacity 开关 <section> → 那就是幻灯片。场景必须因世界/镜头移动而切换（镜头移动、甩镜至另一角度、穿越式推进、背景切换），而不是让 section 淡入淡出。唯一合理的例外：舞台卡通（references/kartun-panggung.md）在不同舞台间采用 96 px 的切换/滑动——可以，因为每个舞台都完整活动（≥10 个动作物件），不是淡入淡出的静态图。

2. 必须有贯穿始终的视觉主线：一个主体（连续动作），或者一个由镜头探索的拼贴/纸张/白色世界（卡通、照片、目录、素描）。全出血照片不断切换，却没有共同的世界 → PPT。每个场景只有一张图 + 一句话，并逐场景切换 → 仍然是幻灯片，即使镜头在移动：每个场景应有 3–5 个元素，随短语逐步进入（explainer.md「一个场景 = 3–5 个元素」）。

3. 逐场景统计文本节点：眉题/引题 + 标题 + 正文/署名 = 3 个层级 → PPT。最多两个：一个大数字/句子 + 一个世界标签。包含 ≤ 3 行短文字的文档/印章/日期块算作物件，不算文本层级。

4. Ken Burns（照片缩放 1.0→1.05）作为唯一运动 → PPT。每秒的运动必须来自风格简报中选定的背景运动语言，选自 techniques.md §7c 菜单（背景纹理中镜头呼吸、渐变移动、浮动色块、动态颗粒、分段光扫、缓慢旋转的大形状、上升粒子、呼吸网格、移动的幽灵文字、Ken Burns + 视差……）。横向穿过画面的条、线、切片（“lane”“range”“streak”、水平粒子雨）已经被连续两个项目用不同名字用过——这不是默认做法；仅当主题确实关乎速度/流动时才用，而且不能连续两个项目使用。

5. 所有切换都只有淡入淡出 + 缩放顿挫 + 漏光 → PPT 模板。改用甩镜至另一角度、切换至特定工具（地图/速度表/侧影）、穿越式推进。

6. Explainer 必须从对应风格的 starter 开始：starter-explainer-kartun、-jurnalisme、-katalog、-sketsa（拼贴模式：镜头探索静态素材）、starter-explainer（连续动作：世界流动），或 starter-explainer-panggung（舞台卡通：每个场景一个舞台、关节骨骼绑定、镜头仅在舞台内活动）。拼贴模式使用一种骨骼绑定；舞台模式使用另一种。不能从 assets/starter-opener.html（文字开场）开始，也不能从零开始。

7. 微缩场景就是幻灯片。 镜头缩放 < 1.08，房子小得如同拇指，空地占据半个画面 → 即使所有元素都在动，也仍是 PPT。世界应拆分成与画面同尺寸的舞台，而不是一个供人探索的大地图（kartun-panggung.md 法则 1）。

8. 模板框架（开场/宣传片）。 检查分镜表和代码：第一个场景是放大文字，再向左退出；三个功能平铺的磁贴/卡片；输入框/搜索栏中的打字效果；钩子 → 功能 → 功能 → 承诺 → 标志 → CTA 的顺序。若其中两项或更多在没有概念要求的情况下同时出现 → 就是模板，即使外观焕然一新。请从 references/opener-konsep.md 重新选择框架。

只要有一项不合格 → 在展示给用户之前重做。

涵盖的作品类型

这项技能适用于一般网页动态图形。说明视频只是其中一种类型——它有自己的文档，是因为结构不同，而不是因为它最重要。

Starter 按类别命名：starter-opener.html 用于 opener、promo、bumper、intro 和 kinetic typography；starter-explainer-*.html 用于 explainer，后缀表示模式/风格（-kartun、-jurnalisme、-katalog、-sketsa = 拼贴；无后缀 = 连续动作；-panggung = 舞台卡通）。舞台卡通是 explainer 模式（风格 6），不是独立类别：其目的仍是通过 VO 进行说明，不同的只是制作方式。

类型	常见时长	特征	配方
Opener / 产品 promo	25–40 秒	从菜单中选择一个概念（结构由产品决定，而非固定顺序）、一个特别时刻、品牌收尾	references/opener-konsep.md + 下方工作流 + references/techniques.md
Bumper / ident / logo sting	3–8 秒	logo 逐步呈现、一个标志性动作、在观众意识到之前结束	techniques.md（logo 逐步呈现、light leak）
频道 intro / outro	5–12 秒	频道名称 + 每集重复相同的标志性动作	下方工作流
Kinetic typography / 歌词	15–60 秒	文字是主体；按词/字母拆分；节奏跟随音频	techniques.md（拆分 + 定向模糊、逐词 3D 平移）
Title / lower third / 分段 bumper	2–6 秒	叠加在 footage 上的小元素，干净地进出，背景透明	techniques.md
Explainer / 说明视频	30–90 秒	有来源的事实、实体出镜、视角切换、五种风格	references/explainer.md + 对应风格的 starter

Explainer 与角色：确定镜头前请阅读

对于带角色的扁平教育卡通 explainer（第六种风格，舞台卡通），或看起来像幻灯片/微缩模型的修改稿，请阅读 references/kartun-panggung.md：每个场景一个舞台，缩放 1,08–1,95，舞台内连续呈现，舞台之间切换/平移 96 px，使用手动变换的关节 rig，不加 caption，采用明亮的扁平调色板。请区分句子、视觉节拍、取景和舞台切换。若要直接在 After Effects 中构建，请阅读 references/ae-bridge-higgsfield.md。这些 explainer 专属指南是对下方 opener 规则的补充说明；字体示例、scene 数量和效果并非通用配方。

规则 #1 — 这是视频，不是幻灯片

最常见的问题：模型把场景编排成幻灯片——标题 + 副标题 + 正文 + 一排徽章。这会立刻显得像“PPT”，并被拒绝。

硬性规则：

• 对于 opener：每个场景只用一个短句 + 最多一个主体对象。 不要有 kicker（“01 — 功能”）、副标题、说明段落、功能 chip/badge 或技术元数据（package 名称、长 URL）。正在使用的产品 UI 中包含的 chip、按钮和标签不受此限。
• 新信息 = 新的视觉响应。 对于 explainer，如果内容仍有关联，就在同一个世界中改变状态/动作；句子切换不一定要更换镜头。
• 要点列表应改用视觉呈现，而不是自动变成三个 tile。 从 references/opener-konsep.md 的功能菜单中选择一种方式（演示一项功能、文字轮换、对象变形、卡片洗牌、tile 网格……）；连续两个 opener 不得使用相同方式。
• 场景必须鲜活。 对象带动动作时，镜头可以固定。移动镜头以跟随或揭示内容；不要依赖在静止背景上淡入/滑入文字，也不要在所有片段中反复平移/缩放。
• “Zoom in-out” = 镜头景别变化，而不是镜头呼吸。 如果视频显得静止，或用户要求缩放，镜头应靠近正在讲述内容的元素（中近景 / 特写），再随内容节拍退回远景；只有几个百分点的呼吸效果几乎看不出来（techniques.md §3b）。

设计场景之前请阅读 references/anti-ppt.md，其中列出了实际违规案例及其修正方法。

法则 #2 — 确定性，否则就失去意义

没有任何一行代码会读取系统时钟。所有视觉效果都是 tl.time()（GSAP 时间轴时间）的纯函数：频谱、滚动数字、粒子、摄像机抖动（高频正弦波，而非 Math.random()）、“流动”对象的位置（对距离进行补间，而非逐帧累积速度）。因此，时间轴可以精准拖动，而且逐帧渲染为 MP4，每次生成的图像都完全相同。

法则 #3 — 风格源自主题，而非起始模板或参考

常见的失败情况：为另一款产品制作的开场片，外观却和上一款产品的开场片完全一样——深色、蓝色点缀、光晕、星云、相同的字体——因为模型从起始模板中套用了风格。动画可以很出色，但依然失败：开场片是产品的门面，两个产品不能有相同的面孔。

1. 先定风格简报，再写代码。 动手修改 starter 之前，先写下 以下内容，并与场景安排一并展示给用户：
   • 主题/产品 + 希望留下印象的三个情绪形容词；
   • 概念与结构指纹（开场/宣传片）：从 references/opener-konsep.md 中选出三个候选概念，根据产品说明为何选择其中一个，然后写出 概念 · 场景数量 · 每个场景的主要对象 · 开场 · 结尾；
   • 配色：一个来自品牌/主题的主色（logo、应用图标、网站、 包装），一个背景色，一个强调色——注明每种颜色的十六进制值和 来源；非品牌色须标注“衍生：原因”；
   • 一个契合目标情绪、有个性的展示字体（不能用 Poppins/Inter/Roboto/Montserrat/Arial）+ 一个搭配字体；例外： 对于“主张 → 方法 → 结果”概念，使用产品自己的 UI 字体 （references/opener-konsep.md）；
   • 文字强调：不突出关键词，或选择一种突出形式（请注明）—— 关键词强调是可选项，并非每个开场的默认做法；
   • 每个片段的背景风格语言：为全部片段从“风格方向”表中选定一种， 或制定切换方案（哪个片段切换、切换成什么、原因、触发因素）；
   • 动作标志：重复使用一种动作作为视觉识别（擦除对象、逐词 3D 翻转、 飞纸、绘制线条、色块撞向边缘……）；
   • 背景动效：从 techniques.md §7c 菜单中选择一种风格语言——不能 与动作标志相同，也不能默认选择“物体掠过”；
   • 背景表面：从 §7d 菜单中选择（渐变/光效/纹理/grainy gradient， ≥ 2 层）——不能是纯色；
   • 对象渲染风格：从 techniques.md §7e 菜单中选择一个类别（扁平、 clay、光泽、玻璃、等距、写实、霓虹线条……）；
   • 照片素材（若概念使用人物/地点/产品照片）：照片来源——用户提供、 通过 MCP Higgsfield 生成，或使用授权素材库——须向用户确认；并列出 每个段落的镜头清单（references/opener-konsep.md 中的“开场中的照片”）；
   • 转场：确定哪些边界需要特效，哪些只需直接切换；根据情境从 §4c 菜单中选择，不要求一定使用两种转场，也不要求一定使用 3D；
   • 一个特别时刻（最昂贵的特效只在何处使用一次）。
2. Starter 是架构，不是风格。 assets/starter-opener.html 中的灰色、 系统字体和 WebGL 背景都是占位内容。如果成品中还看得到其中任何一项， 就说明风格尚未落实。WebGL 背景（星云、尘埃、网格、辉光）只是八种 背景风格语言中的一种；若风格方向不同，就将其关闭。
3. 参考作品 = 节奏，不是外观。 从参考视频中提取：每个镜头的时长、 转场类型、注意力层级、能量、动作语言。不要借用：配色、字体、纹理、 布局、装饰形状、文案、场景顺序，以及独特时刻（标志性开场/结尾、 一次性噱头）。“做得像这样”指的是“能量像这样”，而非“颜色像这样”； “采用 X 风格”指的是 X 的外观和动作语言，而非 X 的场景。references/opener-konsep.md 中的场景顺序示例也应同样对待：它们是原则，不是脚本（结构法则 #7）。 照搬参考作品的外观 = 侵权，即使是用户提供的参考也不例外——请用一句话 说明这一点，然后提出一个源自主题的版本。
4. 与之前的项目不同——外观和结构都要不同。 两个不同产品的项目必须至少在以下四项中有三项不同：配色、字体、背景风格语言、动作标志—— 包括使用时的关键词强调形式（一个项目使用的 pill + 星星不能再出现在 另一个项目中）。结构也必须不同：概念不同，或结构指纹的五项元素中 至少三项不同（references/opener-konsep.md）。在旧场景顺序上换一套 新颜色，仍然是模板。 不要打开旧项目文件夹寻找“示例”——只能沿用本技能中的规则。
5. 背景不要默认设为深色。 没有这条规则时，所有开场都容易因为 starter 和示例偏暗而变成深色星云背景。背景应契合主题：明亮渐变、柔和色彩、 色块、纸张、照片或深色——“风格方向”表有十种选择，其中大多数不是 深色。 本技能中的示例（明亮纸张、星云）只是示例，不是固定模板。 背景绝不能静止。 始终要有背景动效（§7c），且可按需随时切换背景 颜色：片段情绪/主题变化（转入产品、问题 → 解决方案、主张 → CTA）， 多彩品牌需要色彩节奏，或屏幕上的动作确实改变了背景（开关打开、 物体遮住镜头、图标放大并铺满画面）。只需确保两点：切换有明显的触发 方式（擦除、物体、UI 动作、推进至色面、随节拍直接切换）——不能毫无 原因地交叉淡化，让人觉得是在“换幻灯片”；背景也不能仅仅因为从未 考虑过，就一直保持一种静止的颜色。请在风格简报中写明切换方案。
6. 大胆表达。 这里的法则约束的是结构（不是幻灯片）、对比度（文字 清晰易读）和新颖性（不重复其他项目）——而不是表达方式。只要符合主题， 就鼓励使用丰富渐变、光效、3D、纵深、纹理和大胆色彩。唯一禁止的是 采用最省事的默认方案并重复使用：平面方块扫过、线条掠过、纯色背景、 沿用其他项目的外观。如果两种方案都符合规则，就选更大胆的那一种。
7. 所有项目中可以保持一致的内容： 反 PPT 法则、摄影机 rig、确定性、 非对称进出节奏、最小文字尺寸。

风格方向（选择一种；也可以有意识地融合两种）

方向	背景	字体	特色动效	适用场景
暗黑电影感	近乎黑色的渐变、WebGL 粒子／星云，辉光仅作用于物体	干净利落的粗体无衬线字体	镜头穿越、镜头前方的光线	创意工具、游戏、科技
色块海报	大面积纯色块随场景切换，不用渐变	超粗展示字体，超大文字被边缘裁切	色块擦除、文字撞向画面边缘	消费类应用、音乐、活动
明亮编辑风	白色／米色、大量留白、细线条	展示衬线字体 + 小号无衬线字体	轻柔滑动、线条绘制、镜头平稳	生产力、金融、SaaS
纸张与印刷	纸张纹理、拼贴剪纸、印章、胶带	手写体 + 衬线字体	物体飞入后落下、倾斜角度	教育、社区、美食
复古／模拟风	褪色配色、颗粒、扫描线、VHS 边框	70—90 年代几何字体	可控故障效果、粗糙变焦、定格	怀旧、音乐、娱乐
野蛮主义单色风	黑白、高对比网格、描边方框	等宽字体 + 窄体字	硬切、色块位移、光标闪烁	开发者工具、技术领域
活泼粉彩风	层叠粉彩、大型圆润形状	粗体圆角无衬线字体	弹性回弹、形状绽放	儿童、健康、生活方式
暗黑奢华风	黑色 + 金色／青铜色、柔和阴影、微光	高挑、字距宽松的衬线字体	缓慢移动、光束扫过、景深效果	时尚、汽车、房地产
照片融合扁平潮流风	明亮中性色交替搭配用户品牌的纯色背景；扁平形状和贴纸取自用户 Logo 的几何元素 + 柔和的 3D 插画	粗体圆角几何无衬线字体 + 被边缘裁切的超大文字	人物照片剪影从下方弹出、贴纸弹性爆出、色块随节拍扫过／弹入	消费类应用、金融科技、电商、年轻化品牌
颗粒渐变风	深色／浓郁底色；由 2—3 种饱和色构成、由内向外发光的渐变形状；整个画面布满细腻颗粒	小号干净无衬线字体，或极简粗体展示字体	形状图层缓慢展开／旋转、镜头穿过形状孔洞、引导光球	科技、AI、音乐、金融科技、创意发布

连续两段开场使用表格中的同一行 = 危险信号； 请选择其他行，或以尚未使用过的方式融合两行。

法则 #4 — 文字鲜明，背景退让

使用相同场景设计的两个开场，可能效果极佳，也可能糟糕透顶， 区别仅在于字体排印和对比度。糟糕的做法：每个标题都用全大写 800 字重，置于中央，以相同方式入场，背景是一片比文字还亮的白光。 好的做法：用 500 字重的句首字母大写样式，突出关键词（例如胶囊框 + 星星——这是某个项目的标志性风格，不是规则；也可以不单独突出文字）， 只在必要时使用标点，交替改变字号／方向／ 位置，文字下方的背景保持平静，背景随片段切换。完整配方和代码见：techniques.md 第 1 和 1b 节。简而言之：

• 使用 500–600 字重的句首字母大写样式。全大写加粗仅用于单个强调场景。
• 标题、主张和短语默认不加句号——尤其是 ≤ 4 个词的短语 和单行句子。仅在标点能改变含义或节奏时使用：真正的疑问用 ?， 有意连续使用两个短句的风格用句号，! 极少使用。标点风格在风格 简报中一次性确定并保持一致；若使用，标点应作为独立元素最后出现。
• 文字突出效果（胶囊框、下划线、马克笔、方框、颜色、删除线）为可选项， 在风格简报中决定。即便没有突出效果，句子仍然可以通过其他方式强调： 逐词从暗到亮、调整字号／字重、停顿，或让对象（图标、UI） 与文字并列。若使用：每个视频只用一种形式，无需在每个句子中都使用， 并与其他项目有所区别；仅当装饰元素源自品牌形状时才使用。
• 连续两个场景的文字不能在字号、入场方向和位置上都相同。
• 在文字区域内（而非整个画面），背景必须为暗色（亮度 ≤ 25 %） 或亮色（亮度 ≥ 80 %），不能是“中间态”的杂乱背景。在文字区域之外， 背景则应丰富：渐变、光线、纹理（§7d）——拒绝纯色平面背景。任何背景 元素（粒子、形状、 纹理、线条）都应使用调色板中偏暗一侧的颜色；在文字区域内不透明度 ≤ .35，可见的亮色元素 ≤ 40 个。
• 如果片段的情绪确实有所变化，可以考虑交替使用暗色和亮色；但这不是 机械性的要求。

工作流程

0. 识别类型（“工作类型”表）。Explainer → 打开 references/explainer.md，并遵循其中的“步骤零”：用一个问题询问风格（五个选项 + 推荐）、画面比例、时长、声音，以及时长限制。其他类型 → 继续；只询问无法从 brief 推断的信息（画面比例、时长、是否有音乐/VO），并合并为一个问题。 0b. 撰写风格 brief（规则 #3），并与分镜表一并展示。未经批准风格 brief，不要动代码。

1. 吸收参考资料和品牌来源。 如有参考资料，请索要截图/视频片段；按镜头拆解（时长、运动、转场类型、注意力顺序）——只借鉴节奏，不照搬外观（规则 #3）。颜色、Logo（使用原始矢量路径，不要重新绘制）、字体和功能声明，均须来自正在制作的产品的官方来源——不可取自参考资料或其他项目，也不可凭空编造。

2. 根据选定的概念撰写分镜表——表格格式为 秒数 | 场景 | 台词 | 视觉。场景的数量和类型应遵循概念（references/opener-konsep.md），而非套用“钩子 → 功能 → 功能 → 承诺 → Logo → CTA”的套路。总时长为 25–40 秒。写代码前请先让用户批准分镜表；修改分镜表成本低，修改代码成本高。

3. 搭建架构。 Opener/promo/bumper/typography：复制 assets/starter-opener.html（舞台 1920×1080，摄像机 rig #world，有状态的 Three.js 场景，时间线 helper），然后立即根据风格 brief 替换颜色、字体和背景语言 token——starter 特意采用灰色。Explainer：根据风格复制 starter — starter-explainer-kartun/-jurnalisme/-katalog/-sketsa.html（拼贴模式：摄像机在 cutout/照片上执行 into/settle/look/home，逐词 say/unsay，绘制注释，场景间穿透转场），或 starter-explainer.html（连续动作：世界流动、hero、世界对象、地图视图、whip）。所有文件都已设置自动播放 + 循环，无需播放器。多文件结构及各项决策的说明见 references/architecture.md。

4. 逐个构建场景，使用 references/techniques.md 中的配方（逐字母拆分 + 定向运动模糊、逐词 3D 平移、转场菜单、UI mockup）。配方是工具，不是采购清单：只使用概念要求的内容。

5. 验证视觉效果，而不只是“代码能运行”。 你无法观看视频；只能查看 FRAME。使用 scripts/snap.mjs（puppeteer，打开 file://，无需服务器）截取 6–20 张关键帧（每个场景的开头、文字出现时、转场时），整理成联系表，并像导演一样评估：文字被裁切了吗？有重叠吗？镜头还没结束文字就出现了吗？看起来还是像幻灯片吗？修正后再次截图。 不要渲染所有帧进行检查——那会产生数千张图片，而且不能算作验证；只有用户要求导出 MP4 时，才在步骤 6 完整渲染。没有 Node 时：打开 ?debug=1，手动拖动时间轴并截图。

6. 交付一个可双击打开的 index.html。 最终输出不得依赖服务器/Node：CSS 和 JS 必须内联在文件中（通过 file:// 打开时，本地 <script type="module" src="…"> 会被 CORS 阻止，而内联 module 不会）；库从 CDN 加载；资源（图标/图片）使用同一文件夹中的相对路径。无缓存服务器（scripts/serve.py）仅用于编辑时的工作，不是观看的必要条件。屏幕上不要放播放器（参见“播放器”）；告知用户可用 ?debug=1 拖动时间轴。仅在用户要求时导出 MP4：scripts/export-frames.mjs 会以 60 fps 将每一帧渲染为 PNG，再由 ffmpeg 合并——这种方式不会丢帧，但成本高，因此不是常规步骤，也不是检查工具。

7. Explainer 专项：VO 文稿 + 邀请录音——结束消息必须包含完整的 VO 文稿，并请用户录制/生成音频后重新发送，以便同步。文稿格式、录音说明和 retime 的详细信息见 references/explainer.md →“交付”。

Checklist sebelum menyerahkan

• 风格简报（主题、品牌调色板、有个性的展示字体、一种背景语言、标志性动效、特别时刻）须在编写代码前写好并获批
• 不得残留 starter 占位风格（灰色、系统字体、风格方向不同时使用的星云），不得照搬参考作品的视觉风格（调色板、字体、纹理、布局、文案）
• 与之前的 opener/promo 不同：调色板、字体、背景语言、标志性动效中至少有三项不同
• Opener/promo：写出三个概念候选并选定一个；写明结构特征，并确保与之前的 opener 不同；最多使用两个经典组件（文字放大 → 向左退出、三个 tile、输入文字、穿越推镜、漏光、居中 logo + CTA），每个组件都须有概念依据（references/opener-konsep.md）；不得照搬概念示例（开场/结尾须与示例不同，至多有一个经过改造的 ✦ 时刻，调色板和形状取自用户的品牌）
• App/SaaS：至少有一个由用户产品组件构成的动态 UI 段落——搭建、使用并产生结果，而非放大静态截图（references/opener-konsep.md 动态 UI 部分）；若演示感觉静态，重要点击后跟随镜头（靠近 → 点击 → 拉远/平移），而非每次点击都跟随（techniques.md §8）
• 动态文字（法则 #4）：句首字母大写，字重 500–600，强调明确，不自动加句点（只有在改变含义/节奏时才使用标点），不同场景间切换字号/方向/位置； 仅在一个场景中使用全大写粗体。只有风格简报选择了文字高亮时才使用（不自动高亮每句话，也不使用其他项目遗留的 pill + 星星）
• 背景服从文字（法则 #4）：文字下方亮度 ≤ 25 % 或 ≥ 80 %；文字所在区域的背景元素应暗淡且颜色偏暗；进行灰度测试——背景不得比文字更亮
• 在需要的边界选择转场；不要自动在所有边界添加效果，也不要删除所有效果。扫过的对象须在场景中有意义；检查速度、幅度和停顿。
• 从 §7d 菜单中选择背景表面：≥ 2 层（底色 + 光线/纹理/blob），颜色来自调色板——不得是单色平面，也不得使用纯黑/纯白
• 对象的渲染风格须属于同一系列（§7e），或将风格切换设计成一个时刻
• 带照片的 opener：照片来源须经用户同意（用户照片 / 通过 MCP 生成 / 获得授权的库存素材）；生成时使用虚构面孔；在代码中添加 logo/品牌文字；照片须有动画（弹出、视差、容器）——不能只用 Ken Burns 效果
• 若使用颗粒渐变/颗粒：编码后的 MP4 中仍能看见颗粒，且渐变没有色带
• 若使用视频：片段须通过 clip() 挂载（不使用 autoplay/loop），包裹在带动画的元素中；来源须经用户同意；交付时说明 assets/ 文件夹，并截取包含片段的秒数画面（snap.mjs）
• 从 §7c 菜单中选择背景动效，并确保与之前的项目不同；除非主题是速度/流动且之前的项目未用过，否则不得使用横向扫过的条形/线条
• 每个场景的背景都要动（不得静止）；可在需要时更换背景颜色，但须有可见的触发因素
• 符合“结构性禁忌”中的 6 项要求（不是通过淡入淡出切换 section、有贯穿始终的视觉线索、文字不超过 2 个层级、每秒都有运动、转场多样、使用正确的 starter）
• 屏幕上不显示播放器；自动播放；循环播放；使用 ?debug=1 进行拖动浏览
• Opener：一个核心构想，不堆叠徽章；explainer：一个事件可包含多个节拍和相互关联的对象。
• 根据语境选择镜头、剪辑和对象运动；不要求每个片段都移动镜头。镜头移动时，整个世界都要随之移动。
• 不得有漫长且毫无变化的停留：没有大型对象动作的段落，须改变元素的镜头大小（远景 ↔ 中近景 ↔ 特写）或缓慢推进；仅有轻微的镜头呼吸不算。屏幕标签置于镜头 rig 外，不得被缩放裁切
• 所有文字进场/退场都须有方向性运动模糊
• 背景源于主题（不自动设为暗色；可以是明亮的渐变、柔和色彩、色块、纸张），有层次（不是单色平面），且不得比主体更繁杂；在风格简报中按片段决定是否更换背景；若更换，应在 wipe/cut 过程中完成
• Glow 用于对象（tile、bar、装饰图标）——文字标题保持干净（纯白 + 轻微投影），除非用户另有要求
• 展示字体 ≠ UI mockup 字体；mockup 使用产品原本的字体（概念主张 → 方法 → 结果：所有文字都使用产品 UI 字体）
• 渲染路径中不使用 Date.now() / Math.random()
• 已用关键秒数截图（snap.mjs / ?debug=1）并亲眼检查——不是完整渲染；仅在用户要求时生成 MP4
• 有声音？若自动播放被阻止，页面须停留在初始帧，并在首次手势时与声音一起开始——绝不无声启动；不得提供启动器文件（.cmd/.bat）
• 拼贴式 explainer：镜头须有编排（特写 → 滑动 → 拉远），不能只有元素进场/退场——参见 explainer.md「Explainer 镜头」。 舞台卡通：不得出现缩放 < 1.08 的画面；镜头只能在舞台内部移动；舞台之间剪切或平移 96/72 px
• 舞台卡通：关节通过手动 transform proxy 旋转（关节上不得使用 transformOrigin/GSAP rotation，带 translate 的组上不得 tween x/y）；每个舞台 ≥10 个运动物体；不得有字幕；光栅头部须有眨眼和表情变体
• 通过 AE bridge 构建：建立父子关系前将 CAM 归零，所有世界图层都设为 CAM 的子级，按从后到前的顺序创建图层，在父空间中设置身体部位的关键帧；已查看每个舞台的 contact sheet 和 master；结束消息包含 Ctrl+S + 删除测试 comp + aerender 命令（references/ae-bridge-higgsfield.md）
• Explainer：结束消息须包含完整 VO 脚本 + 邀请用户自行录制/生成并重新发送音频以便同步；项目文件夹中已保存 vo-script.md
• Explainer：编写代码前，须在同一个问题中询问风格、比例、时长和声音（用户已提及的除外）；时长遵循简报/VO；场景数量依据内容语境决定，而非用时长 ÷ 6 计算
• 默认比例为 16:9 / 跟随屏幕；仅在用户要求时使用 9:16。除非用户要求，否则不加字幕/caption。不得照搬参考布局（面板、字幕）——仅借鉴其原则
• 动作/速度主题的 explainer：从头到尾都有一个主体，背景持续流动，数字置于世界之中（主体从其前方掠过）——参见 explainer.md「第五种风格：连续动作」
• 视角须变化：不得连续三个场景使用相同视角；每条事实都配有相应的可视化工具（速度表、地图、海拔剖面、地图竞速、内部视角、正面视角）——参见 explainer.md「视角必须变化」；镜头要有呼吸感
• 1080 舞台上不得有小于 30 px 的文字（正文 ≥ 44，标签 ≥ 34，署名 ≥ 30）——须在手机上观看；幽灵文字和注释应有所变化，不得总是使用描边/虚线圆圈
• Explainer：每个被提及的人/公司/地点/产品，都须在对应场景中显示其照片（参见 explainer.md →「被提及的实体」）
• index.html 可通过 file:// 直接打开（双击），无需服务器——CSS/JS 内嵌，不得有本地 module src
• 每帧变化的数字（时钟、计数器）须使用 font-variant-numeric:tabular-nums + min-width，避免容器宽度变化

已经踩过的坑

详情和修复方法见 references/techniques.md 的“Jebakan”部分： bloom 阈值过低 → 白屏；星云 additive → 经 bloom 后叠加； 更具体的 CSS 选择器会覆盖初始状态 opacity:0 → 元素 在动画开始前就出现；浏览器会缓存 JS 模块 → 编辑后“没有 效果”（使用服务器 Cache-Control: no-store）；扁平的 3D 对象绕 Y 轴完整旋转 → 变成一条线（轻轻摇动，不要完整旋转）； SVG 滤镜框默认会裁掉模糊效果的尾部（扩大 x/y/width/height）。

After Effects — 直接通过 Higgsfield bridge

如果 After Effects 已打开、Higgsfield MCP bridge ae_* 已连接，且用户 要求在 AE 中构建动画／解说视频，就直接通过 bridge 命令构建。阅读 references/ae-bridge-higgsfield.md：通过一个小型 Lottie 搭建合成框架，每个场景使用 一个 CAM 空对象（设为父级前，先将锚点和位置归零），插图 由 SVG 代码转为 2× PNG（scripts/ae/bridge/aset-svg.py + svg2png.cjs），角色 使用 AE 原生关节形状（scripts/ae/bridge/rig-tokoh.py，每个角色约 90 个操作）， 身体部位的关键帧设在父级空间中，通过联系表验证（如果 r2.dev 被屏蔽，则使用 relay）。 舞台卡通的规则始终完全适用。Bridge 无法保存／渲染，也无法重新排列图层顺序——请说明这一点， 并从后往前创建图层。构建 10 个场景约需 1 小时，0 积分。

包含内容

文件	何时阅读
references/kartun-panggung.md	舞台卡通：每个场景一个舞台，摄像机 ≥1.08，切换/平移 96 px，关节绑定 + 手动变换，栅格头部 + 局部表情，零字幕，纯色调色板
assets/starter-explainer-panggung.html	舞台卡通讲解视频：舞台系统 + 每个舞台的摄像机，J() 关节，character()（矢量或栅格头部），96 px 呼啸切换，双舞台示例
scripts/kepala-ekspresi.py	生成的头部 → 开心/担忧/惊讶变体 + 眨眼，在本地生成（检测瞳孔和嘴部）
references/ae-bridge-higgsfield.md	BRIDGE：通过 MCP Higgsfield 直接在 AE 中构建舞台卡通 — bridge 限制、陷阱（null 960,540；父级绑定到带关键帧的 CAM；重新排序会出错）、每个舞台的 CAM 架构、原生绑定、联系表中继、交付
scripts/ae/bridge/aset-svg.py, svg2png.cjs, rig-tokoh.py	BRIDGE：从代码生成插画素材 → SVG + manifest → 2× PNG（puppeteer）；为单个关节角色生成约 90 个 op 的 ae_batch
references/anti-ppt.md	设计场景之前
references/opener-konsep.md	OPENER/PROMO 分镜之前：三个概念候选方案、19 个概念菜单（包括物品接力、展示品牌系统、主张 → 方法 → 结果、动态 UI 生态、带照片的扁平弹跳风格、穿越渐变形状，以及穿插主张的产品导览，全部基于品牌服务/素材/产品衍生），布局-色彩-节奏指南、App/SaaS UI 动画指南、开场视频中的照片指南（用户输入 / 通过 MCP 生成）、功能菜单、开场、结尾、由物体衔接的无剪辑转场、结构指纹 — 防止落入模板框架
references/explainer.md	需要制作讲解视频时（卡通+VO、照片视觉新闻、白色目录、复古素描或连续动作；默认 16:9，仅在明确要求时使用 9:16）
references/architecture.md	搭建脚手架 / 需要了解结构背后的原因时
references/techniques.md	构建场景和效果时（包括镜头尺寸 §3b、颗粒渐变 §7d、对象渲染风格菜单 §7e，以及作为素材图层的视频 §9b）
references/roadmap.md	进一步开发此技能时
assets/starter-opener.html	OPENER/Promo 起点 — 架构 + 工具（8 个文字入口，可选转场）；刻意不含示例场景顺序，框架来自 opener-konsep.md
assets/starter-explainer.html	连续动作风格讲解视频（矢量）：流动模式（条带 + 主视觉 + 世界对象）+ 地图视图 + whip + 拼贴模式示例
assets/starter-explainer-kartun.html	拼贴卡通讲解视频：奶油色纸张 + 颗粒 + 污渍，剪贴插画，Bricolage + Caveat，彩色胶囊标签
assets/starter-explainer-jurnalisme.html	视觉新闻讲解视频：黑色 + 颗粒，真实照片 + 来源标签，Barlow Condensed + Plex Mono，黄色/红色荧光标记，虚线标注
assets/starter-explainer-katalog.html	白色目录讲解视频：浅色网格、剪贴照片、Archivo Black + Caveat + Inter、黄色荧光标记
assets/starter-explainer-sketsa.html	复古素描讲解视频：深褐色纸张（CSS 纹理）、正片叠底雕刻剪贴图、Playfair + Garamond + Cinzel、铁锈色与金色
scripts/serve.py	禁用缓存的开发服务器（可选，需要 Python；仅在使用本地模块时需要）
scripts/snap.mjs	验证：截取关键秒数 → 联系表（可选，需要 Node + puppeteer）
scripts/vo-pauses.html	在浏览器中检测 VO 停顿（替代 ffmpeg silencedetect，无需安装）
scripts/export-frames.mjs	导出：渲染所有帧 → MP4，仅在需要时使用（可选，需要 Node + puppeteer + ffmpeg）