ГлавнаяМатериалы из Reels/ShortsЧек-лист
Чек-лист
кодовое словоМоушн

Claude Opus: моушн-анимация кодом без монтажки

Поставишь связку Claude Code + Remotion, дашь Opus первый промпт со сценой, шаром и кинетической типографикой и отрендеришь вертикальный ролик 9:16 - без таймлайна, ключевых кадров и монтажки.

Содержание4 глав
  1. 01Чем код превращается в видео и как это поставить
  2. 02Как править анимацию словами, без таймлайна и ключевых кадров
  3. 03Как отрендерить вертикальный ролик 9:16 для Reels и Shorts
  4. 04Проверь себя

Шаг 1

Чем код превращается в видео и как это поставить

Видео здесь - это React-компоненты. Remotion рендерит их кадр за кадром в MP4, а Claude Opus в Claude Code пишет этот код по твоему описанию. Ты говоришь словами, что происходит в кадре, - Opus пишет компонент, Remotion собирает ролик.

01
Поставь Node.js
Нужен Node 16 или новее (или Bun 1.0.3+). На macOS Remotion работает с версии 15 (Sequoia) и новее. Проверка: node -v
02
Поставь Claude Code
macOS, Linux, WSL: curl -fsSL https://claude.ai/install.sh | bash. Windows PowerShell: irm https://claude.ai/install.ps1 | iex. Открой новый терминал и проверь: claude --version.
03
Создай проект Remotion
npx create-video@latest - выбери шаблон Blank или Hello World. При создании мастер предложит добавить скиллы для агента - соглашайся
04
Добавь скиллы Remotion для Claude Code
Если не добавил на прошлом шаге: npx skills add remotion-dev/skills в папке проекта. Это правила Remotion для агента - анимация, тайминг, шрифты, рендер
05
Запусти превью
npm run dev - откроется Remotion Studio в браузере. Тут смотришь, что получилось, и скроллишь по кадрам
06
Запусти Claude на Opus
Во втором терминале в папке проекта: claude, затем внутри сессии /model opus
curl -fsSL https://claude.ai/install.sh | bash
npx create-video@latest
cd my-video
npx skills add remotion-dev/skills
npm run dev

Всё подряд - macOS / Linux

Remotion - документация

Скиллы Remotion для Claude Code

Установка Claude Code

Шаг 2

Описывай как режиссёр: что в кадре, что двигается, с какой скоростью и в какой момент. Секунды и цвета - конкретно. Вставь в Claude Code целиком:

Первый промпт для Claude Opus: сцена, шар, кинетическая типографика9 строк · 1002 знака
Use the remotion-best-practices skill.
Create a new composition "Showreel": 1080x1920, 30 fps, 12 seconds.

Scene 1 (0-3s): near-black background #0A0B0D. A glossy orange-red 3D-looking ball (radial gradient, soft highlight top-left) falls from the top, bounces twice in the center with realistic squash and stretch, then stops.
Scene 2 (3-6s): the ball rolls to the left, the background smoothly changes from black to warm beige #F0E6D2. The word "direct." in a heavy rounded sans-serif, orange-red, assembles letter by letter from below with a spring animation.
Scene 3 (6-9s): the letters of "direct." scatter in different directions and re-assemble into the word "claude" in white with a hard black drop shadow.
Scene 4 (9-12s): behind "claude" a large pink-orange liquid blob morphs slowly and fills the frame.

All motion with spring() and interpolate() from Remotion, no CSS transitions. Keep every scene in its own <Sequence>. Register the composition in Root.tsx and tell me how to preview it.

Промпт - вставь как есть

Правило
Одна сцена - один абзац промпта. Сначала пусть Opus соберёт весь ролик грубо, детали докручивай потом правками. Длинный промпт на десять сцен с первого раза собирается хуже.
  • Вставь промпт в Claude Code и разреши ему создать файлы
  • Открой Remotion Studio и выбери композицию Showreel
  • Прокрути ролик по кадрам и выпиши, что не нравится

Шаг 3

Как править анимацию словами, без таймлайна и ключевых кадров

Ползунки не трогаешь. Пишешь в тот же чат, что поменять, - Opus правит код, Studio обновляет превью сам. Примеры правок:

  • Ball should fall slower, about 1.2 seconds, and bounce only once.
  • Make the background transition from black to beige 2x longer and ease-in-out.
  • Letters of "direct." should come in with a 3-frame stagger, not all at once.
  • When the letters scatter, add slight rotation and motion blur.
  • Shift the whole scene 3 by 10 frames later so it lands on the beat.
  • Make the blob in scene 4 move 30% slower and add a thin pink outline.
Важно
Называй сцену и время: «сцена 2, с 3-й по 4-ю секунду». Opus меняет ровно это место, а не переписывает весь ролик. Понравилась версия - попроси сделать git commit, чтобы было куда откатиться.
  • Сделай минимум три правки словами и посмотри каждую в Studio
  • Попроси Opus вынести цвета и тексты в props, чтобы менять их без кода
  • Сохрани удачную версию коммитом

Шаг 4

Как отрендерить вертикальный ролик 9:16 для Reels и Shorts

Вертикаль задаётся в композиции: ширина 1080, высота 1920. Проверь Root.tsx - должно быть так:

<Composition
  id="Showreel"
  component={Showreel}
  width={1080}
  height={1920}
  fps={30}
  durationInFrames={12 * 30}
/>

src/Root.tsx

npx remotion render Showreel out/showreel.mp4 --codec=h264

Рендер в MP4 (H.264 - то, что принимают Reels и Shorts)

01
Проверь кусок до полного рендера
npx remotion render Showreel out/test.mp4 --frames=0-89 - отрендерит только первые 3 секунды
02
Отрендери целиком
Команда выше. Готовый файл - в папке out
03
Залей
MP4 1080x1920 идёт в Reels, Shorts и TikTok без перекодирования. Музыку добавь в приложении площадки или попроси Opus подложить трек через <Audio>

Команда render - все флаги

Финал

Проверь себя

  • Claude Code стоит: claude --version печатает версию
  • Проект Remotion создан, npm run dev открывает Studio
  • Скиллы remotion-dev/skills добавлены в проект
  • В сессии Claude выбран Opus через /model opus
  • Первый промпт собрал композицию Showreel 1080x1920
  • Сделал минимум три правки словами, без таймлайна
  • Отрендерил out/showreel.mp4 и посмотрел его на телефоне
Скачать материал