Урок 4: Motion graphics и анимация

Диффузионные видеомодели (Kling 3.0, Veo 3.1, Wan 3.0) великолепно снимают туман в лесу, капли росы и свет на стеклянном флаконе. Но стоит попросить их анимировать векторный логотип компании, собрать график роста выручки или сделать пружинящую кнопку для мобильного приложения — и вы получите размытые пиксели и сломанные буквы.

Это территория Motion Graphics (моушн-дизайна) — векторной, послойной и математически точной анимации. Долгое время единственным стандартом здесь был тяжёлый Adobe After Effects с высоким порогом входа. В 2026 году три специализированных браузерных инструмента с AI-движками — Hera, Jitter и Rive — закрывают 80% задач моушн-дизайнера в 10 раз быстрее и выдают чистый код (Lottie JSON и .riv), который весит считанные килобайты.

Чему вы научитесь

• Чётко разделять задачи между генеративным AI-видео (Kling/Veo) и векторным моушн-дизайном (Hera/Jitter/Rive)
• Анимировать SVG-логотипы, инфографику и карты по текстовому ТЗ в Hera
• Переносить многослойные макеты из Figma в Jitter и собирать кинетическую типографику без ручной расстановки ключевых кадров
• Проектировать интерактивные анимации с машиной состояний (AI State Machine) в Rive для сайтов и приложений

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Архитектурная развилка: где кончается нейровидео и начинается моушн

Прежде чем открывать редактор, проведите границу между пиксельной диффузией и векторной хореографией слоёв. В современном рекламном ролике эти два мира не конкурируют, а складываются в бутерброд: нижний слой — фотореалистичный видеофон из Kling 3.0 или текстура из Nano Banana 2, верхний слой — кристально чёткая векторная типографика и логотип из Jitter или Hera.

1. Hera — текстовый AI-моушн-дизайнер для логотипов и данных

Hera (hera.video) работает не с пикселями, а со сценой векторных примитивов и кривых движения. Вы загружаете свой нативный SVG-логотип (который мы создали в первом уроке модуля D.3) или таблицу с числами и пишете промпт, описывающий физику появления, тайминг и кривую ускорения (easing).

Четыре суперсилы Hera

1. Пэкшоты (Logo Intro / Outro): сборка векторного знака по штрихам (trim paths), каскадный вылет букв с инерционным затуханием (spring physics).
2. Анимированная дата-визуализация: столбчатые, круговые и линейные графики для продуктовых презентаций и питчей инвесторам, где колонки вырастают строго по вашим цифрам.
3. Гео-анимация и маршруты: пролёты по векторным картам с подсветкой локаций и траекторий доставки.
4. Кинетические плашки и бейджи: динамические титры для видеороликов на прозрачном фоне (альфа-канал) или в формате Lottie.

Посмотрите, как соединяются сгенерированный на arckep.ru абстрактный фон и структурное ТЗ для векторной сцены в Hera:

Абстрактная текстура для motion graphics (Nano Banana 2 через arckep.ru)

