🟡 Средний - нужна базовая настройка Claude Code и понимание основ

⚡ Не обязательно читать всю статью Скопируй ссылку на эту страницу и отдай Клоду: «Проведи меня по этой инструкции шаг за шагом». Он прочитает её сам и проведёт по установке, отвечая на твои вопросы по ходу. Если хочешь разобраться сам - читай дальше.

Remotion - это опенсорс-фреймворк, который превращает React-код в видео. Claude Code пишет .tsx-сцены по твоему описанию словами. Ты получаешь анимированные карточки, кинетический текст, схемы и переходы - без After Effects, без платных плагинов, без дизайнера.

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

Для роликов 014, 015 и 016 (про AI-инструменты) именно так и делали: описывали словами, что должно появиться на экране, Claude писал сцену, рендерили в mp4 с прозрачным фоном и накладывали на основное видео.

Что такое Remotion

Remotion - опенсорс-фреймворк на основе React. Идея простая: каждый кадр видео это React-компонент. Задаёшь, как он выглядит на фрейме 0, на фрейме 30, на фрейме 60 - и Remotion превращает это в видеофайл.

Бесплатный для личного и коммерческого использования (при команде до 4 человек лицензия не нужна, для больших студий - платная).

Что реально умеет из коробки:

Установка

Нужен Node.js 18+. Если не установлен - скачай с nodejs.org, это займёт 2 минуты.

Два способа начать:

Вариант 1 - стартовый шаблон (рекомендую):

bash
npm create video@latest

Интерактивный мастер задаст несколько вопросов и создаст папку с готовой структурой.

Вариант 2 - чистая установка в существующий проект:

bash
npm i remotion @remotion/cli react react-dom

После установки в папке появится src/ с компонентами и remotion.config.ts.

При первом запуске Remotion скачивает headless-браузер (Chromium, около 150 МБ) - это нормально, один раз. Он нужен для рендеринга кадров.

Как генерить сцены через Claude

Здесь весь смысл связки. Ты не пишешь код руками - ты описываешь словами, что должно произойти на экране.

Открываешь Claude Code в папке проекта и пишешь, например:

«Создай сцену: на чёрном фоне появляется надпись "14 дней" крупным белым шрифтом - сначала снизу, с пружинистой анимацией. Потом под ней выезжает строка "до запуска" серым цветом. Длительность 3 секунды, 30fps.»

Claude пишет .tsx-файл с компонентом, регистрирует его в Root.tsx и указывает параметры (ширина, высота, fps, длительность).

Дальше правишь текстом: «сделай шрифт жирнее», «замедли появление первой надписи», «добавь обводку». Claude вносит правки в тот же файл.

Никакого кода читать не нужно - только смотреть на превью и описывать, что изменить.

💡

Совет

Remotion запускает превью прямо в браузере командой npx remotion studio. Видишь изменения в реальном времени, перематываешь таймлайн, проверяешь анимацию до рендера.

Рендер в видео

Когда сцена готова, рендеришь командой:

bash
npx remotion render src/index.ts НазваниеКомпонента out.mp4

Для прозрачного фона (наложение поверх видео):

bash
npx remotion render src/index.ts НазваниеКомпонента out.webm --codec=vp8

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

ℹ️

Заметка

Рендер на CPU не мгновенный. 5-секундная сцена в 1080p рендерится 20-60 секунд в зависимости от сложности и железа. Это разовая операция перед публикацией, не блокер в процессе создания.

Что реально можно собрать

Из практики на роликах 014-016:

Кинетический текст - заголовки и тезисы, которые появляются по одному слову или букве. Подходит для начала ролика или смены темы внутри.

Анимированные цифры - счётчик который отсчитывает от 0 до нужного значения. Хорошо работает для статистики и результатов.

Карточки с иконками - текст + иконка, которые выезжают слева или снизу с небольшой задержкой между собой.

Схемы и стрелки - блоки, которые появляются по очереди и соединяются линиями. Объясняют процессы лучше статичной картинки.

Фейковые интерфейсы - имитация экрана телефона, окна браузера, чата. Для сторителлинга и демонстрации продуктов.

Переходы - появление и исчезновение объектов между сценами.

Всё это работает как отдельные mp4/webm-файлы, которые накладываются на основной ролик. Либо как полноценный ролик целиком - если хочешь слайд-шоу в стиле After Effects без исходного видео.

Способ быстрее: отдай эту статью своему Claude Code

Это техническая инструкция, и Claude Code умеет выполнять её шаг за шагом без твоего участия в каждом пункте.

Скопируй ссылку на эту страницу, открой Claude Code и напиши:

«Прочитай статью [вставь ссылку] и установи Remotion. Потом создай тестовую сцену: белый текст "Hello" на чёрном фоне с пружинистым появлением, 3 секунды. Запусти студию.»

Он сам установит зависимости, создаст сцену и откроет превью. Ты увидишь результат, не разбираясь в командах.

Частые вопросы

Нужно ли знать React для работы с Remotion?
Нет. Claude Code пишет весь .tsx-код. Ты описываешь задачу словами, он генерирует и правит код. Достаточно понимать, что хочешь увидеть на экране.
Чем Remotion лучше CapCut или Premiere для анимации?
Контролем и повторяемостью. Один раз описал стиль - воспроизводишь точно так же для каждого ролика. Нет ручной работы с таймлайном. Всё хранится в коде, можно версионировать через git.
Можно ли рендерить в облаке, не на своём компьютере?
Да, Remotion Lambda рендерит на AWS. Но для большинства задач хватает локального рендера - это бесплатно и не требует настройки облака.
Поддерживает ли Remotion шрифты и кириллицу?
Да. Подключаешь любой Google Font или загружаешь свой через @remotion/google-fonts или стандартный CSS @font-face. Кириллица работает без дополнительных настроек.

Если ещё не работал с Claude Code и это твой первый шаг - начни с базового гайда по вайбкодингу. Там объясняется как запускать проекты через Claude Code без опыта программирования.

Для тех, кто хочет понять, как Claude Code вообще работает бесплатно и что за подписки существуют, есть отдельная статья: /blog/besplatnyy-claude-code-free-claude-code.

Больше про Claude и AI-инструменты в работе - в моём Telegram-канале Виктор Дачников | NEXTGEN.

NextGen Club

Попробуй прямо сейчас

Открой Claude Code и напиши: «Создай Remotion-проект и сделай сцену с кинетическим текстом "Мой первый моушен" - белый шрифт, чёрный фон, 3 секунды». Если застрял на установке Node.js или возникли вопросы по командам - пиши в чат NextGen Club, разберём.

Вступить в клуб