Remotion - это нейросеть, которая генерирует видео?

Нет. Remotion - библиотека для React: каждый кадр ролика описан кодом, а готовое видео собирается рендером через браузер без окна. Никакая модель картинку не придумывает. В связке с Claude Code агент пишет этот код по твоему описанию, а ты смотришь результат в Remotion Studio и просишь правки. Поэтому текст в кадре всегда точный, а повторный рендер даёт тот же ролик.

Сколько стоит Remotion?

Для частных лиц и компаний до трёх человек Remotion бесплатен, включая коммерческое использование, так написано на странице лицензии 26 сентября 2026 года. Компаниям от четырёх человек и совместным проектам нужна платная Company License. Отдельно платишь только за подписку Claude, в которую входит Claude Code: без агента Remotion тоже работает, но тогда код пишешь сам.

Чем скиллы Remotion отличаются от плагина Remotion?

Внутри одно и то же: набор инструкций для агента о том, как писать ролики на Remotion. Команда npx remotion skills add кладёт скиллы в папку проекта, и они работают только в нём. Плагин ставится в Claude Code через маркетплейс Remotion и доступен в любой папке. Для первого ролика хватает скиллов в проекте, плагин удобнее, если видео делаешь регулярно.

Можно ли сделать вертикальный ролик для рилс и шортс?

Можно. Размер кадра задаётся в описании композиции: для вертикального ролика попроси Claude Code поставить ширину 1080 и высоту 1920. В шаблоне проекта стоит 1280 на 720, поэтому формат лучше назвать в первом же сообщении, а не менять потом: агенту придётся заново раскладывать элементы по кадру, и часть правок уйдёт впустую.

Работает ли Remotion на Windows?

Документация Remotion требует Node.js 16 или новее и отдельно оговаривает только Mac и Linux: на Mac нужна macOS 15 или новее, на Linux - libc не ниже 2.35. Про Windows в справке по рендеру есть одно предупреждение: JSON, переданный строкой в флаге props, оболочка Windows портит, поэтому входные данные передают файлом. Все шаги из статьи я проверял на Mac.

Remotion Claude Code: первый ролик кодом по шагам в 2026 году

Короткий рекламный ролик с анимированным текстом обычно делают в монтажке: двигают ключевые кадры, подгоняют шрифт, экспортируют, замечают опечатку и повторяют всё заново. Remotion устроен по-другому. Ролик в нём - это код, и писать этот код можно поручить Claude Code. Ты говоришь «заголовок на две секунды, потом логотип, фон тёмный», агент пишет, а ты смотришь превью в браузере и просишь поправить.

Я собирал так вертикальный рекламный ролик на 15 секунд и выложил стартовый набор с шаблоном на GitHub. Ниже - путь с нуля до готового mp4, повторённый руками 26 сентября 2026 года на Mac: Remotion 4.0.529, Claude Code 2.1.283, Node.js 26.

С чего начать ролик на Remotion

Агента на машине нет. Пройди как установить Claude Code и возвращайся к первому шагу.
Claude Code есть, Node.js нет. Поставь Node.js с официального сайта nodejs.org, версия 16 или новее. Проверка - команда node -v в терминале.
Всё стоит, в терминале ты пока неуверенно. Держи рядом разбор Claude Code в терминале, там про окна, папки и выход из сессии.
Проект Remotion уже есть. Переходи сразу к шагу про скиллы.

Что такое Remotion и чем он не является

Remotion - это библиотека для React, в которой каждый кадр видео описан как веб-страница. Время задаётся в кадрах: номер текущего кадра приходит в код, и от него считается прозрачность, положение, размер любого элемента. Готовый ролик Remotion собирает так: открывает страницу в браузере без окна, снимает кадр за кадром и склеивает их в mp4.

Отсюда главное отличие от нейросетей, которые рисуют видео по тексту. Remotion ничего не придумывает. Текст в кадре выйдет ровно таким, как ты написал, цвета - ровно такими, как указал, а повторный рендер даст тот же самый файл. Живую съёмку или реалистичного человека он не сгенерирует. Его поле - моушен-графика: титры, заставки, анимированные схемы, промо продукта, нарезки со словами поверх, субтитры.

Claude Code здесь в роли агента, который пишет этот код. Разработчики Remotion сами поддерживают набор скиллов под агентов: без них Claude Code тоже справится, но будет чаще ошибаться в деталях, которые знает только документация Remotion.

По деньгам: Remotion бесплатен для частных лиц и компаний до трёх человек, коммерческое использование разрешено. С четырёх человек нужна платная Company License, условия - на странице лицензии Remotion. Сам шаблон при создании проекта печатает то же: «Remotion is free for teams of up to 3».

