Группа 2: переходы и кинетическая типографика (вертикальные моушн-шоукейсы)

Разобраны 5 роликов: A00_map (главный реф переходов), P07, P08, P10, P13. Подробные раскладки: A00_map/, P07/, P08/, P10/, P13/ (sheet.jpg, keyframes/, breakdown.json, breakdown.md). Обозначения: f = кадр (с 1), «dur» в кадрах при 30 fps (P13 при 24), кривые по GSAP. Числа взяты из замеров по кадрам (OpenCV, ink-bbox, яркость), ~ = оценка глазом.

Короткий ответ на «почему переходы плавные и креативные как в Map»: в A00 нет ни одной склейки. Один герой превращается в следующего, вход и выход разной длины и кривой (выход 8 кадров ease-in, вход 15–18 кадров ease-out), смена содержимого прячется в момент нулевого размера (линия, ребро) или под мазком, блюр идёт по скорости, на каждое движение свой звук.

Часть 1. КАТАЛОГ ПЕРЕХОДОВ

Для каждого: раскадровка по кадрам, длительность, кривая (замер), сборка в HyperFrames (GSAP + CSS). Время в мс при 30 fps (1 кадр = 33.3 мс).

1. «Подъём в зазор» (rise-into-gap), A00 f27–43

Раскадровка: f26 строка «Time to get sleep» стоит. f27 снизу в кадр заезжает диск часов. f28–31 диск идёт вверх, строка начинает раздвигаться с задержкой 1 кадр. f33 диск на месте, f36 строка раскрыта на 90%, f42 покой. Длительность: подъём 15 кадров (500 мс); раздвижка 16 кадров (533 мс). Кривая замеров: подъём нижнего края 92%→60% высоты: expo.out (rmse .014) [0 / .78 / .95 / .99 / 1]; левый край строки 26%→14% ширины, правый 73%→90%: power2.out [0 / .45 / .82 / .94 / 1]. Блюр: вертикальный на диске в f27–31. Сборка: строка во flex-контейнере с justify-content:center; вставка — отдельный flex-элемент.

// вход снизу: expo.out; раздвижка строки: power2.out с задержкой 1 кадр
tl.fromTo(clock,{yPercent:140,opacity:0,filter:'blur(10px)'},
  {yPercent:0,opacity:1,filter:'blur(0px)',duration:.5,ease:'expo.out'},t);
tl.fromTo(clock,{width:0},{width:112,duration:.5,ease:'power2.out'},t+.033);

Строка раздвигается автоматически (flex). Ширина вставки 112 px = 15.5% от 720. Без пружины, без overshoot.

2. «Кольцо-пульс + разлёт слов» (ripple-scatter), A00 f64–90

Раскадровка: f64 слова держатся, f65 вокруг часов кольцо (red hairline) диаметром 91 px, f66–69 кольцо растёт 102→126 px (за 5 кадров +38%), f69–71 гаснет; одновременно слова срываются по отдельным траекториям (Time влево-вверх с поворотом −10° и scale 1.3, get scale 1.4, sleep вправо +12°), часы уменьшаются 145→101 px и тают, снизу поднимается карточка (f78–84). Длительность 26 кадров (867 мс). Кольцо ~power1.out; слова power2.in 0.5 с. Сборка:

tl.fromTo(ring,{scale:1,opacity:1},{scale:1.38,opacity:0,duration:.17,ease:'power1.out'},t)
words.forEach((w,i)=>tl.to(w,{x:dx[i],y:dy[i],rotation:r[i],scale:s[i],opacity:0,filter:'blur(6px)',duration:.5,ease:'power2.in'},t+.03));

Ring = border 1.5px, цвет ~#ff5a6e. Параметры слов: Time {x:−140,y:−60,rot:−10,s:1.3}, to {y:+90}, get {x:+60,y:+40,rot:−12,s:1.4}, sleep {x:+220,rot:+12} (в px при 720).

