Как разработчики научили языковые модели верстать моушн-дизайн кодом вместо After Effects
Терминал выводит кадр 142, утилита ffmpeg нарезает контактный лист по ударам баса, а нейросеть сканирует полученные превью на коллизии текста. Заметив, что заголовок перекрывает плашку интерфейса, модель переписывает функцию плавности в коде и сама запускает повторную сборку. Никаких слоев в After Effects, ручной расстановки ключевых кадров и ожидания тяжелого рендера. Сразу несколько независимых разработчиков выложили открытые агентные навыки, которые превращают Claude в полноценного моушн-дизайнера, пишущего анимацию на чистом коде — от React и GSAP до прямого управления кадрами через браузер.
Главная проблема диффузионных генераторов видео вроде Runway или Sora — в их непредсказуемости. Модели искажают надписи, «плывут» на мелких деталях и не способны повторить фирменный стиль бренда с пиксельной точностью. Подход на базе кода решает эту задачу кардинально: видео становится результатом выполнения строгой математической функции. Если передать системе одинаковые параметры времени, кадры получатся абсолютно идентичными.
Десять правил движения и цикл самопроверки
Разработчик @haidrrrry представил бесплатный навык под лицензией MIT, объединяющий Claude (включая Claude Code, Claude Desktop и веб-интерфейс) с фреймворком Remotion на базе React и TypeScript. Пакет remotion-motion-graphics/ содержит файл рабочего процесса SKILL.md, каталог из 17 готовых компонентов references/motion-patterns.md, правила верстки и палитры references/design-rules.md, а также файл темы assets/theme.ts с преднастроенными кривыми и физикой пружин.
Система опирается на десять строгих догм качественной анимации:
- Полный отказ от линейных переходов в пользу пружин и кривых Безье уровня
easeOutExpoс жесткими ограничениями. - Сложные появления: объект обязан входить в кадр одновременно по двум или трем параметрам — например, через смещение, масштаб и прозрачность.
- Обязательный шахматный порядок появления элементов (staggered choreography) со сдвигом в 3–6 кадров.
- Ускоренные исчезновения: элементы покидают сцену заметно быстрее, чем появляются.
- Пятислойный визуальный бутерброд: градиентный меш на фоне, медиафайлы, графические элементы, цветокоррекция, а поверх — слой шума и виньетка.
- Обязательный эффект Кена Бернса для статичных кадров и компонент
OffthreadVideoдля исходных видеороликов. - Микро-анимация бездействующих плашек и иконок на базе синусоид.
- Привязка таймингов к параметру частоты кадров (
fps) без жестко зашитых номеров фреймов. - Изоляция цветов и функций плавности в едином файле
theme.ts. - Автоматический контроль качества: рендер, нарезка кадров через ffmpeg, инспекция сцены, устранение ошибок и финальный чистовой прогон.
В репозиторий включили четыре готовых примера: промо-карточку профиля, ролик для приложения Focus Cat, демонстрацию самоисправления верстки и сцену с кодом, синхронизированную под синтезированную дорожку темпом 120 ударов в минуту.
Синтез звука на чистом Python и симуляции Three.js
Инструментарий claude-motion, собранный разработчиком whaleyxbt, развивает идею автономного продакшена в связке с Claude Code, Cursor и редакторами с поддержкой спецификации AGENTS.md. Агент ориентируется на точные числовые параметры — к примеру, кривую bezier(0.16, 1, 0.3, 1) для входа элементов и паузу в 0,09 секунды между словами титров.
Нас подкупил встроенный звуковой движок: он написан на чистой стандартной библиотеке Python без внешних библиотек и сэмплов. Скрипт python3 -m sfx генерирует звуки клавиатурного набора, клики, хлопки, нарастающие свисты (whoosh), райзеры и фоновые текстуры. Звуковой миксер раскладывает эффекты по таймлайну видеоряда, а модуль мастеринга сводит готовую WAV-дорожку под вещательный стандарт −14 LUFS с ограничением пиков ниже −2 dBFS. Для сложных графических сцен используется пайплайн симуляций на Three.js: через автономный Chromium и ffmpeg система выводит автономные веб-страницы в видеопоток 60 кадров в секунду с разрешением 1440×1800 пикселей. Синхронизацию со звуком берет на себя скрипт beats.py, находящий темп, такты и дропы.
Параллельно Рафаэль Обри, основатель Howseen AI, выложил скилл claude-motion-design. Вся анимация здесь подчинена функции seek(t) на связке HTML, Playwright и ffmpeg. Создание демонстрационного 24-секундного ролика в модели Claude Opus 5.5 потребовало всего пяти итераций. Пайплайн сначала строит быстрый черновик в 540p, а чистовик рендерит с субфреймовым размытием движения с углом затвора 180° через фильтр tmix и кодированием BT.709 TV-range. Любопытная деталь — режим покадрового ремейка чужих роликов: агент разбивает исходник на сцены, запускает параллельную сборку четырьмя агентами и выводит проверочный сплит-скрин.
Библиотеки навыков и узкоспециализированный стек
Для тех, кому нужна готовая система сборки под ключ, Чарли Хиллс опубликовал Motion Graphics Skill Pack под лицензией MIT. Пакет из 15 навыков устанавливается командой npx skills add charlie947/motion-graphics-skills и работает с моделью Claude Opus 5.5 при поддержке утилиты HyperFrames для экспорта в MP4. Работа стартует с этапа настройки: навык brand-intake генерирует файлы brand.md и MOTION.md, фиксируя шрифты, палитру и тайминги. Далее подключаются планировщики вроде motion-brief-writer, генераторы запусков launch-video и apple-launch-film (с виджетами и характерной «челкой»), объясняющие форматы vox-explainer, анимированные графики animated-chart, заставки title-sequence-3d и вертикальный экспорт reel-export под формат 1080×1920.
Еще один открытый проект — product-launch-motion — берет на себя производство 45-секундных продуктовых видеороликов на связке HTML, CSS и GSAP. Внутри лежат 12 документов регламентов, 8 скриптов сборки и 5 шаблонов. Система отбирает одно визуальное направление из трех сгенерированных концептов, считывает тайминги слов озвучки через Whisper и собирает ролик шот за шотом.
Авторы инструмента составили наглядную матрицу применимости технологий для агентного моушн-дизайна:
| Инструмент | Вердикт | Примечание |
|---|---|---|
| GSAP | Основа системы | Максимальный художественный контроль на единицу затрат и детерминированный таймлайн. |
| HyperFrames | Основной рендерер | Рендеринг HTML в видео, покадровый звук и встроенная проверка контрастности. |
| Remotion | Альтернативный ко-хост | Эргономика компонентов React, физика spring() и наложение WebGL поверх DOM. |
Lottie (lottie-web) | Для векторных логотипов | Подходит для отрисовки контуров, но требует изоляции трансформаций контейнера. |
| Three.js | Только для ключевых 3D-кадров | Требует точной тоновой компрессии во избежание пересветов на скриншотах интерфейса. |
| Rive | Ограничено | Детерминированный рантайм, но бинарный формат .riv недоступен для чтения агентами. |
| After Effects / Blender | Исключены | Управляются исключительно через графический интерфейс и непригодны для кода. |
По замерам создателей product-launch-motion, рендеринг 44-секундного референсного ролика на процессорах Apple M-series занимает 51 секунду (файл весит около 40 МБ), а двухпроходный мастеринг звука через FFmpeg отнимает еще полминуты. Все необходимое разворачивается на Node.js версии 20 и выше с установленным Python 3.10.
Похоже, привычный пайплайн сборки продуктовых роликов начинает трещать по швам. Мы бы попробовали отдать Claude рутинную адаптацию экранов и синхронизацию титров уже на ближайшем проекте: передать машине генерацию кода явно приятнее, чем вручную двигать ключи в тяжелом софте.
