Как это работает?
Для такой работы нужны Claude Code и Remotion — инструмент для создания видео с помощью кода на React. Устанавливать вручную почти ничего не придётся: единственное, что желательно иметь заранее — это Node.js на компьютере. Дальше можно просто попросить Claude развернуть проект, и он сам поставит Remotion со всеми зависимостями (включая React) через npm.
Если объяснить просто: Claude пишет React-компоненты, в которых анимация — это функция от номера кадра. Remotion запускает headless-браузер, рендерит каждый кадр по отдельности как скриншот, а затем склеивает все кадры в видео через ffmpeg, сохраняя результат в MP4.
Процесс состоит из трёх этапов:
🔵1. Даём задачу и материалы
Что рекламируем, для кого, какую мысль хотим донести. Указываем длительность, визуальный стиль и прикладываем референсы.
Для ролика про свой продукт можно дать доступ к коду сайта, скриншоты интерфейса, изображения и другие материалы. Тогда агенту будет на что опираться при сборке сцен.
🔵2. Сначала — раскадровка
До написания кода просим продумать сцены: что появляется в кадре, какой текст видит зритель, как движутся элементы и сколько секунд занимает каждый эпизод. Причём лучше прямо написать: «Покажи мне раскадровку и дождись согласования перед началом кодирования».
На этом этапе проще поменять последовательность, убрать лишнее и понять, успевает ли зритель прочитать текст.
🔵3. Собираем, проверяем и правим
После согласования Claude пишет код анимации. Просим его проверить результат: не обрезается ли текст, нет ли наложений, правильно ли работают переходы.
Правки тоже можно давать по конкретным сценам: «Во второй сцене увеличь заголовок», «В финале добавь адрес сайта». Для промежуточной проверки удобно использовать предпросмотр в Remotion Studio, а готовый вариант уже сохранять в MP4.
Шаблон промта:
Создай рекламный ролик для [название продукта / услуги / бренда].
О ПРОДУКТЕ
— Что это: [1–2 предложения: что продаём]
— Для кого: [целевая аудитория: кто, чем занимается, что болит]
— Главная польза: [какую проблему решает, какой результат получает клиент]
— Отличие от конкурентов / факты: [цифры, УТП..]
— Призыв к действию: [перейти на сайт / записаться / купить /..] + [ссылка или контакт]
ФОРМАТ
— Площадка: [Reels / Stories / TikTok / Shorts → 9:16 | лента → 4:5 | YouTube / сайт → 16:9]
— Длительность: [10–15 / 20–30] секунд
— Язык и тон: [русский; дерзко/премиально / дружелюбно / экспертно / с юмором]
СТИЛЬ
— Жанр ролика: [презентация приложения/SaaS | анонс продукта | товар в 3D | до/после | каталог/коллекция | эксперт/услуга | мероприятие]
— Тема: [светлая / тёмная / «бумажная» / неон / премиум-минимализм / своя]
— Цвета и шрифты: [фирменные или «подбери сам»; можно ссылку на дизайн-систему/брендбук]
— Движение: эффектные монтажные переходы, динамичная типографика в стиле Apple (укажите ваш стиль), разные ракурсы и перспектива, элементы интерфейса/товар под углом, плавное вращение объектов. [добавь/убери: 3D-карусели, частицы, глитч, мазки кисти, падающие элементы]
— Чего НЕ делать: [например: без резкой тряски, без точек в слоганах, без..]
МАТЕРИАЛЫ
— Референсы стиля/интерфейса: [прикрепляю картинки / папка / ссылки на примеры роликов]
— Картинки продукта: [папка с фото/скриншотами/генерациями | ссылка на сайт — возьми оттуда]
— Логотип: [файл или «текстом»]
— Музыка: [свой трек | «подбери сам»: атмосферный / энергичный / кинематографичный / лёгкий]
ПРОЦЕСС
Перед кодом продумай раскадровку: для каждой сцены: время, текст на экране, визуал, движение камеры и переход. Покажи раскадровку и дождись согласования. Затем собери видео в Remotion (React), подложи музыку так, чтобы склейки попадали в удары, и пришли готовый MP4.
Кстати, музыку подобрал и наложил на видеоряд тоже сам клод. Скоро добавлю в курс по Claude урок по созданию рекламных роликов.+новый skill. Если нужно, в какой-нибудь из выходных соберемся, проведем зум по созданию таких роликов! Тема интересная!