3. «Стопка уходит вверх / блок снизу», A00 f124–148

Раскадровка: f84–130 карточки по одной садятся снизу (шаг ~10 кадров), стопка из 5. f124–134 стопка ускоряется вверх с блюром (ease-in), f131–134 пусто, f135 снизу появляется блок «пункт управления» (верх 90% высоты), f136–147 поднимается к 31%. Длительность 18 кадров (600 мс). Подъём: top-край 331→112 px за 12 кадров (400 мс), power2.out [0 / .55 / .84 / .96 / 1] (rmse .024). Сборка: выход y:-120%, filter:'blur(14px)', power2.in, .35 с; вход yPercent:100→0, power2.out, .4 с. Зазор между выходом и входом 3 кадра (100 мс) — «вдох».

4. «Схлопывание в линию → разворот» (squash-to-line morph), A00 f170–192

Раскадровка: f170 блок на месте, f172 лёгкий 3D-наклон, f174–177 высота падает 109→22 px, f178 линия толщиной 3 px (ширина 175 px сохранена, центр y=193 px из 367), f179 из линии растёт карта, f180–186 высота 3→50 px, f187–192 55→65 + маркер. Длительность 22 кадра (733 мс): схлопывание 8 кадров (233 мс), sine.inOut [0 / .10 / .41 / .76 / 1] (rmse .069); разворот 14 кадров (433 мс), sine.out/power1.out [0 / .43 / .72 / .94 / 1] (rmse .019). Блюр: горизонтальный 4 px на линии. Сборка:

tl.to(a,{scaleY:.03,duration:.26,ease:'sine.inOut'},t)
  .set(a,{autoAlpha:0}).set(b,{autoAlpha:1,scaleY:.04})
  .to(b,{scaleY:1,rotationX:62,duration:.43,ease:'sine.out'});

Центр сохраняется (transform-origin 50% 50%) — склейка невидима.

5. «Карточка через ребро» (edge-on flip), A00 f236–254

Раскадровка: f236–243 карта поворачивается вокруг вертикальной оси (ширина 185→36 px), f244 почти нулевая линия, f245 уже карточка будильника (24 px), f246–254 раскрывается до 194 px. Длительность 19 кадров (633 мс): выход 8 кадров (233 мс) power1.in/power2.in [0 / .05 / .19 / .62 / 1]; вход 18 кадров (567 мс) power3.out [0 / .70 / .91 / .98 / 1] (rmse .032). Сборка:

gsap.set(stage,{perspective:900});
tl.to(a,{rotationY:88,filter:'blur(5px)',duration:.25,ease:'power2.in'},t)
  .set(a,{autoAlpha:0}).set(b,{autoAlpha:1,rotationY:-88,filter:'blur(5px)'})
  .to(b,{rotationY:0,filter:'blur(0px)',duration:.57,ease:'power3.out'});

Асимметрия: вход вдвое длиннее выхода.

6. «Мазок-курсор скрывает склейку», A00 f281–300

