🎯 О чём этот конспект: Руководство по связке нового Rive CLI с AI-агентами (Claude Code и Codex) для автоматического создания интерактивных векторных анимаций, сложных UI-компонентов и риггинга персонажей без ручной сборки в редакторе.

👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам, UI/UX-дизайнерам и инди-хакерам, которые хотят внедрять интерактивную векторную графику уровня Spotify Recap и Duolingo в свои веб- и мобильные приложения.

✨ Что получите: Пошаговый пайплайн генерации интерактивных состояний, кнопок, лоадеров, 2D-персонажей и перенос 3D-моделей из Blender в Rive через текстовые промпты и MCP-инструменты.

1. Подключение Rive CLI к Claude Code

Контекст: Rive — это стандарт интерактивной векторной графики нового поколения (в отличие от Lottie, Rive поддерживает стейт-машины, логику переходов, реакцию на курсор и нажатия). Раньше на сборку графа состояний вручную в редакторе уходили часы. С появлением Rive CLI этот процесс автоматизируется: агент генерирует разметку, векторную геометрию и логику интерактивности по текстовому описанию. Для работы подходит бесплатный аккаунт Rive (платный нужен только для удаления сплеш-скрина при экспорте).

Тайминг: ▶ 00:48, ▶ 01:07

Выгода: Сокращение времени на создание прототипов интерактивной анимации с нескольких часов до 1-2 минут.

Как применить:

• Шаг 1: Подготовка окружения — Зарегистрируйтесь на сайте Rive на бесплатном тарифе.
• Шаг 2: Настройка проекта в Claude Code — Создайте рабочую директорию, запустите Claude Code с моделью Claude 3.5 Sonnet / Opus на максимальном уровне усилий (high effort) и активируйте флаг автоматического подтверждения разрешений.
• Шаг 3: Инициализация Rive CLI — Скопируйте команду инициализации из документации Rive и выполните в терминале агента:

# Создание папки и переход в проект
mkdir rive-animations && cd rive-animations
 
# Запуск Claude Code с обходом запросов разрешений
claude --dangerously-skip-permissions

Внутри сессии Claude Code подключите CLI Rive:

npm install -g @rive-app/cli

Результат: AI-агент получает доступ к CLI Rive и готов напрямую создавать .riv файлы и интерактивные стейт-машины.

2. Генерация интерактивных состояний по статичным референсам

Контекст: Векторные анимации в Rive строятся не по кадрам (pixels), а на основе математических кривых и логики состояний (State Machine). Claude Code способен взять статичное изображение или два скриншота (состояние «до» и состояние «после») и самостоятельно рассчитать промежуточные интерполяции, логику наведения курсора (hover) и динамическую деформацию векторов.

Тайминг: ▶ 01:34, ▶ 02:06, ▶ 02:26

Выгода: Создание векторных UI-эффектов без необходимости вручную проставлять ключевые кадры и настраивать easing-кривые.

Как применить:

• Шаг 1: Пример с динамической физикой линий — Скормите агенту референс градиентных линий и опишите поведение физики:

Rebuild this image using Rive CLI: make the lines blue and the background black. 
When hovering over the lines, they should dynamically react and bend like stiff guitar strings based on the mouse cursor position. Ensure the curvature follows the exact cursor coordinates.

• Шаг 2: Пример с пошаговым UI-инпутом (Prompt Box) — Передайте агенту два скриншота интерфейса (1: свернутый инпут, 2: развернутый блок с генерацией) и примените промпт:

Build an interactive Rive animation based on these two screenshots:
- State 1: Collapsed prompt rectangle with a blinking cursor.
- State 2: Expanded image box with typing animation and fade-in transition.
Trigger: Transition from State 1 to State 2 on mouse hover.
Output pure sharp vectors without raster artifacts.

• Шаг 3: Создание термостата с переключением режимов — Передайте раскадровку интерфейса климат-контроля для генерации градиентов и переключателей:

