Навык Claude Code, который превращает URL сайта в ролик о запуске продукта с частотой 60 fps: видео создаётся на HTML, а звуковые эффекты синхронизируются с музыкой и добавляется размытие в движении.
howseen-ai/claude-motion-design
Навык Claude Code для создания моушн-дизайн-видео на HTML, Playwright и ffmpeg — без лицензий After Effects и Remotion.
Open source альтернатива:After Effects
- Звёзды
- 586
- Форки
- 77
- Открытые issues
- 1
- Последний коммит
- 16 дней назад
Что это?
claude-motion-design — это навык Claude Code для создания моушн-дизайн-видео целиком в коде. Каждый кадр вычисляется по времени с помощью единой функции seek(t), рендерится в Playwright, получает размытие в движении на основе субкадров и кодируется через ffmpeg. Проект рассчитан на разработчиков, которым нужен предсказуемый и редактируемый результат без платных видеоредакторов и лицензируемых движков рендеринга.
Навык проводит через весь рабочий процесс: сбор данных о бренде, создание карты битов, утверждение статичных кадров, рендеринг финального ролика, проверку на скачки между кадрами и добавление синхронизированного аудио. Звуковые эффекты размещаются по измеренным пикам, а сцены синхронизируются с дропом в музыке. Также есть режим ремейка, который покадрово воспроизводит существующий проморолик для другого бренда.
В репозитории есть готовый пример проморолика для Howseen вместе с исходниками, а также скрипты для загрузки бесплатной музыки, звуковых эффектов, логотипов и шрифтов с таких ресурсов, как Mixkit, Pexels и Unsplash.
Ключевые возможности
- 01Рендерит каждый кадр с помощью функции seek(t), поэтому результат воспроизводим.
- 02Использует снимки экрана Playwright и кодирование через ffmpeg с размытием в движении на основе субкадров.
- 03Синхронизирует монтажные склейки и звуковые эффекты с картой битов и пиками аудио.
- 04Включает режим покадрового ремейка для воспроизведения существующего видео.
- 05Предоставляет скрипты для загрузки бесплатной музыки, SFX, логотипов и шрифтов.
Сценарии использования
- Создание роликов о запуске продукта или анонсов без видеоредактора.
- Создание синхронизированных с битом зацикленных роликов для соцсетей из HTML-сцен.
- Доработка видео с помощью изменений в коде вместо монтажа на таймлайне.
- Воссоздание референсного моушн-ролика для другого бренда.
Быстрый старт
- 1
Скопируйте skill в Claude Code
mkdir -p ~/.claude/skills && cp -r skill/motion-design ~/.claude/skills/ - 2
Установите зависимости Python и Chromium
pip install playwright imageio-ffmpeg numpy pillow && python -m playwright install chromium - 3
В Claude Code попросите создать видео или введите /motion-design
Что важно знать
- Для использования skill нужна настроенная среда Claude Code, а для рендеринга также необходимы Chromium и ffmpeg.
- Музыка и звуковые эффекты скачиваются из сторонних источников и распространяются на условиях их собственных лицензий, поэтому они не включаются в дистрибутив.
Темы
Частые вопросы
- Что такое claude-motion-design?
- Навык Claude Code для создания моушн-дизайн-видео на HTML, Playwright и ffmpeg — без лицензий After Effects и Remotion. claude-motion-design — это навык Claude Code для создания моушн-дизайн-видео целиком в коде. Каждый кадр вычисляется по времени с помощью единой функции seek(t), рендерится в Playwright, получает размытие в движении на основе субкадров и кодируется через ffmpeg. Проект рассчитан на разработчиков, которым нужен предсказуемый и редактируемый результат без платных видеоредакторов и лицензируемых движков рендеринга.
- claude-motion-design можно использовать бесплатно? Какая у него лицензия?
- claude-motion-design распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- claude-motion-design всё ещё поддерживается?
- Активно поддерживается. Последний коммит в claude-motion-design — 4 окт. 2026 г..
- Для чего можно использовать claude-motion-design?
- Создание роликов о запуске продукта или анонсов без видеоредактора. Создание синхронизированных с битом зацикленных роликов для соцсетей из HTML-сцен. Доработка видео с помощью изменений в коде вместо монтажа на таймлайне. Воссоздание референсного моушн-ролика для другого бренда.
- Как установить claude-motion-design?
- Скопируйте skill в Claude Code: mkdir -p ~/.claude/skills && cp -r skill/motion-design ~/.claude/skills/ Установите зависимости Python и Chromium: pip install playwright imageio-ffmpeg numpy pillow && python -m playwright install chromium В Claude Code попросите создать видео или введите /motion-design
- Где скачать claude-motion-design?
- Исходный код и инструкции по установке — на GitHub: https://github.com/howseen-ai/claude-motion-design
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Навык для агента, который одной командой превращает только что созданный проект в короткое видео о запуске — с музыкой, анимацией и текстом для публикации.
Навык для Codex и Claude Code, который превращает тему, статью или историю в озвученный ролик с рисованными от руки иллюстрациями и китайской каллиграфией.
Создаёт по текстовому сценарию обучающее видео или демо продукта с озвучкой, синхронизацией слов и отрисовкой на canvas под управлением coding agent.
Создаёт из вставленной ссылки или текстового запроса проморолик длиной 20–40 секунд: Claude Opus пишет его на HTML, а бессерверный агент рендерит в MP4.
Скилл для Claude Code превращает короткую тему в синхронизированный с битом моушн-ролик и рендерит его в MP4 с помощью HyperFrames.