Анимация финального пэкшота (3 секунды, 60 fps, фон #F5F0E8):
0.0–1.2 с: Контуры векторного знака арки папоротника (#4A6741) плавно прорисовываются снизу вверх (эффект Trim Paths с мягким замедлением Ease-Out Cubic).
0.8–1.8 с: Под знаком с лёгким вертикальным смещением (slide up + fade in, шаг задержки 0.04 с на букву) проявляется текстовый логотип "ЛЕСНАЯ ТРОПА".
1.8–3.0 с: Композиция фиксируется в центре, в нижней трети плавно загорается тонкая золотая плашка (#C9A96E) с адресом сайта.

2. Jitter — прямое продолжение Figma в браузере

Если ваш основной рабочий инструмент — Figma, то Jitter (jitter.video) становится самым быстрым мостом между статичным макетом и живым промо-контентом. Плагин Jitter для Figma переносит выбранный фрейм в браузерный таймлайн с полным сохранением структуры папок, векторных масок, авто-лейаутов и шрифтов.

Как устроена хореография слоёв в Jitter (2026)

В отличие от After Effects, где вам нужно вручную ставить первый и второй ключевой кадр и тянуть усы графика скорости, в Jitter вы мыслите поведенческими блоками (Actions): Войти в кадр (In) → Жить в кадре (Custom/Loop) → Выйти из кадра (Out).

Ключевой секрет живого моушн-дизайна в Jitter — ступенчатая задержка (Stagger / Cascade). Никогда не заставляйте заголовок, фото продукта и кнопку появляться в одну и ту же миллисекунду: глаз зрителя теряется. Выстройте строгую очередь внимания с шагом в 0.15–0.25 секунды:

1. 0.00 с — Фон и подложка: мягкое масштабирование со 105% до 100% (Scale down + Fade in, 0.4 с).
2. 0.20 с — Геройский продукт (центральный слой): всплытие снизу с пружинящей физикой (Slide up + Overshoot spring, 0.5 с).
3. 0.40 с — Заголовок первого уровня: каскадное появление по словам или по строкам под маской (Mask reveal by lines, задержка между строками 0.08 с).
4. 0.75 с — Ценовой бейдж и кнопка CTA: акцентный пульс (Pop in, 0.3 с), ставящий визуальную точку.

В 2026 году функция Jitter AI Brainstorm позволяет выделить весь импортированный из Figma фрейм и задать характер движения одним словом (Restrained luxury — медленные вязкие кривые с длинным торможением; Playful tech — быстрые упругие пружины), после чего вручную подтянуть тайминги на шкале времени.

3. Rive — интерактивная анимация с машиной состояний (State Machine)

Hera и Jitter создают линейные ролики: вы нажали Play — анимация отыграла от первой до третьей секунды и остановилась. Но современному цифровому продукту (сайту, мобильному приложению, игровому онбордингу) нужна графика, которая реагирует на пальцы и курсор пользователя в реальном времени. Для этого создан Rive (rive.app).

Как работает AI State Machine в Rive

Сердце Rive — визуальный граф состояний (State Machine). Вместо одного видеоролика вы создаёте узлы состояний (например, Idle — покой, Hover — наведение курсора, Pressed — нажатие, Loading — вращение индикатора, Success — раскрытие зелёной галочки) и соединяете их стрелками-триггерами (клик мыши, процент скролла страницы, ввод пароля).

С выходом Rive AI State Machine вам больше не нужно вручную собирать сложную булеву логику переходов: вы описываете поведение компонента текстом («Создай машину состояний для карточки товара: в покое листья папоротника слегка покачиваются; при наведении (isHovered = true) флакон приподнимается на 12 px и появляется тень; при клике срабатывает триггер Добавлено в корзину»), и Rive автоматически генерирует граф переменных и связей.

Матрица выбора инструмента под задачу

Пошаговый практикум: собираем гибридный анимированный постер (Kling + Figma + Jitter)

Соединим генеративное видео и векторный моушн в единый профессиональный пайплайн, которым пользуются дизайн-студии в 2026 году.

1. Подготовьте атмосферную видеоподложку на arckep.ru (5 минут). В Kling 2.6 Pro или Kling 3.0 сгенерируйте 5-секундный вертикальный (9:16) бесшовный фон без текста — например, мягкое движение солнечных зайчиков и тени ветвей папоротника на текстуре тёплого камня (#F5F0E8).

2. Соберите векторную вёрстку в Figma (5 минут). Создайте фрейм 1080×1920, разложите по отдельным именованным слоям SVG-логотип бренда, заголовок в две строки, плашку с оффером и вырезанный PNG флакона на прозрачном фоне.

3. Перенесите слои в Jitter и настройте каскад (10 минут). Экспортируйте фрейм через плагин Jitter, положите на самый нижний слой видеоподложку из Kling, а для векторных элементов задайте каскадное появление (Mask reveal для текста и Slide + Spring для продукта) с шагом задержки 0.2 с.

4. Экспортируйте чистовой мастер-файл (2 минуты). Выгрузите ролик в MP4 (1080p, 60fps) для публикации в Reels и параллельно экспортируйте верхние векторные слои в Lottie JSON для размещения на лендинге.

В финальном, пятом уроке модуля мы сведём все изученные технологии в единый продакшн: по профессиональной режиссёрской таблице снимем и смонтируем 30-секундный рекламный ролик для бренда «Лесная тропа».