一个 Agent Skill，可将视频转为优化的 WebP 帧序列，并搭建由滚动控制播放的 Canvas 网页。
575MIT更新于 2个月前
oil-oil/oil-motion
面向 Claude Code 与 Codex 的 Agent Skill，把 AI 生成的动作接入随滚动、鼠标、拖动等操作变化的网页动画。
- Star
- 2,632
- Fork
- 197
- 未关闭 Issue
- 1
- 最近提交
- 16天前
这是什么？
Oil Motion 是一个与 Agent 无关的交互动画 Skill，用于制作随页面滚动、鼠标、拖动、触摸或设备方向变化的网页动画。它会先规划动作，用 AI 视频模型生成关键画面之间的连续过程，再逐帧检查、删除停顿和异常画面，并按页面实际显示尺寸压缩资源。
制作时先确认开始、中间和结束等关键画面，保证主体身份与结构不变；动作之间的过渡由 AI 视频生成，而位移、缩放、裁切、缓动和转动速度等由程序控制。最终交付的是预先准备好的画面序列或视频，浏览器根据输入定位或播放，不会在交互时重新生成内容。
资源可以按大小、透明度和播放需求选择烘焙 MP4、Alpha WebP 图集，或配合 WebGL 实时抠色的绿幕 MP4。图片与视频生成默认通过 ZenMux 调用，API Key 保存在系统凭据库中。
核心功能
- 01先确认关键画面，保证生成的连续动作中主体身份和结构一致。
- 02把滚动、鼠标、拖动、触摸或设备方向对应到动画进度。
- 03裁掉开头结尾的停顿，删除重复画面，并标出闪烁或结构变化。
- 04根据页面中的实际显示尺寸压缩资源。
- 05提供烘焙 MP4、Alpha WebP 图集和绿幕 MP4 等交付形式。
- 06API Key 保存在系统凭据库中，不需要发到聊天里。
适用场景
- 产品页面中，随用户滚动逐步展开成爆炸图。
- 角色或宠物在鼠标悬停时视线跟随光标。
- 通过拖动控制的 360° 产品展台。
- 滚动驱动的多场景叙事，在相连的视频片段之间推进。
标签
常见问题
- oil-motion 是什么？
- 面向 Claude Code 与 Codex 的 Agent Skill，把 AI 生成的动作接入随滚动、鼠标、拖动等操作变化的网页动画。 Oil Motion 是一个与 Agent 无关的交互动画 Skill，用于制作随页面滚动、鼠标、拖动、触摸或设备方向变化的网页动画。它会先规划动作，用 AI 视频模型生成关键画面之间的连续过程，再逐帧检查、删除停顿和异常画面，并按页面实际显示尺寸压缩资源。
- oil-motion 可以免费使用吗？用的什么许可证？
- oil-motion 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
- oil-motion 还在维护吗？
- 活跃维护中。oil-motion 最近一次提交是在 2026年10月4日。
- oil-motion 适合用来做什么？
- 产品页面中，随用户滚动逐步展开成爆炸图。 角色或宠物在鼠标悬停时视线跟随光标。 通过拖动控制的 360° 产品展台。 滚动驱动的多场景叙事，在相连的视频片段之间推进。
- 在哪里获取 oil-motion？
- 源代码和安装说明在 GitHub 上：https://github.com/oil-oil/oil-motion
概要由 AI 根据项目 README 生成；GitHub 数据每日更新。
相关项目
面向 AI 智能体的动效设计资源合集，含五个可安装技能，覆盖 GSAP、Remotion、Lottie 等工具。
6920CC0-1.0更新于 6天前
面向 AI 编程 agent 的 HTML 原生设计 skill，一句话生成原型、幻灯片、动画与信息图。
2.5万2850HTMLMIT更新于 3天前
一个让 Claude Code、Codex 等 agent 用代码直出商业级产品发布片的 skill，支持作曲配乐和在画面上指点修改。
78077JavaScriptMIT更新于 昨天
一个智能体技能，只需一句需求即可让 AI 编程助手构建有设计感的获奖级网站，并附带网站评分技能 /jury。
73826JavaScriptMIT更新于 21小时前
面向 Claude Code 等编码智能体的动效设计工具包，内含 Remotion 视频流程、画面自检循环与 Python 音效引擎。
49663JavaScriptMIT更新于 11天前