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

AI-видео модели из предыдущих уроков генерируют реалистичное видео. Но дизайнеру часто нужно другое: анимированный логотип, кинетическая типографика, анимированная инфографика, интерактивная кнопка. Это территория motion graphics — и здесь другие инструменты.

After Effects по-прежнему стандарт индустрии, но три AI-инструмента 2026 года закрывают 80% задач в 10 раз быстрее.

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

• Анимировать логотипы и UI-элементы без After Effects
• Создавать кинетическую типографику и анимированные посты
• Понимать, когда нужен Hera, Jitter или Rive
• Экспортировать в правильные форматы (MP4, GIF, Lottie)

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

Hera — AI motion designer

Hera — инструмент от YC-стартапа, позиционирующий себя как «AI motion designer». Вы описываете анимацию текстом, Hera создаёт её. За полгода после запуска (май 2025) сервис набрал 100 000 регистраций и удваивал выручку каждый месяц.

Что Hera делает хорошо

Анимированные графики и данные. Hera превращает данные в анимированные визуализации: столбчатые диаграммы, где столбцы вырастают, круговые диаграммы, где сегменты появляются один за другим, линейные графики с плавной отрисовкой.

Анимированные карты. Карты с подсвечивающимися регионами, маршрутами, точками — то, что в After Effects занимает часы.

Кинетическая типографика. Текст, который летает, собирается из частиц, печатается побуквенно — 100+ шаблонов для ремикса.

Инфографика. Числа, статистика, сравнения — всё это анимируется из описания.

Пошаговый процесс: анимация логотипа

Шаг 1. Откройте hera.video и создайте проект.

Шаг 2. Загрузите SVG-логотип.

Шаг 3. Опишите желаемую анимацию:

