◂ Этап HandbookRYA.AEReferences · Front Line of Motion — референсы: передовая анимации и моушна — что можно делатьбиблиотека · 3 окт 2026
Витрина самых сильных приёмов анимации и моушна, которые делаются кодом, и у каждого — «чем мы это делаем сегодня»: навык, движок, том канала. Процесс, о котором спросил Роман, по нашей терминологии — моушн-графика кодом (code-driven motion graphics): композиция верстается кодом (HTML + GSAP в HyperFrames, React в Remotion), а не в After Effects. Рядом: Экраны каналов, Экраны кодом, Правила ремесла.
📌 Правило. Референс не копируется, а разбирается: что движется и чем сделано → какой наш навык, правило или блок это умеет → проба на кадре фильма в языке канала. Чужой ролик на сайт не кладём — только описание и ссылка на пост.
Одним взглядом
15приёмов
на витрине: у 8 — наш кадр, у 7 — пока нет
чужие ролики на сайт не кладём — описание и ссылка
4поста
референсы Романа, папка от 03.10.2026
george.automates · thearseniodev · darkvex.ai · eluna.ai
2движка
в томах сегодня: GSAP и HTML/SVG
сцены собирает HyperFrames; Three.js, Lottie — в навыке
0ошибок lint
seek-safe: без Math.random, Date.now и rAF
новый движок — через пробу на кадре фильма
1Схема2Процесс3Движки4Витрина5Готовность6Референсы Романа7Чего нет8Проверки9Знания10Грабли11Команды12Где лежит

22.7 · 1Схема: от ссылки Романа до вида в томе канала

📥 Референс
Ссылка или папкаРоман присылает пост, ролик, папку
→
Скачать · 12_acquireig_download · yt_download · tg_*
→
Кадр + описаниеffmpeg -ss 2 кадр · .json автора рядом
🔍 Разбор
Приёмчто движется · на чём стоит · где сильно
→
Наш инструментнавык · правило · блок · том канала
→
Состояниеесть в томе · в навыке · надо построить
🧪 Проба
Проба на кадре фильмав языке канала, 1–2 экрана
→
Лист глазамиРоман: «ок» или «не наш язык»
→
В том каналафункция вида + превью в KB
📚 Витрина
Карточкаприём · источник · чем делаем · вызов
→
refs.jsonбиблиотека референсов — надо построить
→
Страницатолько свои кадры, чужое — ссылкой
машиначеловек решает или смотритагент Claudeитог дорожки

22.7 · 2Что это за процесс

1Моушн-графика кодомответ Роману
  • композиция — HTML + CSS + SVG, движение — GSAP на одной паузной шкале HyperFrames (или React в Remotion); кадры снимает Chrome
  • в постах: «motion design in Claude Code», «generated with code, no After Effects»
  • у нас так сделаны все тома экранов и выноски шортсов
вход — навык hyperframes → general-video · motion-graphics · talking-head-recut
2Где граница
  • анимация — персонаж и жест (Lottie); инфографика — факт становится формой; VFX — меняется сам кадр камеры (media-use)
  • моушн-графика — движение смысла: текст, формы, данные, карта, интерфейс, камера
  • showreel — моушн ради моушна; у нас приём стоит там, где несёт цифру, место или документ
3Почему результат пляшет
  • eluna.ai: тот же промпт — разные ролики; решают effort level, формулировка и направление
  • thearseniodev: не «сделай премиально», а референс + направление + библиотека частей
  • у нас направление задано заранее: язык канала, план экранов, приём — именем правила навыка
Почему результат пляшет — и как держим
наугад«Сделай премиально»
6роликов
один промпт — шесть разных результатов
  • без референса и направления результат безликий
  • без направления решают effort level и формулировка
с направлениемРеференс + язык канала + имя приёма
5–6экранов
стиля — «ок» до вёрстки всех
  • язык канала и план экранов заданы заранее
  • приём назван именем правила навыка
  • проба 1–2 экрана на кадре фильма — «ок» Романа

Случаи — посты eluna.ai (27.09.2026) и thearseniodev (01.10.2026); утверждения авторов, не наша проверка.

22.7 · 3Движки внутри композиции: что чем делается

Ответ Роману на таблицу «движок → что создаёт»: да, всё это — одна система: GSAP и HTML/SVG уже наши, Three.js подключается адаптером, PixiJS — через пробу.

