Моушен-графика для разработчиков: Remotion, Skills, немного стиля и любой ИИ-агент

Если бы я хотел хайпануть, то сказал бы, что моушен-графика больше не требует отдельной профессии, лицензии на Adobe и многих лет обучения. Но я так говорить не буду. Скажу лишь, что если вы разработчик и умеете формулировать задачу, то сегодня вы можете собирать анимированные промо-ролики, описывая их кодом в вашей любимой IDE.

В этой статье я покажу:

• Зачем вообще разработчику лезть в моушен,

• Что такое Remotion и почему он «выстрелил» именно сейчас,

• Причём тут Skills,

• И какой результат реально можно получить за 30 минут времени и несколько тысяч токенов.

Вот что я хочу!

Сегодня речь пойдет не про рекламу уровня Apple и не про YouTube-ролик на 15 минут. Нужен короткий, аккуратный промо-ролик. Такой, который можно положить на лендинг, в README к моему новому SaaS-стартапу, в презентацию для angel-инвестора или в любимый телеграм-канал)

Обычно это 10–40 секунд. Текст, простые анимации, немного динамики. Иногда код. Иногда UI. Иногда просто смысл, который нужно донести быстрее, чем это сделает абзац текста.

Например, вот такой видос:

Не вау, но в целом пойдет. До вау-примеров я пока что не дошел, но в конце статьи оставлю ссылочки на ребят, которые познали дзен и создают отличные видео аналогичным образом.

Как это делали наши деды

Исторически всё это делалось в Adobe After Effects, иногда в DaVinci Resolve. Инструменты мощные, спору нет. Но изучать их я, конечно же, не буду :D. На самом деле, у меня большой опыт в обычном видеомонтаже. Склеить, обрезать, наложить звук — без проблем. Но моушен – это ту мач.

Пару месяцев назад мне понадобился ролик с анимацией кода. Типо такого:

Я сразу подумал, что по-любому должен быть способ реализовать такую анимацию кодом. Немного погуглив я действительно нашел такой способ. Встречайте – Remotion!

Remotion: видео как React-приложение

Remotion — это библиотека, в которой видео описывается кодом. Под капотом JavaScript и React. По сути, вы пишете React-компоненты, которые не реагируют на клики, а рендерятся покадрово. Есть композиции, есть параметры, есть детерминированный результат.

В тот момент я попробовал Remotion, но потерпел неудачу. Дело в том, что у меня нет глубокого знания фронтенда и React. Мой основной язык — Java, и в целом я сейчас больше в продуктовой плоскости кручусь, чем занимаюсь написанием кода. Но писать код мне нравится, как и пользоваться ИИ-агентами)

Я сразу попытался подключить ИИ-агента в процесс создания видоса и заставить его «сделать видео». Формально получилось. Фактически — нет. Видео были, но выглядели плохо. Переходы между сценами стремные, шрифт так себе, каждая новая сцена давалась агенту с трудом. В общем агент не понимал, как правильно работать с Remotion. Результат я не сохранил, потому что не знал, что буду писать эту статью.

Skills: переломный момент для Remotion

Пару недель назад в Remotion появились Skills. Если упростить, Skills — это формализованные действия, которые ИИ может вызывать.

В данном случае это значило, что агент сразу понимал как правильно создавать композиции, как добавлять анимации и какие анимации в принципе существуют, как менять длительность композиции, как экспортировать результат и так далее.

Теперь агент сразу использует Remotion как профессионал. Фактически Remotion стал «agent-ready». И это ровно то, чего не хватало моему первому заходу.

Возвращаемся к задаче и делаем видео

Создаём проект Remotion с нуля. Remotion предоставляет массу заготовок под различные типы проекта. Code Hike (последний на картинке), кстати, это то, с чего я начинал в свой самый первый раз, когда мне нужны были анимации кода. В этот раз я выбрал Hello World. Полный список шаблонов можно посмотреть тут.

Сразу после создания проекта его можно запустить и посмотреть базовую анимацию в редакторе, который доступен в браузере.

Ну а дальше дело остается за малым. Прошу ChatGPT сгенерировать не код, а структуру промо-ролика: сцены, текст, акценты. Немного правлю под свои хотелки и отдаю это агенту. С первого раза получается… нормально.

Я прошу сделать формат 16:9 и добавить чуть более выразительные переходы — и это решается за одну итерацию.

Конечно, результат не стал идеальным сразу. Где-то тайминг резковат, где-то текст появляется слишком рано. Через пару итераций видео уже можно показывать без чувства стыда (надеюсь). Остается только тряхнуть стариной, открыв Davinci Resolve и поработать с sound-design 💅.

В итоге у меня есть аккуратный промо-ролик с анимациями.

Заключение

Связка Remotion + ИИ-агент с поддержкой Skills — это пушка! Рабочий инструмент. Особенно для разработчиков, продуктовых команд и стартапов. Чуть-чуть разобраться с тем, что вообще умеет Remotion и можно будет создавать крутые видосы.

Думаю, что и для моушен-дизайнеров эта штука может быть крайне полезной. Можно генерировать анимации на зелёном фоне и использовать их дальше.

Вот примеры из Twitter, про которые говорил в самом начале статьи:

• Раз

• Два

• Три

• Ну и просто можете вбить "Remotion" в строке поиска и наслаждаться

Код проекта доступен на GitHub, но не думаю, что он будет представлять большую ценность. Это чистые "вибрации" и "вайбкодинг", но может кому-то пригодится.

Спасибо, что дочитали. Ну и подписывайтесь на канал, что как не родные 🙂

Русскоязычное сообщество про AI в разработке

Друзья! Эту статью подготовила команда ТГК «AI for Devs» — канала, где мы рассказываем про AI-ассистентов, плагины для IDE, делимся практическими кейсами и свежими новостями из мира ИИ. Подписывайтесь, чтобы быть в курсе и ничего не упустить!