Remotion: видео кодом на React, и что мы выбрали вместо него

Remotion — это библиотека, в которой ролик описывается кодом на React. Каждый кадр считается как функция от своего номера: на 30 кадрах в секунду пятнадцатисекундное видео — это 450 вычисленных картинок, которые склеиваются в mp4. Никакого таймлайна с мышкой, вся анимация живёт в коде и в git.

Дальше — что на нём делают, сколько он стоит, где упирается, и чем мы закрыли ту же задачу.

Почему о Remotion заговорили в 2026

Проект не новый: репозиторий открыт в 2020 году, на 01.09.2026 у него 57 941 звезда на GitHub, а пакет remotion за неделю с 23 по 29 августа скачали 1 668 831 раз.

Всплеск интереса случился из-за другого. 19 января 2026 года команда выложила репозиторий remotion-dev/skills — правила, которые объясняют ИИ-агенту, как писать корректный код под эту библиотеку. Ставится одной командой, дальше ролик собирается разговором с агентом.

Это видно по спросу. Вот что люди ищут в Яндексе (Вордстат, Россия, собрано 01.09.2026):

Запрос	Показов в месяц
remotion	1 539
claude remotion	314
remotion skill	282
remotion claude code	120
скилл remotion	67
плагин remotion	56

Половина кластера — это не про библиотеку, а про «сделай мне ролик промптом». Кстати, про сами Skills в обзорах пишут «28 файлов правил»; мы открыли репозиторий и насчитали 12 наборов — рендер, субтитры, карты, интерактив, студия, обновление версий и остальные. Мелочь, но показательная.

Что на нём делают

В галерее на сайте проекта лежат прогноз погоды по Франции, визуализация выбросов европейской энергосети от Electricity Maps, анимированная акварельная карта путешествия и продукт revid.ai. Общее у них одно: в кадре живут данные.

Отдельно стоит GitHub Unwrapped — персональный ролик про год вашей активности на GitHub. Вводите ник, получаете своё видео. Один шаблон, тысячи выходов, данные приезжают в компоненты как обычные пропсы. Вот это Remotion умеет так, как не умеет ни один редактор с таймлайном: там пришлось бы делать тысячу проектов руками.

Ещё он хорош в субтитрах, которые подсвечивают слово в момент произнесения, и в титрах поверх снятого материала. Про второе — ниже, это важный пункт.

Как это устроено внутри

React-компонент рисует кадр, а useCurrentFrame() возвращает его номер. Анимация — это функция: «на кадре 30 прозрачность 0, на кадре 45 — единица». Рендерер запускает headless Chrome, прогоняет композицию по кадрам, снимает каждый и отдаёт всё это ffmpeg.

Отсюда два следствия, ради которых люди и переходят на код. Кадр воспроизводится: собрали через год — получили то же самое. И ролик диффается в git, потому что это текст.

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

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

Кто вы	Что платите
Один человек, НКО, компания до 3 сотрудников	ничего
Компания от 4 сотрудников, собираете ролики руками	25 $ за место в месяц
Компания от 4 сотрудников, генерируете автоматически	0,01 $ за рендер, минимум 100 $ в месяц
Enterprise	от 500 $ в месяц

Порог считается по размеру компании, а не по числу разработчиков, которые трогают код: четыре человека в штате — лицензия нужна, даже если Remotion открывает один. Цены на 01.09.2026, перед решением сверьте на remotion.pro.

Где Remotion упирается

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

Первое — рендер в облаке считается деньгами. Remotion Lambda распределяет кадры по функциям AWS, и стоимость растёт вместе с памятью и уровнем параллельности. Больше памяти — быстрее и дороже. Больше функций — быстрее до какого-то предела, а дальше накладные расходы на оркестрацию съедают выигрыш. Подобрать конфигурацию это отдельная инженерная работа, а не кнопка «рендер».

GPU там нет, считает процессор. Тяжёлые эффекты упираются в это сразу. Плюс потолок длины: порядка 80 минут в Full HD, а размер выходного файла ограничен примерно половиной диска функции. Для роликов нормально, для многочасовой записи вебинара уже нет.

Второе — нужен React-проект целиком. Node, npm-дерево, сборка, обновления версий. Через год «собрать как было» означает поднять всё это дерево заново. Продуктовой команде, которая и так живёт в React, это ничего не стоит. Человеку, который делает восемь роликов в месяц и не пишет фронтенд, приходится тащить лишний слой.

И третье, самое приземлённое. На простых сценах инструмент избыточен: титр, карточка со списком, счётчик верстаются за десять минут обычным CSS. Заводить под них React-проект и следить за лицензией смысла нет.

Как мы решили ту же задачу без него

У нас в работе 134 папки роликов, 60 из них собраны кодом, 650 сцен уже отрендерены. Архитектура точно такая же, как у Remotion: страница проигрывается в браузере, снимается покадрово, склеивается ffmpeg. Разница в том, что страница — обычный HTML, а рендерер — скрипт на 300 строк, который управляет Chrome по DevTools Protocol. Зависимостей нет вообще.

Сцена — это <section> с атрибутом data-dur, то есть длительностью. Появления внутри — обычные animation-delay. Задержки ставятся не на глаз: сначала пишется озвучка, потом инструмент выравнивания говорит, на какой секунде звучит каждое слово, и эти секунды переезжают в CSS. Кадр подгоняется под голос, а не наоборот.

На практике это значит вот что. Файл сцены открывается через год без интернета: шрифты и библиотеки лежат рядом в репозитории, версия зафиксирована именем файла. Рендер идёт на своём маке и не стоит ничего — замер от 01.09.2026: сцена на 13 секунд в 1920×1080 со суперсэмплингом 2× снимается за 49 секунд. А в сам mp4 пишется метка версии рендера, по ней видно, снят файл нынешним конвейером или прошлогодним.

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

Честно про дыру: прозрачности наш рендер не даёт. Кадр снимается непрозрачным целиком, поэтому нижнюю треть или титр поверх снятого материала мы до сих пор собираем руками в редакторе. Вот здесь Remotion объективно сильнее — он умеет отдавать ProRes 4444 с альфа-каналом, и когда эта задача станет частой, мы возьмём его именно под неё.

И ещё одно, чтобы не выглядело красивее, чем есть: нас меньше четырёх, то есть Remotion был бы для нас бесплатным. Мы отказались не из-за денег, а из-за слоя, который пришлось бы держать ради того, что уже работает на голом CSS.

Что выбрать вам

Задача	Чем делать
Тысячи персональных роликов по данным	Remotion, и других вариантов, по сути, нет
Продукт, где видео генерирует пользователь	Remotion + Lambda
Плашка, титр или субтитры поверх снятого видео	Remotion (нужен альфа-канал)
4–12 роликов в месяц: карточки, схемы, счётчики, полноэкранные сцены	HTML + покадровая съёмка, React не нужен
Одна плашка на весь ролик	обычный редактор, оба варианта — оверкилл
Срочная реакция на новость сегодня к вечеру	редактор, код не успеет

Простое правило: если в кадре живут данные или роликов тысячи — берите Remotion. Если это графика под закадровый голос и роликов десятки — хватит вёрстки.

Мы делаем видео для каналов и продуктов целиком: сценарий, графика, озвучка, монтаж, выкладка. Считаем не просмотры, а переходы в продукт — свои каналы ведём по тем же правилам, что клиентские. Если задача — не ролик, а сам продукт, это соседняя услуга.