# HyperFrames: актуальный производственный процесс

Проверено по официальной документации 28 июля 2026 года.

## Что важно

HyperFrames использует одну виртуальную шкалу времени. На каждом кадре движок вычисляет `frame / fps`, отправляет событие `hf-seek`, обновляет анимации и захватывает кадр. Поэтому все визуальные слои могут идти синхронно, если читают одну шкалу.

## Установка

```bash
npm install -g hyperframes
npx skills add heygen-com/hyperframes
hyperframes doctor
```

Требования: Node.js 22+, FFmpeg 6+.

## Навыки

- `hyperframes` — композиции, титры, переходы, звук;
- `hyperframes-cli` — init, lint, inspect, preview, render, doctor;
- `hyperframes-media` — подготовка медиа, Whisper, TTS, удаление фона;
- `hyperframes-registry` — установка проверенных компонентов;
- `gsap`, `animejs`, `css-animations`, `lottie`, `three`, `waapi` — детерминированные анимации;
- `website-to-hyperframes`, `remotion-to-hyperframes` — перенос внешних проектов.

## Агентский цикл

```bash
hyperframes lint comp.html --json
hyperframes inspect comp.html --json
hyperframes preview comp.html
hyperframes render comp.html --out output.partial.mp4 --json
```

Агенту запрещено разбирать красивый текст консоли. Используется только `--json` и коды возврата.

## Длительность и обрыв финала

- Задавай `data-duration` на корневом элементе явно из `timeline.expected_duration`.
- У каждого слоя должны быть `data-start` и `data-duration`/`data-end`.
- Если GSAP-сцена заканчивается раньше композиции, добавь пустую операцию до полного времени:

```js
tl.set({}, {}, TOTAL_DURATION);
```

- В предварительном просмотре нажми `End` и покадрово проверь последние кадры.

## Медиа

- `data-start` — положение на общей шкале;
- `data-duration` — длительность слоя;
- `data-trim-start` — начало внутри исходного файла;
- `data-volume` — громкость;
- `data-mute` — убрать звук б-ролла;
- `data-fade` — короткий вход/выход, но не на первом слове титра.

## Каталог прежде самодеятельности

Проверенные блоки надёжнее эффектов, выдуманных агентом. Сначала ищи готовый компонент через `hyperframes add`, потом пиши свой.

## Официальные источники

- https://hyperframes.video/docs
- https://hyperframes.video/docs/concepts/timing-and-tracks
- https://hyperframes.video/docs/workflow/cli-reference
- https://hyperframes.video/docs/workflow/preview
- https://hyperframes.video/docs/concepts/data-attributes
- https://hyperframes.video/docs/recipes/ai-agents
- https://github.com/heygen-com/hyperframes