Раскадровка: f281 тумблер включается (#38c45c), справа заезжает серый размытый мазок; f291–294 второй мазок идёт сверху к карточке; f295 вместо карточки уже панель сообщения (склейка под мазком, diff 2.17), панель выравнивается из −10° в 0. Длительность 19 кадров (633 мс). Мазок 4–5 кадров, блюр 20+ px. Сборка: div-полоса с filter:blur(12px), linear-gradient(90deg,transparent,#666 60%,transparent), rotate −35°, x:-40%→120% за 0.13 с power1.in; на 3-м кадре set замена слоя.

7. «Три плитки с шагом 1 кадр», P08 f73–90

Раскадровка: f73 плитка 1 выглядывает справа (288 из 360 px), f74 плитка 2 стартует, f75 плитка 3, f76 всё на ~162 px, f90 садятся (120 px). Длительность 17 кадров (567 мс), задержка между плитками 1 кадр (33 мс). Кривая: circ.out/expo.out [0 / .66 / .88 / .97 / 1] (rmse .014), 20 кадров до полного покоя. Блюр горизонтальный 20–30 px на первых 3 кадрах. Сборка: gsap.from(tiles,{x:360,filter:'blur(14px)',opacity:0,duration:.5,ease:'expo.out',stagger:.033}).

8. «Goo-слив» (жидкое слияние), P08 f91–110

Раскадровка: f91 плитки со слегка волнистыми краями, f94 края плывут (displacement), f97 плитки сжаты в вертикальную каплю, f100 зелёное пятно с надписью, f103–109 растекается в пилюлю «Done ✓». Длительность 27 кадров (900 мс), ease ~power2.inOut. Сборка: SVG-фильтр на контейнере: feTurbulence baseFrequency=.012 → feDisplacementMap scale анимировать 0→60 за 0.3 с; затем feGaussianBlur stdDeviation=8 → feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" для порога; плитки scale 1→.2 к центру.

9. «Конус-заливка цветом» (color flood), P08 f184–197

Раскадровка: f183 чат с белым пузырём, f184 внизу появляется зелёная «горка» с пучком штрихов на пике, f186 пик на 86% высоты, f188 на 72%, f190 на 53%, f192 на 26%, f193 на 9%, f194 пик за кадром, f195–197 боковины добирают углы (площадь 78→95%), в центре въезжает белый ярлык «Lets go!!». Длительность 13 кадров (433 мс). Кривая пика: power1.in (rmse .038) [0 / .12 / .30 / .59 / 1], то есть в основном разгон без торможения, как «поглощение». Площадь заливки: 2%, 15%, 25%, 49%, 79%, 95% (f186, 189, 190, 192, 194, 197). Цвет заливки #268102 (на экране), Wise-лайм #55e208 у объектов. Сборка: слой 100%×100%, clip-path как polygon с вогнутыми боками, обновляется из timeline (seek-safe):

const st={p:0}; tl.to(st,{p:1,duration:.33,ease:'power1.in',onUpdate:()=>{
  const y=100-110*st.p, w=60+60*st.p; // %
  flood.style.clipPath=`polygon(50% ${y}%, ${50+w*.3}% ${y+ (100-y)*.55}%, ${50+w}% 100%, ${50-w}% 100%, ${50-w*.3}% ${y+(100-y)*.55}%)`;}},t);

Затем держать 1.3 с (40 кадров, диф≈0), чек: пузырь scale→круг→галка за 16 кадров. Выход: HARD CUT в белый (f231, diff 165) — самое сильное событие ролика.

10. «Эхо-след влёта», P08 f279–291

Раскадровка: f279 иконка документа слева за краем с 5 призраками, f282 призраки убывающей яркости (0.5→0.1), декселерация 12 кадров, f291 след растворился, f294–300 иконка на месте, f303–312 scale pop 1.0→1.2, 3D-наклон, блик-звезда. Длительность 33 кадра (1100 мс). Кривая expo.out/power3.out. Сборка: 5 клонов иконки, stagger:.033, opacity:.5→.1, x отстаёт по шагам (−18, −36, −54, −72, −90 px) и сходится к 0 с expo.out .4 с.

11. «Пузырь → экран» (container transform), P08 f460–500

Раскадровка: f455 точки набора, f460–472 пузырь растёт по ширине 126→246 px (power4.out [0 / .75 / .93 / .98 / 1]), текст «How do you out reach?» печатается 21 знак за ~14 кадров, f486–496 раздувается по высоте 78→267 px (power1.in [0 / .07 / .26 / .65 / 1]), цвет бледнеет, f497–500 заменяется белым экраном «Messages». Длительность 14 кадров на раздув (467 мс). Сборка: width 246→300, height 78→267 .37 с power1.in, borderRadius 22→28, bg #4d92f7→#eaf1ff→#fff; содержимое экрана fade-in за 4 кадра в конце.

12. «Тема-флип на клик», P10 f95–105 и f136–155

Раскадровка: f97 белый список, f99 курсор у строки, f100 строка поднята в серую карточку (scale 1.12), яркость фона 255→168 (f100)→67 (f101)→15 (f102), f103–135 тёмная тема. Обратно: f141–154 яркость 45→254 линейно. Тёмный флип: 3 кадра (100 мс) к 15; обратный: 12 кадров (400 мс) linear (rmse .014). Старт флипа точно в удар (+33 мс). Сборка: tl.to(bg,{backgroundColor:'#0f0f0f',duration:.1,ease:'sine.out'},t); обратно tl.to(bg,{backgroundColor:'#fff',duration:.4,ease:'none'},t2). Остальные пункты filter:blur(6px).

13. «Пилюля из слова → зум-сквозь», P10 f158–196

Раскадровка: f158 строка «Get your subscription», f160 справа входит курсор с блюром, на слове «subscription» зарождается синий прямоугольник, f162–166 растёт 45%→93% ширины и 45→97 px высоты, f166 перелёт +2% и возврат, f170–176 подпись «Joi Pro» + звезда + кнопка Upgrade, f177–184 зум: плашка выходит за края (×~1.6) с блюром 30 px по горизонтали, f186–196 возврат. Длительность 18 кадров (600 мс) на рост + 20 кадров (667 мс) зум. Кривая: power3.out + микро-overshoot (back.out(1.2)). Сборка: tl.fromTo(pill,{scaleX:.45},{scaleX:.93,duration:.22,ease:'back.out(1.2)'},t); зум: scale 1→1.6 .2 с power2.in + blur(18px); затем 1.6→1 .3 с power3.out.

14. «Свет-стрик скрывает склейку» (light-leak cut), P07 f232–237, f536–538

Раскадровка: f232–233 бирюзовый каст, f234 диагональная оранжевая полоса слева, f235–236 раздувается на половину кадра (яркость 54→88→103), f237 жёсткая склейка на новую сцену (яркость 45). Длительность 5 кадров (167 мс), склейка на 4-м кадре, после — хвост цветокора 3–5 кадров. Сборка: div, background:linear-gradient(100deg,transparent 30%,#ff9a2f 48%,#fff4c2 52%,transparent 70%), mix-blend-mode:screen, rotate(12deg), x:-120%→120% за 0.13 с power1.in; tl.set(sceneA,{autoAlpha:0},t+.1).set(sceneB,{autoAlpha:1},t+.1).

15. «Bloom в белое + цветовой хвост», P07 f423–432 и f752–760

Раскадровка: f423–424 яркость 243, f425 199 (мигание), f426 245 (белый кадр), f427 жёсткая склейка на лицо (58) с синим отливом, f429 зелёный, f431 нейтраль (45). Длительность 6 кадров вспышки + 5 кадров хвоста (367 мс). Рост яркости linear 3 кадра. Сборка: white.opacity 0→1 за 0.1 с linear, hold 0.07 с, hard cut, tint.opacity .6→0 за 0.17 с, tint #2f4bff→#38c46a.

16. «Слэм плоским цветом на бит», P13 f12–16, f83–86, f222–224

Раскадровка (24 fps): f12 белая капсула у правого края, f13 кадр #fbe18c (яркость 220), f14 кадр #eb0836 (78), f15 тёмный с красной точкой (29). Строб f83 жёлтый → f84 красный → f85 жёлтый → f86 тёмный. Длительность 1–3 кадра (42–125 мс). Герой остаётся на месте и инвертируется (чёрный на жёлтом, белый на красном). Сборка: fills div 100%×100% на 1 кадр (tl.set(fill,{background:'#fbe18c'},t).set(fill,{background:'#eb0836'},t+1/24).set(fill,{opacity:0},t+2/24)); бит 14 кадров (103 BPM).

17. «Сжатие видео в карточку», P07 f1080–1094

Раскадровка: f1080 видео на весь кадр, f1084 высота 589 px из 640, f1088 543, f1090 533, f1094 525 (покой), рамка чёрная, снизу вылетает «“2025”». Длительность 14 кадров (467 мс), sine.out/power1.out [0 / .25 / .75 / .95 / 1] (rmse .071). Масштаб итоговый 0.65. Сборка: scale 1→.65, borderRadius 0→24px, .3–.47 с sine.out; текст yPercent 60→0 power4.out .17.

Часть 2. КАТАЛОГ ВХОДОВ ТЕКСТА

Типографические данные:

• A00: Inter Tight/SF Pro Semibold, cap height 34 px при 720 (4.7% ширины, ≈51 px при 1080), цвет #181519, трекинг ~−2…−3%.
• P07: Neue Haas/Helvetica Now Display Bold, ~50 px при 720 (≈75 px при 1080), белый, трекинг −3…−4%, позиция y 57% высоты.
• P08/P10: Inter/SF Pro Medium, cap ≈ 2.2–2.4% высоты (≈ 42–46 px при 1920), UI-текст, герой — форма.

Часть 3. ОБЩИЕ ПРАВИЛА «ПОЧЕМУ ПЛАВНО И ДОРОГО»

1. Один герой, а не склейки. Следующее состояние растёт из предыдущего на том же центре: линия, ребро, пузырь, пилюля. Глаз не прыгает (A00: 7 смен за 11.5 с без единой склейки).
2. Асимметрия вход/выход. Выход короткий и ускоряющийся (power1.in/power2.in, 8 кадров, 233–267 мс), вход длиннее и тормозящий (power3.out/power4.out/expo.out, 15–18 кадров, 500–567 мс). Измерено в A00 (T4: 8:14, T5: 8:18) и P08 (раздув 11 кадров ease-in после входа 13 кадров power4.out). Соотношение примерно 1 : 2.
3. Фронтальная нагрузка. Вход берёт 60–80% пути за первые 25% времени (expo.out [0/.78/.95], power4.out [0/.75/.93], circ.out [0/.66/.88]); хвост доводит ~250 мс. Линейные кривые только для яркости (P10 «рассвет» 12 кадров).
4. Одна семья кривых на ролик. A00 — power2/3/expo out для входов, power2.in для выходов; P08 — power4/expo out + power1.in; P10 — power3.out + sine. Нет смеси bounce/elastic/back.
5. Нулевой overshoot (≤2%). Единственный перелёт в группе: P10 пилюля +2%. Отсутствие отскока читается как «дорого»; резинка = «дёшево».
6. Блюр по скорости. Гауссов 8–14 px на первых 2–4 кадрах входа и на последних 3–5 кадрах выхода; направленный 3–5 px/кадр для горизонтальных влётов (P08 плитки 20–30 px); на settle блюр 0.
7. Смена содержимого прячется. В момент scale≈0 (A00 линия), rotateY=90° (A00 ребро), под мазком/светом (A00 стрик, P07 вспышка), под плоским слэмом (P13 жёлтый/красный). Содержимое меняется на кадре максимальной маскировки.
8. Стаггер крошечный. 1 кадр (33 мс) для плиток, 3–3.5 кадра (100–117 мс) для слов, 4–5 кадров (133–167 мс) для строк списка. Больше 5 кадров ломает ощущение единого движения.
9. Звук на каждое движение. SFX-атака на кадр старта перехода (±1–2 кадра: A00 5 из 7 в пределах 55 мс; P10 5 из 6 в пределах 70 мс). Тишина-выдох на «главном» кадре (A00 карта 1.6 с). Темп: музыкальные ролики (P13) режут на сильные доли сетки (бит 14 кадров при 103 BPM).
10. Пустота. Герой занимает 25–55% ширины, остальное чистый фон (70–80% пустоты, A00/P08/P10). Один акцентный цвет на сцену.
11. Ритм: состояние 0.7–1.6 с, переход 0.57–0.67 с, цикл ≈ 1.6 с (A00). Короткий старт и длинный «герой-кадр» в центре (A00 карта 1.63 с, P08 экран Messages 5.3 с).
12. Свет вместо «эффектов-переходов» (P07): вспышка 3–5 кадров, склейка на пике, цветовой хвост 4–5 кадров, зерно и анаморфный флэр; в лице почти нет движения камеры.
13. Текст-ритм. Субтитры 3.3–4.3 слова/с (230–300 мс на слово), ключевое слово крупнее и другого шрифта (P07 «ONE MORE»); печатать 21 зн/с (скорость чтения команды) или 45 зн/с (быстрый чат).

Часть 4. ТОП-10 ПРИЁМОВ ДЛЯ КРАЖИ (GITHUM: обзоры ИИ-софта и GitHub-находок, вертикаль 9:16, русский голос)

1. Цепочка морфов одного контейнера (A00): карточка репозитория → терминал → карточка звёзд → чек. Одним героем сквозь весь сюжет обзора. Дорого и дёшево в сборке (один таймлайн).
2. Подъём в зазор строки (A00): «Нашёл ⭐ репо» — иконка вдвигается между словами, строка раздвигается автоматически (flex). Универсальный вход для имён репозиториев.
3. Схлопывание в линию → разворот и разворот на ребро (A00): две смены экрана без склейки (терминал ↔︎ браузер ↔︎ README). 8 кадров выход + 14–18 кадров вход.
4. Цветовой потоп конусом (P08): ключевая цифра («+12k звёзд за неделю») заливает кадр цветом на 1.3 с, сжимается в чек; следом жёсткий cut на белое. Один такой момент на ролик.
5. Тема-флип на клик (P10): «до» белый → тёмный терминал «после» за 3 кадра; обратно линейный рассвет 0.4 с.
6. Пилюля из слова + зум-сквозь (P10): ключевое слово в закадровом («clone», «npm install») подсвечивается пилюлей, растёт в командный блок, зум на него.
7. Склейка под свет (P07): стрик 3–5 кадров или bloom в белое с цветовым хвостом между сценами; бесплатный способ «кино» и скрытия склейки между скринкастами.
8. Пословные субтитры 230–300 мс, строчные, плотный гротеск, ключевое слово в пилюле/узком курсиве с блюром на входе (P07): стандарт нижней трети для голоса.
9. Три плитки с шагом 1 кадр (P08) для «топ-3 находки»: скрины влетают лавиной с горизонтальным блюром, затем goo-слив или поочерёдное выделение.
10. Слэмы плоским цветом на бит в первых 3 секундах хука (P13): 1–3 кадра жёлтый/красный/чёрный + герой на месте; сетка 14 кадров при 103 BPM, сильная доля = смена. Плюс правило звука «SFX на каждое движение» из A00.

Дополнительно (в запас): эхо-след влёта для логотипов (P08), колесо цифр для счётчиков звёзд/версий (P10), контейнер-трансформ пузырь→экран (P08).

Оговорки и непроверенное

• Замеры кривых выполнены по ink-bbox / яркости на кадрах 360×640 (30 fps), поэтому точность ±1 кадр и ±1–2 px; разбег rmse в таблицах каждого breakdown.md.
• Кривую слов в A00 T0/T2 (разнонаправленный вход) оценил глазом, не по треку (помечено ~).
• Темп музыки автокорреляцией надёжен только у P13 (103 BPM, совпало с треком MGMT); у A00/P07/P08/P10 плотные SFX дают ложные значения, их не использовал для монтажной сетки.
• Название шрифтов, скорость речи и точные цвета шрифтов: вероятные, по классу гарнитуры; sample hex из кадров приведены там, где мерились.
• Исходники плотных кадров удалены (_tmp/), перемеры возможны заново из refs/video/*.mp4.