ДвижокЧто создаётУ нас сегодняКак подключается · состояние
GSAPдвижение текста и фигур, переходы, появление букв, рисование и превращение SVG — основной инструментвсе тома: screens2.py, sc_gfx.py, gfx.py — на одной паузной шкале HyperFramesadapters/gsap*.md: timeline, eases, stagger, transforms · есть
HTML / CSS / SVGнадписи, карточки, кнопки, линии, графики, картыкарты — SVG из Natural Earth и OSM (sc_geo.py, ytcg_geo.py); плашки и карточки всех томоввёрстка по контракту hyperframes-core · есть
Three.jsобъёмные формы, материалы, свет, 3D-камерав томах не используетсяadapters/three.md: сцена подчиняется шкале через hf-seek, AnimationMixer · есть в навыке, в томах нет; YTEVO — «без 3D и свечений»
PixiJSмного частиц и точек, сложные 2D-эффектынетсвоего адаптера нет; частицы и шейдеры — TypeGPU (adapters/typegpu.md) или canvas от шкалы (html-in-canvas-patterns.md); подключается как Three.js · надо проверить: canvas обязан быть seek-safe и детерминированным, requestAnimationFrame не годится
Lottie / dotLottie · Anime.js · CSS keyframes · WAAPIэкспорты After Effects, персонажи, простые циклынетостальные адаптеры навыка · есть в навыке; Lottie — мост к AE-шаблонам трека Premiere
HyperFramesсобирает сцены в видео: композиция, превью, lint/check, экспортоснова всех томовStudio или chrome-headless-shell; MP4 или ProRes 4444 с альфой (--workers 1) · есть; второй сборщик — Remotion: два движка

Добавлять можно всё, что живёт на одной шкале HyperFrames (seek-safe, детерминированно: рендер идёт кадр за кадром) и помещается в язык канала. Новый движок входит через пробу на кадре фильма и строку в томе, не «потому что красиво».

Движки одним взглядом
Движок · что создаётВ томахВ навыкеYTEVO
GSAP — движение текста, форм, SVG✓✓✓
HTML / CSS / SVG — надписи, карточки, карты✓✓✓
HyperFrames — собирает сцены в видео✓✓✓
Three.js — объём, свет, 3D-камера✗✓✗
PixiJS · TypeGPU — частицы, 2D-эффекты✗!✗
Lottie · Anime.js · CSS · WAAPI — экспорт AE, циклы✗✓·
✓есть · можно!частично: TypeGPU есть, PixiJS — нет✗нет · запрещено брендбуком·не сказано

YTEVO — брендбук Bounded: без 3D, частиц и свечений. Новый движок входит через пробу на кадре фильма и строку в томе.

22.7 · 4Витрина «передовая»: приёмы и чем мы их делаем

Карточка = приём · где сильно · метки: источник, чем делаем, состояние · вызов. Кадры наши; чужих нет — ссылки на посты ниже. Первая группа — кинетическая типографика.

Буквы по одной (letter-by-letter)
Буквы по одной (letter-by-letter)
буквы выезжают из-под маски; сильно в титуле и хуке
george.automates · 04.09.2026 · animate-text: typewriterscreens2 t_title · есть в томе
$V $AC/screens2.py --project $P build # kind: title → t_title
Слово по частям на бит (kinetic-beat-slam)
Слово по частям на бит (kinetic-beat-slam)
куски фразы влетают на ударах; сильно в шортсе и хуке
darkvex.ai · 26.09.2026 · rules: kinetic-beat-slamviz.py шортсов · есть в томе
$V $S viz --job $JOB --only S03 --init

15 приёмов: у 8 — наш кадр, у 7 — «своего примера нет». Переменные $V · $AC · $SC · $S — как на странице Экраны кодом.

