用自然语言告诉 AI 你想要什么动画，然后让页面滚动、鼠标移动、触摸手势来控制它——Oil Motion 把 AI 视频生成和网页交互之间的那层墙拆掉了。
这个项目解决什么问题？
2026 年 8 月，GitHub 上出现了一个叫 Oil Motion 的项目，一周涨到 1400+ Star。它的核心功能听起来很直接：用 AI 生成一段连续动画，然后让它在网页里跟随你的滚动、鼠标或触摸。
但真正有价值的不是"AI 能生成动画"这件事——这早就不是新鲜事了。Oil Motion 解决的是 AI 生成动画之后的最后一公里问题：
AI 视频模型（Sora、Vidu、即梦等）只能生成"从头播到尾"的固定片段。用户滚动 30%，你想看到第 30 帧的画面；用户反向滚动，动画要能沿同一路径自然返回。这不是视频播放器能解决的，因为视频是时间线，而交互是空间位置——两者之间需要一层映射。
Oil Motion 就是这层映射。它让 AI 生成的视频从一个"播放内容"变成了"可交互素材"。
核心亮点
一、把"关键帧设计"从美术变成 prompt
传统交互动画需要设计师画出 3-5 个关键帧（开始/中间/结束），然后用 After Effects 或 Lottie 做补间。Oil Motion 的流程是：你告诉 AI 开始什么样、结束什么样，AI 生成中间的连续画面。关键帧变成了 prompt 工程问题，而不是手绘问题。
二、Agent 决策资源格式
这是 Oil Motion 最聪明的设计之一。Agent 会根据页面显示大小、动画长度、访问设备预算自动选择资源形式：
- 小型、环形、频繁跳转 → Alpha WebP 图集
- 大尺寸、长时序、一维滚动 → 绿幕 MP4 + WebGL 实时抠色
使用者不需要理解 WebP 和 MP4 的取舍——Agent 自动选。
三、从素材到交互的完整流水线
Oil Motion 不只是"生成动画"，它做了一整套事后处理：检查每帧、删停顿帧、删重复帧、检测闪烁和结构漂移、按显示尺寸压缩。最终交付给浏览器的是已经整理好的可交互素材，不是原始视频。
快速上手
安装（Agent 一句话完成）：
gitclone https://github.com/oil-oil/oil-motion最简单的使用场景：
使用 $oil-motion，把这两张产品图制作成随页面滚动逐步展开的动画。 桌面端展示区域较大，需要保持清晰；移动端使用较轻的资源。需要 Agent 先设计方向时：
使用 $oil-motion，为这个产品首页设计一个随滚动变化的连续动画。 先提供三个方向，分别说明它们表达什么、如何跟随滚动，以及实现成本。 确认方向以后再生成关键画面和视频。角色跟随鼠标：
使用 $oil-motion，让这个角色跟随鼠标调整朝向。 动作需要及时响应，同时限制转动速度，快速反向时不能闪烁或抽动。我的评价
Oil Motion 在 GitHub 上能在一周内到 1400+ Star，靠的不是"又一个 AI 视频工具"，而是它找准了一个真实的产品场景：网页交互中的产品拆解、角色互动、章节转场——这些动画以前要么用 Lottie 做（只能做位移缩放、做不到形变），要么需要昂贵的三维动画（成本高、迭代慢）。
Oil Motion 的路径是：AI 生成连续画面 → 前端按输入位置映射帧 → 实时响应交互。这条路绕过了三维建模、绕过了 Lottie 的表达能力天花板，代价是动画的"精确可控性"不如代码动画。
竞品对比：
| 方案 | 表达能力 | 开发成本 | 适用场景 |
|---|---|---|---|
| Lottie | 位移/缩放/旋转 | 低 | 图标动效、简单 UI |
| CSS Animation | 有限 | 极低 | 静态元素动效 |
| Three.js / WebGL | 高（3D） | 极高 | 三维产品展示 |
| Oil Motion | 高（视频帧） | 中（prompt 驱动） | 产品拆解、角色互动、转场 |
| 它的天花板是视频帧的分辨率和流畅度，上限比代码动画低，但下限比三维动画低得多。在"AI 视频质量足够好"的前提下，这是一个值得关注的方向。 | |||
| 适合谁：需要给产品页加"会动的产品图"的设计师、前端、Agent 使用者。不适合谁：需要像素级精确动画效果的团队。 |
项目：oil-oil/oil-motion
协议：MIT
 锋哥原创出品，必属精品)
-davinci之phy)
