Oil Motion — скилл
Скилл для Claude Code и Codex: делает из AI-видео и кадров веб-анимацию, которая следует за прокруткой, курсором, касанием или наклоном устройства
- 2 665 ★ репозитория
- Последний коммит
- MIT
Широкий доступ
Почему такой уровень
- Использует платный ключ ZenMux, который хранится в системном хранилище, и отправляет ваши изображения и промпты во внешний сервис генерации
- Запускает скрипты Python и TypeScript, `ffmpeg` и локальную страницу ввода ключа, а также пишет файлы ресурсов и код в проект
- Тратит деньги на каждый запрос генерации, поэтому серия без вашего подтверждения пробного фрагмента недопустима по инструкциям скилла
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/oil-motionОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемШирокий доступИнструмент может менять данные, выполнять команды или работать с секретами.
- Использует платный ключ ZenMux, который хранится в системном хранилище, и отправляет ваши изображения и промпты во внешний сервис генерации
- Запускает скрипты Python и TypeScript, `ffmpeg` и локальную страницу ввода ключа, а также пишет файлы ресурсов и код в проект
- Тратит деньги на каждый запрос генерации, поэтому серия без вашего подтверждения пробного фрагмента недопустима по инструкциям скилла
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Oil Motion ведет анимацию от идеи до работающей страницы. Сначала агент фиксирует замысел в файле `source/concept-contract.yaml`: что должно двигаться, какой жест управляет движением (прокрутка, указатель, перетаскивание, касание, ориентация, звук, данные или состояние), кому принадлежит фон и какой нужен режим времени (покадровая перемотка, воспроизведение по сегментам или самостоятельный ход). Из этого файла выводятся план `source/motion-brief.yaml`, таймлайн `build/timeline.json` и бюджет `build/motion-budget.json`. Дальше агент через ZenMux генерирует ключевые кадры и видеофрагменты между ними. Перед серийной генерацией он делает пробный фрагмент на реальной странице, и только после проверки сохраняется файл одобрения с хэшем артефактов. Затем скрипты чистят видео: обрезают паузы, убирают повторяющиеся кадры, сжимают под реальный размер показа. Скрипт `motion_budget.py` выбирает один из трех форматов: видео с запеченным фоном, атлас WebP с прозрачностью или видео на зеленом фоне, которое в браузере вырезается через WebGL. Скилл умеет работать и с готовыми роликами и спрайтами: тогда он начинает с анализа и в генерацию не ходит. На выходе получается страница с кодом, который сопоставляет жест с положением на таймлайне. К ней прилагаются файлы ресурсов, страница-превью принципа работы и конфигурация. Для простых переходов, Lottie, SVG и CSS-анимаций скилл не нужен.
Для кого. Для веб-разработчиков и дизайнеров, которым нужны интерактивные сцены: товар, который раскрывается при прокрутке, персонаж, следящий за курсором, переход камеры между сценами.
Подходит, если
- Нужен товар, который раскрывается во взрыв-схему по мере прокрутки страницы, а сам объект меняется, и анимация CSS или SVG не справится
- Персонаж или питомец должен следить взглядом за курсором, а при быстром развороте не дергаться
- Нужна сквозная сцена: камера проходит из городской панорамы внутрь чипа несколькими сшитыми видеофрагментами
- Есть готовый ролик на зеленом фоне или спрайт-лист, и его надо превратить в ресурс, которым управляют жестом: чистка, вырезание фона, сжатие
- Нужен поворот товара на 360 градусов по перетаскиванию или по наклону телефона
Не подходит, если
- Нужны переходы интерфейса, обратная связь кнопок или анимация раскладки: их проще сделать на CSS, JS, SVG, Lottie или реальном 3D
- Нужно смонтировать самостоятельный ролик или получить одну иллюстрацию: эти задачи вне области скилла
- Не хотите платить за генерацию в ZenMux: без готовых видео и кадров нужны ключ и платные запросы
- На машине нет Python 3.10, Pillow, `ffmpeg` и `ffprobe`, а ставить их нельзя
Пример запроса к агенту
Используй oil-motion: сделай из этих двух фото кроссовка анимацию, где он по мере прокрутки раскладывается на детали. На десктопе картинка крупная, на телефоне ресурс полегчеОграничения
- Для генерации нужен ключ ZenMux в переменной `ZENMUX_API_KEY`. По умолчанию кадры делает модель `openai/gpt-image-2.5-flare`, а видео модель `minimax/minimax-h3-max`. Запросы платные: автор требует пробный фрагмент и подтверждение пользователя перед серией. Для готового видео и кадров ключ не нужен.
- Детерминированной части нужны Python 3.10 или новее, Pillow, `ffmpeg` и `ffprobe`. Страница для ввода ключа требует Node.js 22.18 или новее.
- Ключ хранится в системном хранилище: Связка ключей macOS, Диспетчер учетных данных Windows или Secret Service в Linux, где нужны `secret-tool`, сессионная шина D-Bus и разблокированная служба. Нативную проверку автор проводил только на macOS.
- Старый файл `~/.config/oil-motion/config.json` с ключом открытым текстом скрипты читают, но сами не переносят и не удаляют.
- Описание проекта и справочные файлы лежат на китайском, английский вариант есть только у основного README.
- Для 2D-управления (поворот по горизонтали и вертикали) нужны кадры по обеим осям: одного видео с движением вперед и назад мало.
Как отключить. Скилл удаляют из каталога скиллов агента: достаточно удалить папку `oil-motion`. Ключ из системного хранилища снимают вручную в Связке ключей, Диспетчере учетных данных или Secret Service под именем `oil-motion/zenmux/default`. Папки `source/` и `build/` с ресурсами проекта удаляются отдельно.
Частые вопросы
Нужен ли ключ, если у меня уже есть зеленый ролик или спрайт-лист?
Нет. Ключ нужен только для генерации ключевых кадров и видео. Для готовых материалов скилл начинает с анализа и работает локально, без запросов к ZenMux.
Какой формат ресурса выберет скилл?
Выбор делает `motion_budget.py`. Видео с запеченным фоном берется, когда важны камера, свет и контакт с землей. Атлас WebP с прозрачностью подходит для малых, кольцевых и двумерных сцен со случайным доступом. Видео на зеленом фоне с вырезанием в WebGL выбирают для длинных одномерных прокруток, где атлас занял бы много памяти.
Что значит пробный фрагмент перед серией?
Агент создает пару ключевых кадров и короткое видео, ставит их на настоящую страницу и после приемки пишет файл одобрения с хэшем артефактов. Если файла нет или SHA-256 первого и последнего кадров не совпадает, скрипт генерации останавливается до сетевого запроса.
Как хранится ключ ZenMux?
Через страницу `scripts/credential-ui` ключ вводите вы сами на локальной ссылке, а сохраняется он в системном хранилище. Скрипты генерации получают его только через `profile.ts run default --`, поэтому в параметрах команд, файлах и выводе он не появляется.
Чем режимы времени отличаются друг от друга?
В режиме `scrub` положение жеста соответствует кадру: жест остановился, кадр замер. В режиме `segment-play` жест выбирает соседнее состояние, и фрагмент проигрывается по времени, а при обратном жесте откатывается из текущего кадра. В режиме `autonomous` время идет само, а жест лишь запускает, ставит на паузу или переключает.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для сборки премиальных скролл-сайтов с реальным дизайн-стандартом: типографика, ритм, глубина, движение и проверка в браузере
Скилл, который собирает лендинг с полетом камеры сквозь сгенерированный 3D-мир, управляемым прокруткой
Скилл принципов motion-дизайна для агентов: тайминг, easing, хореография и приемы анимации Disney в применении к интерфейсу
Скилл Claude Code и других агентов для сборки сайтов, где режиссура задается до кода: арт-дирекшн, генерация ассетов локальными CLI и проверка анти-слоп линтеро
Motion.dev Animations Skill
motion-dev-animations-skill
Скилл Claude Code для Motion.dev, продолжения Framer Motion: веб-анимации 120 fps, пружинная физика, анимация по скроллу
Скиллы креативного кода для Claude Code: движение, микровзаимодействия и визуальные системы для веба, Android и Apple
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Oil Motion (эта запись) | нет | 2 665 | |
| Scroll Video Website Skill | нет | 58 | превращает готовое видео в сайт с прокруткой по кадрам |
| scroll-world | нет | 10 396 | собирает лендинг с полетом камеры сквозь сгенерированный 3D-мир, управляемым прокруткой |
Коротко о README
Главная страница репозитория на китайском с английской версией: назначение скилла, демонстрационное видео, установка, границы применения, список анимаций, которые он делает, принцип работы в три шага (ключевые кадры, непрерывное движение, ресурсы для браузера), таблица из трех форм ресурсов, быстрый старт с тремя примерами запросов и список поставляемых файлов. В репозитории лежат скрипты на Python и TypeScript, справочные материалы по каждому этапу, шаблоны и пример манифеста, ресурсы рантайма и тесты.
Бейдж для README
Исходный SKILL.md
--- name: oil-motion description: "把 AI 生成或已有的视频、序列帧变成随滚动、指针、拖动、触摸、设备方向、音频、数据或状态变化的网页动画：设计动作方向，生成关键帧与视频，整理成图集或视频，编译时间轴并接入运行时。用户需要角色转向、产品拆解、镜头穿越、一镜到底转场，或要清理、抠色、补帧、压缩绿幕视频与雪碧图时使用。不用于纯 CSS、JS、SVG、Lottie 或实时 3D 就能完成的界面过渡与微交互（交给普通前端实现），也不用于独立成片剪辑、单张配图或静态页面。" --- # 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 状态，只有前者进入生成流程。