Hyperframes: видео из HTML руками агента
Hyperframes — открытый фреймворк, где ролик собирается из HTML, CSS и анимаций, без таймлайна и видеоредактора. Разметку пишет ИИ-агент, рендер идёт локально. Разберём, как это устроено, для чего подходит и как подключить Hyperframes к Claude Code.
Hyperframes — это открытый фреймворк для создания видео из HTML: сцена описывается обычной разметкой и CSS-анимациями, превью проигрывается прямо в браузере, а готовый ролик рендерится через headless Chrome и FFmpeg. Он изначально спроектирован под ИИ-агентов — Claude Code, Cursor, Codex, — которые умеют писать HTML и потому могут собирать ролики по текстовой задаче. Мы в ИИ-офисе делаем в этой связке б-роллы и моушн-вставки для вертикальных роликов.
Что узнаешь из гайда
- Что такое Hyperframes и почему это «видео как HTML»
- Как устроен цикл: разметка → превью → рендер
- Примеры: б-роллы, графики, оверлеи, презентации
- Как подключить Hyperframes к Claude Code
- Какие скилы поставить рядом для полного видео-стека
Часть 1 · Суть
Что такое Hyperframes
Главное
Идея Hyperframes — видео это веб-страница во времени. Всё, что умеет браузер — типографика, графики, шейдеры, 3D — может стать кадром ролика.
Классический монтаж собирает ролик из отснятых кадров на таймлайне. Hyperframes идёт с другой стороны: ролик — это HTML-композиция, где блоки появляются, двигаются и исчезают по CSS- и JS-анимациям. Никакой сборки проекта не нужно — index.html проигрывается как есть, превью открывается в браузере с живой перезагрузкой, а финальный рендер в видеофайл делает headless Chrome в связке с FFmpeg.
Фреймворк не привязан к одной анимационной библиотеке: работают GSAP, Lottie, чистый CSS и Three.js, плюс есть каталог готовых блоков — оверлеи для соцсетей, переходы, графики, кинематографические эффекты. Почему это важно для ИИ: агенты уже отлично пишут HTML и CSS, а значит могут выдавать готовые ролики без видеоредактора — тот же принцип «монтаж кодом», что разобран в хабе скилов Claude для видео.
Часть 2 · Механика
Как работает цикл Hyperframes
Главное
Три такта: агент пишет разметку → вы смотрите превью в браузере → рендер собирает MP4. Правки — это правки текста, а не перемонтаж.
- Разметка. Композиция ролика — HTML-файл: блоки, тайминги, анимации. Его пишет агент по вашему описанию или вы сами.
- Превью. Файл открывается в браузере и проигрывается как ролик; поправили разметку — страница перезагрузилась, изменения видны сразу.
- Рендер. Headless Chrome прогоняет композицию кадр за кадром, FFmpeg собирает из кадров видеофайл. Всё локально, без облачных лимитов.
Ключевое отличие от генеративных видео-нейросетей: здесь нет «лотереи» с промптом. Композиция детерминирована — каждый рендер даёт ровно тот ролик, который описан в разметке, и любую деталь можно поправить точечно.
Часть 3 · Применение
Примеры видео на Hyperframes
Главное
Сильная зона Hyperframes — информационная моушн-графика: всё, где ролик строится из текста, цифр и схем, а не из съёмки.
- Б-роллы для вертикальных роликов. Концептуальные вставки поверх говорящей головы: счётчики, сравнения «было/стало», выноски. Мы так закрываем моушн-вставки для Reels — стек разобран в гайде про скилы Claude для Reels.
- Анимированные графики и диаграммы. Данные из таблицы превращаются в ролик с растущими столбцами и линиями — для отчётов, презентаций и постов.
- Оверлеи и титры. Подписки, плашки, субтитры, социальные виджеты — из каталога готовых блоков, с правкой под свой бренд.
- Видеопрезентации. Слайды как HTML-сцены с анимацией переходов — альтернатива экспорту слайдов в видео.
Часть 4 · Подключение
Как добавить Hyperframes в Claude Code
Главное
У Hyperframes есть скилы для агентов: они учат Claude писать композиции и запускать рендер. Ставите скил — дальше работаете текстовыми задачами.
Скилы подключаются командой установки из репозитория проекта (точная команда — в README Hyperframes; поддерживаются Claude Code, Cursor и другие агенты). После установки агент знает структуру композиций, CLI и приёмы анимации — и собирает ролик из текстовой постановки:
Собери б-ролл 9:16 на 6 секунд в Hyperframes:
тёмный фон, по центру счётчик от 0 до 1300 со свистящим
ростом цифр, под ним подпись «скилов в каталоге».
Палитра: графит + мятный акцент. Отрендери в MP4.Покадровый вариант формата есть и в нашем каталоге — карточка Video Hyperframes: скил генерирует сценарии из последовательных кадров с автовоспроизведением, готовые к конвертации в MP4. Если скил ставите впервые — процесс по шагам в гайде как установить skill в Claude Code.
Честно про границы
Hyperframes не заменяет съёмку и не генерирует «живое» видео с людьми — это инструмент моушн-графики. Если нужен фотореализм или генерация сцен, это задача видео-нейросетей, а Hyperframes добивает информационный слой поверх.
Часть 5 · Стек
Дополнительные скилы рядом с Hyperframes
Главное
Hyperframes закрывает моушн-вставки. Полный конвейер ролика — сценарий, монтаж, субтитры — собирается из соседних навыков.
- Монтаж по транскрипту — нарезка длинного видео и склейка клипов через код: разбор в гайде про скилы Claude для монтажа видео.
- Программируемая моушн-графика на React — когда нужна сложная композиция с данными и компонентами: Remotion skill.
- Сценарии и субтитры — текстовая часть конвейера: скил сценариев для видео и нейросети для субтитров.
Коротко
- Hyperframes — открытый фреймворк «видео из HTML»: разметка → превью в браузере → рендер в MP4.
- Заточен под ИИ-агентов: Claude пишет композиции по текстовой задаче через скилы проекта.
- Сильная зона — б-роллы, графики и оверлеи; съёмку и генеративное видео не заменяет.
Вопросы
Частые вопросы
Что такое Hyperframes?
Hyperframes — это открытый фреймворк для создания видео из HTML: композиция описывается обычной разметкой и CSS-анимациями, превью открывается в браузере, а финальный ролик рендерится через headless Chrome и FFmpeg. Главная особенность — он изначально заточен под ИИ-агентов: Claude Code или Cursor пишут разметку ролика по текстовой задаче.
Hyperframes бесплатный?
Да, Hyperframes — открытый проект: код опубликован на GitHub, платной подписки для рендера не требуется. Платить придётся разве что за ИИ-агента, которым вы генерируете композиции, — сам фреймворк и рендер работают локально.
Чем Hyperframes отличается от Remotion?
Hyperframes собирает видео из чистого HTML и CSS без сборки проекта — index.html проигрывается как есть, а Remotion строит видео из React-компонентов и требует полноценного кодового окружения. Hyperframes проще для быстрых роликов и агентных сценариев, Remotion гибче для сложной программируемой моушн-графики.
Как добавить Hyperframes в Claude Code?
У Hyperframes есть скилы для агентов: после установки из репозитория проекта Claude Code получает инструкции, как писать композиции и запускать рендер. Дальше достаточно текстовой задачи — «сделай б-ролл со счётчиком и графиком» — и агент собирает ролик сам; вариант формата есть и в каталоге ИИ-офиса.
Читать дальше
Соседние гайды
Платформа и сообщество, где я по шагам показываю, как поставить ИИ на рутину: контент, код, продажи, аналитика. Заходи и забирай рабочие связки, которыми пользуюсь сам.
Посмотреть, что внутриtelegram
Канал с полезными материалами про нейросети
Разборы, новые инструменты и приёмы по ИИ — то, чем пользуюсь сам, без воды. Подпишись, чтобы не потерять.
