AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

Oil Motion — Interactive Web Animation Pipeline

Turns AI-generated or existing video and frame sequences into scroll-, pointer-, drag- or audio-driven web animations, end to end.

Image & VideoAdvanced★ 2,712⑂ 196AI score 9/10Last updated: Oct 4, 2026

What it does

  • Captures your interaction intent into four single-source-of-truth files: concept-contract.yaml, motion-brief.yaml, build/timeline.json, and build/motion-budget.json.
  • Generates keyframes and clip videos (ZenMux models by default), or skips generation entirely and analyses footage you already have.
  • Handles media work with ffmpeg/Pillow: chroma keying, alpha atlas (sprite sheet) packing, frame interpolation, and size-budget compression.
  • Auto-selects a delivery format (baked-video / chroma-video / alpha-atlas) and a runtime controller (frame-scrub / segment-playback / autonomous-playback), then wires it up with the bundled interactive-motion.ts and step-gesture.ts.
  • Enforces a Pilot pass on one clip before mass production, per-clip QA, and final acceptance at target CSS size, DPR, cold cache, fast reverse and asset-failure conditions.

Who it's for

  • Frontend engineers and motion designers building hero sections, product explainers and scroll-driven storytelling.
  • Teams shipping AI-generated video to the web who need it to survive real performance budgets.
  • Not for simple micro-interactions that plain CSS, JS, SVG or Lottie can already handle.

Example uses

  1. Scroll-scrubbed product teardown: a 16:9 alpha atlas where the device rotates and exploded-views as the user scrolls.
  2. Mobile swipe-to-advance character animation using segment playback with proper reverse handling.
  3. Cleaning an existing green-screen clip: key it, interpolate to the target fps, compress it and mount it as a transparent web animation asset.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/oil-oil/oil-motion/HEAD/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the SKILL.m folder from the GitHub repo oil-oil/oil-motion into my ~/.claude/skills/oil-motion/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/oil-oil/oil-motion.git ~/.claude/skills/oil-motion

⚠ This is a third-party skill. Check the source repository before installing.

  1. Create the skills folder if needed: mkdir -p ~/.claude/skills
  2. Clone the repo: git clone https://github.com/oil-oil/oil-motion.git ~/.claude/skills/oil-motion
  3. Install prerequisites: Python 3.10+, Node.js, and ffmpeg/ffprobe (macOS: brew install ffmpeg, Ubuntu: sudo apt install ffmpeg).
  4. Install Python dependencies: python3 -m pip install -r ~/.claude/skills/oil-motion/scripts/requirements.txt
  5. Only if you want AI generation, set up credentials: node ~/.claude/skills/oil-motion/scripts/credential-ui/src/profile.ts setup default, then open the local link it prints and enter your own API key. Pure local media processing needs no key.
  6. Restart Claude Code and ask something like "build a scroll-driven product rotation animation for my hero section" to trigger the skill.
View source on GitHub ↗License: MIT