⚡ Claude Code

Remotion: видео из кода вместо монтажа

ММихаил Иванин21 июня 2026 г.7 мин чтения
Remotion: видео из кода вместо монтажа
✈️
Свежие гайды и обзоры выходят в моём Telegram первыми
Подписаться →

Remotion: видео из кода вместо ручного монтажа

Remotion - это открытый движок, который рендерит видео из React-кода. Никакого After Effects: ты описываешь анимацию как обычный компонент (заголовок въезжает слева, график растёт за 2 секунды), запускаешь одну команду в терминале - и на выходе готовый MP4. На GitHub у проекта 50,8k звёзд, и его официально удобно цеплять к Claude Code: ты пишешь словами, что должно происходить на экране, Claude кодит тайминги, ты рендеришь. Эксплейнер, который монтажёр собирает неделю за десятки тысяч рублей, так реально собрать за вечер.

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

Что такое Remotion и почему это не монтаж

Обычный видеоредактор - это таймлайн, который ты двигаешь мышкой. Remotion переворачивает логику: видео становится кодом. Ты пишешь React-компонент, где каждый кадр - функция от номера кадра. Хочешь, чтобы текст появлялся плавно? Привязываешь прозрачность к номеру кадра через interpolate. Хочешь график, который растёт? То же самое, только меняется высота столбика.

Дальше движок проходит по всем кадрам, рендерит каждый как картинку и склеивает в видеофайл через FFmpeg под капотом. Получается чистый MP4 в любом разрешении - хоть 4K, хоть вертикаль под Reels.

Почему это работает:

  • Анимация повторяема. Один раз описал стиль титров - переиспользуешь в каждом ролике.
  • Данные подставляются параметром. Один шаблон графика, разные цифры на входе - и у тебя десять роликов вместо одного.
  • Версионируется в git. Откатил правку, как в коде. С таймлайном в After Effects так не получится.
  • Рендер автоматизируется. Одна команда в терминале, никаких ручных экспортов.

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

Реальные факты: звёзды, лицензия, команды

Цифры, которые я проверил по официальному репозиторию на момент написания (июнь 2026):

ПараметрЗначение
GitHub-звёзды50,8k
Последняя версияv4.0.481 (18 июня 2026)
ТехнологияReact + FFmpeg под капотом
Создать проектnpx create-video@latest
Отрендеритьnpx remotion render <id> out/video.mp4
Лицензиябесплатно для физлиц и компаний до 3 человек

Про лицензию важно не обмануться. Remotion не MIT. По официальным условиям он бесплатен для физлиц, некоммерции и коммерческих компаний с командой до 3 человек включительно. Если у тебя фирма от 4 сотрудников - нужна платная company license (цену называют на remotion.pro). Для одиночки, фрилансера или микро-команды - бесплатно и легально. Делаешь контент сам под свой бренд - ты в зелёной зоне.

Как подключить Remotion к Claude Code

Сам по себе Remotion - это код, который надо писать. А писать его за тебя будет Claude Code прямо в папке проекта. Это не самоделка: Remotion официально поддерживает связку с Claude Code и даже кладёт готовые agent skills при создании проекта (на официальной странице Claude Code назван прямым текстом).

Поток выглядит так.

1. Создаёшь проект

npx create-video@latest

Команда поднимает стартовый шаблон Remotion с превью-студией. Спрашивает шаблон (бери Blank или с примерами) и предлагает поставить Skills - соглашайся, это официальные подсказки для AI-агента.

2. Заходишь в папку Claude Code

Открываешь терминал в папке проекта и запускаешь claude. Теперь Claude видит весь код видео и может его править.

3. Описываешь анимацию словами

Не пишешь код руками - диктуешь задачу:

Сделай интро-сцену на 3 секунды. Заголовок "Remotion" въезжает слева за 0,5 секунды и слегка пружинит. Под ним появляется подзаголовок через 1 секунду, плавно. Фон тёмный, текст белый.

Claude открывает нужный компонент, прописывает interpolate и spring для таймингов, ставит длительность сцены в кадрах. Ты смотришь результат в живом превью Remotion Studio, говоришь "график должен расти медленнее" - он правит число.

4. Рендеришь одной командой

Когда картинка устраивает:

npx remotion render <composition-id> out/video.mp4

Файл готов. Данные можно подставить параметром, не трогая код. На macOS/Linux пропсы передаются инлайном:

npx remotion render MyVideo out/v1.mp4 --props='{"title": "Отчёт за июнь", "growth": 42}'

Нюанс для Windows (я сам на Windows 11): инлайн-JSON в --props тут не работает - шелл съедает кавычки. По официальной доке на Windows пропсы кладут в файл и передают путь:

npx remotion render MyVideo out/v1.mp4 --props=./props.json

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

Мой опыт: эксплейнер за вечер

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

Что реально заняло время:

  • Поставить проект и разобраться со структурой сцен - минут 40, первый раз.
  • Описать четыре сцены Claude и догнать тайминги через превью - пара часов с правками "медленнее / резче / подвинь".
  • Финальный рендер в 1080p - фоном, пока я пил чай.

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

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

Кому это реально нужно

Remotion заходит, когда видео однотипное и его много:

  • Эксплейнеры и инфографика. Тезисы, графики, цифры - идеально ложится на код.
  • Контент по данным. Отчёты, дашборды в видео, где меняются только числа.
  • Шаблонные интро / аутро для YouTube и Reels.
  • Субтитры и титры программно, без ручной расстановки.

Где Remotion не нужен: живые съёмки, сложный сторителлинг с реальным видеорядом, разовый ролик "один раз и забыл". Там быстрее открыть обычный редактор. Remotion - про систему, а не про единичку.

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

Remotion правда бесплатный?

Для физлиц, некоммерции и коммерческих команд до 3 человек - да, бесплатно и легально. Для компаний от 4 сотрудников нужна платная company license. Делаешь контент сам или маленькой командой - платить не нужно.

Нужно ли знать React, чтобы пользоваться?

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

Чем Remotion лучше After Effects?

After Effects - ручной таймлайн под уникальные ролики. Remotion - код: версионируется в git, переиспользуется, рендерится одной командой, данные подставляются параметром. На потоке однотипных видео Remotion выигрывает по скорости, на разовом артовом ролике - нет.

Какая команда устанавливает Remotion?

npx create-video@latest создаёт проект, npx remotion render <id> out/video.mp4 рендерит видео в MP4. Обе команды официальные, из документации.

В каком разрешении рендерит?

В любом, которое зададут в композиции: 1080p, 4K, вертикаль 1080x1920 под Reels и Shorts. Разрешение и FPS - это просто параметры компонента.

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

Да, я сам на Windows 11. Одно отличие: передать данные через --props инлайн-JSON в Windows-шелле нельзя (кавычки теряются), пропсы кладут в файл и передают путь - --props=./props.json.

Вывод

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

Бесплатный первый урок

Хочешь собрать это сам - с нуля до первого клиента?

В первом уроке показываю весь путь по шагам: ставим Claude Code, собираем первый рабочий инструмент и как на этом начать зарабатывать. Без воды и без кода.

Смотреть первый урок →
#remotion#claude code#видео из кода#react#вайбкодинг#автоматизация видео#моушн-графика