HyperFrames: HTML, CSS и анимации превращаются в детерминированные MP4

HyperFrames — открытый фреймворк, который описывает видео как HTML: разметка, CSS, медиафайлы и анимации с поддержкой перемотки превращаются в детерминированный MP4. Детерминированность здесь ключевая: рендерер проходит по кадрам в headless Chrome и кодирует результат через FFmpeg, поэтому один и тот же вход даёт один и тот же ролик. Видео перестаёт быть чем-то, что собирается вручную в редакторе, и становится воспроизводимым артефактом сборки — как страница или билд фронтенда. Использовать HyperFrames можно тремя способами: локально через CLI, из ИИ-агентов для кода через навыки или как ядро рендеринга внутри сторонних сервисов для создания видео. Самый интересный для разработчика сценарий — работа из агента. Достаточно установить набор навыков командой npx skills add heygen-com/hyperframes, а затем описать словами, какой ролик нужен. Например, попросить сделать десятисекундную продуктовую заставку с появляющимся заголовком, фоновым видео и негромкой музыкой. Навыки объясняют агенту производственный цикл: спланировать видео, написать валидный HTML, подключить анимацию с поддержкой перемотки, добавить медиа, прогнать линтер, посмотреть превью и отрендерить результат. Заявлена поддержка Claude Code, Cursor, Gemini CLI, Codex и других агентов, умеющих работать с навыками. Всего в поставку входит 21 навык, которые агент подгружает по необходимости. Первым читается роутер /hyperframes: он выбирает подходящий рабочий процесс под запрос вида «сделай мне видео» и указывает на нужные тематические навыки. Установить всё сразу можно флагом --all, а можно взять один конкретный навык. Рабочие процессы создания покрывают типовые задачи: видео о запуске продукта, превращение сайта в ролик, объясняющие видео из произвольного текста без записи экрана, разбор пул-реквеста из GitHub, встраивание субтитров в уже готовое говорящее видео, переупаковка интервью или подкаста с графическими вставками, короткая несопровождаемая motion-графика, клип под музыку с синхронизацией по битам, презентация со слайдами и навигацией, а также универсальный сценарий для длинных многосценовых композиций. Отдельный навык переносит существующую композицию Remotion на HTML HyperFrames; это миграция в одну сторону, а не способ создания с нуля. Доменные навыки отвечают за отдельные слои. Один описывает контракт композиции: атрибуты тайминга, классы клипов, дорожки, подкомпозиции, переменные и правила детерминированности. Другие охватывают анимацию и безопасное с точки зрения перемотки авторство кейфреймов в разных рантаймах — GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI. Есть навыки про медиа и звук, про дизайн и типографику, про CLI-цикл разработки и облачный рендеринг, про подключение готовых блоков и компонентов, про импорт ассетов и токенов из Figma. Локальная работа начинается с npx hyperframes init, затем идут превью в браузере с живой перезагрузкой и рендер в MP4. Требования — Node.js 22 и выше и FFmpeg.