你是否厌倦了千篇一律的CSS过渡动画？是否想让产品演示像电影一样丝滑自然，又希望它能真正“响应”用户的每一次滚动、悬停或滑动？Oil Motion 正是为此而生——它不是传统前端动画库，而是一个将AI生成视频与网页交互深度耦合的智能动画引擎。它把复杂的动作设计、帧级优化和实时映射逻辑封装成一个“即插即用”的Agent技能，让设计师和开发者无需手写关键帧、不用切图拼接、更不必纠结性能瓶颈，就能在网页中部署电影级的响应式动画。
核心功能
- 滚动即动画：页面向下滚动时，产品自动拆解、组件逐层展开、数据图表动态生长，进度与滚动高度1:1同步，支持反向回溯
- 鼠标跟随拟真：角色/宠物/3D模型随鼠标移动自然转头、倾斜或微调姿态，支持阻尼缓冲与最大转动限幅，告别生硬跳变
- 手势精准驱动：拖拽进度条、滑动轮播、触屏拖拽——动画帧直接绑定操作位置，支持暂停、快进、定格任意帧
- 多模态输入统一适配：同一套动画资源，可同时响应鼠标、触摸、陀螺仪（手机旋转）、悬停、点击甚至组件状态变更
- AI+程序协同优化：先由AI生成关键状态帧（确保品牌元素/结构/风格一致），再生成中间连续动作，最后由程序自动剔除卡顿、重复帧并压缩适配移动端
- 零前端动画编码：无需写CSS @keyframes、不依赖WebGL或Canvas，只需声明“想表达什么”“用哪些素材”“跟谁交互”，其余全由Agent自动完成
适合哪些人用
Oil Motion 面向三类核心用户：一是产品营销团队——快速为官网、落地页制作高质感产品拆解、功能演示动画；二是交互设计师与前端工程师——摆脱Lottie文件体积大、可控性弱的痛点，用轻量静态资源实现复杂交互动画；三是AI内容创作者——将Stable Video Diffusion、Pika等生成的视频，一键转化为可交互、可嵌入、可复用的网页资产，真正打通AIGC到落地的最后一公里。
快速上手
使用极其简单：只需告诉你的AI Agent（如Cursor、Windsurf或自建本地Agent）一句话：
“帮我安装「https://github.com/oil-oil/oil-motion」这个Skill。”
Agent会自动完成依赖安装、环境配置、资源生成与前端集成。你只需提供：① 2–3张关键状态参考图（如产品未拆解/半拆解/完全展开）；② 一句中文描述（如“展示智能手表表带材质从皮革切换为钛合金的过程”）；③ 指定交互方式（如“跟随页面滚动0–100%”或“鼠标X轴位置控制0–100%”）。剩余工作——画面生成、帧优化、尺寸裁剪、格式压缩、JS绑定——全部由Oil Motion全自动完成。
项目信息
Create smooth, responsive interactive web animations.
编程语言：Python｜GitHub Star 数：757｜开源协议：MIT｜GitHub 项目地址
如果你正在寻找一种既能保留AI生成内容表现力，又能获得原生网页级响应精度与加载性能的动画方案——Oil Motion 不是另一个动画库，而是下一代交互动画的工作流革命。
