motion-graphics

---
name: motion-graphics
description: "Makes motion graphics on the HyperFrames engine (HTML scenes rendered to video) with an AIVFX studio layer: name lower thirds, chapters, numbers, Shorts and Reels hooks, end cards, titles. The brand (colors, fonts, motion, durations) lives in one file, the video is a brief of scene roles, motion is set in words, and the agent renders a draft over footage and a final ProRes 4444 with alpha. Gives timing rules, 9:16 and 16:9 safe zones, lint and black-frame checks, a delivery checklist and a brand file checker. Triggers: 'lower third', 'motion graphics', 'chapter card', 'shorts hook', 'end card', 'transparent overlay', 'brand kit for motion', 'HyperFrames'. Triggers (RU): «сделай плашку», «нижняя треть», «плашка с именем», «заставка», «глава», «титры», «хук для шортс», «финальная карточка», «моушен для ролика», «графика с альфой для монтажа», «заведи бренд для графики», «сделай на хайперфреймс»."
---

# Моушен-графика для роликов

> Instructions are in Russian. Respond in the user's language.

## Зачем

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

Моушен студии построен на HyperFrames, и студия доработала его в свою
фабрику: решения о бренде принимаются один раз и записываются в файл, ролик
описывается брифом по ролям сцен, а агент превращает бриф в композиции и
рендерит. Новая плашка получается такой же, как остальные, даже если её
делает другой агент через месяц.

## На чём работает

| Инструмент | Зачем он здесь | Что из чего |
|---|---|---|
| HyperFrames | движок: сцена это HTML-композиция, рендер в видео, свои проверки | HTML, CSS и таймлайн GSAP → MP4, WebM или MOV ProRes 4444 с альфой |
| Claude Code (или аналог) | агент собирает сцены по брифу | бриф + бренд-файл → композиции, рендер, проверки |
| Бренд-файл | одно место для цветов, шрифтов, движения, отступов | `brand.json` → числа для каждой сцены |
| ffmpeg | черновик поверх футажа, лист кадров, поиск чёрных кадров | сцены с альфой + кадры ролика → превью и лист кадров |
| ProRes 4444 | финал с прозрачным фоном для монтажа | MOV с альфа-каналом |
| DaVinci Resolve (или аналог: Premiere, Final Cut) | монтаж, графика кладётся поверх ролика | MOV ProRes на дорожку выше футажа |

Агент пишет план, бриф, композиции и гоняет проверки; владелец утверждает
план и черновик; тексты (имена, цифры) дают владелец или клиент.

**HyperFrames** это открытый движок от HeyGen: https://hyperframes.heygen.com.
Композиция там это HTML-файл с атрибутами `data-*` для времени, таймлайном GSAP
для анимации и CSS для вида. Нужны Node.js 22 или новее и ffmpeg.

| Что даёт сам HyperFrames | Что добавила студия |
|---|---|
| композицию HTML с дорожками и таймингом сцен | бренд-файл: цвета, шрифты, движение, отступы; правила бренда печатаются перед каждым рендером |
| `hyperframes init`, `preview` со студией в браузере | бриф ролика по ролям сцен вместо ручной вёрстки каждой композиции |
| `hyperframes render`: MP4, WebM и MOV ProRes 4444 с прозрачностью (`--format mov`), `--quality draft` | библиотеку ролей и шаблонов: роль переводится в шаблон конкретного бренда, один бриф собирается в стиле любого бренда |
| `hyperframes lint`, `check` и `validate`: ошибки разметки и таймлайна, ошибки в браузере, пропавшие файлы, контраст текста | черновик поверх настоящего футажа и контактный лист кадров вместо оценки на чёрном |
| `hyperframes add`: готовые блоки и эффекты из реестра | сравнение финала с черновиком по тёмным кадрам и поиск чёрных кадров |
| `hyperframes doctor`: проверка окружения | `check_brand.py`: проверка бренд-файла до первой сцены |
| `--docker` для одинакового результата на разных машинах | локальные шрифты, встроенные в композицию, и локальный GSAP, имена файлов по сценам |

Принципы ниже переносятся и на другие движки, которые превращают код в видео.

## Когда включать

Графика в ролик (имя спикера, глава, цифра, финальная карточка), хук для
Shorts и Reels, прозрачные оверлеи для монтажа, новый бренд для графики.

Не включай для полноэкранных промо-роликов на 10-25 секунд со своим сюжетом:
там нужна раскадровка под темп музыки, одна своя композиция на ролик, а роли
сцен только мешают. Раскадровку роликов делает `shot-list`, обложки к
статьям `article-cover`, стиль генеративных кадров `film-look`.

## Три файла вместо одного большого

