oil-oil/oil-motion

设计并实现随滚动、拖动、指针或状态变化响应的网页动画，覆盖素材、时间轴和运行时。

What it is

Oil Motion is a reusable Skill for AI agents that automates the creation of interactive web animations. The agent takes a design brief (what should be shown, what assets are available, and which user interaction – scroll, mouse, touch, device tilt – should drive the animation) and runs a three‑step pipeline:

Define key frames – the agent generates a few essential images (e.g., product whole, exploded view, final state) and checks that the subject, style and composition stay consistent.
Generate the in‑between motion – an AI video model creates a continuous clip that smoothly transforms between the key frames.
Post‑process for the web – the video is trimmed, de‑duplicated, compressed and repackaged as either an MP4 or an alpha‑WebP sprite‑sheet, depending on size, transparency needs and device constraints. The resulting resource can be hooked directly into a page so that scrolling, mouse movement, dragging, touch or device orientation maps to the animation’s progress.

Who might use it

Front‑end developers who want high‑quality, AI‑generated product demos, character interactions or data‑driven transitions without hand‑crafting thousands of frames.
Designers who have concept art or product photos and need a quick “scroll‑to‑reveal” or “mouse‑follow” animation.
Teams building AI‑driven assistants that can install the skill and then ask the assistant to create a specific animation on demand.

Core concepts

Concept	What it means
Skill	A plug‑in that an AI agent can install (`npx skills add oil-oil/oil-motion`). The agent then handles all generation, validation and packaging steps.
Key frames	A small set of guaranteed‑stable images that define the start, important intermediate states and the end of the animation.
Continuous motion	The AI video model fills the gaps between key frames, producing a smooth clip.
Resource form	Depending on the use‑case the output is either a full‑frame MP4, a green‑screen MP4 (for WebGL chroma‑keying) or an alpha‑WebP sprite‑sheet.
Control mapping	User input (scroll offset, mouse X/Y, touch drag, device orientation) is translated to a frame index or playback speed.

How to get started

Install the skill – tell your AI assistant to install the repo, or run:
```
npx skills add oil-oil/oil-motion
```

Provide a prompt – either give the agent the assets and a concrete request, e.g.

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

or ask it to design options first.

Agent runs the pipeline – it generates key frames, calls the chosen AI video service, cleans the footage, compresses it and writes a config + ready‑to‑embed code.
Drop the generated code – the skill outputs a small JavaScript snippet that binds the chosen input (e.g., window.scrollY) to the animation timeline.

What you need

Python (for the backend scripts that talk to the AI video service and run FFmpeg).
FFmpeg – used for trimming, frame‑level inspection and compression.
An API key for the chosen AI video generation provider (the skill stores it securely via keyring).
Node.js 22.18+ for the optional configuration UI.
The scripts/requirements.txt Python dependencies (install with pip install -r scripts/requirements.txt).

What you get

Verified key frames and the prompt that produced them.
A cleaned‑up video or WebP sprite‑sheet optimized for the target device.
A JSON/YAML config describing the interaction mapping, resource URLs and fallback static images.
A tiny front‑end helper that can be imported into any web page to drive the animation.

Quality checks baked in

Consistency of subject, proportion and lighting across frames.
Removal of pauses, duplicate frames and visual glitches.
Edge‑clean alpha for transparent assets.
Performance guardrails – the skill picks the smallest resource that still meets the declared display size.
Fallback static frame if the animation fails to load or the user disables motion.

License

MIT – you can freely use, modify and embed the generated assets in commercial projects (subject to the terms of the underlying AI video service).