用自然语言告诉 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位移/缩放/旋转低图标动效、简单 UICSS Animation有限极低静态元素动效Three.js / WebGL高3D极高三维产品展示Oil Motion高视频帧中prompt 驱动产品拆解、角色互动、转场它的天花板是视频帧的分辨率和流畅度上限比代码动画低但下限比三维动画低得多。在AI 视频质量足够好的前提下这是一个值得关注的方向。适合谁需要给产品页加会动的产品图的设计师、前端、Agent 使用者。不适合谁需要像素级精确动画效果的团队。项目oil-oil/oil-motion协议MIT