1. **Бренд-файл** `brand.json`: цвета, шрифты, размеры текста, словарь
   движения, длительности ролей, отступы и безопасные зоны. Один на бренд,
   меняется редко. Образец с вымышленным брендом и комментарием к каждому
   полю: `templates/brand.example.json`.
2. **Бриф ролика** `scenes.json`: список сцен по ролям. Только смысл и тексты,
   ни одного цвета и ни одного числа движения. Образец:
   `templates/scenes.example.json`.
3. **Шаблон роли**: на каждую роль одна композиция HyperFrames, которая
   читает бренд и сцену и подставляет числа. Свои шаблоны пишешь сам, это
   небольшая работа на роль. Хороший старт: `hyperframes init` и готовые
   блоки из реестра через `hyperframes add`.

Главное правило: цвет, шрифт или скорость, которые нужны одной сцене, но не
записаны в бренде, это сигнал. Либо дописать в бренд для всех, либо отказаться.
Подкрутка «только здесь» и есть то, что разваливает систему. Нужен новый вид:
заводи новый шаблон, а не правь общий под один проект.

## Как завести бренд-файл

1. Скопируй `templates/brand.example.json` в проект как `brand.json`.
2. Возьми цвета с сайта или из гайдлайна бренда. Нет гайдлайна: спроси
   владельца про фон, основной текст и акцент. Не придумывай фирменные
   цвета за клиента.
3. Каждому цвету дай одно значение: фон, текст, вторая строка, акцент. Если
   не можешь назвать, зачем цвет нужен, он лишний. Пять активных цветов
   это потолок.
4. Шрифты: один для заголовков и цифр, один для подписей, можно один на всё.
   Только санс или сериф. Моноширинные и пиксельные шрифты не используем
   нигде, включая цифры, даты и метки. Цифры набирай сансом с ровными по
   ширине цифрами: в CSS `font-variant-numeric: tabular-nums`. Счётчик
   перестаёт прыгать, а шрифт остаётся живым.
5. Шрифты встраивай в композицию (файлом из проекта или прямо в CSS). Шрифт
   из интернета может не догрузиться в момент рендера, и кадры уйдут
   системным шрифтом. То же с GSAP: держи его локально, загрузка из сети
   может отвалиться посреди рендера.
6. Запиши в `rules` ограничения бренда словами: как использовать акцент,
   можно ли вводить новые цвета, откуда брать факты. Агент читает их перед
   каждой сборкой, иначе они теряются между сессиями.
7. Прогони проверку:

```
python3 scripts/check_brand.py brand.json
```

Скрипт ищет обязательные поля, цвета не в hex, контраст текста к фону ниже
4.5:1, моноширинные и пиксельные шрифты, текст мельче 28 пикселей на кадре
1080, длительности вне разумных пределов и безопасные зоны, которые не
закрывают интерфейс площадки. Код выхода 1 при нарушениях.

## Роли сцен

Описывай роль, а не шаблон. Роль говорит, зачем сцена нужна, а шаблон под неё
выбирает бренд. Смени бренд, и та же роль соберётся в другом стиле без
переписывания брифа.

| Роль | Зачем | Поля | Фон | Длительность |
|---|---|---|---|---|
| `hook` | первые 1-3 секунды Shorts, удержать палец | `title` (3-6 слов), `subtitle` по желанию | свой, полный кадр | 2-3 с |
| `name` | кто говорит в кадре | `title` (имя), `subtitle` (кто он) | прозрачный | 3-5 с |
| `chapter` | смена смыслового блока | `label` (номер), `title` | свой или прозрачный | 2.5-4 с |
| `number` | одна цифра, которую надо запомнить | `value`, `unit`, `note` | прозрачный | 3-4 с |
| `endcard` | финал: имя, сайт, что делать дальше | `title`, `meta`, логотип | свой, полный кадр | 4-6 с |

Короткий факт, угловая заметка или перечисление с разделителями тоже бывают
ролями (`fact`, `note`, `list`). Новую роль заводи, когда одна и та же задача
встретилась хотя бы второй раз, а не под одну сцену.

Место в кадре `at`: `bl`, `br`, `tl`, `tr`, `left`, `right`, `center`.
Плашка с именем почти всегда снизу слева, на стороне, противоположной взгляду
спикера.

Тексты только из брифа. Имена, должности, цифры и адреса не выдумываются:
нет данных, спроси. Ошибка в фамилии на плашке видна каждому зрителю.

## Движение словами

В сцене движение описывают как режиссёр, а не как программист:

> линия акцента прочерчивается слева, имя поднимается за ней, должность
> проявляется следом; держится; всё уходит вниз одним движением

