Oil Motion：让 AI Agent 一键生成网页交互动画

Skill超级捕获手 技术创作者 2026-08-21 15 阅读

Oil Motion：让 AI Agent 一键生成网页交互动画

总结

Oil Motion 是一个专注于「AI 视频 × 网页交互」融合的 Claude Code Agent Skill，通过自然语言提示即可让 AI 生成能与页面滚动、鼠标移动、拖拽、触摸等用户行为实时响应的网页动画。核心思路是：关键帧锁定首尾状态 → AI 视频生成中间连续动作 → 交互逻辑映射到用户操作，输出可直接嵌入网页的交互动画资产。2026年8月开源后迅速进入 GitHub Trending，当前已斩获 1.2k+ Star，是前端可视化领域增长最快的 Skill 之一。

功能与原则

Oil Motion 的设计原则是「AI 生成主画面，程序控制媒体处理」，不走端到端 AI 黑盒路线，保留完整可测量性和确定性。Agent 在生成动画时会先规划关键帧（起止 + 中间状态），保证 Logo、主体结构不发生形变；再用 AI 视频模型补全连续动作；最后用 Python/Pillow/ffmpeg 处理帧清洗、资源压缩与交互映射。交互驱动源支持：滚动、鼠标/指针、拖拽、触摸、设备陀螺仪、音频响量和组件状态。

认可度

  • GitHub Star：1.2k+（截至 2026-08-21，仍在快速增长）
  • License：MIT，可免费商用
  • 平台收录：Awesome Skills、Skills.sh、CocoLoop 等多个 Skill 目录已收录
  • 社区讨论：AGI Hunt、腾讯云开发者社区等平台有专项介绍，Twitter/X 上开发者圈讨论度高

链接

GitHub：https://github.com/oil-oil/oil-motion

原作者

开发者 @I_am_oil_oil（GitHub username: oil-oil），专注于 AI 与确定性媒体流水线的结合，Oil Motion 是其核心开源作品。

介绍

传统 AI 视频只能单向播放，无法响应用户行为。Oil Motion 打破了这一限制——它让 AI Agent 根据用户的自然语言描述，端到端地设计并输出「可交互的网页动画资产」。

核心工作流分三步：第一步「动作规划与生成」，Agent 根据提示词和参考素材规划关键帧（首帧、尾帧 + 中间状态），锁定 Logo、主体等不变元素；第二步用 AI 视频生成模型（如 MiniMax ZenMux）补全帧间连续动作；第三步通过 Python 脚本逐帧清洗异常、压缩资源，再将用户操作（滚动百分比、指针位置等）映射到对应动画帧，实现「视频播放进度 = 用户操作进度」的高度互动体验。

项目包含完整的脚本、参考文档和评估工具，已向 Remotion 官方仓库提交 PR 并被合并——Oil Motion 正式进入 Remotion 官方资源列表，侧面证明了代码质量和工程完整性。

特点

  • 三大交互模式：滚动驱动（scroll-linked）、指针驱动（pointer-driven）、拖拽/触摸驱动，覆盖几乎所有网页交互动画场景
  • 确定性媒体流水线：Python 3 + Pillow + ffmpeg/ffprobe，非纯 AI 黑盒，每帧可检查、可替换、可测速
  • 内置评估工具：提供脚本对生成动画进行质量评估，降低上线翻车风险
  • Remotion 官方认证：PR 已合并至 Remotion 官方资源列表，工程完整性获开源社区认可
  • 多 Agent 兼容：Claude Code、Codex CLI、Cursor 均可使用，npx skills add 一键安装
  • MIT 商用授权：个人和企业均可免费使用，资产可嵌入商业产品

使用方法

安装（一键）：

npx skills add oil-oil/oil-motion --skill oil-motion -g -y

或手动克隆：

git clone https://github.com/oil-oil/oil-motion.git
cd oil-motion
ln -s "$(pwd)" ~/.claude/skills/oil-motion

首次配置 API Key（生成视频前）：

python3 "$OIL_MOTION/scripts/oil_motion_config.py" status

按提示配置 MiniMax API Key（项目默认使用 ZenMux 模型）。

使用（Claude Code 中）：

Use oil-motion to create a scroll-driven animation for my product landing page.

或指定具体镜头风格：

Use oil-motion with spotlight-hero-card style to animate the product feature section.

使用场景与人群

适用场景：
– 产品落地页的滚动交互动画（滚动控制视频播放）
– 数据可视化动画（随滚动呈现数据变化过程）
– 产品功能拆解视频（拖拽切换步骤/视角）
– 品牌/营销活动的沉浸式交互动画
– 游戏或互动图文的开发阶段动画预览

目标用户：
– 前端开发者、AI 前端工具研究者
– AI Coding Agent 爱好者（用自然语言驱动动画生成）
– 营销/产品团队需要快速产出高质量交互动画原型
– 独立开发者/设计团队缺少专业视频制作资源时

输入与输出案例

案例一：滚动驱动产品介绍动画
– 输入（Claude Code）：Use oil-motion to create a scroll-driven promo for my SaaS product. The video should show the dashboard loading, then revealing the analytics charts as the user scrolls down.
– 输出：一段 1080p 可交互 MP4 视频 + 对应滚动映射脚本。嵌入网页后，用户滚动页面时视频帧进度同步更新，实现「页面即播放器」效果。交付物包含完整的帧序列文件夹和 scroll-driver.js 映射文件。

案例二：指针驱动的产品特写动画
– 输入：Design a pointer-follow glow effect for the product hero section using oil-motion.
– 输出：一张 AI 生成的动态光效视频（围绕鼠标指针产生光晕/拖尾效果），附带鼠标位置坐标映射逻辑。嵌入后，指针移动到哪里，光效就跟到哪里，适用于游戏官网、科技产品展示页。

GitHub: https://github.com/oil-oil/oil-motion

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读