Видео в экран не идёт: HyperFrames рисует только графику, кадр камеры кладёт конформ. Поэтому экран с окном спикера — это альфа-клип с дыркой, а положение окна записано в теме канала.
Оба делают одно и то же: вёрстка → кадры в Chrome → видео. Все тома экранов стоят на HyperFrames; Remotion поставлен 02.10.2026 вторым движком и проверен на одном куске. Числа — из проверки на M3 Max, 4K 25p.
| Что сравниваем | HyperFrames | Remotion |
|---|---|---|
| Чем пишется экран | HTML + CSS + GSAP, время — атрибуты data-* на элементах | React-компоненты, анимация от номера кадра (useCurrentFrame + interpolate); CSS-переходы в рендер не попадают |
| Вход для Claude | навык hyperframes — сам выбирает процесс: general-video, motion-graphics, talking-head-recut | навык remotion-best-practices — вход в 12 навыков remotion-* |
| Что на нём сделано | все тома: YTEVO, YTCR, YTCH, YTLAB, YTCG, выноски шортсов | один пример: 40 с фильма YTLAB01 с теми же экранами и титр LowerThird |
| Видео в кадре | в наших томах — только графика с альфой, кадр камеры кладёт конформ ffmpeg | планы камер, окно холста, графика и звук собираются за один проход по props.json |
| Прозрачность | ProRes 4444, только mov и --workers 1 | ProRes 4444 yuva444p12le с метками bt709; работает и с --scale |
| Цвет | клип без цветовых меток — в конформе декодировать как BT.601 limited | 8 бит sRGB; setColorSpace("bt709") обязателен; кадры только PNG; проявка, куб и 10 бит — заранее в ffmpeg |
| Просмотр до рендера | кадры chrome-headless-shell: shot · mock · preview · sheet | Studio в браузере: композиция с таймлайном (npm run dev) |
| Скорость 4K | экран рендерится отдельно, сводит ffmpeg (путь этапа 19–21 к/с) | 1014 кадров с видео за 4 мин 10 с — 4 к/с при двух потоках; фильм 52 мин — около пяти часов |
| Версия, где стоит | npx [email protected] (screens2 — 0.8.103), Node 22+; Apache 2.0 | Remotion 4.0.532, ~/YTAI/scripts/999_extra/remotion/, свой Chrome в node_modules/.remotion; бесплатно до 3 сотрудников, дальше Company License — ключ не задан |
Пример Remotion сдан Роману 02.10.2026, ответа «куда применять» нет. Шаблон экрана с параметрами из JSON, кусок с камерами за один проход и превью в Studio — то, ради чего Remotion стоит брать; цвет, конформ и длинный фильм целиком остаются за ffmpeg (Фильм кодом).
Фильм 52 мин на Remotion — около пяти часов; длинный фильм целиком сводит ffmpeg.
Сколько готовых видов в томе: фильм берёт их по словам листа, новый вид — функция t_<вид> в томе.
| Том | Окно спикера | hf check | Кадр = макет | QR | Карты |
|---|---|---|---|---|---|
| YTEVOОкно спикера: 690×1180 от x 3054 | 690×1180 от x 3054 | ✗ | ✓ | ✗ | ✗ |
| YTCRОкно спикера: PIP 1180×664 | PIP 1180×664 | ✓ | ✗ | ✗ | ✓ |
| YTCHОкно спикера: панель split 1723 px | панель split 1723 px | ✓ | ✗ | ✓ | ✗ |
| YTLABОкно спикера: 1160×1560 | 1160×1560 | ✓ | ✗ | ✗ | ✗ |
| YTCGОкно спикера: шаблон window | шаблон window | ✓ | ✗ | ! | ✓ |
| ШортсыОкно спикера: весь кадр 1080×1920 | весь кадр 1080×1920 | ! | ✗ | ✗ | ✗ |
hf check — hyperframes check: screens2 его не вызывает, выноски шортсов проходят только lint (viz.py). Кадр = макет — screens_verify, только autocut. QR: doc_cut читает обратно zbarimg, ytcg — без проверки. Карты — Natural Earth: YTCR (+ берег Дубая из OSM), YTCG.
| Движок | Что делает | Версия, где идёт | Грабли |
|---|---|---|---|
| HyperFrames | композиция HTML/GSAP → render --format mov --workers 1: ProRes 4444 с альфой, 3840×2160, 25p | npx [email protected] (screens2 — 0.8.103), Node 22+; через очередь рендера | альфа только в mov и в один поток; цвет клипа BT.601 limited без меток |
| Remotion | композиция React → кадры Chrome → ffmpeg: 4K H.264 40 Мбит/с + AAC 320 или ProRes 4444 с альфой | 4.0.532 в ~/YTAI/scripts/999_extra/remotion, Node; npm run film · alpha, через очередь рендера | кадры только PNG; setColorSpace bt709; 8 бит sRGB — лог и кубы заранее; ~4 к/с на 4K |
| hyperframes check | lint · runtime · layout · motion · контраст WCAG 4,5:1 (крупный текст 3:1) | sc_gfx check пропускает по хэшу .checked; screens2 не вызывает вовсе | ошибка lint выключает layout и контраст: «0 samples» не значит чисто |
| chrome-headless-shell | кадры без рендера: shot · mock · preview · sheet (?t= + virtual-time-budget) | ~/.cache/puppeteer (npx hyperframes browser ensure) | GUI Chrome в headless на маке виснет; 3 повтора, не больше 3 параллельно |
| GUI Chrome | плашки и знак шортсов: --headless=new, прозрачный фон, обрезка по альфе | gfx.py шортсов | после --screenshot сам не выходит — гасить по пути профиля |
| screens_verify.py | последний кадр = PNG макета: edge 2 px, diff 0,5 %, mean 2,0; красный (208,2,27) ±2; движение только в окнах твинов | autocut, первый набор | макеты сняты на процессоре, рендер на GPU — края букв расходятся до 1 px |
| qrencode + zbarimg | QR в SVG/PNG и чтение обратно | doc_cut (с проверкой), ytcg (без) | без zbarimg QR может не читаться с экрана |
| Natural Earth · OSM Overpass | карты стран и береговых линий | sc_geo.py prep · ytcg_geo.py prep | город, которого герой не называл, на карту не ставить |
| ffmpeg overlay в конформе | scale in_color_matrix=bt601 → bt709, in_range=tv, затем overlay | composite.py · conform.py · sc_conform.py · doc_cut/conform.py | в шортсах viz.mov накладывается без явного bt601→bt709 — цвет выносок проверить |
Шесть ворот от кода экрана до «ок»: два — до рендера, три — по готовому клипу, последнее — глазами.
Ошибка lint выключает layout и контраст: «0 samples» не значит чисто. Подробно — таблица «Проверки» ниже.
| Проверка | Когда | Норма | Откуда взялась |
|---|---|---|---|
| lint и check | до рендера | 0 ошибок; контраст ≥ 3 для крупного текста | #F08010 по белому дал 2,69 (YTCG37) |
| Статичная плашка | check motion | sweep_static нет | плашка без движения в середине срока — добавить строку, встающую на слове |
| Последний кадр = макет | после рендера, screens_verify | edge ≤ 2 px, diff ≤ 0,5 %, красный ±2 | первый набор YTEVO: макеты утверждал клиент |
| Красный бренда после кодирования | qc фильма | (238,50,39) ±10 | кодек уводил цвет бренда |
| Число кадров экрана | render.json · manifest | = build.json | экран через границу части резался |
| QR читается | gfx build (doc_cut) | zbarimg вернул ту же ссылку | QR фонда без проверки нельзя |
| Часть без графики | sc_run | gfx_lack → часть не рендерится | часть уходила в рендер без экранов |
| Моменты по звуку текущего листа | screens2 render | cues от dialogue.wav этой версии | YTEVO02 v6: 12 экранов встали по звуку прошлой версии |
| Лист экранов глазами | sc_sheet gfx · mock · sheet | каждый экран просмотрен | факты и язык клиента машина не оценит |
| Файл | Что хранит | Кто пишет |
|---|---|---|
| YTs/{CH}/brand/ · BRAND.md · brand_profile.json | шрифты, палитра, правила бренда | по брендбуку клиента; палитры пока зашиты в gfx.py — перенос в профиль открыт |
| TEMPLATES · TYPES · MAKE в коде тома | виды экранов канала | сессия при новом виде; вид описывается здесь и в словаре видов |
| {CODE}_gfx_overrides.json | правки редактора к экранам фильма | редактор или сессия после листа gfx |
| hf_volumes.json + templates/media/ | превью шаблонов для страницы Animation Templates | screens2.py kb, затем генератор галереи |
| README движка, раздел «Графика» | грабли вида: контраст, sweep_static, data-layout-allow-overlap | сессия сразу после ошибки |
| Screen Kinds Library | когда ставить вид и чем заменить — общий словарь обоих путей | gen_kb_screens.py --scan из YTs |
V=~/YTAI/environment/.venv_transcribe/bin/python AC=~/YTAI/scripts/05_editing/0510_autocut $V $AC/screens2.py --project $P build # HTML-проект на каждый экран листа $V $AC/screens2.py --project $P preview --at 12:34 # кадр через Chrome, без рендера $V $AC/screens2.py --project $P sheet # лист всех экранов $V $AC/screens2.py --project $P render --parallel 3 # ProRes 4444 с альфой, через очередь $V $AC/screens2.py --project $P kb --web ~/RYA/wt/<worktree>/web # превью тома в KB → hf_volumes.json
SC=~/YTAI/scripts/05_editing/0511_story_cut $V $SC/sc_gfx.py build --project $P # клипы экранов по листу $V $SC/sc_gfx.py demo · shot --bg кадр.png # образцы и кадр поверх фона $V $SC/sc_gfx.py check # lint + check, пропуск по хэшу .checked $V $SC/sc_gfx.py render # через render_queue.py $V $SC/sc_sheet.py gfx # лист экранов глазами
DC=~/YTAI/scripts/05_editing/0511_doc_cut; HC=~/YTAI/scripts/05_editing/0510_headless_cut $V $DC/gfx.py build · mock · lint · check · render --job $J # check и render — только через очередь $V $HC/gfx.py build --edl … · shot · mock · motion · check --jobs 2 · snap · render # YTLAB $V $HC/solo.py gfx build · gfx check · mock --job $J # YTCG через тему ytcg.py
S=~/YTAI/scripts/07_shorts/0701_finished/shorts.py $V $S gfx --job $JOB # знак и плашки → gfx/*.png $V $S viz --init --job $JOB && $V $S viz --render --job $JOB # выноски HyperFrames → viz/S{NN}.mov
cd ~/YTAI/scripts/999_extra/remotion npm run dev # Studio: превью с таймлайном в браузере npx remotion still LowerThird out/f.png --frame=50 # один кадр, мимо очереди python3 ~/YTAI/scripts/999_extra/render_queue.py remotion -- npm run film -- <композиция> <файл> --concurrency=3 # 4K H.264 + AAC, кадры PNG — через очередь npm run alpha -- LowerThird out/lower_third.mov # ProRes 4444 с прозрачностью
Навыки: ~/.claude/skills/remotion-*, вход remotion-best-practices; API менялся — писать по навыкам, не по памяти.