Карты и показ на карте
Маршрут рисуется на глазах (map_route)
Маршрут рисуется на глазах (map_route)
линия тянется между точками, которые герой назвал
motion-graphics: maps · rules: svg-path-drawsc_geo.py · Natural Earth · есть в томе
$V $SC/sc_gfx.py demo $P --only demo_map_route
Город с настоящим берегом (map_dubai)
Город с настоящим берегом (map_dubai)
берег из OSM, район загорается на слове
sc_gfx.py · OSM Overpass («© OpenStreetMap»)есть в томе
$V $SC/sc_gfx.py demo $P --only demo_map_dubai
своего примера нет — приём в навыке
Глобус → наезд на страну
камера летит от глобуса к стране; сильно в открытии главы
motion-graphics: maps · bake-basemap.mjs · remotion-mapsнадо построить
npx hyperframes add world-map --dir <проект>
Данные и цифры
N из M точек (t_hero60)
N из M точек (t_hero60)
60 точек встают на счёт, две загораются — цифра видна, а не прочитана
Роман 02.10.2026: «сильная инфографика» · data-in-motionscreens2 t_hero60 · есть в томе
$V $AC/screens2.py --project $P build --only S01
Счётчик поверх кадра (counter)
Счётчик поверх кадра (counter)
число докручивается на слове; масштаб растёт с величиной
rules: counting-dynamic-scalesc_gfx.py · viz.py (0,8 с) · есть в томе
$V $SC/sc_gfx.py demo $P --only demo_counter
Полосы, воронка, шкала лет
Полосы, воронка, шкала лет
величины растут по очереди, последняя — цветом канала
rules: stat-bars-and-fills · registry: data-chartsc_gfx bars · timeline · gfx.py funnel · есть в томе
$V $SC/sc_gfx.py demo $P --only demo_bars
Интерфейсы и документы
кадра в KB нет — вид есть в sc_gfx.py
Письмо и пост как в жизни (ui_email · ui_social)
экран почты или соцсети встаёт на реплике героя
Роман 03.10.2026: «интерфейсы реальные» · motion-graphics: tweet · news · webpageесть в томе (стилизовано) · по образцам — надо построить
$V $SC/sc_gfx.py demo $P --only demo_ui_email
своего примера нет — приём в навыке
Курсор ведёт по интерфейсу (cursor-ui-demo)
курсор нажимает, тянет, печатает — видно, как работает сервис
thearseniodev · 01.10.2026 · blueprints: cursor-ui-demorules: cursor-drag · есть в навыке
grep -n cursor ~/.claude/skills/hyperframes-animation/blueprints-index.md
Формы, переходы, камера
SVG рисуется и превращается (draw · morph)
SVG рисуется и превращается (draw · morph)
линия дотягивается до каждого года; форма перетекает в другую
george.automates · 04.09.2026 · keyframes: DrawSVGPlugin · MorphSVGPluginscreens2 t_steps · draw в томе, morph в навыке
$V $AC/screens2.py --project $P build # kind: chain → t_steps
в KB кадра нет — проба в фильме RSC004 (.cam-обёртка)
Наезд и камера по холсту (punch-in · Ken Burns)
камера наезжает на деталь, едет по иллюстрации
keyframes: punch-in · Ken Burns · 3d-camera-flight · depth-of-field-blurесть в навыке · в томах нет
npx hyperframes keyframes <проект>
своего примера нет — ссылка в таблице
Объём: формы, свет, 3D-камера (Three.js)
куб, узел и шар с тенями, камера облетает; продуктовый ролик, не интервью
george.automates · 04.09.2026 · adapters/three.md · hf-seekесть в навыке · в томах нет · YTEVO запрещает
cat ~/.claude/skills/hyperframes-animation/adapters/three.md
Текстуры и ритм под музыку — осторожно, не для всех каналов
своего примера нет — против брендбуков YTEVO и YTCH
Зерно, глитч, CRT, VHS
кадр или надпись получает фактуру; одним ударом, не на весь фильм
registry (~400 блоков): grain-overlay · shimmer-sweep · rules: chromatic-glitchmedia-use: VHS Playback · Creator Camcorder · есть в навыке
npx hyperframes add grain-overlay --dir <проект>
своего примера нет — приём в навыке
Ритм под музыку (audio-reactive)
масштаб и свечение идут за басом и верхами трека; шортс с музыкой без речи
hyperframes-creative: audio-reactive.md · extract-audio-data.pyесть в навыке · надо построить
~/.claude/skills/hyperframes-creative/scripts/extract-audio-data.py

22.7 · 5Витрина одним взглядом: что уже в томах

Сколько приёмов каждой группы уже есть в томе канала, а не только в навыке — по меткам карточек выше.

2 из 2100 %
Кинетическая типографика: буквы по одной, слово на бит
3 из 3100 %
Данные и цифры: N из M точек, счётчик, полосы
2 из 367 %
Карты: маршрут и город есть; «глобус → страна» — надо построить
1 из 250 %
Интерфейсы и документы: письмо и пост стилизованы; курсор — в навыке
1 из 333 %
Формы и камера: SVG draw в томе; morph, наезд, 3D — в навыке
0 из 20 %
Текстуры и ритм: только в навыке; зерно — против брендбуков YTEVO и YTCH

В томах — 9 из 15 приёмов; наш кадр в KB — у 8: письмо и пост есть в sc_gfx.py, но без кадра.

22.7 · 6Референсы Романа: четыре поста от 03.10.2026

Папка «untitled folder 56», скачана ig_download.py; у каждого медиа .json с автором, датой и описанием. Ролики на сайт не идут.

