shutckin/aivfx-content-kit

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

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.