HyperFrames — HTML в детерминированное MP4

источник ↗ ·

Open-source фреймворк, превращающий HTML, CSS, медиа и seekable-анимации в повторяемые MP4-видео для агентов и локальной разработки.

html-video deterministic-rendering ai-agents ffmpeg headless-chrome open-source heygen remotion-alternative

privacy

Эта заметка участвует в semantic memory.

AI Summary

  1. Краткий обзор сути: HyperFrames — это открытый движок, который рендерит видео из обычного HTML с data-атрибутами, анимациями (GSAP, Lottie, Three.js и др.) и медиа-файлами; результат всегда идентичен при одинаковом входе.

  2. Ключевые тезисы: • CLI-команды: npx skills add heygen-com/hyperframes --full-depth, npx hyperframes init, npx hyperframes preview, npx hyperframes render; • 20 готовых skills для агентов (Claude Code, Cursor, Gemini CLI и др.); • frame.md — перевод design-токенов в формат, пригодный для видео; • HTML-композиции не требуют React и build-шага; • Рендер через headless Chrome + FFmpeg гарантирует детерминизм; • Apache 2.0, без платы за рендер.

  3. Важные детали и нюансы: • --full-depth обязателен, иначе skills.add берёт устаревший blob из skills.sh; • Git LFS (~240 MB) нужен только для регрессионных тестов; • Требования: Node.js 22+, FFmpeg; • Сравнение с Remotion: HyperFrames использует plain HTML вместо React-компонентов; • Используется в продакшене HeyGen, примеры от tldraw и TanStack.

  4. Практические выводы/следующие шаги: • Установить: npx skills add heygen-com/hyperframes --full-depth; • Создать проект: npx hyperframes init my-video; • Предпросмотр и рендер: npx hyperframes preview / render; • Добавить готовые блоки: npx hyperframes add ; • Полная документация: hyperframes.heygen.com/introduction.

Мои мысли

graph

Карта связей