ПостЧто показаноПриёмЧем мы это делаем
george.automates · 04.09.2026 · пост«4 skills for full motion design in Claude Code»: таймлайны, буквы по одной, SVG line drawing, shape morphing, частицы, easing, дизайн-система с сайта, 3D в браузеретаймлайн GSAP · текст по буквам · SVG draw и morph · частицы · 3Dhyperframes-animation: adapters/gsap*, rules svg-path-draw · particle-burst, adapters/three.md; animate-text — 24 эффекта; дизайн-система — язык канала, не чужой сайт
thearseniodev · 01.10.2026 · постне «сделай премиально», а референс + творческое направление; библиотека 3D-сцен и эффектов через MCPбриф с референсом · библиотека готовых частейбриф фильма и план экранов; библиотека — hyperframes-registry (~400 блоков) и media-use resolve
darkvex.ai · 26.09.2026 · постOpus 5.5 — 15-секундный motion-showreel одним промптом: крупная типографика на красном круге, формы, переходыshowreel: kinetic type · игра форм · переходыblueprints kinetic-type-beats · titlecard-reveal; showreel нам не нужен — приём идёт в титул и заставку главы
eluna.ai · 27.09.2026 · посткарусель из 6 роликов: тот же промпт — разные результаты (max effort; подписи «squash & stretch», «slow in, slow out»); решают effort level, формулировка и направлениепринципы анимации (squash and stretch, easing) · направление важнее промптаeasing — adapters/gsap-easing-and-stagger.md; направление — язык канала и «ок» стиля по 5–6 экранам до вёрстки всех

Что умеют модели — утверждения авторов постов, не наша проверка.

22.7 · 7Чего у нас ещё нет

1Частицы и шейдерные холстынадо построить
  • particle-burst (≤ 40 частиц, детерминированно) и TypeGPU — в навыке; в томах нет
  • YTEVO — «без частиц и свечений»; возможно для YTCR и YTLAB, если несёт смысл
23D-камера и объёмнадо построить
  • Three.js через hf-seek, правило 3d-camera-flight — в навыке
  • в интервью редко несёт смысл; место — продуктовый ролик
3Ритм под музыкунадо построить
  • audio-reactive.md + extract-audio-data.py; beats в CLI
  • нужно только шортсам с музыкой Epidemic Sound
4Интерфейсы и документы по образцамнадо построить
  • ui_email · ui_social стилизованы; бланки YTCG условные, без гербов
  • Роман 03.10.2026: гуглить реальные и перерисовывать — без чужих логотипов
5Библиотека референсов refs.jsonРешает Роман
  • сейчас референсы лежат в «untitled folder 56» — без имени и без карты
  • предложение: ~/YTAI/YTs/_refs/ + refs.json по образцу YTs/_courses/library.json: автор, дата, ссылка, приём, инструмент, состояние
  • варианты: А — _refs в git без медиа · Б — медиа на Drive «Archive», карта в git · В — только эта страница
6💬 Моё мнение: что строить первым
  • 1 — документы и интерфейсы по образцам: Роман просил, вид почти есть · 2 — карта «глобус → страна»: герои говорят о странах · 3 — счётчик с растущим масштабом · 4 — refs.json
  • showreel-эффекты, частицы и 3D впрок не строить: они не несут факт, а брендбуки YTEVO и YTCH их запрещают

22.7 · 8Проверки

ПроверкаКогдаНормаОткуда взялась
Референс разобран на приёмдо карточкиназвано, что движется и на чём стоит; «вау» — не приёмпосты описывают впечатление, не механику
Приём сопоставлен с инструментомдо карточкиимя правила, блюпринта или блока — или «надо построить»иначе витрина — картинки без пути к кадру
Проба на кадре фильма в языке каналадо тома1–2 экрана на кадрах, «ок» РоманаYTEVO02: набор не в языке клиента переделан
Без чужого контента на сайтепри публикациикадров постов и чужих логотипов нет; описание + ссылкачужое авторское право
Одна шкала, seek-safelint · check0 ошибок: без Math.random, Date.now, rAF; data-duration заданконтракт hyperframes-core
Против брендбука и контрастлист · checkYTEVO: без свечений, частиц, 3D; текст ≥ 3:1 крупныйбрендбук Bounded; YTCG: оранжевый по белому дал 2,69

22.7 · 9Что обновляет базу знаний