Create an interactive thermostat widget in Rive.
Features:
- Mouse drag around the dial changes the temperature value and background gradient from cold (blue) to warm (orange).
- Add 3 toggle buttons: 'Hot', 'Cold', 'Eco' with active states.

Результат: Готовые интерактивные .riv компоненты, которые реагируют на координаты мыши и клики в реальном времени.

3. Клонирование и ремикс существующих веб-компонентов

Контекст: Агент может анализировать существующие сайты с анимациями (например, Bento Grid на brand.dropbox.com), деконструировать их макет на отдельные карточки, воссоздавать логику взаимодействия и затем стилизовать под дизайн-систему вашего продукта.

Тайминг: ▶ 02:52, ▶ 03:26, ▶ 03:68

Выгода: Быстрый реверс-инжиниринг сложных веб-паттернов топовых брендов и адаптация под собственный UI без ручной отрисовки в Figma.

Как применить:

• Шаг 1: Анализ структуры веб-страницы — Передайте URL страницы агенту и запросите разбор структуры:

Go to https://brand.dropbox.com, scroll down and analyze the bento grid section. 
Extract the layout structure, list what each card consists of, and recreate this entire Bento Grid in Rive with smooth hover interactions for each component (locks, shapes, transitions).

• Шаг 2: Ремикс стиля и контекста — Превратите полученную сетку в кастомный дашборд с неоновым свечением при наведении:

Take the Bento Grid created in the previous step and adapt its visual style to match a dark cyberpunk Claude Code theme. 
- Replace Dropbox assets with glowing code editor cards.
- Add dynamic edge lighting / glow effects when hovering over each card.

Результат: Интерактивная Bento Grid сетка со сложной логикой подсветки карточек, готовая к встраиванию в веб-приложение.

4. Пайплайн персонажной анимации: ChatGPT + Mobbin MCP + Higgsfield MCP

Контекст: Для создания анимированных персонажей (как в Duolingo или Finch) требуется риггинг костей (bones) и логика переходов между состояниями (idle, hover, action). С помощью связки специализированных MCP-серверов агент находит паттерны в базе Mobbin, генерирует консистентные спрайты через Image API и настраивает скелетную анимацию в Rive.

Тайминг: ▶ 03:88, ▶ 04:34, ▶ 05:36

Выгода: Создание интерактивного маскота для онбординга или экранов загрузки без привлечения моушн-дизайнера.

Как применить:

• Шаг 1: Поиск референсов через Mobbin MCP — Подключите Mobbin MCP к Claude Code и найдите лучшие паттерны загрузочных экранов:

Use the Mobbin connector to search for mobile/web app loading screens and onboarding flows that feature 2D animated characters and micro-interactions. Focus on apps like Finch and Duolingo.

• Шаг 2: Генерация исходного персонажа — Сгенерируйте векторного персонажа в ChatGPT / DALL-E (например: белый кролик «Марк», который пишет код за ноутбуком).
• Шаг 3: Генерация дополнительных поз через Higgsfield MCP — Для сохранения консистентности персонажа используйте Higgsfield MCP с моделью GPT Images:

Generate consistent pose variations of the rabbit character 'Mark':
1. State 'idle_coding': Sitting, intensely typing on laptop.
2. State 'hover_wave': Looks up from laptop, smiles, and waves hand saying hello.
Keep character proportions, line weights, and colors identical.

• Шаг 4: Сборка интерактивного лоадера в Rive — Скомпонуйте финальный компонент:

Build a circular loading UI component in Rive containing the rabbit character 'Mark':
- Default loop: Fast typing animation on the laptop inside a progress circle.
- Mouse hover trigger: Interrupts typing, triggers the waving hello animation smoothly.
- Mouse leave: Transitions back to typing loop.

Результат: Живой анимированный лоадер с персонажем, готовый к интеграции в процесс регистрации или загрузки приложения.

5. 3D-to-2D пайплайн: Автоматизация Blender через Codex и экспорт в Rive

