Motion For Anything You Draw — скилл
Скилл оживляет любой рисунок кодом: персонажей, воду, дым, значки и целые сцены в React Native и SwiftUI без ощущения слайд-шоу
- 797 ★ репозитория
- Последний коммит
Минимальный доступ
Почему такой уровень
- Скилл дает инструкции и шаблоны кода, а вспомогательные скрипты Python только читают видео-образцы.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/motion-for-anything-you-drawОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл дает инструкции и шаблоны кода, а вспомогательные скрипты Python только читают видео-образцы.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл учит агента анимировать нарисованное так, как это делают аниматоры. По умолчанию агент меняет один рисунок на другой, прогоняет каждую позу своим плавным переходом, двигает все синхронно и делает моргание слишком быстрым. Результат похож на слайд-шоу. Скилл перечисляет эти ошибки и способы их исправить: единые часы на всю сцену, части тела вращаются вокруг настоящих осей, хвосты и одежда отстают на такт, постоянная фоновая жизнь, гладкие пути между позами, малые амплитуды и выразительные кривые. В репозитории лежат рецепты для персонажей, существ, растений, ткани, огня, дыма, воды, погоды, света, механизмов, значков, логотипов и графиков. Для интерфейсов скилл следует правилам движения Эмиля Ковальски. Файл `MOTION.md` копируют в проект и заполняют правилами и ограничениями арта, скилл читает его первым. Шаблоны движка на `motion.ts` для React Native и на `Motion.swift` для SwiftUI содержат часы, `track`, `flow`, `seg`, `wave` и кривые, а `liveFace` рисует живые глаза и рот. Инструменты `sheet.sh`, `track_edges.py` и `sample_colors.py` разбирают видео-образец по кадрам: показывают тайминг, ловят движения в 2% и снимают точные цвета. В папке `demo` четыре готовые сцены с рендером в MP4.
Для кого. Мобильным разработчикам и дизайнерам, которые рисуют иллюстрации в коде для приложений на React Native или SwiftUI и хотят живой анимации.
Подходит, если
- Иллюстрация в приложении выглядит мертвой, а ей надо дышать, моргать, переносить вес и реагировать на происходящее
- Есть видео-образец движения, и хочется измерить его тайминг и мелкие покачивания по кадрам
- Сцена из нескольких предметов рассинхронизирована, и ее проще перевести на одни часы
- Лицо персонажа скачет между картинками, а надо добиться плавной смены выражения
- Огонь, дым или воду проще нарисовать кодом, чем искать готовые видеоролики
Не подходит, если
- Проект не на React Native и не на SwiftUI: шаблоны движка написаны только для них
- Нужен готовый анимационный редактор с графическим интерфейсом: скилл работает кодом
- Анимация нужна для веба на CSS или GSAP: скилл рассчитан на мобильные платформы
- Нужен вывод Lottie без кода: шаблоны рисуют движение напрямую, формат Lottie не создается
Пример запроса к агенту
Оживи SVG-персонажа в SwiftUI: дыхание, моргание, взгляд за мячом и взмах рукой, все на одних часах.Ограничения
Шаблоны движка и живого лица написаны для React Native и SwiftUI, для других стеков их придется переносить самому. Демо-сцены перерисовываются командой `swiftc` и требуют macOS 14 или новее и `ffmpeg` для сборки MP4.
Скилл не включает графические ассеты: геометрию лица и цвета вы передаете сами. Раздел о движении в интерфейсах опирается на правила стороннего автора, ссылка на которые стоит в README.
Инструмент `track_edges.py` работает с Python и нужен только для анализа видео, саму анимацию он не делает. Скилл ставится командой `npx skills`, а результат, как и любая сгенерированная анимация, нужно смотреть глазами на устройстве.
Как отключить. Удалите папку скилла из каталога скиллов агента командой `npx skills remove` или вручную. Файл `MOTION.md` в проекте останется, его можно удалить отдельно.
Частые вопросы
Как поставить скилл?
Командой `npx skills@latest add rossark0/rossark-motion-skill`. Он подходит агентам, которые читают SKILL.md, включая Claude Code, Cursor и Codex.
Какие платформы поддерживаются?
Шаблоны движка есть для React Native на `motion.ts` и для SwiftUI на `Motion.swift`. Принципы и рецепты в SKILL.md не привязаны к платформе.
Что такое MOTION.md?
Файл заметок для вашего проекта: где лежит код анимации, правила, ограничения арта и способы проверки. Скилл читает его первым.
Можно ли оживить свой рисунок по видео-образцу?
Да. `sheet.sh` режет видео на листы кадров, `track_edges.py` ловит мелкие покачивания, а `sample_colors.py` снимает точные цвета с кадра.
Что показывает папка `demo`?
Четыре сцены: Reveal, Garden, Chef и Orbit, написанные на SwiftUI с исходниками и готовыми MP4. Запуск рендера описан в README.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для Claude Code и Codex: делает из AI-видео и кадров веб-анимацию, которая следует за прокруткой, курсором, касанием или наклоном устройства
Скилл рисует UI-компонент как чертеж Apple: один лист с отступами, радиусами и слоями, плюс ролик из этого листа.
Скилл и библиотека на TypeScript для живых SVG-сцен в стиле тушью: фигуры ходят, реагируют на клик, день сменяет ночь
Motion2Code содержит скилл веб-анимации: агент сверяет результат с кадрами ролика и показывает обе версии рядом.
Скилл принципов motion-дизайна для агентов: тайминг, easing, хореография и приемы анимации Disney в применении к интерфейсу
Скиллы Эмиля Ковальски для дизайнеров и инженеров
Skills For Designers and Engineers
Скиллы по анимации и деталям интерфейса от Эмиля Ковальски: кривые, длительности, ревью анимаций, выбор UI-библиотек
Коротко о README
Автор объясняет, чем агентная анимация отличается от аниматорской, и показывает на четырех демо-сценах, какого эффекта добивается скилл. В списке справочных файлов описаны SKILL.md, MOTION.md, движок для двух платформ и вспомогательные скрипты. Лицензия MIT.