sstani-bgv/montage-skills

---

name: motion-build description: Собрать ОДНУ анимационную вставку для видео на HyperFrames + GSAP в стиле канала. По умолчанию — стиль v4 «презентация с картинками» (одобрен автором как эталон, два русскоязычных YouTube-референса): крупные слова в интро, спикер + достраивающаяся панель, сгенерированные Codex 3D-картинки-метафоры, звук на каждое появление графики. Светлая тема, Onest/Unbounded; как акценты — приёмы вроде PiP-морфа, rack-focus, карусели глав, velocity-matched швов, zoom-through, перспективного свопа окон, каскадов с бэйджами. Используй этот скилл всегда, когда нужно собрать, починить или доработать отдельную анимацию/сцену/motion-вставку по готовой спеке, когда сабагент получил задание на одну сцену из motion-плана, а также когда речь идёт о HyperFrames-композиции для ролика в этом стиле. Не для планирования всего ролика — это /motion-plan, и не для оркестрации — это /motion-run.

Сборка одной анимационной вставки

Ты собираешь одну законченную анимацию 4–10 секунд, которая монтируется в ролик как вставка или ложится оверлеем поверх кадра. Она должна визуально показывать мысль, которую автор проговаривает голосом, — не иллюстрировать вообще, а показывать конкретно эту мысль.

Стиль по умолчанию — v4 «презентация с картинками»

Если пользователь не попросил другое — собирай в стиле v4. Автор назвал его «вообще идеальным» и просил, чтобы следующие ролики были точно такими же. Всё о нём — references/style-v4.md: референсы (описания в references/style-v4.md), раскладки kinetic / full / split-cam / split-screen / lower с точной геометрией, константы, звук, приёмка.

• Общие стили и хелперы: assets/style-v4/common.css, common.js (heroIn, rise, chipIn, countUp).
• Эталонные сцены (фрагменты + .sfx.json): references/recipes/v4/ — начинай с ближайшей по раскладке.
• Сборка: пишешь фрагмент W/scenes/NN.html → python3 scripts/mk_scene.py W NN → check → render. Картинки: scripts/gen_images.sh + scripts/alpha.py; клипы вебки/экрана: scripts/cut_clips.py.
• Звуки штампа и «плохого исхода» — assets/style-v4/sfx/, остальное — бандл media-use.

Старый слой (ниже): приёмы срисованы с монтажа Austin Marchese и переложены на дизайн-систему канала — PiP-морф, zoom-through, карусель глав и т.д. В v4 их используют как акценты внутри сцены, не как основу. Приёмы копируются точно — тайминги, кривые, порядок слоёв; палитра и типографика — только из своей системы.

Что читать и в каком порядке

0. references/style-v4.md — как должно выглядеть.
1. references/gotchas.md — до того, как писать код. Там запреты движка, ловушки светлой темы и правила швов. Каждый пункт когда-то стоил итерации.
2. references/style-rules.md — законы стиля: как появляется и уходит текст, чем задаётся ритм, что движется всегда. Их соблюдай независимо от того, какой приём собираешь, — именно они делают монтаж узнаваемым.
3. references/design-system.md — палитра, шкала, компоненты, правила бренда. Нарушать нельзя.
4. Механика твоего приёма — читай только свой раздел:
   • references/techniques.md — приёмы с проверенной реализацией;
   • references/techniques-observed.md — приёмы, снятые с разбора, но ещё не собранные; строй по описанию.
5. references/recipes/<приём>.html — рабочая реализация из techniques.md. Это не шаблон для копирования целиком, а образец того, как решены сложные места. Смотри, когда механика неочевидна.

Спека на конкретную сцену приходит от /motion-plan или прямо от пользователя.

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

1. Подготовь проект

Если проекта ещё нет:

./node_modules/.bin/hyperframes init <имя> --example blank --non-interactive --resolution landscape --skill motion-graphics

Голый npx hyperframes в корне репозитория падает с «Missing script» — CLI не глобальный. Внутри уже созданного проекта работают npm run check и npm run render, снаружи — путь к бинарнику выше.

Скопируй папку assets/ этого скилла в проект целиком, не по файлам: tokens.css тянет шрифты через @import "./fonts/fonts.css", и структура каталогов должна совпасть.

cp -R <путь-к-скиллу>/assets/. <проект>/assets/

Шрифты Onest и Unbounded лежат локально (кириллица и латиница), поэтому текст рендерится одинаково на любой машине. GSAP при этом стартовый шаблон и все рецепты грузят с CDN — сеть на рендере всё-таки нужна. Если её не будет, положи gsap.min.js рядом и поправь <script src>.

Подключение токенов в композиции — одной строкой:

<link rel="stylesheet" href="./assets/tokens.css" />

2. Собери композицию

Контракт HyperFrames: единый paused-таймлайн в window.__timelines["main"], каждый timed-элемент с class="clip", data-start и data-duration. Детали — в /hyperframes-core, загружай его, если сомневаешься в структуре.

Три вещи, которые определяют, получится приём или нет:

Тайминги и кривые копируй буквально. Разница между power2.inOut и power2.out на росте PiP — это разница между проездом камеры и масштабированием картинки. Между power3.inOut и power4.inOut на push-шве — между проездом и рывком.

Держи приём, а не букву спеки. Если покадровка спеки расходится с заявленным easing (проценты роста не сходятся с кривой), приоритет у easing: он определяет, как движение читается. Если спека даёт амплитуду, при которой объект не выходит за кадр к моменту обрезки клипа, — пересчитай амплитуду под реальную геометрию 1920×1080 и скажи об этом.