Агент переводит это в числа бренда и в твины GSAP: «поднимается» это сдвиг на
`motion.travel_px` за `motion.enter_sec` с торможением `ease_enter`,
«следом» это пауза `stagger_sec`, «уходит» это `exit_sec`. Если в описании
нет нужного слова, бери умолчания бренда, а не придумывай скорость.

- **Одна мысль на сцену.** Если сцена говорит две вещи, это две сцены.
- **Сначала финальный кадр, потом движение.** Сверстай сцену в момент, когда
  всё уже на месте, и только потом добавляй вход и выход. Так наложения
  видны до рендера.
- **Вход медленнее выхода.** Появление с торможением, уход с разгоном и
  примерно вдвое быстрее. Зритель следит за входом, выход ему не нужен.
- **Одно направление на ролик.** Вошло снизу, ушло вниз или вверх по той же
  оси. Хаос направлений читается как монтажная ошибка.
- **Не больше двух приёмов в сцене.** Сдвиг и проявление уже достаточно.
  Вращение, отскок и размытие разом это демо-ролик движка.
- **Короткие расстояния, элементы по очереди.** Сдвиг на 30-60 пикселей
  выглядит дорого, через полэкрана дёшево. Линия, потом имя, потом подпись.
- **Хук по словам, а не по буквам.** Побуквенно медленно и мешает читать.
- **Финал держится** неподвижно 3-4 секунды, иначе его не успевают прочитать.
- **Без случайностей в коде.** Случайные числа и текущее время дают разную
  картинку при каждом рендере. Разброс бери формулой от номера элемента.

## Тайминг и читаемость на телефоне

- Текст держится неподвижно не меньше `min_hold_sec` после полного появления.
- Время на чтение: около 0.3 секунды на слово плюс время входа. Плашка из
  шести слов меньше трёх секунд не живёт.
- Текст среднего размера. Огромный заголовок на весь экран кажется криком.
- Короткая сторона 1080 пикселей: заголовок 64-110, подпись не меньше 40,
  метка не меньше 28. Мельче на телефоне не читается.
- Строка до 25-30 знаков. Длинную разбей на две по смыслу, не по ширине.
- Текст поверх футажа всегда на подложке, тени или затемнении. Контраст
  4.5:1 считается к подложке, а не к пустому фону.
- Акцент на одно слово или одну линию. Залитый акцентом абзац не читается.
- Таймлайн сцены должен заполнять её слот целиком: в конце добавь пустой
  твин на всю длительность сцены. Иначе HyperFrames скрывает сцену раньше,
  и в ролике мелькает чёрный кадр.

## Безопасные зоны

Площадки закрывают часть кадра своим интерфейсом. Числа для кадра с короткой
стороной 1080, перепроверь на свежем скриншоте площадки.

**9:16 (1080x1920, Shorts, Reels, TikTok):** сверху около 250 пикселей (ник,
кнопки), снизу около 400 (подпись, музыка, прогресс), справа около 140
(лайки и комментарии), слева около 60. Хук и важный текст ставь в центральную
полосу. Плашка с именем в вертикали поднимается выше обычного.

**16:9 (1920x1080, YouTube, горизонтальный монтаж):** по бокам около 96
пикселей, сверху 54, снизу около 96. В последние 5-20 секунд YouTube ставит
конечные заставки, финальную карточку строй с местом под них.

Зоны живут в бренд-файле, сцену проверяй наложением рамки на черновой кадр.

## Рендер

- **Черновик:** `hyperframes render --quality draft`, в разы быстрее финала.
  Им проверяют всё, финал рендерят один раз.
- **Обычное видео (MP4, H.264):** хук, финал и всё, что стоит полным кадром.
  Альфа там только утяжеляет файл.
- **Прозрачный фон для монтажа:** плашки, главы поверх футажа, цифры.
  HyperFrames сам рендерит MOV ProRes 4444 с альфой (`--format mov`) для
  DaVinci Resolve, Premiere и Final Cut, для веба есть WebM с альфой
  (`--format webm`). MP4 альфу не хранит. Полнокадровую графику для монтажа
  можно перегнать ffmpeg в ProRes 422 HQ, она легче.
- Против полос на градиентах: лёгкое зерно (`texture.grain`) и ProRes-мастер.
- Не включай захват кадров в PNG (`--video-frame-format png`): в проверке
  студии он проваливал тёмные участки в чёрное.
- Имена файлов латиницей по сценам: `name-01-sokolova.mov`.

## Черновик поверх футажа до финала

На чёрном фоне всё выглядит нормально. Проблемы видны только на настоящей
картинке: плашка закрыла лицо, белый текст ушёл в окно.

