HyperFrames и Remotion: сравнение двух движков видео из кода на живых роликах

Зачем мне понадобились оба движка

В сентябре я делал короткие рекламные ролики: вертикальное видео 1080×1920 от видеомодели, а поверх – анимированный текст, счётчики, плашки, в конце – брендовая концовка. Руками в монтажке это час на ролик. Когда роликов много и отличаются они парой слов, монтажка превращается в каторгу.

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

Ниже – не пересказ документации, а то, что я увидел на своих файлах. Где я чего-то не проверял, так и пишу.

Чем HyperFrames отличается от Remotion по сути?

Remotion – это React. Видео – компонент, который получает номер кадра и возвращает картинку. Хочешь, чтобы надпись влетела, – считаешь масштаб от номера кадра через spring или interpolate. Всё, что умеет React и браузер, доступно: SVG-фильтры, шрифты, canvas, любые npm-пакеты.

export const Title = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  const s = spring({frame, fps, config: {damping: 9, mass: 0.4}});
  const scale = interpolate(s, [0, 1], [3, 1]);
  return <AbsoluteFill><h1 style={{transform: 'scale(' + scale + ')'}}>ВЕЗДЕ</h1></AbsoluteFill>;
};

HyperFrames – проект HeyGen, вышел как открытый движок. Видео – обычная HTML-страница. Длительность, размер и частота кадров – в data-атрибутах корневого блока, у каждого клипа свои data-start и data-duration, анимация – таймлайн GSAP на паузе. Движок сам перематывает таймлайн на нужный момент и снимает кадр.

<div id="root" data-composition-id="konec" data-duration="5.44"
     data-width="1080" data-height="1920" data-fps="30">
  <video id="bg" class="clip" src="media/bg.mp4"
         data-start="0" data-duration="3.436" data-track-index="0"></video>
  <div id="title" class="clip" data-start="0" data-duration="5.44"
       data-track-index="1">ХОТИТЕ</div>
</div>
<script>
  const tl = gsap.timeline({ paused: true });
  tl.fromTo("#title", {opacity: 0, scale: 0.5}, {opacity: 1, scale: 1, duration: 0.5}, 0.85);
  window.__timelines = { konec: tl };
</script>

Разница кажется косметической, пока не начинаешь с этим жить. У Remotion есть сборка: TypeScript, бандлер, node_modules на сотни мегабайт, и без неё страницу не открыть. Композицию HyperFrames можно открыть в браузере как есть. Её проще сгенерировать программой, проще проверить и проще поправить руками, не зная React.

Под капотом движки ближе, чем кажется. Оба гоняют headless Chrome, снимают кадр за кадром и отдают последовательность в FFmpeg. Поэтому чудес по скорости ни у одного нет – упираются они в одно и то же.

Нужны ролики из кода под ваш продукт?

Соберу шаблон концовки, субтитров или плашек на HyperFrames или Remotion – под ваши тексты и данные, чтобы новые версии рендерились пачкой, а не собирались в монтажке по одной.

Обсудить задачу → Или сначала прайс: 29 услуг со сроками и ценами

Сравнение по пунктам

Свёл в одну таблицу то, что влияло на мой выбор. Версии – те, что стояли у меня: Remotion 4.0.521 и HyperFrames 0.8.31.

Если коротко по таблице: Remotion богаче как платформа – у него давно есть плеер для встраивания в веб-приложение, рендер прямо в браузере пользователя и зрелая облачная обвязка. HyperFrames проще как формат и не задаёт вопросов про размер вашей компании.

Сколько стоит лицензия Remotion и когда она нужна?

Это первое, во что я упёрся, и главная причина, по которой мои ролики переехали. Remotion – не open source в привычном смысле. Код открыт, но лицензия двухуровневая.

Цены смотрел на remotion.pro в сентябре 2026. Отдельно лицензия запрещает продавать собственную производную от самого Remotion – то есть сделать на нём свой видеоредактор и торговать им нельзя.

Для одиночки это не проблема. Проблема появляется, когда вы делаете инструмент для заказчика. Сегодня у него трое сотрудников, через полгода – двенадцать, и лицензия внезапно становится его ежемесячным расходом, про который вы забыли предупредить. Мне такой разговор с клиентом не нужен.

У HyperFrames лицензия Apache 2.0: коммерческое использование, изменение и передача разрешены, нужно сохранять уведомления об авторстве и помечать изменённые файлы. Ограничений по размеру компании нет. Одна оговорка: анимацию в композициях чаще всего крутит GSAP, а у него своя GSAP Standard License. Если делаете продукт, её тоже прочитайте.

Какой движок быстрее рендерит

Одинаковую сцену на двух движках я не собирал, поэтому громкого «X быстрее Y в N раз» не будет. Есть две мои реальные концовки одного формата. Отрендерил их на одном четырёхъядерном компьютере подряд, одну за другой.

Сцены разные. У Remotion тяжёлые SVG-фильтры шума и смещения на каждой букве плюс случайные царапины на каждом кадре. У HyperFrames – размытие полноэкранного видео, стоп-кадр и пять анимированных строк текста со счётчиком. Сравнивать эти цифры в лоб некорректно, но порядок они показывают: десяток-другой секунд рендера на секунду ролика.

