用 Oil Motion 制作随滚动驱动的网页动画

CSS 过渡和 Lottie 做不出"产品随页面滚动自己拆开"的效果。Oil Motion——一个 3k 星的 agent 通用动画 skill——专门处理主体本身必须变化的场景：它设计动作，用 AI 视频生成连续画面，逐帧清理，再把结果接到滚动、鼠标、拖动、触摸或设备方向上。

为什么这个 Skill 重要

适用边界和功能清单同样重要。Oil Motion 面向主体会发生变化的动画：角色转头、产品展开成爆炸图、材质变化、镜头穿越场景。它也能把已有的绿幕视频或雪碧图整理成响应输入的资源。至于 CSS、JavaScript、SVG、Lottie 或实时 3D 能直接完成的界面过渡、按钮反馈和布局动效，交给普通前端就行——这条流水线管的是剩下的部分。

关键在于顺序。它不直接生成一整段视频，而是先锁定关键画面——开始、中间、结束必须是什么样——因为直接生成视频可能让产品结构、角色比例或动作终点跑偏。AI 视频再补齐已确认画面之间的动作，位移、缩放、裁切、播放速度、跟随阻尼和最大转动速度则交给程序控制。

安装

用命令行安装，然后让 agent 重新加载 skill：

npx skills add oil-oil/oil-motion

也可以直接把仓库地址交给 agent，让它安装这个 skill。

本地处理已有视频和序列帧需要 Python 3.10+ 和 FFmpeg。生成新的关键帧或视频默认走 ZenMux，图片与视频模型共用一个 API key：第一次生成会打开一个本机配置页（需要 Node.js 22.18+），key 存进系统凭据库——macOS 钥匙串、Windows 凭据管理器或 Linux Secret Service——不可用时直接停止，不会改存明文。

实战：随滚动逐步展开的产品动画

1. 说明素材、目的和控制方式。比如给 agent 粘贴这样的提示：

使用 oil-motion，把这两张产品图制作成随页面滚动逐步展开的动画。
桌面端的展示区域较大，需要保持清晰；移动端使用较轻的资源。

2. agent 锁定 Concept Contract：主体、风格、动作、背景归属、交互输入、时间控制和连续性要求逐项确认。
3. 先生成并检查关键画面——主体身份、结构、Logo、构图和风格不能跑偏。
4. AI 视频生成画面之间的动作；agent 逐帧检查，裁掉停顿、重复和异常画面。
5. 按页面中的实际显示大小压缩资源，并把输入——这里是滚动位置——映射到动画进度。

资源形式由 agent 按预算选定一种，不会让你来选，也不会同时实现两套：场景连续性重要时用烘焙场景的全关键帧 MP4；需要透明复用且频繁跳转时用 Alpha WebP 图集；又长又只随一维滚动时用绿幕 MP4 加 WebGL 实时抠色。量产之前它会先完成一次 Pilot——一对关键帧、一段挂到真实页面验收的短视频——并生成带工件哈希的批准文件；批准文件缺失或首尾帧 SHA-256 不一致时，生成脚本会在联网前阻断。每次生成都会计费，这正是 Pilot 先行的原因。

技巧

• 有意识地选择控制模型：输入可以持续对应动画进度，也可以只触发一段转场，或让动画自主播放——滚动和鼠标只是输入来源，不直接决定播放方式。
• 如果鼠标的横、纵位置都会改变主体姿态，要提前说明；一段只左右往返的视频表达不了两个维度。
• 规划空状态：动画未加载、加载失败、用户偏好减少动态效果时各显示什么。
• 把"不能变的部分"始终放在描述的核心——流水线能修复轻微漂移、色差和重复画面，但动作设计错了就意味着重做关键画面。

何时不用这个 Skill

普通的界面过渡、悬停反馈和布局动效，用 CSS 或 Lottie 交给常规前端即可。独立成片的剪辑和单张配图也不在范围内——这是做输入驱动的动画资源的流水线，不是视频工具。

查看 排行榜 了解更多 skill。