Случаи — посты eluna.ai (27.09.2026) и thearseniodev (01.10.2026); утверждения авторов, не наша проверка.
Ответ Роману на таблицу «движок → что создаёт»: да, всё это — одна система: GSAP и HTML/SVG уже наши, Three.js подключается адаптером, PixiJS — через пробу.
| Движок | Что создаёт | У нас сегодня | Как подключается · состояние |
|---|---|---|---|
| GSAP | движение текста и фигур, переходы, появление букв, рисование и превращение SVG — основной инструмент | все тома: screens2.py, sc_gfx.py, gfx.py — на одной паузной шкале HyperFrames | adapters/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, циклы | ✗ | ✓ | · |
YTEVO — брендбук Bounded: без 3D, частиц и свечений. Новый движок входит через пробу на кадре фильма и строку в томе.
Карточка = приём · где сильно · метки: источник, чем делаем, состояние · вызов. Кадры наши; чужих нет — ссылки на посты ниже. Первая группа — кинетическая типографика.

$V $AC/screens2.py --project $P build # kind: title → t_title
$V $S viz --job $JOB --only S03 --init15 приёмов: у 8 — наш кадр, у 7 — «своего примера нет». Переменные $V · $AC · $SC · $S — как на странице Экраны кодом.

$V $SC/sc_gfx.py demo $P --only demo_map_route
$V $SC/sc_gfx.py demo $P --only demo_map_dubainpx hyperframes add world-map --dir <проект>
$V $AC/screens2.py --project $P build --only S01
$V $SC/sc_gfx.py demo $P --only demo_counter
$V $SC/sc_gfx.py demo $P --only demo_bars$V $SC/sc_gfx.py demo $P --only demo_ui_emailgrep -n cursor ~/.claude/skills/hyperframes-animation/blueprints-index.md
$V $AC/screens2.py --project $P build # kind: chain → t_stepsnpx hyperframes keyframes <проект>cat ~/.claude/skills/hyperframes-animation/adapters/three.mdnpx hyperframes add grain-overlay --dir <проект>~/.claude/skills/hyperframes-creative/scripts/extract-audio-data.pyСколько приёмов каждой группы уже есть в томе канала, а не только в навыке — по меткам карточек выше.
В томах — 9 из 15 приёмов; наш кадр в KB — у 8: письмо и пост есть в sc_gfx.py, но без кадра.
Папка «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 · частицы · 3D | hyperframes-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 экранам до вёрстки всех |
Что умеют модели — утверждения авторов постов, не наша проверка.
~/YTAI/YTs/_refs/ + refs.json по образцу YTs/_courses/library.json: автор, дата, ссылка, приём, инструмент, состояние| Проверка | Когда | Норма | Откуда взялась |
|---|---|---|---|
| Референс разобран на приём | до карточки | названо, что движется и на чём стоит; «вау» — не приём | посты описывают впечатление, не механику |
| Приём сопоставлен с инструментом | до карточки | имя правила, блюпринта или блока — или «надо построить» | иначе витрина — картинки без пути к кадру |
| Проба на кадре фильма в языке канала | до тома | 1–2 экрана на кадрах, «ок» Романа | YTEVO02: набор не в языке клиента переделан |
| Без чужого контента на сайте | при публикации | кадров постов и чужих логотипов нет; описание + ссылка | чужое авторское право |
| Одна шкала, seek-safe | lint · check | 0 ошибок: без Math.random, Date.now, rAF; data-duration задан | контракт hyperframes-core |
| Против брендбука и контраст | лист · check | YTEVO: без свечений, частиц, 3D; текст ≥ 3:1 крупный | брендбук Bounded; YTCG: оранжевый по белому дал 2,69 |
| Файл | Что хранит | Кто пишет |
|---|---|---|
| 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 | приём, прошедший пробу и «ок» | сессия после «ок»; вид описывается и в словаре видов |
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 # обновить навыки — спросить Романа, мак занят