Oil Motion

把 AI 生成或已有的视频、序列帧变成随滚动、指针、拖动、触摸、设备方向、音频、数据或状态变化的网页动画：设计动作方向，生成关键帧与视频，整理成图集或视频，编译时间轴并接入运行时。用户需要角色转向、产品拆解、镜头穿越、一镜到底转场，或要清理、抠色、补帧、压缩绿幕视频与雪碧图时使用。不用于纯 CSS、JS、SVG、Lottie 或实时 3D 就能完成的界面过渡与微交互（交给普通前端实现），也不用于独立成片剪辑、单张配图或静态页面。

2,745 stars 201 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add oil-oil/oil-motion --skill oil-motion

Manual install

git clone --depth 1 https://github.com/oil-oil/oil-motion.git /tmp/oil-motion
mkdir -p ~/.claude/skills
cp -r /tmp/oil-motion/. ~/.claude/skills/oil-motion

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Oil Motion

把用户的交互意图转换为可验收的动画素材、时间轴清单和网页运行时。AI 生成负责肢体、结构、材质、遮挡等语义变化；程序负责输入映射、播放控制、媒体处理和性能。

确定性流水线需要 Python 3.10+、Pillow、ffmpeg 和 ffprobe：

```bash
OIL_MOTION="<当前 SKILL.md 所在的绝对目录>"
python3 -m pip install -r "$OIL_MOTION/scripts/requirements.txt"
```

关键帧与视频默认通过 ZenMux 生成，模型写在 `image_job.py` 与 `video_job.py` 中；只有模型无法完成目标或用户明确指定时才更换。已有视频或序列帧时从分析开始，不调用生成服务。

## 首次配置

第一次调用生成服务前检查凭据；纯本地处理不需要 Key：

```bash
node "$OIL_MOTION/scripts/credential-ui/src/profile.ts" status default
node "$OIL_MOTION/scripts/credential-ui/src/profile.ts" setup default
```

退出码 0 直接继续；2 表示缺失，此时运行 `setup` 并把返回的本机链接交给用户亲自填写。所有生成命令都通过 `profile.ts run default --` 执行。依赖安装、退出码含义和安全边界见 [references/api-key-setup.md](references/api-key-setup.md)。

## 四个唯一事实源

每项信息只保存在一个位置，其他文件引用它，不复制：

1. `source/concept-contract.yaml`：用户明确要求的对象、视觉、交互和连续性。
2. `source/motion-brief.yaml`：由合同派生的关键帧、片段和生产计划。
3. `build/timeline.json`：成片的实际帧率、段落边界、停帧和播放曲线。
4. `build/motion-budget.json`：交付格式与运行时控制器的自动选择结果。

## 主流程

### 1. 锁定用户意图

用户只有模糊目标时，先读 [references/concepts.md](references/concepts.md)，给出最多三个真正不同的方向；要求已经明确时直接写 Concept Contract。

需要外部案例启发时，按表达目的选读 [references/motion-patterns.md](references/motion-patterns.md)。先分清哪些变化属于素材本身、哪些只是容器编排或 UI 状态，只有前者进入生成流程。

Read the full skill on GitHub

Details

Skill name: oil-motion
Repository: oil-oil/oil-motion
License: MIT
Repo updated: 4 October 2026

FAQ

What does the Oil Motion skill do?

How do I install the Oil Motion skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add oil-oil/oil-motion --skill oil-motion. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Oil Motion popular?

It lives in oil-oil/oil-motion, which has 2,745 GitHub stars and 201 forks.

Related skills

Pixel2motion

2.6k

nolangz/pixel2motion

Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create loading/idle/hover motion for a brand mark. v2: also handles self-crossing draw-on choreography (sp

Frontend & Design212

Markstream Vue2 Vite

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2 plus Vite app. Use when Codex needs Vite-friendly worker imports, `?worker` or `?worker&inline` setup for Mermaid or KaTeX, modern CSS ordering, or Vue 2 compatibility in a Vite-based repository.

Frontend & DesignIn 2 lists188

Uncodixfy

2.7k

cyxzdev/Uncodixfy

Prevents generic AI/Codex UI patterns when generating frontend code. Use this skill whenever generating HTML, CSS, React, Vue, Svelte, or any frontend UI code to enforce clean, human-designed aesthetics inspired by Linear, Raycast, Stripe, and GitHub instead of typical AI-generated UI.

Frontend & Design167

Markstream Vue2 CLI

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2 Vue CLI or Webpack 4 app. Use when Codex needs Webpack 4-friendly setup, CDN worker fallbacks for Mermaid or KaTeX, `dist/index.css` imports, Vue 2 composition-api shims, or code block choices limited to `stream-diffs` or plain `<pre>`.

Frontend & DesignIn 2 lists188

Design Dna

2.1k

zanwei/design-dna

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "e

Frontend & Design114

Markstream Vue2

Simon-He95/markstream-vue

Integrate markstream-vue2 into a Vue 2.6 or 2.7 app. Use when Codex needs Vue 2-compatible setup, `@vue/composition-api` decisions, CSS wiring, optional peer setup, or scoped Markstream overrides in a Vue 2 repository that is not specifically Vue CLI / Webpack 4 constrained.

Frontend & DesignIn 2 lists188

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.