Claude Code для тебя пока новый? Тогда начни с двух уроков первого модуля: «Четыре способа работать с Claude: сайт, приложение, терминал, VS Code» и «Настройка VS Code и работа в Claude Code». Они лежат в курсе ClaudeBase, после них этот текст читается без запинок.

Что нужно до старта

Документация Remotion требует немного:

Node.js 16 или новее (или Bun 1.0.3). Я проверял на Node.js 26.
На Mac - macOS 15 Sequoia или новее. Более старые версии Remotion не поддерживает.
На Linux - libc версии 2.35 и выше и несколько дополнительных пакетов, список у Remotion. Alpine и NixOS не поддерживаются.
Claude Code с подпиской Claude. Remotion прямо пишет, что большинству агентов нужна платная подписка.

Понадобятся два окна терминала: в одном работает превью, в другом Claude Code.

Шаг 1. Создать проект Remotion

Открой терминал в папке, где будут жить твои ролики, и выполни:

npx create-video@latest --yes --blank my-video
cd my-video
npm i

Первая команда без вопросов создаёт пустой проект в папке my-video. Внутри src три главных файла: index.ts регистрирует проект, Root.tsx перечисляет ролики, а Composition.tsx описывает единственную композицию с идентификатором MyComp. У неё 60 кадров при 30 кадрах в секунду, то есть две секунды, и размер 1280 на 720. Сам компонент пустой, в кадре пока ничего нет.

Композиция - это и есть один ролик со своей длиной, частотой кадров и размером. В одном проекте их может быть сколько угодно: например, вертикальная и горизонтальная версии одного промо.

Шаг 2. Поставить скиллы Remotion

Есть два пути, внутри у них одинаковый набор инструкций для агента.

Скиллы в проекте. В папке my-video выполни:

npx remotion skills add

У меня установщик разложил скиллы в папку .agents/skills проекта, а в .claude/skills сделал ссылки на них - оттуда их читает Claude Code. Работают они только в этом проекте. Как вообще устроена установка и где агент ищет скиллы, разобрано отдельно.

Плагин для Claude Code. Если видео ты будешь делать регулярно и в разных папках, удобнее плагин. Remotion держит свой маркетплейс, ставится двумя командами в обычном терминале:

claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

После установки перезапусти Claude Code. Про маркетплейсы, области установки и то, как отключить лишнее, написано в статье про плагины Claude Code.

Главный скилл называется /remotion-best-practices, он сам решает, какую часть знаний подгрузить. Рядом лежат узкие: /remotion-create для нового ролика, /remotion-markup про анимацию, шрифты и тайминги, /remotion-captions для субтитров, /remotion-render для рендера, /remotion-docs для поиска по документации. Вызывать их руками не обязательно: по описанию задачи Claude Code подхватит нужный сам. Текст с таймкодами для субтитров из своей записи можно получить через Whisper у себя на компьютере.

Шаг 3. Открыть превью в Studio

В той же папке выполни:

npm run dev

Эта команда запускает Remotion Studio - редактор в браузере. У меня терминал напечатал Server ready - Local: http://localhost:3000, порт может быть другим, если 3000 занят. Открой адрес: слева список композиций, в центре плеер, внизу шкала времени. Окно терминала со Studio не закрывай, пока работаешь: Studio следит за файлами и обновляет превью сама, как только агент что-то поменял.

Шаг 4. Описать ролик в Claude Code

Во втором окне терминала зайди в папку проекта и вызови агента:

cd my-video
claude

Теперь главное - первое сообщение. Агент сделает то, что ты описал, и додумает то, что не описал. Чем меньше додумывать, тем меньше правок. Вот промпт, с которого удобно начинать:

Сделай в композиции MyComp рекламный ролик на 8 секунд,
вертикальный 1080x1920, 30 кадров в секунду.
Сцена 1 (0-3 с): тёмный фон, по центру заголовок «Уборка квартир за 3 часа»,
появляется плавно снизу.
Сцена 2 (3-6 с): три строки по одной: «Своя химия», «Фиксированная цена», «Работаем без выходных».
Сцена 3 (6-8 с): номер телефона крупно и кнопка «Позвонить».
Шрифт без засечек, акцентный цвет жёлтый.

Что в нём важно:

Формат кадра сразу. Шаблон создаёт 1280 на 720. Если ролик нужен для рилс или шортс, скажи об этом в первом сообщении, иначе агент разложит всё под горизонталь, а потом будет перекладывать.
Время в секундах. Remotion считает в кадрах, но переводить сам не обязан: агент посчитает, что 3 секунды при 30 кадрах в секунду - это 90 кадров.
Сцены по порядку с границами. Так проще править: «сдвинь сцену 2 на полсекунды» понятнее, чем «сделай побыстрее где-то в середине».
Готовые тексты. Агент не знает твой бизнес и сочинит нейтральный текст. Точный текст в кавычках - и в кадре будет он.

