oil-oil/oil-motion

什么是 Oil Motion？

Oil Motion 是一款工具，可让您为网页创建交互式、AI 生成的动画。无需编写 CSS、JavaScript 或手工制作视频素材，您只需描述想要的效果，提供源图像或视频，系统（称为 Agent）将：

1. 设计关键帧 – 定义动画结构的“开始”、“中间”和“结束”重要画面。
2. 使用 AI 视频模型生成中间运动。
3. 清理、压缩并打包生成的帧为网页友好格式（MP4、WebP 精灵表等）。
4. 将动画与用户输入连接 – 滚动、鼠标移动、拖拽、触摸或设备方向 – 使视觉效果实时响应。

整个流程打包为一个 Skill，可安装到 AI 代理平台（例如，通过 npx skills add oil-oil/oil-motion）。安装后，代理可通过单个自然语言命令生成完整的交互式动画。

---

谁可能使用它？

• 产品营销人员，希望产品爆炸视图随访客滚动而展开。
• 游戏或角色设计师，需要角色面部跟随光标。
• 技术文档编写者，希望无需编写 WebGL 代码即可实现设备的 3D 风格漫游。
• 前端团队，更倾向于 AI 生成的素材，而不是手动绘制数十帧。

它不适用于简单的 UI 过渡（按钮悬停、模态框淡入）或完整长度的视频编辑。

---

它是如何工作的？

1. 定义目标 – 用户告诉代理所需效果、输入媒体和控制方法（滚动、鼠标等）。
2. 确认关键帧 – 代理首先生成几个关键帧，并检查主体、风格和构图保持一致。
3. 生成运动 – AI 视频模型（通过 ZenMux 服务访问）创建关键帧之间的插值帧。
4. 后处理 – 代理移除暂停、重复帧和视觉故障，然后将结果压缩为适当格式：
   • 全场景 MP4 用于叙事镜头。
   • Alpha-WebP 精灵表用于小型 2D 素材。
   • 绿幕 MP4 用于大型滚动驱动序列。
5. 导出 – 生成可直接嵌入的 JavaScript 包、配置文件以及优化后的媒体，并附带预览页面。

所有繁重工作（AI 生成、压缩）均在离线完成；浏览器仅在预生成帧内查找，确保流畅、低延迟的交互。

---

仓库包含什么？

项目	用途
SKILL.md	Skill 命令、输入和输出的规范。
references/	关于 API 密钥设置、ZenMux 集成和其他技术细节的文档。
assets/readme/hero.svg	README 的视觉横幅。
许可证	MIT – 可自由使用和修改。

该仓库不包含 AI 模型本身；它依赖外部 ZenMux 服务（通过 API 密钥访问）进行图像/视频生成。

---

如何开始？

1. 安装 Skill – 让您的代理执行（帮我安装 …）或运行 npx skills add oil-oil/oil-motion。
2. 提供 API 密钥 – 一次性配置页面（Node 22+）将密钥存储在操作系统凭据存储中。
3. 发出自然语言请求 – 例如，

   使用 oil-motion，把这两张产品图制作成随页面滚动逐步展开的动画。
   

4. 代理将：
   • 生成/验证关键帧，
   • 调用 ZenMux 创建运动，
   • 清理和压缩素材，以及
   • 输出可直接嵌入的动画包。

---

限制与范围

• 最适合主体需要改变形状或姿势的情况（产品拆解、角色转身、摄像机飞越）。
• 不适用于简单的 CSS/JS 过渡、静态图像画廊或完整长度的视频编辑。
• 需要外部 AI 视频服务（ZenMux），每次生成将产生使用费用。
• 代理无法修复根本错误的运动设计；您必须修改关键帧或提示。

---

摘要

Oil Motion 是一个 AI 驱动的流程，将描述和源媒体转换为滚动、鼠标或触摸控制的动画，可直接用于网页。将其安装为 Skill，提供 API 密钥，并让代理创建动画 – 系统处理关键帧设计、AI 视频生成、清理、压缩和代码集成。