Claude Code + Remotion — делаем шортсы для Инсты и TikTok одними промптами
Claude Code + Remotion — делаем шортсы для Инсты и TikTok одними промптами
В январе 2026-го Remotion выкатил Agent Skills — и Claude Code научился делать видео. Не «сгенерировать текст на слайде», а полноценное видео с анимациями, переходами и рендером в MP4. Демо-ролик от Remotion с фиолетовыми переходами набрал 6 миллионов просмотров за неделю.
Штука в том, что Remotion — это React для видео. Каждый кадр — React-компонент. А Claude Code умеет писать React. Складываешь два и два — и получаешь конвейер: описываешь шортс словами → Claude генерит код → Remotion рендерит видео. Без After Effects, без монтажных программ, без навыков видеопродакшена.
TL;DR: Remotion превращает React-компоненты в видео, Claude Code пишет эти компоненты по промптам. Настройка — 5 минут. Вертикальный формат 1080×1920 задаётся одной строчкой. Первый шортс получите за 30-40 минут, включая итерации. Бесплатно для индивидуалов и команд до 3 человек.
Как это работает под капотом
Remotion рендерит React-компоненты покадрово. Хук useCurrentFrame() возвращает номер текущего кадра, функция interpolate() делает плавные анимации между значениями. По сути, ты описываешь что должно быть на экране в каждый момент времени — а Remotion собирает это в видеофайл.
Claude Code с установленными Agent Skills знает API Remotion — как создавать <Composition>, как работают <Sequence>, <AbsoluteFill>, spring() и interpolate(). Ты пишешь промпт на человеческом языке, Claude генерит TypeScript-код, Remotion Studio показывает превью в браузере, и после итераций ты рендеришь финальный MP4.
Настройка за 5 минут
# 1. Создаём проект npx create-video@latest # Выбираем: Blank template, TailwindCSS — Yes, Install Skills — Yes
При создании проекта Remotion предложит установить Agent Skills — соглашайтесь. Если пропустили — добавьте вручную:
npx skills add remotion-dev/skills
# 2. Запускаем превью cd my-video npm install npm run dev
# 3. В отдельном терминале — запускаем Claude Code cd my-video claude
Всё. Claude Code уже знает про Remotion и готов генерить видео. Никаких дополнительных плагинов, MCP-серверов или конфигов.
Вертикальный формат для шортсов
По умолчанию Remotion создаёт горизонтальное видео 1920×1080. Для шортсов нужен формат 9:16 — 1080×1920. Меняется одной строчкой в Composition:
<Composition
id="my-short"
component={MyShort}
width={1080}
height={1920}
fps={30}
durationInFrames={30 * 30} // 30 секунд
/>
Можно держать несколько Composition в одном проекте — горизонтальный формат для YouTube, квадрат для ленты Инсты, вертикальный для шортсов. Всё это прописывается в файле src/Root.tsx — точке входа, где Remotion регистрирует все ваши видео:
// src/Root.tsx
import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="youtube"
component={MyVideo}
width={1920}
height={1080}
fps={30}
durationInFrames={900}
/>
<Composition
id="instagram-feed"
component={MyVideo}
width={1080}
height={1080}
fps={30}
durationInFrames={900}
/>
<Composition
id="short"
component={MyVideo}
width={1080}
height={1920}
fps={30}
durationInFrames={900}
/>
</>
);
};
Когда запускаете npm run dev, в Remotion Studio слева появится список из трёх Composition — переключаетесь между ними и видите, как один и тот же контент выглядит в разных форматах. При рендере указываете нужный ID:
npx remotion render src/index.ts short out/my-short.mp4 --crf=18 npx remotion render src/index.ts youtube out/my-youtube.mp4 --crf=18
Промпты, которые реально работают
Главное правило — чем конкретнее промпт, тем меньше итераций. Вот формула:
Длительность + платформа + структура сцен + визуальный стиль + брендинг
Промпт для рекламного шортса
Создай 20-секундный вертикальный шортс 1080x1920 для Instagram Reels. Структура: - 0-3 сек: логотип плавно появляется по центру (spring-анимация) - 3-8 сек: три фичи продукта по очереди, каждая — крупный текст + иконка - 8-15 сек: скриншот интерфейса с zoom-эффектом - 15-18 сек: отзыв пользователя с цитатой - 18-20 сек: CTA "Попробуй бесплатно" + кнопка с пульсацией Стиль: тёмный фон #0A0A0A, акцентный цвет #7C3AED (фиолетовый), шрифт Inter, плавные переходы между сценами.
Промпт для dev-контента
Создай 15-секундный вертикальный шортс 1080x1920 в формате "coding tip". - 0-2 сек: крупный текст "СТОП. Ты делаешь git push неправильно" появляется с glitch-эффектом - 2-10 сек: блок кода — сначала показываем "плохой" вариант (красная подсветка), потом он трансформируется в "хороший" (зелёная подсветка) - 10-15 сек: текст "Сохрани, чтобы не забыть" + анимированная стрелка вниз Стиль: моноширинный шрифт, фон как в терминале, неоновые акценты.
Claude Code сгенерит 90% того, что нужно, с первого раза — если дать конкретные тайминги и визуальные указания. Без таймингов он начнёт импровизировать, и придётся править.
Форматы шортсов, которые залетают в 2026
Не все форматы одинаково хорошо ложатся на Remotion. Вот что реально работает для дев-контента (по данным Miraflow):
"3 совета за 30 секунд" — идеально для Remotion. Три слайда с анимированным текстом, каждый по 8-10 секунд. Минимум ассетов, максимум пользы. Пример: «3 команды Claude Code, которые экономят 50% токенов».
Before/After — тоже отлично. Показываешь «плохой» код слева, он трансформируется в «хороший» справа. Или: «Раньше делал видео в Premiere за 4 часа → Теперь за 30 минут в Claude Code». Визуальный контраст + конкретика = сохранения.
"Ты делаешь это неправильно" — срабатывает на любой платформе. Хук в первые 2 секунды, потом — разбор ошибки и правильный вариант. Формат провокационный, досматриваемость высокая.
Ultra-Short Tutorial — одна микро-фишка за 15 секунд. «Как сделать шортс одним промптом в Claude Code» — мета-контент, который сам по себе продвигает инструмент.
Продвинутый уровень — готовые тулкиты
Когда базовой связки Remotion + Claude Code мало, есть два тулкита с готовыми компонентами.
Claude Code Video Toolkit
digitalsamba/claude-code-video-toolkit — полноценный продакшен-стек:
- 11 готовых компонентов — от титульных слайдов до блоков кода
- 11 переходов — glitch, RGB split, zoom blur, light leak, pixelate, checkerboard + 4 стандартных от Remotion (slide, fade, wipe, flip)
- Система брендинга —
/brandсоздаёт профиль с цветами, шрифтами и логотипом, дальше каждое видео автоматически брендируется - Запись демо —
/record-demoзахватывает действия в браузере через Playwright
Установка:
git clone https://github.com/digitalsamba/claude-code-video-toolkit.git cd claude-code-video-toolkit cp .env.example .env npm install claude
Дальше просто /video — и Claude Code ведёт тебя по всему процессу.
Claude Remotion Kickstart
jhartquist/claude-remotion-kickstart — стартер-кит с фокусом на AI-генерацию ассетов:
- Готовые пресеты — 16:9, 1:1, 9:16 на 60fps из коробки
- Компоненты — TitleSlide, CodeSlide, ContentSlide, BRollVideo, AsciiPlayer
- AI-интеграции — генерация картинок через Replicate, озвучка через ElevenLabs, транскрипция через Deepgram
/generate-image,/generate-video,/transcribe— всё через слеш-команды
Для шортсов Kickstart удобнее стандартного Remotion — не нужно руками прописывать пресеты вертикального формата, всё уже настроено.
Озвучка и субтитры
Шортс без звука — это слайд-шоу. Два варианта добавить голос:
ElevenLabs (через Kickstart или вручную) — генерируешь аудио из текста, кладёшь в public/audio/, подключаешь через <Audio> компонент Remotion. Утилита secondsToFrames() из Kickstart синхронизирует визуал с озвучкой.
Собственная запись — записываешь голос, кладёшь MP3 в проект. Claude Code поможет расставить тайминги анимаций под аудио, если указать длительность фраз в промпте.
Субтитры — критически важны, потому что большинство шортсов смотрят без звука. Попросите Claude Code добавить анимированные субтитры с появлением по словам — Remotion это умеет нативно через <Sequence> с задержками.
Рендер и экспорт
Когда шортс выглядит хорошо в Remotion Studio (превью в браузере на localhost:3000), рендерим финал:
npx remotion render src/index.ts short out/my-short.mp4 --crf=18
short— ID вашей Composition--crf=18— оптимальный баланс качества и размера файла. Ниже = лучше качество, больше файл. Для шортсов 18 — идеально- Формат H.264 (MP4) — принимается всеми платформами
Совет: во время итераций рендерите в 720p (--height=1280 --width=720) — быстрее в 3-4 раза. Финальный рендер — в полном 1080×1920.
Remotion также поддерживает WebM, ProRes, GIF и AV1 — но для шортсов MP4 с H.264 это стандарт, который не отвергнёт ни одна платформа.
Подводные камни
Шрифты слетают при рендере. В превью всё красиво, а в финальном MP4 — Times New Roman. Причина: Google Fonts не загрузились при рендере. Решение — импортируйте шрифты в корне компонента или используйте web-safe шрифты (Inter, Arial, Roboto) с правильным @import. Всегда рендерите тестовый 3-секундный клип перед полным видео.
Тайминги поплыли. Claude Code иногда путает секунды и кадры. Если задаёте длительность, лучше указывать кадры напрямую: «с 0 по 90 кадр» вместо «первые 3 секунды». При 30fps — 90 кадров = 3 секунды. Формула простая: секунды × fps = кадры.
Первый рендер — 90%, не 100%. Ожидайте 2-3 итерации. Типичные проблемы: текст не по центру, highlight-бокс слишком маленький, позиционирование элементов слегка съехало. Это нормально — просто уточняете промпт и Claude Code фиксит.
Blur-эффекты тормозят рендер. Размытие (filter: blur()) в Remotion рендерится покадрово и замедляет процесс в 5-10 раз. Для шортсов лучше обойтись тенями и градиентами вместо blur — выглядит не хуже, а рендерится мгновенно.
Лицензия Remotion не бесплатна для компаний. Индивидуалы и команды до 3 человек — бесплатно. Компании от 4 человек платят от $25/мес (Creators) до $100/мес (Automators). Плюс подписка на Claude Code $20-100/мес. Сравните с After Effects ($34-60/мес + 40-80 часов на обучение) — всё равно дешевле, но не ноль.
Для трендового контента конвейер медленный. Если нужно залить шортс через 20 минут после выхода новости — Remotion не для этого. Рендер + итерации занимают 30-40 минут минимум. Зато для серийного контента (еженедельные tips, product updates) — идеально, потому что шаблоны переиспользуются.
Вердикт
Связка Claude Code + Remotion — это не замена видеоредактора, а новый класс инструмента. Она работает лучше всего для шаблонного контента: серии coding tips, продуктовые анонсы, объяснения фич. Один раз настроил стиль, дальше меняешь только текст и тайминги — Claude Code штампует вариации за минуты.
Из всего стека реальную разницу делают три вещи: правильный промпт с конкретными таймингами (экономит 2-3 итерации), готовый тулкит с компонентами (экономит часы на базовых элементах), и формат 9:16 в конфиге сразу (чтобы не переделывать горизонтальное видео потом).
Для индивидуалов и маленьких команд это бесплатно и реально работает. Для компаний — всё равно дешевле и быстрее, чем After Effects + моушн-дизайнер.
Как попробовать
1. Установите Claude Code и Node.js, если ещё нет
2. Создайте проект:
npx create-video@latest # При настройке: Blank, TailwindCSS: Yes, Skills: Yes cd my-video && npm install
3. Запустите превью и Claude Code:
npm run dev # в первом терминале claude # во втором терминале
4. Попробуйте этот промпт:
Создай 15-секундный вертикальный шортс 1080x1920 для Instagram. Тёмный фон, яркий акцентный цвет. 0-3 сек: крупный текст "AI делает видео" с spring-анимацией. 3-10 сек: три пункта появляются по очереди снизу. 10-15 сек: текст "Claude Code + Remotion" и пульсирующая кнопка "Попробуй".
5. Посмотрите результат в браузере на localhost:3000, подкорректируйте промпт, и рендерите:
npx remotion render src/index.ts short out/my-short.mp4 --crf=18