Пока Claude Code пишет код, он может спросить разрешение на команды или правку файлов. Читай и соглашайся на то, что относится к папке проекта. Когда он закончит, переключись на Studio: ролик уже там.

Как агент решает, какой скилл взять, почему одни инструкции подгружаются сами, а другие нет, и как написать свой скилл под повторяющуюся задачу, показано в уроке про хуки, скиллы, субагентов и сценарии. Про безопасную установку чужих скиллов есть материал «Скиллы: где брать готовые и как не поставить опасный». Урок и материал открыты в доступе к ClaudeBase.

Я сам плачу за Claude картой для подписок «Плати по миру»: выпускается за пару минут, пополняется рублями через СБП. Оформить карту

Шаг 5. Править словами

Дальше работа идёт кругами: смотришь превью, пишешь правку, снова смотришь. Несколько привычек, которые экономят время:

Одна правка - одно сообщение. «Сделай заголовок крупнее, фон синим, убери третью строку и добавь музыку» агент выполнит, но проверить четыре изменения разом тяжелее.
Привязка ко времени или элементу. «На 4-й секунде строки наезжают друг на друга» лучше, чем «что-то некрасиво».
Не правь код руками посреди разговора молча. Скилл Remotion велит агенту не затирать неожиданные изменения, но проще сказать ему прямо: «я поменял цвет в файле сам, оставь как есть».
Звук и картинки клади в папку public проекта. Скиллы Remotion учат агента брать файлы именно оттуда, а не с рабочего стола или из загрузок. Картинки для сцен агент может и сгенерировать скриптом через Nano Banana API, сразу складывая их в public.

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

Шаг 6. Отрендерить mp4

Когда превью устраивает, собери файл:

npx remotion render MyComp

MyComp - идентификатор композиции. Если его не указать, Remotion покажет список и попросит выбрать. Без пути в конце файл ляжет в папку out под именем композиции, у меня это out/MyComp.mp4. Кодек по умолчанию H.264, самый ходовой формат для публикации. Путь можно указать третьим аргументом: npx remotion render MyComp out/promo.mp4.

Рендер можно запустить и без терминала: в Studio есть кнопка Render. Или попросить Claude Code, для этого у Remotion есть скилл /remotion-render.

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

Частые ошибки с Remotion

`Could not find composition with ID WrongId. Available compositions: MyComp`

В команду рендера передан идентификатор, которого нет в проекте. Частая причина - агент переименовал композицию или создал новую рядом со старой. В тексте ошибки Remotion сам перечисляет доступные идентификаторы: возьми нужный оттуда или запусти npx remotion render без идентификатора и выбери из списка.

`Failed to launch the browser process!`

Remotion не смог запустить браузер, через который снимает кадры. По документации причины две: не хватает системных библиотек (так бывает на Linux, список пакетов есть у Remotion) или браузер собран под другую архитектуру, например x64 на процессоре arm64. Чтобы увидеть подробности, добавь к команде рендера флаг --log=verbose.

`You passed --props but it was neither valid JSON nor a file path to a valid JSON file`

Входные данные для ролика (тексты, цены, имена) переданы флагом --props, но строка не разбирается как JSON. Проверь кавычки и скобки. На Windows оболочка съедает двойные кавычки внутри строки, поэтому там данные надёжнее класть в файл и передавать путь к нему.

Анимация дёргается или в рендере не совпадает с превью

Сообщения об ошибке нет, есть результат: в Studio плавно, а в mp4 рывки или элемент стоит на месте. Обычно это анимация на CSS-переходах или браузерных таймерах. В Remotion движение должно считаться от номера текущего кадра, так прямо сказано в скиллах. Попроси агента: «переделай анимацию сцены 2 через useCurrentFrame и interpolate, без CSS-переходов».

Remotion не запускается на старом Mac

Если на Mac стоит версия старше macOS 15, Remotion её не поддерживает, и обходить это настройками бессмысленно. Вариант один - обновить систему.

Чек-лист первого ролика

node -v показывает 16 или новее, на Mac стоит macOS 15 или новее.
Проект создан командой npx create-video@latest, зависимости поставлены через npm i.
Скиллы Remotion лежат в .claude/skills проекта или стоит плагин remotion@remotion.
npm run dev открывает Studio, композиция видна в списке слева.
В первом сообщении агенту названы формат кадра, длительность, сцены и точные тексты.
npx remotion render создал файл в папке out, и он открывается в обычном плеере.

Что делать после первого ролика

Лучшие скиллы для Claude Code - где Remotion стоит среди остальных готовых наборов и как проверять чужие скиллы.
Плагины Claude Code - если решишь перейти со скиллов в проекте на плагин.
Установка скилла в Claude Code - когда захочешь добавить свой скилл с фирменными цветами и шрифтами.

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

Видео кодом: Remotion и Claude Code