产品运动设计
制作一个连贯的故事，而非无关精美卡片的幻灯片。通过 意图 → 动作 → 结果 → 产品价值 → 品牌 来保持观众对关注对象的注意力。
选择一个起点
阅读相关示例的README，然后阅读其源代码。路径基于此技能解析；切勿假定先前会话中的文件仍然存在。
| 任务 | 从这里开始 |
|---|---|
| 类似iOS的滚轮、滚动数字、分段、标尺 | examples/controls/README.md |
| 动态排版、扭曲的UI入场、光标引导展示 | examples/relay/README.md |
| 大型组合器、打字关联的相机、发送→生成结果 | examples/composer/README.md |
| 短9:16真3D设备旋转 | examples/device-studio/README.md |
| 完整的22秒移动端发布 | examples/milo-launch/README.md |
| MIDI作曲、采样乐器、混音 | examples/midi-score/README.md |
阅读 references/direction.md 了解场景安排和节奏，references/deterministic-rendering.md 了解视频导出前的准备，以及 references/asset-rights.md 了解发布或重新分发资产前的注意事项。官方第三方灵感链接位于 references/gemini.md 中；这些视频仅供参考，并非捆绑的开源资产。
确立镜头
- 复用已提供的产品、受众、宽高比、时长和语调。仅询问缺少且会改变工作的信息。对于虚构产品，选择一个连贯的概念，而非询问每个细节。
- 在对产品声明之前，先检查真实的产品/品牌资料。切勿编造能力、指标、用户评价或产品截图。
- 对于新的视觉方向，除非明确要求制作完整影片，否则先制作一个2-3秒的HTML镜头。在扩展已批准的编排时保持其风格。
- 默认使用自包含的HTML/CSS/JavaScript作为原型。HTML请求并非执行昂贵视频渲染、上传或云发布的许可。仅在需要或要求时更改技术栈。
- 在编码前简要说明动作序列和相机交接。保持每个镜头的焦点对象清晰。
导演运动，而非装饰
- 在实际字体加载后测量文字。当新字到达时，重新排列前面的文字，保持构图中心。
- 分离位置、不透明度和模糊曲线。使运动早期可见，并在最终过冲前清除模糊。刻意编排退出动作，而非默认淡出。
- 使用简短、可读的过冲和稳定；不要让每个物体都摇摆。
examples/relay/scripts/motion-core.mjs包含经过测试的文字/相机弹簧、贝塞尔曲线和圆柱翘曲函数。 - 当需要弯曲效果时，使用多个水平条带翘曲面板；单一平面旋转并非弯曲表面。从一个进度值驱动两个轴上的对角线移动。
- 缩放至实际动作，而非显示不可读的小仪表盘。在同一个变换坐标系中移动光标和UI，包括热点补偿。
- 展示悬停→按下→释放→真实状态变化。拖动需要拾取、移动、落点和更新的相关状态。让结果跟随导致它的动作。
- 保持着色器时间与场景时钟同步。说明WebGL何时回退；切勿将静态渐变称为正在运行的着色器。
交互式控件与录制动效
使用内置控件，而非为每个视频重新构建物理效果。
setValue(value)是交互式的：从当前展示位置和速度积分弹簧。允许输入中断它。renderAt(value)是确定性的：立即设置一个分数组件值。在视频中，从帧/帧率推导此值；捕获期间不要运行实时弹簧或挂钟循环。- 对于滚轮，在列表中间显示固定的中心选择窗口和每侧两个弯曲选项。根据到中心的分数距离计算位置、倾斜、缩放和不透明度。
- 使用指针捕获进行1:1的拖动追踪。释放时，投射动量，吸附到有效项目，并将速度带入稳定过程。应用渐进边界阻力。
- 支持滚轮/触控板、键盘、聚焦、可访问的名称/当前值、窄视口以及减少运动。没有明确需求时不要播放声音或触觉反馈。
- 在直接操作时停止外部演示时间线；两个时钟不得为同一组件竞争。
组合器与相机
当输入框为空时，显示两端圆角。在输入过程中扩展有限字段。测量文本和发送位置；跟随增长中的文本，从开始处加速并刹车，停在发送处。保护一个单独的文本区域，使字母永远不会穿过按钮下方。发送后，显示一个独立编排的结果及其内部的有意义动作；不要将输入变形为输出。使用通用Canvas Lab示例进行编排，不要将其作为真实模型行为或延迟的声明。
真3D设备镜头
使用真实的GLB和原始显示网格，而非PNG帧或浮动的DOM屏幕。将屏幕和机身保持在同一骨架中。使用工作室柔光箱反射、分开的金属/玻璃/光学材质、更长焦相机、缓动旋转以及可读的前向暂停。在屏幕纹理中动画化应用动作，使触摸指示器遵循透视。同时捕获DOM排版和WebGL以供视频输出。
参考iPhone GLB 未包含 且并非MIT许可。需要用户单独许可的副本或明确许可的替代品。在使用不同模型前检查网格名称、显示法线、UV、缩放和构图。切勿将示例称为官方Apple CAD、官方Apple渲染或路径追踪。
声音，仅在被请求时
阅读 references/music.md。当要求MIDI/乐器时，优先使用原创多轨MIDI→单独获得的许可SoundFont→渲染的分轨→混音；不要强制使用付费神经API。将稀疏的声音重音与实际画面线索绑定。保持音乐、音效和语音独立可编辑。未经用户聆听/评审，不要声称配乐是好的或已批准的。测量值和提示表并非完成、试听过的音轨。
对于实时HTML，对音频进行手势门控，并使视觉时钟独立于音频 resume() promise 或停滞的音频时钟。音频失败不得冻结动画。对于离线视频，将样本对齐到时间线，而非将实时浏览器音频流作为唯一主轨录制。
验证与交付
- 运行相关的数学/功能测试。检查正向、反向、任意和重复寻址；光标命中；状态因果性；键盘/拖动中断；390px布局；以及JS错误。
- 尊重用户在视觉审查方面的范围。切勿声称渲染或元数据检查是视觉检查。如果请求视觉QA，实际检查代表性入场/中间/交互/退出帧，并修复重叠、裁剪、不可读的副本以及错误的图层。
- 对于MP4，实际渲染并验证时长、尺寸、帧率、帧计数、解码和音频存在。不要交付指令并将其称为导出的视频。
- 交付请求的HTML或MP4，以及可重现的源代码、精确设置、资产权利说明和诚实的限制。不要静默添加音乐。
- 将私有凭证、会话URL、操作系统资产、下载的商业模型以及包含受限资产的生成包保留在公共仓库之外。根MIT许可涵盖原始代码/文档，而非每个依赖或外部资产。