AI Cube

Анимации без дизайнера

Раньше для лоадера или анимированной иконки нужен был дизайнер с After Effects, экспорт через Bodymovin, правки туда-обратно и неделя ожидания. Цена вопроса — 3–10 тысяч рублей за один элемент.

Теперь ты описываешь что хочешь в одной строке — и Claude Code генерирует валидный Lottie JSON за секунды. Меняешь параметры голосом прямо в чате.

Как это работает

Lottie — открытый формат анимаций на основе JSON, разработанный Airbnb. Описывает траектории, цвета, таймлайны в виде JSON-структуры.

Claude Code обучен на тысячах Lottie-файлов и понимает структуру формата. Ты говоришь ему что должно двигаться и как — он генерирует корректный JSON.

Lottie поддерживается нативно в iOS, Android, React Native, веб и большинстве фреймворков. Один файл — везде.

Установка за 2 минуты

# Установка плеера
npm install lottie-web

# Или через CDN — просто добавь в HTML:
# https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js

Базовое подключение в HTML:

<div id="animation" style="width:400px;height:400px"></div>

<script src="lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('animation'),
    renderer: 'svg',   // svg / canvas / html
    loop: true,
    autoplay: true,
    path: 'animation.json'  // файл от Claude Code
  });
</script>

Промпты для 5 типов анимаций

5 типов Lottie-анимаций с готовыми промптами

1. Лоадер / спиннер

Создай Lottie JSON: три точки пульсируют по очереди слева направо,
цвет #6366F1, размер 200x80px, бесконечный цикл, длительность 1.2 сек.
Сохрани в loader.json

2. Иконка успеха

Lottie-анимация: круг рисуется по часовой стрелке (1 сек),
затем внутри появляется галочка (0.5 сек). Цвет #22C55E, размер 300x300px,
однократная анимация. Сохрани в success.json

3. Частицы / фон

20 маленьких звёздочек (размер 6px) летят снизу вверх с небольшим разбросом
по X (±80px), случайная задержка старта 0-2 сек, прозрачность от 1 до 0
при достижении верха. Белые частицы, размер 800x600px, бесконечно.
Сохрани в particles.json

4. Typewriter эффект

Текст "Hello World" появляется буква за буквой с курсором,
интервал 0.12 сек между буквами, шрифт монospace 48px, чёрный.
После последней буквы курсор мигает 3 раза и исчезает.
Размер 600x100px. Сохрани в typewriter.json

5. Редактирование голосом

# После генерации можно изменить что угодно:
Измени цвет точек с #6366F1 на оранжевый #F97316
Ускорь анимацию вдвое
Добавь вторую волну, смещённую на 0.6 секунды

Claude находит нужные числа в JSON и меняет значения. Не нужно разбираться в структуре файла.

Интеграция в React / Next.js

npm install lottie-react

import Lottie from 'lottie-react';
import loaderAnimation from './loader.json';
import successAnimation from './success.json';

// Лоадер
export function Loader() {
  return <Lottie animationData={loaderAnimation} loop style={{ width: 80 }} />;
}

// Иконка успеха (однократная, колбэк по завершению)
export function SuccessIcon({ onComplete }: { onComplete?: () => void }) {
  return (
    <Lottie
      animationData={successAnimation}
      loop={false}
      onComplete={onComplete}
      style={{ width: 120 }}
    />
  );
}

Для React Native: lottie-react-native — тот же JSON-файл, та же анимация на мобиле.