Claude без воды
AI

Как собрать видео из HTML с Claude Code: HyperFrames от HeyGen — установка плагина и команды (октябрь 2026)

Как собрать видео из HTML с Claude Code: HyperFrames от HeyGen — установка плагина и команды (октябрь 2026)

Команды сверены с README репозитория 20 октября 2026 года.

HyperFrames — открытый фреймворк HeyGen, который превращает HTML, CSS, медиа и анимации в MP4. Девиз репозитория: «Write HTML. Render video. Built for agents.» На 20 октября 2026 года у проекта 68,2 тысячи звёзд на GitHub, лицензия Apache 2.0. Ниже — что это такое, как поставить плагин для Claude Code и какие команды есть у CLI.

Репозиторий heygen-com/hyperframes, 20 октября 2026 года. Источник: GitHub
Репозиторий heygen-com/hyperframes, 20 октября 2026 года. Источник: GitHub

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

Ролик — это HTML-файл. Время и дорожки задаются атрибутами data-start, data-duration и data-track-index, а у клипов стоит класс clip. Анимация должна уметь «перематываться» на любой кадр: в примере README это GSAP-таймлайн, зарегистрированный в window.__timelines.

При рендере проект открывается в headless Chrome, каждый кадр запрашивается по времени, а затем FFmpeg собирает кадры в MP4. Поэтому, как пишут авторы, один и тот же вход даёт одно и то же видео.

Что понадобится

  • Node.js 22 или новее.
  • FFmpeg.
  • Claude Code — для варианта с плагином. Для ручной работы агент не нужен.

Установка плагина в Claude Code

Первая команда добавляет маркетплейс HeyGen, вторая ставит из него плагин:

claude plugin marketplace add heygen-com/hyperframes claude plugin install hyperframes@hyperframes

После установки в Claude Code доступна команда /hyperframes:hyperframes. В README также сказано, что автообновление маркетплейса включается в меню /plugin → Marketplaces.

По README, у проекта 21 скилл. Точка входа — роутер /hyperframes: он подгружает нужные сценарии создания видео по запросу. Только скиллы, без плагина, ставятся командой npx skills add heygen-com/hyperframes; для агентов и неинтерактивных запусков README советует npx hyperframes skills update.

Ручной вариант: CLI без агента

Создать проект, перейти в папку, открыть предпросмотр и отрендерить:

npx hyperframes init my-video cd my-video npx hyperframes preview npx hyperframes render
  • init создаёт папку проекта my-video.
  • preview открывает предпросмотр в браузере с live reload: правки в HTML видны сразу.
  • render собирает MP4.

Готовые блоки из каталога

В каталоге лежат готовые блоки, например переход flash-through-white, instagram-follow и график data-chart. Добавляются командой такого вида:

npx hyperframes add data-chart

Что ещё в репозитории

  • Пакеты: CLI hyperframes, @hyperframes/core, engine, producer, studio, player, shader-transitions и aws-lambda — распределённый рендер на AWS Lambda.
  • Плагины для других агентов: в README упомянуты Copilot, VS Code, Cursor, Gemini CLI и Codex.
  • Для разработки репозитория: эталонные ролики для регрессионных тестов (около 240 МБ) лежат в Git LFS; чтобы их не скачивать, клонировать с GIT_LFS_SKIP_SMUDGE=1.

Ограничения

  • Раздела с ограничениями в README нет. Из описания следует, что анимация должна поддерживать перемотку по времени: обычный CSS или JS без управляемого таймлайна для покадрового рендера не подходит.
  • Рендер идёт через Chrome и FFmpeg на своей машине, поэтому нужны установленные Node.js 22+ и FFmpeg.
  • Релиз-ноутов на странице GitHub Releases нет; номер версии виден только в коммитах (на 20 октября — v0.8.181).

Промпты, инструменты и уроки по Claude — в Telegram-боте «Базы без воды».

#claude #claudecode

22