1. Рендер сцен в черновом качестве с прозрачным фоном.
2. ffmpeg накладывает их на кадры или куски настоящего ролика (`preview_bg` в
   брифе: файл, видео или папка кадров, сценам раздаются по кругу) и
   склеивает в одно превью.
3. Лист кадров: начало, середина и конец каждой сцены одной картинкой.
4. Просмотр глазами и показ владельцу с нумерованным списком сцен, чтобы
   ответ был одним словом. Прошедший lint не значит, что дизайн работает.

## Проверки

- `hyperframes lint` после каждого нового шаблона, перед показом
  `hyperframes check` (lint, ошибки в браузере, раскладка и контраст текста
  одним прогоном), `hyperframes doctor`, если рендер падает. Lint ловит реальные баги: полноэкранный слой без нулевой прозрачности на старте засвечивает первые
  кадры; центрирование через `translate(-50%,-50%)` вместе с твином по `y`
  сбивается в конце, центруй flex-обёрткой.
- Поиск чёрных кадров в черновике и финале: ffmpeg снимает яркость кадров,
  полностью чёрный кадр на стыке значит пропавшую сцену или замёрзшее видео.
  У каждого видео внутри композиции должен быть свой `id`, иначе кадр
  замирает.
- Сверка финала с черновиком по тёмным кадрам: доля провалившихся в чёрное
  пикселей не должна вырасти.

## Порядок работы

1. Бренд: есть `brand.json`? Нет, заведи и проверь скриптом.
2. План: пронумерованный список сцен с ролями, текстами, форматом и
   длительностью. Показать план, а не видео:

```
Бренд: Fjord Lab, 16:9, альфа для плашек

01. name / bl / альфа: «Мария Соколова» · «Инженер по звуку», 4 с
02. chapter / альфа: «Глава 2» · «Как мы пишем тишину», 3 с
03. number / right / альфа: 48 часов · «на запись одного эпизода», 3.5 с
04. endcard / MP4: «Fjord Lab» · fjordlab.example, 5 с
```

3. Бриф `scenes.json` по утверждённому плану.
4. Композиции по ролям, `hyperframes lint`.
5. Черновик поверх футажа, лист кадров, поиск чёрных кадров, показ.
6. Правки словами («третью короче», «имя крупнее») правятся в брифе, общие
   («все плашки медленнее») в бренде.
7. Финальный рендер, ProRes 4444 для прозрачных сцен, сверка с черновиком,
   выдача файлов в папку под монтаж.

## Типичные ошибки

- **Цвет или скорость прямо в сцене.** Через пять роликов в проекте пять
  разных акцентов. Всё визуальное только в бренде.
- **Оценка графики на плоском фоне.** Плашка «отлично смотрится» до первого
  светлого кадра.
- **Хук в нижней трети вертикали.** Его закрывает подпись площадки.
- **Моноширинный шрифт для цифр «для техничности».** Запрещён: выглядит как
  консоль, а не как ролик. Те же ровные цифры даёт санс с `tabular-nums`.
- **Логотип на каждой плашке и подписи канала по краям.** Бренд узнают по
  системе, а края закроет площадка. Логотип в финале.
- **Финал сразу, без черновика.** Финальный рендер в разы дольше, а правки
  всё равно будут.
- **Одинаковый звук на каждое слово.** Щелчок подряд раздражает к третьему.

## Чек-лист сдачи

- [ ] `check_brand.py` прошёл без ошибок, `hyperframes lint` чистый.
- [ ] В брифе нет цветов, шрифтов и чисел движения, только смысл.
- [ ] Тексты сверены с брифом, имена и цифры не выдуманы.
- [ ] Каждая сцена говорит одну мысль, текст держится не меньше
      `min_hold_sec`, таймлайн заполняет слот сцены.
- [ ] Текст и логотип внутри безопасных зон нужного формата.
- [ ] Черновик собран поверх настоящего футажа, лист кадров просмотрен,
      чёрных кадров нет.
- [ ] Плашки и главы в ProRes 4444 с альфой, хук и финал обычным видео.
- [ ] Тёмные кадры финала сверены с черновиком, полос и пятен нет.
- [ ] Шрифты и GSAP встроены локально, моноширинных шрифтов нет.
- [ ] Файлы названы латиницей по сценам, план и черновик утверждены
      владельцем. Отправка клиенту или публикация только по его прямому слову.

Первыми устаревают размеры интерфейса площадок, флаги HyperFrames и
поддержка альфы в редакторах. Факты проверены на октябрь 2026.

## Глубже

Код фабрики, библиотека шаблонов и бренд-паки студии не выложены. Полные
шаблоны ролей, разборы реальных роликов и настройку системы под команду
студия AIVFX показывает в работе и в обучении: https://aivfx.ru.