Контекст: Для создания сложных псевдо-3D интерактивностей (например, сундук с сокровищами или интерактивная лампа) эффективен комбинированный пайплайн: AI-агент Codex берет на себя управление Blender, строит 3D-модель, выстраивает кости (rigging) и базовую анимацию. Затем эти данные импортируются в Rive через CLI, где поверх накладывается векторный стиль и стейт-машина.

Тайминг: ▶ 05:80, ▶ 06:22, ▶ 06:38

Выгода: Создание физически точных трехмерных трансформаций и анимаций с минимальным ручным 3D-моделированием.

Как применить:

• Шаг 1: Автогенерация и риггинг модели в Blender через Codex — Используйте Codex для запуска скриптов моделирования в Blender:

Open Blender via CLI/automation. Build a low-poly stylized desk lamp model. 
Create an armature rig for the lamp head and joints. 
Animate a state transition: from closed (dimmed/off) to fully opened (perked up/illuminated).

• Шаг 2: Интеграция рига в Rive через Claude Code — Перенесите координаты и логику в Rive для создания интерактивного таймера фокуса:

Build an interactive Focus Timer UI around the generated lamp model in Rive, matching the 2D illustration style:
1. Hover State: Lamp perks up, switches on with a soft warm glow.
2. Unhover State: Lamp gently settles down and dims.
3. Click Trigger: Starts a focus countdown timer, keeps the lamp fully lit, and reveals Pause and Reset controls.
4. Pause Trigger: Lamp goes into a 'sleeping' position.

Результат: Интерактивный UI-виджет таймера продуктивности с плавной 3D-кинематикой, работающий полностью на векторном движке Rive.

FAQ

В: В чем главное отличие Rive от Lottie? О: Lottie — это статичный рендеринг запеченной покадровой анимации (JSON), который сложно сделать интерактивным без написания большого объема JavaScript. Rive работает на собственном графическом движке, поддерживает стейт-машины (State Machines), кости (skeletal rigging), переменные ввода (boolean, number, trigger) и вычисляет анимации в рантайме с частотой 60/120 FPS при минимальном весе файла.

В: Нужен ли платный тариф Rive для работы через Claude Code? О: Нет, бесплатный тариф Rive предоставляет полный доступ к веб-редактору и Rive CLI. Платная подписка требуется только в том случае, если вам необходимо убрать водяной знак (splash screen) при конечном продакшен-экспорте файлов.

В: Как встроить полученный .riv файл в React / Next.js проект? О: Для React существует официальный пакет @rive-app/react-canvas. Достаточно установить его через npm install @rive-app/react-canvas, импортировать хук useRive и передать путь к файлу .riv вместе с именем стейт-машины.

В: Какую модель Claude лучше использовать для работы с Rive CLI? О: Рекомендуется использовать модель Claude 3.5 Sonnet или Claude 3 Opus с параметром high effort. Они лучше всего понимают пространственные координаты векторов, математические интерполяции кривых и синтаксис стейт-машин Rive.

В: Что делать, если AI-агент генерирует неаккуратные края или сломанную анимацию? О: Разбейте задачу на итерации: сначала попросите агента создать базовую геометрию и зафиксировать ключевые точки, затем передайте референс правильного кадра через MCP (например, Higgsfield) для генерации промежуточных поз, и только в конце связывайте их триггерами стейт-машины.

Ресурсы и ссылки

• Rive — Платформа для создания интерактивных рантайм-анимаций и UI — https://rive.app
• Rive CLI (@rive-app/cli) — Официальный CLI-инструмент для программного управления ассетами Rive — https://www.npmjs.com/package/@rive-app/cli
• Claude Code — Терминальный AI-агент от Anthropic — https://claude.ai
• Mobbin — Библиотека скриншотов и UX-паттернов реальных мобильных и веб-приложений — https://mobbin.com
• Blender — Open-source пакет для 3D-моделирования и анимации — https://www.blender.org

Конспект создан на основе видео «Rive CLI + Claude Code» канала по вайбкодингу. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=Hrcq00y9EhU