![Абстрактная текстура для motion graphics (Nano Banana 2 через [arckep.ru](https://arckep.ru))](/images/track-design/d.4/nb-motion-abstract.jpg)
*Абстрактная текстура для motion graphics (Nano Banana 2 через [arckep.ru](https://arckep.ru))*
Логотип собирается из рассеянных частиц, которые
плавно слетаются к центру. После сборки — лёгкий
bounce-эффект. Затем под логотипом появляется
название бренда с эффектом fade-in.
Длительность: 3 секунды. Фон: белый.

Шаг 4. Hera предложит несколько вариантов анимации. Выберите ближайший и подправьте тайминг через таймлайн.

Шаг 5. Экспортируйте:

• MP4 — для соцсетей, презентаций, Reels
• GIF — для email-подписей и сайтов (тяжёлый формат, но универсальный)
• Lottie (JSON) — для веб-анимации, в 10-50 раз легче GIF

Ограничения Hera

Hera не заменяет After Effects для сложных композиций с десятками слоёв, масками и 3D-элементами. Это инструмент для быстрого motion design: 80% задач за 20% времени. Для оставшихся 20% всё ещё нужен AE.

Другой нюанс: Hera лучше работает с шаблонами и ремиксами, чем с генерацией «с нуля». Если ваш запрос далёк от существующих шаблонов — результат может быть непредсказуемым.

Jitter — анимация в браузере

Jitter — онлайн-инструмент для моушн-дизайна. Работает в браузере, без установки. Более 300 000 дизайнеров используют Figma-плагин Jitter для импорта макетов.

Ключевое преимущество: Figma-интеграция

Если вы работаете в Figma (а в 2026 это почти все дизайнеры), Jitter — естественное продолжение workflow. Один клик — и фрейм из Figma оказывается в Jitter, готовый к анимации. Все слои, группы и элементы сохраняются.

Что Jitter делает хорошо

Анимированные посты для соцсетей. Берёте статичный пост из Figma, добавляете анимацию появления для каждого элемента, экспортируете как видео. 5 минут вместо часа в After Effects.

Кинетическая типографика. Встроенные пресеты для анимации текста: побуквенное появление, волна, масштабирование, скольжение. Параметры — без кейфреймов.

Анимированные градиенты и эффекты. Градиенты, блюры, тени, маски — всё анимируется интуитивно.

Пошаговый процесс: анимированный пост из Figma

Шаг 1. В Figma установите плагин Jitter (Communities → Jitter).

Шаг 2. Выделите фрейм поста (1080x1080) и запустите плагин. Jitter импортирует все слои.

Шаг 3. В Jitter для каждого элемента задайте анимацию:

• Фон — плавное появление (Fade, 0.3 сек)
• Заголовок — побуквенное появление (Typewriter, 0.5 сек, с задержкой 0.3 сек)
• Изображение — масштабирование снизу (Scale + Fade, 0.4 сек, с задержкой 0.6 сек)
• CTA-кнопка — пружинящее появление (Bounce, 0.3 сек, с задержкой 1 сек)

Шаг 4. Проверьте тайминг на превью. Общая длина — 2-3 секунды.

Шаг 5. Экспорт в MP4 (для Instagram), GIF (для Telegram) или Lottie (для веба).

AI-функции Jitter (2026)

Brainstorm. Описываете настроение — AI предлагает варианты анимации для всех элементов разом. Выбираете «playful» — получаете bouncy-анимации. «Cinematic» — плавные fade-переходы с замедлением.

Image-to-Video. С февраля 2026 Jitter умеет превращать изображения в видео с движением и атмосферой прямо внутри проекта.

Когда выбрать Jitter

• Уже работаете в Figma
• Нужны анимированные посты, stories, баннеры
• Работаете в команде (онлайн-коллаборация в реальном времени)
• Не хотите изучать After Effects

Rive — интерактивная анимация

Rive — принципиально другой инструмент. Hera и Jitter создают видео-анимацию (последовательность кадров). Rive создаёт интерактивную анимацию — она реагирует на действия пользователя: наведение мыши, клик, скролл, данные.

Кто использует Rive

Spotify, Duolingo, Disney, Google, крупнейшие автопроизводители. Rive — стандарт для интерактивных анимаций в веб-приложениях и мобильных приложениях.

Что Rive делает, чего не могут Hera и Jitter

State Machine. Вы определяете состояния (default, hover, pressed, loading, success, error) и переходы между ними. Анимация реагирует на события в реальном времени, а не просто проигрывает видео.

AI State Machine (2026). Новая функция: описываете логику компонента текстом — AI строит State Machine автоматически. «Кнопка: при наведении увеличивается на 10%, при клике уменьшается и показывает ripple-эффект, после загрузки показывает зелёную галочку» — и AI создаёт все состояния и переходы.

Производительность. Rive Runtime — GPU-ускоренный рендерер, работающий на 120fps. Файл .riv весит килобайты (vs мегабайты для GIF/видео). На мобильных устройствах это критично.

Пошаговый процесс: анимированная кнопка

Шаг 1. Откройте rive.app и создайте артборд.

Шаг 2. Нарисуйте кнопку (или импортируйте из Figma — Rive поддерживает импорт).

Шаг 3. Создайте 4 состояния:

• Idle — кнопка в покое
• Hover — при наведении: плавное увеличение на 5%, смена цвета фона
• Pressed — при клике: уменьшение на 3%, ripple-эффект от точки клика
• Success — после действия: зелёный цвет, галочка вместо текста

Шаг 4. Настройте переходы: Idle → Hover (по событию mouseEnter), Hover → Pressed (по событию click), Pressed → Success (по данным от приложения).

Шаг 5. Встройте на сайт через Rive Runtime (JavaScript-библиотека, 50 КБ).

Когда выбрать Rive

• Нужна интерактивная анимация (hover, click, scroll, drag)
• Важен размер файла (Rive в 100 раз легче GIF)
• Анимация для мобильного приложения
• Создаёте анимированного персонажа (маскот, аватар)

Когда Rive избыточен

• Нужен просто анимированный пост для Instagram — Jitter проще
• Нужна анимация логотипа для видео — Hera быстрее
• Нет разработчика для интеграции — Rive без кода не встраивается на сайт

Что выбрать: сравнение задач

Workflow моушн-дизайнера с AI

1. Бриф. Что анимировать, для какой платформы, какой формат. Видео (MP4) или интерактив (Rive)?
2. Выбор инструмента. Видео-контент → Hera/Jitter. Интерактив → Rive.
3. Быстрый прототип (5 мин). Используйте AI: Hera для motion, Jitter Brainstorm для стиля, Rive AI для State Machine.
4. Показ клиенту/команде. На этом этапе часто достаточно прототипа.
5. Финализация (15 мин). Подправьте тайминг, easing, цвета. Добавьте звук, если нужно.
6. Экспорт. MP4 для соцсетей, GIF для email, Lottie/Rive для веба.

Итоги

Motion graphics с AI — три инструмента для трёх задач. Hera — анимация логотипов, данных, инфографики. Jitter — быстрые анимированные посты из Figma. Rive — интерактивные анимации для веба и приложений. Все три работают в браузере, не требуют After Effects и ускоряют процесс в 5-10 раз.

В финальном уроке модуля — практика: соберём промо-ролик для бренда от сценария до финального видео.