Монтаж кодом через Claude Code: инструкция
Ставишь Claude Code, Remotion и ffmpeg, подключаешь скиллы и ведёшь агента по шагам - от сценария до готового MP4 в 9:16, 16:9 и 1:1. Анимации, монтаж живого видео, озвучка и звук собираются кодом у тебя на компьютере, без After Effects и Premiere.
Содержание8 глав
Шаг 1
Поставь инструменты
Связка простая: Claude Code пишет код, Remotion превращает React-код в видео, ffmpeg режет и сводит звук. Нужен платный аккаунт Claude (Pro, Max) или ключ API.
curl -fsSL https://claude.ai/install.sh | bash
Claude Code - macOS, Linux, WSL
brew install node ffmpeg
Node.js и ffmpeg - macOS
Шаг 2
Создай проект и подключи скиллы Remotion
Скиллы - это инструкции для агента: как делать композиции, анимации, субтитры, звук и выгрузку. С ними Claude Code пишет рабочий Remotion-код с первого раза, а не угадывает API.
npx create-video@latest --yes --blank my-video
cd my-video
npx remotion skills add
npx remotion add @remotion/three
npm i three @react-three/fiber @types/three gsap
npx remotion add @remotion/captions
npx remotion add @remotion/install-whisper-cpp
Проект, скиллы и библиотеки анимации - по очереди
npx remotion studio
Превью в браузере - держи открытым всё время работы
Шаг 3
Анимированные объяснялки кодом
Canvas и SVG - для схем и графиков, Three.js - для 3D, GSAP - для таймлайнов и плавных движений. Запусти claude в папке my-video и вставь промт.
Промт 19 строк · 620 знаков
Ты моушн-дизайнер. Работаешь в этом Remotion-проекте по скиллам remotion-best-practices. Сделай композицию Explainer: 30 fps, 1080x1920, длительность по тексту ниже. Текст объяснялки: <вставь свой текст> Правила: - каждая мысль - отдельная сцена 2-4 секунды; - схемы и графики рисуй на SVG или Canvas, 3D-объекты - через @remotion/three; - движения строй на GSAP-таймлайне, привязанном к useCurrentFrame(), без setTimeout и CSS-анимаций; - один шрифт, 2-3 цвета, крупный текст, который читается с телефона; - до кода покажи мне раскадровку списком: сцена, что на экране, сколько секунд. Код пиши только после моего «ок».
Промт: моушн-дизайнер
Шаг 4
Монтаж живого видео
Положи исходники в папку public/ проекта. Субтитры Claude Code сделает через whisper.cpp с таймингом до слова, текст за спиной у человека - через вырезку фигуры rembg.
pip install "rembg[cpu,cli]"
Вырезка человека для текста за спиной (нужен Python)
Промт 17 строк · 604 знака
Ты монтажёр. Исходник: public/raw.mp4. 1. Расшифруй речь через @remotion/install-whisper-cpp (модель medium) с таймингом слов, сохрани в public/captions.json. 2. Предложи план монтажа таблицей: таймкод, что вырезаем (паузы, оговорки, дубли), где резкий наезд (scale 1.0 -> 1.15 за 3 кадра), где перебивка и какая. 3. Субтитры: 2-4 слова на экране, текущее слово подсвечено, низ кадра с отступом под интерфейс площадки. 4. Текст за спиной: вытащи кадры ffmpeg, вырежи человека через rembg, собери слои фон -> текст -> человек. 5. Перебивки бери из public/broll/. Ничего не собирай, пока я не утвержу план.
Промт: монтажёр
Шаг 5
Озвучка ElevenLabs и звук под площадки
Метод API with-timestamps возвращает к аудио время начала и конца каждого символа - по нему анимации и субтитры встают ровно на слово. Ключ API возьми в кабинете ElevenLabs и положи в .env как ELEVENLABS_API_KEY.
ElevenLabs: озвучка с таймингом
Ты звукорежиссёр.
1. Напиши скрипт scripts/voice.mjs: берёт текст из script.txt, вызывает POST https://api.elevenlabs.io/v1/text-to-speech/<voice_id>/with-timestamps с ключом из .env, сохраняет public/voice.mp3 и public/alignment.json (characters, character_start_times_seconds, character_end_times_seconds).
2. Собери из alignment тайминги слов и привяжи к ним появление сцен и субтитров.
3. Звуки (whoosh, щелчки, удары) ставь на кадр начала движения, музыку приглушай под голос.
4. Финальный звук нормализуй ffmpeg loudnorm до -14 LUFS, true peak -1 dB.
Промт: звукорежиссёр
ffmpeg -i out/video.mp4 -c:v copy -af loudnorm=I=-14:TP=-1:LRA=11 out/video-final.mp4
Сведение громкости под площадки - ffmpeg
Шаг 6
Порядок с остановками
Секрет - не давать агенту делать всё за один заход. Каждая остановка - твоя проверка, без неё получается каша.
Промт 12 строки · 236 знаков
Работа над видео идёт в 4 этапа: сценарий -> план монтажа -> превью в Remotion Studio -> финальный MP4. После каждого этапа остановись и жди моего «ок». Не переходи к следующему этапу и не запускай npx remotion render без подтверждения.
Правило в CLAUDE.md проекта - агент будет останавливаться сам
npx remotion render Explainer out/video-9x16.mp4 --codec=h264 --width=1080 --height=1920
npx remotion render Explainer out/video-16x9.mp4 --codec=h264 --width=1920 --height=1080
npx remotion render Explainer out/video-1x1.mp4 --codec=h264 --width=1080 --height=1080
MP4 в трёх форматах (Explainer - id композиции)
Шаг 7
То же самое в Codex и Cursor
Проект Remotion и команды те же. Скиллы ставятся общей командой для агентов, правило с остановками положи в AGENTS.md (Codex) или в правила проекта Cursor.
npx skills add remotion-dev/skills
Скиллы Remotion для любого агента
npm install -g @openai/codex
Codex - установка
Финал
Проверь себя
- Поставить Claude Code и проверить claude --version
- Поставить Node.js и ffmpeg, проверить node -v и ffmpeg -version
- Создать проект my-video и подключить скиллы Remotion
- Добавить Three.js, GSAP, субтитры и whisper.cpp
- Открыть превью npx remotion studio
- Собрать первую объяснялку промтом моушн-дизайнера
- Смонтировать живое видео: склейки, наезды, субтитры, перебивки, текст за спиной
- Сделать озвучку ElevenLabs с таймингом и привязать к ней сцены
- Свести громкость до -14 LUFS через ffmpeg
- Записать правило с остановками в CLAUDE.md
- Пройти сценарий -> план -> превью -> финал и выгрузить MP4 в 9:16, 16:9 и 1:1
