这是什么
Oil Motion 是一个面向 AI Agent 的通用交互动画 Skill，它负责设计动作、生成连续画面、整理动画资源，并把最终效果接入页面滚动、鼠标、拖动、触摸或设备方向。它本身不是一套动画库，而是一套让 AI 自动完成从创意到落地动画的完整工作流。
使用时只需要说明希望表达什么、提供哪些素材，以及动画应该跟随什么操作。具体的生成、检查、压缩和前端实现由 Agent 完成。
适合谁
适合需要为网页、产品介绍、品牌展示等场景添加复杂交互动画的创作者、前端开发者和设计团队。尤其适合那些没有足够时间手动制作逐帧动画，但又希望页面拥有高质感动态效果的人。
对于非技术用户，只要能用自然语言描述动画意图，Agent 就能自动完成技术实现；对于开发者，也可以直接调用底层的 Skill 工作流，深度定制生成参数和资源处理方式。
能做什么
- 随滚动一镜到底：实现无限尺度穿透（宇宙到纳米芯片）、实体遮挡跨场景转场、时光流转剥蚀与空间重力折叠。
- 页面向下滚动时：产品逐步展开、拆解爆炸图、进入内部芯片或切换结构状态。
- 鼠标移动时：角色或头像在时钟圆周上注视光标，或硬件产品 360° 展台自转。
- 拖动进度时：动画跟随手势前进、后退或停在指定位置。
- 手机端：使用触摸或设备方向控制视差与动态倾斜。
- 点击、悬停或状态变化：播放对应的语义动作转场。
- 无操作时：自然微动或匀速巡视，用户开始操作后无缝切换为实时随动模式。
这些动画可以用于产品介绍、角色互动、操作演示、数据变化和章节转场。Oil Motion 同时处理动作连贯性、画面清晰度、加载体积和移动端表现。
使用前准备
你需要准备：
- AI 视频生成工具的 API Key（首次使用会引导配置，密钥只保存在本机）。
- 基本的网页资源（图片、视频等素材），或明确说明希望生成的内容。
- 一个支持 Agent 的环境（如 Codex、Claude Code、Cursor 等）。
安装方法
直接告诉你的 Agent：
帮我安装「https://github.com/oil-oil/oil-motion」这个 Skill。使用示例
一旦安装完成，你可以用自然语言描述需求，例如：
使用 $oil-motion，把这两张产品图制作成随页面滚动逐步展开的动画。桌面端的展示区域较大，需要保持清晰；移动端使用较轻的资源。只有产品素材，还没有动作方案时，可以让 Agent 先完成设计：
使用 $oil-motion，为这个产品首页设计一个随滚动变化的连续动画。先提供三个方向，分别说明它们表达什么、如何跟随滚动，以及实现成本。确认方向以后再生成关键画面和视频。角色或宠物需要跟随鼠标时：
使用 $oil-motion，让这个角色跟随鼠标调整朝向。动作需要及时响应，同时限制转动速度，快速反向时不能闪烁或抽动。工作原理
完整的流程是：参考素材、表达目的和控制方式 → 先确认开始、中间和结束时应该是什么样子 → 使用 AI 视频生成这些画面之间的连续动作 → 逐帧检查，删除停顿、重复和异常画面 → 按照页面中的实际显示大小整理并压缩资源 → 把滚动、鼠标、拖动、触摸或设备方向对应到动画进度。
先确认关键画面
关键画面是动作过程中必须保持准确的几个状态，例如产品完整、零件展开和最终拆解。Agent 会先生成并检查这些画面，确认主体身份、结构、Logo、构图和风格没有变化。这能保证 AI 生成视频时不出现结构变形或角色比例错误。
再生成连续动作
关键画面确认后，AI 视频负责生成它们之间的变化。肢体转动、产品变形、材质变化和前后遮挡都在这个阶段完成。位移、缩放、裁切、播放速度等由程序控制，避免交给视频模型导致不稳定输出。
最后转换成可控制的网页资源
生成后的视频会经过整理：裁掉开头结尾的停顿、删除近似重复画面、找出闪烁或结构变化，并根据页面实际显示大小进行压缩。最终浏览器不会在用户操作时重新生成视频，而是在准备好的连续画面中定位或播放。
资源形式
| 使用情况 | 常用形式 | 原因 |
|---|---|---|
| 场景叙事、镜头运动、环境光与地面接触重要 | 烘焙场景全关键帧 MP4 | 背景与主体同视频生成，连续性最好，没有抠色风险 |
| 透明复用：小型、环形、二维或频繁跳转 | Alpha WebP 图集 | 构建时完成抠色，随机访问响应稳定 |
| 透明复用：大尺寸、长时间轴、一维滚动 | 绿幕全关键帧 MP4 | WebGL 实时抠色，压缩率高，避免大型图集占用大量内存 |
Agent 会先运行预算脚本并直接采用最合适的一种主方案，不会把形式选择交给使用者，也不会重复实现两套。量产之前还会先完成首屏 Pilot，并生成带工件哈希的批准文件，确保质量可追溯。
风险与注意事项
- API Key 要求：需要视频生成 API，密钥仅保存在本机，不发送到外部。
- 动作设计错误不可修复：程序可以处理轻微漂移、颜色差异、重复画面和编码问题，但无法修复错误的动作设计。如发现主体结构、肢体关系或动作方向错误，需要重新调整关键画面或生成视频。
- 动效与可访问性：Agent 会检查首次加载的首帧、加载失败的回退方案，也支持用户选择减少动态效果时显示静态替代内容。
- 资源体积：会依据页面实际显示尺寸压缩资源，避免移动端卡顿。