Создание динамической моушн-графики для презентаций и интерфейсных тизеров традиционно требовало тяжелых графических пакетов вроде Adobe After Effects. Даже диффузионные видеонейросети не решили проблему: они страдают от артефактов, случайных искажений и неспособны выверить тайминги до миллисекунды.
Навык claude-motion-design из открытого репозитория howseen-ai/claude-motion-design предлагает альтернативу: программную анимацию (Code-Driven Motion Design). Вместо ручной расстановки ключевых кадров анимация описывается веб-кодом — HTML, CSS-анимациями и Canvas API.
Ранее мы разбирали, как развивается motion-анимация в ChatGPT и Codex, заменяя графические редакторы кодом. В связке с консольным агентом Claude Code и моделью Claude Opus 5.5 этот подход превращается в автономную студию видеопроизводства.
Рендеринг без видеоредакторов: Playwright и FFmpeg
Архитектурный конвейер claude-motion-design опирается на связку открытых инструментов:
- Генерация сцены: агент синтезирует веб-страницу с адаптивной версткой, кинетической типографикой и кривыми Безье (
cubic-bezier). - Покадровая фиксация: headless-браузер Playwright загружает страницу, эмулирует течение времени с заданной частотой (например, 60 fps) и сохраняет чистые PNG-снапшоты каждого кадра.
- Финальная сборка: утилита FFmpeg склеивает кадры в единый файл MP4 с добавлением эффектов движения и звуковых дорожек.
Модель Claude Opus 5.5 удерживает сложный пространственно-временной контекст: рассчитывает длительность пауз, согласует вылет плашек с акцентами и проводит итеративную самокритику по тестовым скриншотам.
Манифест навыка и программный код сцены
Для интеграции в Claude Code используется стандартный манифест навыка, определяющий правила компоновки сцены:
# .claude/skills/claude-motion-design/skill.md
---
name: motion-design
description: Generates programmatic 60fps animations using HTML/CSS and compiles to MP4
tools:
- execute_command
- write_file
---
## Rules of Motion
1. Always specify easing curves explicitly: use `cubic-bezier(0.16, 1, 0.3, 1)` for snappy entrance.
2. Render dimensions must default to 1920x1080 at 60 fps.
3. Execute Playwright snapshot loop, followed by `ffmpeg -framerate 60 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4`.
На основе этих правил агент генерирует декларативный код анимации карточки продукта:
<!-- scene.html: Программная анимация карточки продукта -->
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; background: #0a0a0f; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; overflow: hidden; }
.card {
width: 540px; padding: 36px; background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px;
animation: cardEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
transform: translateY(50px); opacity: 0;
}
.title { color: #fff; font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.badge { display: inline-block; padding: 4px 14px; background: #3b82f6; color: #fff; border-radius: 99px; font-size: 13px; }
@keyframes cardEntrance { to { transform: translateY(0); opacity: 1; } }
</style>
</head>
<body>
<div class="card">
<span class="badge">AI Automation</span>
<h1 class="title">Next-Gen Agent Systems</h1>
</div>
</body>
</html>
После компиляции кадров через Playwright агент запускает сборку FFmpeg, выдавая видеоролик с безупречной резкостью шрифтов.
Практические нюансы и вердикт
Главное преимущество связки — масштабируемость: изменив переменные в скрипте (название продукта, цифру скидки или цвет темы), разработчик генерирует десятки локализованных роликов. Покадровая отрисовка через Playwright требует оперативной памяти, но избавляет от необходимости покупать платный специализированный софт.
Итог: claude-motion-design и Opus 5.5 показывают, что программная верстка видео способна закрыть рутинные потребности продуктовых команд в моушн-роликах быстро и воспроизводимо.