前段时间我重做个人网站（oiloil.org）时，在首页放了一只跟随鼠标移动实时扭头的小狗动画。这个交互发到 X 上后拿到了将近 100 万的浏览量，不少开发者问我这种跟手又有立体感的网页动画是怎么做出来的。
为了方便大家直接复用这套制作流程，我把它整理并开源成了 oil-motion。除了鼠标跟随的角色或人物扭头效果，它还能直接生成随滚轮推进的一镜到底产品官网。下面结合两个完整的实测案例，演示怎么用它从零做出交互动画网页。
安装方式与底层模型组合
在 GitHub 搜索 oil-oil/oil-motion（或者直接从我个人网站的 Skills 栏目点进去），把仓库链接发给任意你常用的 AI Agent，告诉它安装这个 Skill 即可。
第一次调用时，Agent 会引导你配置所需的 API Key。在底层实现上，oil-motion 串联了图像生成与视频生成两类模型：默认使用 GPT Image 2 生成关键参考帧，再调用 MiniMax H3 Max 生成过渡视频。之所以选 MiniMax H3 Max，是因为它在保证动作连贯性的同时，生成速度够快、单次调用成本也更划算。
实测一：用单张真人照片做 360 度鼠标跟随扭头
我个人网站上的小狗是卡通形象，这次我决定换个难度更高的题材——直接丢给它一张我本人的正面照片，让它做一个带有真人扭头交互的个人主页。
收到照片后，Agent 先主动询问希望怎么控制画面，并给出了“鼠标左右移动控制转头”的建议。我要求做成跟随鼠标的 360 度转头效果。随后，oil-motion 自动跑完了整套流水线：
- 生成侧向参考帧：基于我提供的正面照片，先用生图模型生成一张人物朝右看的关键帧。
- 生成过渡视频并切分雪碧图：根据首尾参考帧生成平滑转头的视频，再用脚本把视频抽帧切分成网格状的连续雪碧图（Sprite Sheet）。
- 绑定前端鼠标事件：将雪碧图嵌入网页，把鼠标的水平位置映射到对应的帧序列上。
前后只用了两轮对话，一个可以直接在浏览器里左右拖动鼠标看我转头的网页就跑通了。
不过在真人测试里也能看出当前 AI 视频模型的边界：视频生成模型对真人面部的一致性保持不如卡通形象稳定。因为我只喂了一张正面照，没有提供完整的正侧背三视图，转到某些侧面角度时五官会有点不像我，仔细看会有一点恐怖谷效应。如果用于正式的真人展示页，建议先准备多角度参考图来锁定面部特征。
实测二：从零脑暴滚动驱动的一镜到底官网
除了鼠标跟随，oil-motion 的另一项核心用法是做类似苹果官网的滚动驱动（Scroll-driven）一镜到底动画——画面随着滚轮向下推进而连续演变，并且在任意位置都能随时停住或往回倒放。
如果你手头没有现成的素材，也不知道做什么动画好，可以直接让 Agent 结合 oil-motion 内置的最佳实践帮你出主意。我让它推荐几个适合做一镜到底官网的创意，它给出了三套镜头路线：
- 路线一：硬件产品的拆解与内部结构透视。
- 路线二：跟拍一件作品从原始粗胚一步步打磨成展厅成品的全过程。
- 路线三：第一视角穿过工作台与画室的空间漫游。
我只回复了一个数字“2”，选了雕塑成型的方向。经过三轮对话，它就把过渡视频和整套暗色系展厅网页全部生成好了。
打开生成的网页往下滚动，画面右侧的章节指示器会从“01 粗胚”“02 雕凿”一路切换到“05 展厅”，正中央的原石则随着滚动进度一刀刀褪去石皮，最终变成一尊光影细腻的大理石胸像。
当然，这套自动生成的方案目前还有一个可以继续打磨的地方：整个滚动过程中机位是固定在正前方的，缺少多角度的镜头环绕与推拉。后续如果把多机位运镜加进来，或者把“鼠标跟随控制面部朝向”与“滚轮控制场景切换”结合到同一个页面里，视觉层次还会丰富得多。