🏠 Главная › user guide › creative hyperframes

{/ Эта страница автоматически создается на основе файла SKILL.md навыка с помощью сайта site/scripts/generate-skill-docs.py. Редактируйте исходный код SKILL.md, а не эту страницу. /}

Гиперкадры

Создавайте видеокомпозиции на основе HTML, анимированные заставки, социальные наложения, видео с субтитрами, аудиореактивные визуальные эффекты и переходы шейдеров с помощью HyperFrames. HTML — источник правды для видео. Используйте, когда пользователю нужен визуализированный MP4/WebM из композиции HTML, он хочет анимировать текст/логотипы/диаграммы поверх мультимедиа, ему нужны подписи, синхронизированные со звуком, нужно повествование TTS или он хочет преобразовать веб-сайт в видео.

Метаданные навыков
Источник Необязательно — установите с помощью hermesskills installofficial/creative/hyperframes
Путь необязательные навыки/креатив/гиперфреймы
Версия 1.0.0
Автор хейген-ком
Лицензия Апач-2.0
Платформы Linux, MacOS, Windows
Теги креатив, видео, анимация, html, gsap, motion-graphics
Сопутствующие навыки manim-video, meme-generation

Ссылка: полная версия SKILL.md:::информация

Ниже приведено полное определение навыка, которое Гермес загружает при активации этого навыка. Это то, что агент видит в качестве инструкций, когда навык активен.

Гиперфреймы

HTML — источник правды для видео. Композиция представляет собой HTML-файл с атрибутами data-* для синхронизации, временной шкалой GSAP для анимации и CSS для внешнего вида. Механизм HyperFrames захватывает страницу покадрово и кодирует в MP4/WebM с помощью FFmpeg.

Дополнение к manim-video: Используйте manim-video для математических/геометрических пояснений (уравнений в стиле 3B1B). Используйте «гиперкадры» для анимационной графики, говорящей головы с подписями, экскурсий по продукту, социальных наложений, переходов шейдеров и всего, что связано с реальными видео/аудиоматериалами.

Когда использовать

Не используйте этот навык для: - Чистая математика/анимация уравнений (→ manim-video) - Генерация изображений или мемов (→ meme-generation, модели изображений) - Живая видеоконференция или потоковое вещание

Краткий справочник

npx hyperframes init my-video               # scaffold a project
cd my-video
npx hyperframes lint                        # validate before preview/render
npx hyperframes preview                     # live-reload browser preview (port 3002)
npx hyperframes render --output final.mp4   # render to MP4
npx hyperframes doctor                      # diagnose environment issues

Флаги рендеринга: --quality Draft|standard|high · --fps 24|30|60 · --format mp4|webm · --docker (воспроизводимый) · --strict.

Полная ссылка на CLI: references/cli.md.

Настройка (однократно)

bash "$(dirname "$(find ~/.hermes/skills -path '*/hyperframes/SKILL.md' 2>/dev/null | head -1)")/scripts/setup.sh"

Сценарий: 1. Проверяет, что Node.js >= 22 и FFmpeg установлены (если нет, печатает инструкции по исправлению). 2. Устанавливает CLI hyperframes глобально (npm install -g Hyperframes@>=0.4.2). 3. Предварительно кэширует chrome-headless-shell с помощью Puppeteer — обязательно для наилучшего качества рендеринга через путь захвата Chrome HeadlessExperimental.beginFrame в Chrome. 4. Запускает npx Hyperframes Doctor и сообщает результат.

См. references/troubleshooting.md, если установка не удалась.

Процедура

1. Планируйте перед написанием HTML

Прежде чем прикасаться к коду, сформулируйте на высоком уровне: - Что — сюжетная линия, ключевые моменты, эмоциональные моменты. - Структура — композиции, треки (видео/аудио/наложения), длительность. - Визуальная идентичность — цвета, шрифты, характер движения (взрывной/кинематографический/плавный/технический) - Герой кадр — для каждой сцены момент, когда одновременно видно наибольшее количество элементов. Это статический макет, который вы создадите первым.