ФайлЧто хранитКто пишет
YTs/_refs/refs.json — надо построитькарточки референсов: автор, дата, ссылка, приём, инструмент, состояние, кадрсессия после разбора папки или ссылки; место решает Роман
YTs/_refs/<платформа>_<shortcode>/скачанное: медиа, .json gallery-dl, кадр12_acquire
kb_claude.json → claude-refsкарточки витрины и таблица референсов Романасессия; кадры — из templates/media и claude-visuals/media
Том канала: screens2 · sc_gfx · gfx.py · ytcg.py · viz.pyприём, прошедший пробу и «ок»сессия после «ок»; вид описывается и в словаре видов

22.7 · 10Ошибки и грабли

Эффект ради эффектазритель смотрит на форму, а не на факт — приём только там, где несёт цифру, место или документРоман: «Не усложняй, не добавляй»
Свечения и частицы против брендбукаYTEVO рисуется плоско; первый набор в чужом стиле переделан целикомYTEVO02
Чужой ролик вместо своей пробына сайт — только своя графика; чужое — описанием и ссылкой на поставторское право
«Сделай премиально»без референса и направления результат безликий — референс + язык канала + имя приёмаthearseniodev, 01.10.2026
Город, которого герой не называлкарта показывает только названное: Khartoum → SudanYTCR04
Папка «untitled folder 56»референсы без имени теряются — папка ig_<shortcode> + .json + строка в refs.json03.10.2026

22.7 · 11Команды

Скачать референс — 12_acquire
A=~/YTAI/scripts/12_acquire/1201_social; R=~/YTAI/YTs/_refs   # место refs — решает Роман
PATH="$HOME/Library/Python/3.14/bin:$PATH"

python3 $A/ig_download.py --cookies-from-browser chrome -D $R/ig_<shortcode> --write-metadata -o 'filename={date:%Y-%m-%d}_{shortcode}_{num}.{extension}' https://www.instagram.com/p/<shortcode>/  # пост Instagram: медиа + .json (автор, дата, описание)
$A/yt_download.sh <url> $R/yt_<id>  # YouTube: видео, субтитры, info.json
python3 $A/tg_channel_dl.py --channel <id> --out $R/tg_<id>  # канал Telegram целиком
ffmpeg -ss 2 -i <ролик>.mp4 -frames:v 1 -vf scale=640:-2 кадр.jpg  # один кадр для разбора (на сайт не идёт)
Найти приём в навыках и проверить пробу
grep -n -i '<слово>' ~/.claude/skills/hyperframes-animation/rules-index.md  # атомарные правила
grep -n -i '<слово>' ~/.claude/skills/hyperframes-animation/blueprints-index.md  # 22 сцены-блюпринта
npx hyperframes add <block> --dir <проект>  # блок из реестра: data-chart · world-map · grain-overlay · x-post
$V $SC/sc_gfx.py demo $P --only demo_<вид>  ·  $V $AC/screens2.py --project $P preview --at 12:34  # проба на кадре: вид YTCR · кадр YTEVO через Chrome
npx [email protected] lint <проект> && npx [email protected] check <проект>  # одна шкала, контраст, layout — до рендера
npx hyperframes skills update  # обновить навыки — спросить Романа, мак занят

22.7 · 12Где лежит

Референсы
/Users/romansergeev/Downloads/untitled folder 56/ig_<shortcode>/4 поста Instagram; постоянное место — решает Роман
~/YTAI/YTs/_refs/ · refs.jsonпредложенная библиотека — надо построить
~/YTAI/scripts/12_acquire/1201_social/скачивание: INSTRUCTIONS.md · ig_download.py · yt_download.sh · tg_channel_dl.py
Навыки — словарь приёмов
~/.claude/skills/hyperframes-animation/ (rules-index.md · blueprints-index.md · techniques.md · transitions/catalog.md · adapters/)правила, 22 блюпринта, 13 техник, переходы, движки
~/.claude/skills/hyperframes-keyframes/ · hyperframes-registry/ · hyperframes-creative/references/audio-reactive.md · motion-graphics/categories/камера и SVG · ~400 блоков · ритм под музыку · категории графики
Наши тома и KB
~/YTAI/scripts/05_editing/0510_autocut/screens2.py · 0511_story_cut/sc_gfx.py · sc_geo.py · 0510_headless_cut/gfx.py · ytcg.py · 07_shorts/0701_finished/viz.pyгде приём становится видом канала
web/_data/kb_claude.json → claude-refs · web/kb/templates/media/5.N.M.jpg · web/kb/claude-visuals/media/*.jpgэта страница и наши кадры на витрине
Референсы · сверено 03.10.2026 · примеры: YTEVO02 (том в KB) · YTCR04 (карты, счётчик)