UI动态演示短片 是做什么的？
一部短片是一个由逐帧渲染的HTML场景。每个动画值（形状尺寸、半径、颜色、摄像机缩放、光标、控件）都是一个阻尼弹簧，以8倍帧率预先模拟一次，因此任何帧都可以独立并行渲染。配乐从同一时间线合成，因此每个节拍、点击和嗖声都与画面精确对齐。
包含的组件：
assets/engine/reel.js：引擎（弹簧、测量、光标脚本、摄像机、内容模糊切换、悬停和按压、无缝循环、里程表计数器、图标集）。assets/engine/score.js：原创可循环音轨（铺垫、拨弦琶音、贝斯、鼓、渐变音、铃铛）以及UI音效设计（点击、嗖声、打字、止动、滑动），通过OfflineAudioContext渲染。assets/template/index.html：一个24秒的起始场景，包含每种交互类型：列表行悬停、滑块拖拽、切换、里程表、长按确认环、成功药丸、摘要卡片、循环返回。scripts/setup.sh：搭建短片文件夹（引擎+模板+脚本+node依赖）。scripts/render.mjs：静帧、音频，以及并行MP4渲染，配乐混音并标准化响度。scripts/qa.mjs：接触表、原始循环接缝检查、过渡条、响度和频谱图。references/api.md：完整的Reel.define配置参考。在编写场景前阅读。references/craft.md：动画和设计规则，以及已经犯过并修复的错误。在设计状态前阅读。references/score.md：如何塑造音乐和音效设计，以及如何检查您无法听到的混音。references/examples/stockback.html：原始的60秒、14状态短片，该技能从中提取（一个金融科技收据到股票的应用）。阅读它以获取内容创意和更密集的编排。它早于引擎API，因此复制模式，而非代码。
工作流程
-
首先了解产品。 阅读产品的网站或代码，了解其调色板、字体、标志以及讲述产品故事的5-8个关键时刻（输入、“魔法”、证明、回报）。尽可能使用真实文案和数据：真实的数字和标志使短片可信。如果用户要求特定的外观，则以此为准，而非产品本身的外观。
-
在编写标记语言之前编写状态脚本。 对每个状态决定其尺寸（w, h, radius）、填充（调色板中的3-4种颜色之一）、摄像机缩放（使状态填充大约80%的画面高度或宽度）、持续时间以及光标行为。完整短片的目标为45-60秒和10-14个状态，预告片则为20-30秒和5-7个状态。在120 BPM下，一个节拍为0.5秒，一个小节为2秒。使每个状态的持续时间为0.5秒的倍数，并将重要时刻安排在小节线上（2秒的倍数），以便音乐能击中它们。持续时间必须精确总和为总时间。
-
搭建项目。
bash ~/.claude/skills/ui-motion-reel/scripts/setup.sh <project>/video，然后编辑<project>/video/index.html。除非短片需要引擎特性，否则保持引擎文件不修改；如果需要，则修改项目中的副本并提及。 -
构建场景，按照
references/api.md：每个状态一个.content块（id="c-<id>"，data-w/data-h等于状态的宽度/高度），光标目标或您要动画化的所有内容都需要id，然后使用Reel.define({...})定义状态、光标事件、自定义通道（滑块、切换、长按、擦除）以及每个状态的update函数用于内部动画。 -
尽早并经常审查静帧。
node render.mjs --stills 0,1.5,4,...，然后查看它们（使用node qa.mjs --every 2构建接触表）。检查每个状态的静止状态以及一些中间变形帧。渲染静帧只需几秒；完整渲染60秒短片在6个工作线程上大约需要一分半钟。 -
配乐。 设置
score（进展、关键状态上的命中点、间歇）以及一个sfx钩子用于场景特定音效（打字、止动、计数器、滑动）。node render.mjs --audio，然后node qa.mjs并读取响度行和out/qa/spectrum.png（参见references/score.md：您无法听，因此通过数字和图片判断混音）。 -
渲染和质量检查。
node render.mjs --mp4 --with-audio --out <name>.mp4，然后node qa.mjs --transitions --video out/<name>.mp4。确认原始循环接缝为1.000000，查看transitions.png中是否有灰色中间变形或内容溢出画面，并再次查看接触表。 -
交付 MP4文件（如果文件传输可能受大小影响，则同时提供720p副本），以及简短的内容说明：状态、交互、音乐的作用。诚实地告知用户您通过分析而非听力检查了音频。提供重新调整时间或重新主题的选项：重新渲染成本低廉。
不可妥协的原则（视觉效果）
这些原则使短片看起来像设计师的作品，而非模板。references/craft.md详细解释了每一点。
- 单一形状，无切换。每个状态都是同一元素改变尺寸、圆角和填充；内容在内部通过短暂模糊切换（引擎处理）。
- 光标驱动所有变化：点击、拖拽或长按。没有状态自行改变，除非是真正的系统响应（长按完成）。
- 无处不在的弹簧动画；最多只有微小的过冲（尺寸的zeta约为0.86，颜色和相机为1.0）。不要使用弹跳缓动。
- 摄像机适配每个状态；最后一帧等于第一帧，以便短片循环。
- 无死时间：每一刻都有有意义的移动，并且光标从不等待超过大约一秒钟。
- 无粒子爆发、发光、镜头光晕、UI镀铬上的渐变或不匹配的图标描边（使用引擎的图标集：一个24网格，一个1.75描边）。
- 一种UI字体，可选地搭配一种显示强调字体（模板将Geist与Instrument Serif斜体配对）。当产品有字体时，使用产品的字体。
性能说明
- 60秒的1080p60短片包含3600帧。在Apple Silicon Mac上，使用6个工作线程渲染大约需要80-90秒。
- 脚本在结束时调用
process.exit，因为puppeteer可能在完成工作后仍保持Node活动。如果您编写自己的脚本，也应这样做，否则长时间运行的命令可能会看起来挂起。 - 在网络导致大文件上传超时时，也导出720p副本：
ffmpeg -i reel.mp4 -vf scale=1280:720 -c:v libx264 -crf 25 -c:a aac -b:a 160k reel-720p.mp4（ffmpeg位于node_modules/@ffmpeg-installer/*/ffmpeg）。