Build Scroll-Driven Web Animations with Oil Motion

CSS transitions and Lottie cannot make a product tear itself apart as the page scrolls. Oil Motion — a 3k-star agent-agnostic animation skill — handles the cases where the subject itself has to change: it designs the motion, generates the continuous frames with AI video, cleans them up, and wires the result to scroll, mouse, drag, touch, or device orientation.

Why This Skill Matters

The scope line matters as much as the feature list. Oil Motion is for animations where the subject changes: a character turning its head, a product unfolding into an exploded view, a material transforming, a camera flying through a scene. It also turns existing green-screen videos or sprite sheets into assets that respond to input. Interface transitions, button feedback, and layout motion that CSS, JavaScript, SVG, Lottie, or real-time 3D can handle belong in regular front-end work — this pipeline is for the rest.

The key idea is ordering. Instead of generating one long video, the agent first fixes keyframes — what the start, middle, and end must look like — because direct video generation can drift the product's structure, a character's proportions, or the motion's endpoint. AI video then fills the motion between confirmed frames, and program code owns displacement, scale, cropping, playback speed, follow damping, and maximum rotation speed.

Installation

Install from the command line, then have your agent reload its skills:

npx skills add oil-oil/oil-motion

Or simply give your agent the repository URL and ask it to install the skill.

Local processing of videos and frame sequences you already have needs Python 3.10+ and FFmpeg. Generating new keyframes or video goes through ZenMux by default, with one API key covering both image and video models: the first generation opens a local config page (Node.js 22.18+), and the key is stored in your system credential store — macOS Keychain, Windows Credential Manager, or Linux Secret Service. If that store is unavailable, setup stops instead of falling back to plain text.

Real Workflow: A Product Unfolds as You Scroll

1. State the assets, the goal, and the control. For example, paste a prompt like this to your agent:

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

2. The agent locks a Concept Contract: subject, style, motion, background ownership, interaction input, time control, and continuity requirements, confirmed item by item.
3. Keyframes are generated and checked first — identity, structure, logo, composition, and style must not drift.
4. AI video generates the motion between them; the agent reviews frame by frame, cutting pauses, duplicates, and artifacts.
5. Assets are compressed for the actual on-page display size, and the input — here, scroll position — is mapped to animation progress.

The agent runs the budget check and implements only the route it selects rather than asking you to choose: a baked full-keyframe MP4 when scene continuity matters, an Alpha WebP atlas for transparent reuse with frequent jumps, or a green-screen MP4 with real-time WebGL chroma keying for long one-dimensional scrolls. Before mass generation it ships a pilot — one keyframe pair and one short clip mounted on the real page — and records an approval file with artifact hashes; a missing approval or a first/last-frame SHA-256 mismatch makes the generation script block before any network call. Every generation is billed, which is why the pilot comes first.

Tips

• Decide the control model consciously: input can scrub the animation continuously, trigger a one-shot transition, or leave it playing on its own — scroll and mouse are input sources, not playback modes.
• If both the horizontal and vertical positions of the mouse change the subject's pose, say so; a single left-right loop cannot express two axes.
• Plan the empty states: what shows before the animation loads, if it fails, and when the user prefers reduced motion.
• Keep your description of what must not change front and center — the pipeline can fix slight drift, color shifts, and duplicate frames, but a wrong motion design means redoing keyframes.

When Not to Use This

Hand ordinary interface transitions, hover feedback, and layout motion to regular front-end work with CSS or Lottie. Standalone video editing and one-off illustrations are out of scope too — this is a pipeline for input-driven animation assets, not a video tool.

See the leaderboard for more skills.