Приём, который не читается, надо усилить. Формально верная реализация, которую не видно, — это не сделанная работа. Перетекание заливки на светлом фоне почти невидимо, пока не добавишь маркер фронта. Шов, у которого в середине обе стороны пусты, показывать нечего.

Если приёма нет ни в techniques.md, ни в techniques-observed.md — строй по покадровке из спеки, но сначала найди в ней развилку: то решение, от которого зависит, получится кадр или нет. Обычно это не кривая, а геометрия — на сколько сдвинуть, где центр группы, что уезжает за кромку. Спеку пишет тот, кто кадров не видел; развилку он, скорее всего, не заметил. Прими решение сам, проверь по кадрам и обязательно назови его в отчёте — оно пойдёт в скилл следующему.

3. Проверь

npm run check

Ноль ошибок и ноль warnings. Аудит контраста и layout будет ругаться на сами приёмы — размытый бэкплейт, перекрытие сцен в шве, приглушённые соседи. Отличай приём от настоящей проблемы: реальные находки чини, приёмы размечай штатными опт-аутами. Каждый опт-аут глушит строго свою проверку — таблица в gotchas.md, вешать наугад нельзя: data-layout-ignore снимает и контраст тоже, и текст под ним молча выпадает из отчёта.

Заодно положи рядом сайдкар *.motion.json — check подхватит его сам и проверит намерение движения на том же перемотанном таймлайне, который использует рендер. Это ближайший автоматический аналог «отрендерь и посмотри»: ловит вход, мимо которого перемотка проскочила, сломанный порядок stagger и замерший план. Формат — в gotchas.md.

4. Посмотри глазами — это обязательный шаг

../node_modules/.bin/hyperframes snapshot . --frames 8 -o snapshots

Открой snapshots/contact-sheet.jpg через Read — это изображение, ты его видишь. check не скажет, что кадр пустой, текст мелкий или блоки стоят как попало.

Кадр 0 смотри отдельно — это самый частый провал. По законам стиля сцена начинается уже в движении, а не со статики и не с пустоты; если на нулевом кадре пусто или всё стоит собранным, приём сломан на самом видном месте.

Отдельно сними точечные кадры в самых сложных точках:

../node_modules/.bin/hyperframes snapshot . --at 1.45,1.55,1.675,1.8 --no-end -o snapshots-detail

Какие точки выбирать: если в приёме есть шов — середину шва и по кадру с каждой стороны. Если шва нет, снимай моменты пересчёта композиции: поджатие списка, перевёрстку блока, смену активного элемента. Именно там раскладка ломается, а на равномерных восьми кадрах это не видно.

Спорные места (градиенты, мелкий кегль) смотри полноразмерным PNG: JPEG-контакт-лист врёт и по размеру, и по бандингу.

Итерируй, пока картинка не станет хорошей. Первая версия почти всегда выходит мелкой — это самая частая ошибка, кадр 1920×1080 больше, чем кажется.

5. Отрендери

npm run render

Куда класть MP4

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

Это не формальность. На одном ролике девять сборщиков разложили результат по трём разным местам, двое удалили renders/ совсем, один продублировал файл в две папки «чтобы оркестратор нашёл в любом случае» — и оркестратору пришлось искать рендеры find'ом по всему диску. Правило про «финальные видео в output/» из CLAUDE.md относится к готовым роликам, а не ко вставкам под сборку: вставка — это полуфабрикат.

Рабочую папку проекта тоже не удаляй. Её снесёт оркестратор, когда сцена принята; до этого она может понадобиться для правки.

Оверлей поверх кадра: вложи подложку в композицию

Оверлей — стеклянная панель, титр, глоссарий — рассчитан на конкретный кадр под собой, и у него есть неочевидное техническое следствие: backdrop-filter не видит того, чего нет в композиции. Если рендерить оверлей на прозрачном фоне и накладывать его в монтажной программе, стекло размоет пустоту, то есть не размоет ничего, и панель выйдет плоской плёнкой.

Поэтому композиция оверлея строится иначе, чем вставка:

# кусок исходника ровно по таймкоду сцены — в assets проекта
ffmpeg -ss 20.0 -i <исходник> -t 4.0 -vf "scale=1920:1080,fps=30" -an \
  -c:v libx264 -crf 16 -preset veryfast -pix_fmt yuv420p -y assets/plate.mp4

<video id="plate" class="clip" data-start="0" data-duration="4" data-track-index="0"
       src="./assets/plate.mp4" muted data-layout-ignore></video>

Подложка идёт нулевым треком и помечается data-layout-ignore — она не аудируется. Стекло поверх неё работает по-настоящему. На выходе обычный MP4, который на монтаже ставится вместо своего куска, а не поверх; звук из подложки вырезан, дорожка берётся с исходника.

Альтернатива — --format mov с прозрачностью — нужна только тогда, когда монтажёр прямо просит альфу и готов класть слой сам.

Что докладывать

Коротко, 10–15 строк: что получилось, путь к MP4, какие места оказались сложными и как решены, что осталось неидеальным. Код не пересказывай — он в файле.

Отдельно называй расхождения со спекой. Если ты пересчитал амплитуду, поменял кривую или добавил элемент, которого в спеке не было, — скажи об этом и объясни почему. Спеку пишет тот, кто не видел кадров; ты видел. Расхождение, о котором сказали, — это находка, о котором промолчали — сюрприз при монтаже.

Что считается готовым

• check чистый, MP4 отрендерен;
• приём читается на кадрах глазами, а не только «формально реализован»;
• палитра, шкала и правила дизайн-системы соблюдены;
• детерминизм: два снимка одного таймкода дают одинаковый SHA-256, если в сцене есть псевдослучайность.