Ворота визуальной идентификации (HARD-GATE). Перед написанием ЛЮБОЙ композиции HTML необходимо определить визуальную идентичность. НЕ пишите композиции со стандартными или общими цветами (#333, #3b82f6, Roboto говорят о том, что этот шаг был пропущен). Проверка по порядку:

  1. DESIGN.md в корне проекта? → Используйте его точные цвета, шрифты, правила движения и ограничения «Чего НЕ делать».
  2. Пользователь назвал стиль (например, «Swiss Pulse», «мрачный и технологичный», «люксовый бренд»)? → Создайте минимальный файл DESIGN.md с ## Style Prompt, ## Colors (3-5 шестнадцатеричных символов с ролями), ## Typography (1-2 семейства), ## Чего НЕ делать (3-5 антишаблонов).
  3. Ничего из вышеперечисленного? → Прежде чем писать HTML, задайте 3 вопроса:
  4. Настроение? (взрывной/кинематографический/жидкий/технический/хаотичный/теплый)
  5. Светлый или темный холст?
  6. Есть ли фирменные цвета, шрифты или визуальные отсылки?

Затем сгенерируйте DESIGN.md на основе ответов. Каждая композиция должна прослеживать свою палитру и типографику до DESIGN.md или явного указания пользователя.

2. Подмости

npx hyperframes init my-video --non-interactive

Шаблоны: «пустой», «теплое зерно», «режим игры», «швейцарская сетка», «виньелли», «дерево решений», «кинетический тип», «продукт-промо», «nyt-graph». Передайте --example <name>, чтобы выбрать один, --video clip.mp4 или --audio track.mp3, чтобы заполнить его медиафайлом.

3. Макет перед анимацией

Напишите статический HTML+CSS для сначала главного кадра — GSAP пока нет. Контейнер .scene-content должен заполнить сцену (ширина:100%; высота:100%; отступ:Npx) с помощью display:flex + gap. Используйте отступы для перемещения содержимого внутрь — никогда не position: Absolute; top: Npx в контейнере контента (содержимое переполняется, когда его высота превышает оставшееся пространство).

Только после того, как главный кадр станет правильным, добавьте входы gsap.from() (анимируйте в позицию CSS) и выходы gsap.to() (анимируйте из его).

Полную схему атрибутов данных и правила композиции см. в references/composition.md.

4. Анимация с помощью GSAP

Каждая композиция должна: - Зарегистрируйте его временную шкалу: window.__timelines["<composition-id>"] = tl - Начало на паузе: gsap.timeline({pased: true }) — проигрыватель управляет воспроизведением. — Используйте конечные значения повтора (без повтора: -1 — нарушается механизм захвата). Вычислите: repeat: Math.ceil(duration/cycleDuration) - 1. - Будьте детерминистичны — никакой логики Math.random(), Date.now() или настенных часов. Используйте начальный ГПСЧ, если вам нужна псевдослучайность. - Сборка синхронная — никаких async/await, setTimeout или Promises при построении временной шкалы.

См. references/gsap.md для получения информации об основном API GSAP (анимация, замедление, разнесение, сроки).

5. Переходы между сценами

Многосценные композиции требуют переходов. Правила: 1. Всегда используйте переходы между сценами — без переходов. 2. Всегда используйте анимацию входа для каждого элемента сцены (gsap.from(...)). 3. Никогда не используйте анимацию выхода, кроме финальной сцены: переход ЯВЛЯЕТСЯ выходом. 4. Финальная сцена может исчезнуть.

Используйте npx Hyperframes add для установки переходов шейдера («вспышка через белый», «жидкое вытирание» и т. д.). Полный список: npx Hyperframes add --list.

6. Аудио, субтитры, TTS, аудиореактивность, выделение

7. Анализ, проверка, проверка, предварительный просмотр, рендеринг

npx hyperframes lint              # catches missing data-composition-id, overlapping tracks, unregistered timelines
npx hyperframes validate          # WCAG contrast audit at 5 timestamps
npx hyperframes inspect           # visual layout audit — overflow, off-frame elements, occluded text
npx hyperframes preview           # live browser preview
npx hyperframes render --quality draft --output draft.mp4    # fast iteration
npx hyperframes render --quality high --output final.mp4     # final delivery

hyperframes validate производит выборку пикселей фона за каждым текстовым элементом и предупреждает о коэффициентах контрастности ниже 4,5:1 (или 3:1 для большого текста). «Проверка гиперфреймов» — это компаньон на стороне макета — запускает страницу с несколькими временными метками и помечает проблемы, которые не видит статический анализатор (заголовок, который обходит безопасную область только через 4,5 с, карточка, которая переполняется, когда ее заголовок является самым длинным вариантом, элемент, который оказывается за шейдером перехода). Запускайте «проверку», особенно для композиций с надписями, карточками, подписями или плотной типографикой.

8. Преобразование веб-сайта в видео (если пользователь указывает URL-адрес)

Используйте 7-этапный рабочий процесс захвата видео в references/website-to-video.md: захват → DESIGN.md → SCRIPT.md → раскадровка → композиция → рендеринг → доставка.

Подводные камни

Проверка

До и после рендеринга:

  1. Lint + проверка + проверка прохода: npx Hyperframes lint --strict && npx Hyperframes Validate && npx Hyperframes Inspect (lint выявляет структурные проблемы, проверка выявляет контраст, проверка выявляет проблемы визуального макета/переполнения — см. Troubleshooting.md, если появляются предупреждения).
  2. Хореография анимации — при появлении новых композиций или значительных изменений анимации запустите карту анимации. npx Hyperframes init копирует сценарии навыков в проект, поэтому путь является локальным для проекта: bash node skills/hyperframes/scripts/animation-map.mjs <composition-dir> \ --out <composition-dir>/.hyperframes/anim-map Выводит один файл animation-map.json со сводками для каждой анимации, временной шкалой ASCII Ганта, обнаружением смещения, мертвыми зонами (>1 с без анимации), жизненными циклами элементов и флагами («вне экрана», «столкновение», «невидимый», «быстрый темп» <0,2 с, «медленный темп» >2 с). Сканируйте сводки и флажки — исправьте или обоснуйте каждую. Пропустите небольшие правки.
  3. Файл существует + ненулевое значение: ls -lh Final.mp4.
  4. Продолжительность соответствует data-duration: ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 Final.mp4.
  5. Визуальная проверка: извлеките средний кадр композиции: ffmpeg -i Final.mp4 -ss 00:00:05 -vframes 1 Preview.png.
  6. Аудио присутствует, если ожидается: ffprobe -v error -show_streams -select_streams a -of default=nw=1:nk=1 Final.mp4 | голова -1.

Если при рендеринге гиперфреймов произошел сбой, запустите npx Hyperframes Doctor и прикрепите его результаты к отчету.

Ссылки