Интереснее, куда уходит время. У Remotion сами кадры заняли меньше четверти: остальное – сборка проекта бандлером и старт браузера. При рендере пачкой через Node API проект собирается один раз, и на каждый следующий ролик остаются только кадры. А HyperFrames на одной и той же сцене в разные дни показал 35 и 70 секунд – так что одиночному замеру, включая мой, верить стоит осторожно.

Для практики важнее другое. Упираются оба в процессор и в Chrome, поэтому рендер тысячи роликов на одной машине – это часы при любом движке. Если нужен объём, решает не выбор между ними, а параллельный рендер: у Remotion для этого есть Lambda, у HyperFrames – тоже Lambda и облако HeyGen. Дешевле всего – не рендерить лишнего: графический слой один раз, а дальше склейка готовых кусков через FFmpeg без пережатия.

Что пишет нейросеть лучше: React или HTML?

Для меня это был решающий вопрос. Сцены я не хочу писать руками каждый раз – хочу описать словами «субтитры по фразам, ключевое слово курсивом, в конце чёрный экран с надписью» и получить рабочую композицию.

Проверил на HyperFrames. Дал DeepSeek V4.1 Flash через RouterAI два задания по готовому ролику: субтитры по таймингам фраз и финальную плашку. Обе композиции прошли линтер с первого раза, ноль ошибок, за оба ответа – 1,59 ₽. Рендер открылся и сыграл.

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

На Remotion такую же пробу я не делал, поэтому сравнивать качество не возьмусь. Аргумент в пользу HTML у меня косвенный: страниц с HTML и GSAP в обучающих данных у любой модели на порядки больше, чем композиций Remotion, а у HyperFrames ещё и линтер ловит нарушения контракта до рендера: медиа без id, вложенные тайминги, анимацию поверх CSS-трансформа. Ошибка сборки React тоже ловится, но сообщает она про React, а не про видео.

У обоих есть готовые навыки для агентов вроде Claude Code и Cursor. У HyperFrames среди двадцати навыков есть remotion-to-hyperframes – перенос композиции с Remotion. Авторы пишут, что около 80% типовых сцен переводятся механически, и проверяют перевод набором эталонных роликов по SSIM. Работает он только в одну сторону.

Библиотеки готовых блоков: что там на самом деле

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

У 133 блоков HyperFrames из 155 тексты и цвета зашиты прямо в разметку. Движение и геометрию почти нигде не настроить. То есть «подставить свой бренд в готовый блок» – это не заполнение полей, а правка кода в каждом блоке. Здесь Remotion с Onda выглядит аккуратнее.

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

Грабли, на которые уже наступил

FFmpeg из менеджера пакетов может не запуститься. HyperFrames на Windows не смог вызвать FFmpeg через шим chocolatey. Помогла переменная HYPERFRAMES_FFMPEG_PATH с путём к настоящему exe.

Телеметрия включена по умолчанию. HyperFrames шлёт анонимную статистику рендеров. Отключается командой hyperframes telemetry disable. Если отдаёте программу клиенту – выключайте в поставке.

Медиа без id молча ломается. Видео без атрибута id в рендере замерзает на первом кадре, аудио без id уходит в тишину. Ошибки нет, просто плохой ролик. Линтер это ловит – гоняйте hyperframes lint перед каждым рендером.

CSS-трансформ и GSAP на одном элементе конфликтуют. Поставил центрирование через transform на линию, которую потом анимировал GSAP, – линтер выдал ошибку. Трансформ из стилей надо убрать и отдать целиком таймлайну.

Кегль под ширину никто не подгоняет. Длинная строка просто переносится или вылезает за кадр. Размер нужно мерить и ужимать самому, иначе на каждой второй подстановке текста сцена разваливается.

Звук на выходе 48 кГц. Видеомодели отдают 44,1. При склейке кусков без пережатия это надо выравнивать, иначе на стыке будет щелчок или ffmpeg откажется склеивать.

Внешние CDN в блоках. Готовые блоки HyperFrames грузят GSAP и шрифты из сети, а сам движок при первом запуске скачивает свой Chrome. Для рендера без интернета всё это надо положить локально.

Лицензию Remotion проверяйте на стороне того, кто будет пользоваться. Не вашей студии, а заказчика, у которого программа будет крутиться. Это не техническая грабля, но самая дорогая.

Когда брать Remotion, а когда HyperFrames?

И третий вариант, про который забывают: не брать ни один. Для двух коротких роликов с влетающим текстом я однажды не стал поднимать проект вообще – посчитал пружину Remotion покадрово в Python, нарисовал текст в PNG и склеил через FFmpeg. Если сцен две, а не двести, так быстрее.

Вопросы и ответы

С чего начать

Если выбираете прямо сейчас, не читайте сравнения – соберите одну свою сцену на обоих. Концовка на пять секунд занимает вечер, и за этот вечер вы увидите всё, что я описал: где удобнее думать, что ловит проверка и сколько идёт рендер на вашей машине. Исходники обоих открыты: Remotion на GitHub и HyperFrames на GitHub.

А если нужен не эксперимент, а поток роликов под продукт – с шаблонами, подстановкой данных и рендером пачкой – напишите, разберём вашу задачу.