Создание видео от Claude Code (Как создать видео через Клауд Код Claude Code)

Данный гайд полностью посвящен хайповой (на 23 января 2026 года) теме рекламных роликов для Полимаркета, Трампа-хуесоса и прочим вирусных и не очень mp4 в твиттере и телеграм.

Канал с гайдами и контентом по ИИшкам и что с ними можно реализовывать: https://t.me/claudedevolper

Данный гайд полностью посвящен хайповой (на 23 января 2026 года) теме рекламных роликов для Полимаркета, ~~Трампа-хуесоса~~ и прочим вирусных и не очень mp4 в твиттере и телеграм.

Вводная информация: Remotion — React-фреймворк для программного создания видео. В связке с Claude Code позволяет генерировать motion-graphics через текстовые промпты.

И по-сути мы лишь оформляем наш клод так, чтобы он максимально эффективно и красиво писал ролики на реакте, что и за 4-15 попыток позволяет сделать красивый, современный монтаж с 0 навыками и за относительно короткое время. Полчаса-час.

Сначала установить клод и NodeJS

C первым думаю проблем нет, в приватке лежит отдельный гайд — для всех трех основных ОС. Следовательно, тут я объясню лишь про установку NodeJS.

Windows

Скачай и установи 22 LTS с https://nodejs.org/ (не "Current"!)

Или через winget в терминале виндовс:winget install OpenJS.NodeJS.LTS

Иди по гайду дальше, команды одинаковые для всех систем.

Пути с пробелами:
Если путь к проекту содержит пробелы или кириллицу — могут быть проблемы. Лучше использовать пути без пробелов:

C:\\Projects\\my-video    -- OK
C:\\Мои проекты\\видео    -- может быть проблемой
PowerShell Execution Policy:
Если npm-скрипты не запускаются:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Длинные пути:
Если ошибки вроде "path too long":

# Включить длинные пути (требует прав администратора)
New-ItemProperty -Path "HKLM:\\SYSTEM\\CurrentControlSet\\Control\\FileSystem" -Name "LongPathsEnabled" -Value 1 -PropertyType DWORD -Force
WSL2 как альтернатива:
Если на Windows возникают проблемы — можно использовать WSL2 (Ubuntu). Установка:

wsl --install

MacOS

Сначала нам понадобится Homebrew. Команда для установки в терминале мака: /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"
brew install node@22 — ставим NodeJS

Apple Silicon (M1/M2/M3/M4):
Remotion полностью поддерживает ARM-архитектуру Apple. Никаких дополнительных действий не требуется — npm install установит нативные пакеты автоматически.

Xcode Command Line Tools:
Если при npm install ошибки компиляции нативных модулей:

xcode-select --install
Разрешения Gatekeeper:
Если macOS блокирует запуск — разреши в System Settings > Privacy & Security.

Chrome для рендера:
Remotion использует Chrome/Chromium для рендера. Если Chrome не установлен, Remotion скачает Chromium автоматически. Но если хочешь использовать свой Chrome:

export REMOTION_CHROME_EXECUTABLE="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Linux

curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh> | bash source ~/.bashrc или ~/.zshrc или просто перезапустите терминал nvm install 22 nvm use 22

Remotion 4.x может некорректно работать с нестабильными (current) версиями Node.js. Симптомы:

npm run dev зависает или падает с ошибкой
Ошибки ESM/CommonJS при запуске Studio
Ошибки ERR_MODULE_NOT_FOUND или ERR_UNSUPPORTED_DIR_IMPORT
Решение — используй Node.js 22 LTS:

nvm install 22
nvm use 22
nvm alias default 22
# Пересоздай node_modules
rm -rf node_modules package-lock.json
npm install
npm run dev
Wayland / Headless:
Remotion рендерит через Chromium. На Wayland-only системах может потребоваться:

export DISPLAY=:0   # Если нет X11
# или
npx remotion render ... --gl=angle   # Альтернативный рендер
Отсутствие Chrome/Chromium:
Remotion автоматически скачает Chromium. Если хочешь использовать системный:

export REMOTION_CHROME_EXECUTABLE=$(which chromium)
# или
export REMOTION_CHROME_EXECUTABLE=$(which google-chrome-stable)
Зависимости для Chromium (Ubuntu/Debian):

Если Chromium не стартует:
sudo apt install -y libnss3 libatk-bridge2.

 libxdamage1 libxrandr2 libgbm1 libasound2 libpango-1.0-0 libcairo2 \\
  libatspi2.0-0 libcups2 libxkbcommon0
  
Arch/Manjaro — всё обычно работает из коробки.
Актуальные версии glibc, Chromium доступен через pacman -S chromium.

Шрифты:
Если текст в видео рендерится квадратиками — установи шрифты:

# Arch/Manjaro
sudo pacman -S noto-fonts noto-fonts-cjk ttf-liberation

# Ubuntu/Debian
sudo apt install fonts-noto fonts-liberation2

Все работает одной командой (почти)

Когда NodeJS установлен, а также на ПК уже лежит клод, мы можем приступить к самому запуску Reaction ну и приступить к созданию роликов. Ничего сложного.

npx create-video@latest --blank

Это команда спросит нас название нашего проекта, я свой назвал deploy_la_deploy, потому что собирался сделать видео прогрев для приватки. Это создаст на диске одноименную папку.

Структура (создается автоматически)

  Ассеты:                                                                       - Все файлы (картинки, музыка, видео, шрифты) → в public/                        
- Подпапки для порядка: public/images/, public/audio/, public/video/             
- Референсы тоже в public/ — Claude прочитает изображение и воспроизведёт стиль  
  
  Структура:                                                                     
- public/ — твои файлы (ассеты)                                                  
- src/ — код (Claude пишет сюда)                                                 
- out/ — готовые MP4 (после рендера)                                             
- CLAUDE.md — инструкции для Claude Code

0-0 libdrm2 libxcomposite1 \\

связанные с моей приваткой, они будут использоваться в видео.

Я решил накидать вообще разного, чтобы посмотреть получится ли из этого сделать красиво. У меня буквально нет представления о будущем ролике, я хочу увидеть своими глазами процесс, поставить опыт в тупую.

<aside> 💡

У меня к слову почему-то не появился CLAUDE.md в проекте. Я на всякий случай положил публичный для этой движухи.

</aside>

Но надо установить скиллы и зависимости для работы нашего проекта. Поэтому давайте закроем это недоразумение парочкой команд и все будет работать как часы.

npm install

npx skills add remotion-dev/skills

Выбираем Claude Code (как видите можно и другим иишкам дать), выбираем глобальный, чтобы из любого места в любом проекте можно было работать с реактом. Ну и Yes, Yes по всем рекомендуемым опциями от установщика.

После установки мы можем из нашей папки проекта передать задачу Claude Code, как мы это делаем обычно. По классике я дам пример своего промпта с которого я начал все.

Я делаю короткий промо видеоролик, что-то вроде динамичного рекламного трейлера. Ты пишешь на React, все нужные инструкции даны тебе в рабочей директории проекта, если что-то пропущено или тебе нужны уточнения - спрашивай меня.

Твоя ключевая задача опираясь на ассеты и контекст моего продукта (закрытое сообщество по нейросетям с множеством гайдов) создать привлекательный промо ролик.

1. Сначала начни планирование, чтобы задать мне уточняющие вопросы по моим файлам, ожиданиям, задумкам
2. Затем кратко опиши мне сценарий будущего ролика, я попрошу тебя внести правки если потребуется
3. Затем ты можешь создать готовое решение.

После того как видео написано, зависимости на базе — нужно запустить демку и проверить результат. Делается это командой npm run dev — после открыть в браузере localhost:3000

Или на другом порту, потому что он там случайно открывается. Можно попросить клод дать актуальный или жестко закрепить порты при открытии, как вам больше нравится. Главное чтобы команда отработала и вы увидели ваш ролик.

<aside> 💡

У меня на линукс были проблемы, иишкша пожаловалось Node.js 24, поэтому там Claude Code мне отдельно ставил 22 версию.

</aside>

Но по итогу вроде как проблема была только в настройках IPv6, что мешало открывать страничку для предварительного просмотра видоса. И пришлось запускать строго с --ipv4 и после доп патча все завелось!

В отдельном интерфейсе мы видим демку нашего ролика. Можно посмотреть какими слоями сделано, как это выглядит в общем и целом. От сюда же можно зарендерить или сделать это командой/клодом. Но думаю нам интересно другое.

Принцип в том, что любой аспект клод может переписать, вся анимация написана файлами, это не готовое видео. Можно хоть обмазаться правками любого рода.

Прошу обратить внимание, что каждый отрезок имеет количество кадров. Вы можете описывать отрезки/кадры/время, чтобы подправить или исправить кусок.

Любые правки в студии (на сайте) добавляются мгновенно. Даже не надо страницу обновлять, просто тыкните в нужное место чтобы увидеть исправления. Полторы минуты чтобы переделать половину короткого рекламного видео. Вау.

Всегда можно докинуть новых файлов, накидать своих новых безумный идей. Понятное дело, что хороший результат это следствие хорошей идеи и промпта, но. В данном случае действительно выходит крайне творческий и веселый процесс.

Где не зная всех названий и видов стилей, переходов, ракурсов. Какое время той или иной анимации оптимально — все пробуешь наугад. Наверное моя скрытая любовь к монтажу в этой штуке раскрылась и я просто хочу утонуть в процессе.

Музыку же в фоне пишем через https://suno.com/ — величайший сервис. Регистрация в 1 клик и за 0 долларов можно создать прям достойные треки. Странно, что никто на каждом шагу не кричит, что музыкантов уже вот-вот заменят.

И когда вы полностью наигрались и результат вас порадовал — можно рендерить. Делается это либо через клод напрямую, либо одной относительно заметной кнопочкой справа внизу сайта.

Как вам удобнее. Но кнопка дает сильно большее контроля над процессом.

Приятные фишечки

Беглый ресерч навел меня сразу на 4 гитхаба, где лежит что-то интересное. Уверен, что в реальности там их еще где-то пара десятков, но углубляться так далеко не буду. Пока что хочу отточить навыки с тем набором, что имею.

ThariqS Gist — базовый CLAUDE.md, я его выше добавлял
claude-remotion-kickstart — 14 компонентов + слэш-команды + MCP (Replicate, ElevenLabs, Deepgram)
layout-marketing-video — пример 29сек маркетингового видео, полностью сгенерированного Claude Code
video_explainer — E2E пайплайн: документ → скрипт → TTS → анимации → рендер (990+ тестов, 43 stars)

Из этого мне больше всего приглянулся какстрат и E22 пайплайн, начну я их краткий обзор по порядку. Приступим их разбору, заодно углубимся в подход. Как тут проекты устроены.

Kickstart — шаблон для создания роликов от jhartquist

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

Нажмите «Use this template» в верхней части этого репозитория.
Выберите «Create a new repository».
Укажите название репозитория и создайте его.
Клонируйте свой новый репозиторий.

git clone <https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git>
cd YOUR-REPO-NAME

# Install dependencies
pnpm install

# Replicate - for /generate-image and /generate-video
export REPLICATE_API_TOKEN=your_replicate_token

# Deepgram - for /transcribe
export DEEPGRAM_API_KEY=your_deepgram_key

# ElevenLabs - for voiceovers (used via MCP server)
export ELEVENLABS_API_KEY=your_elevenlabs_key

И да, вам надо добавить API ключи, которые используются в его проекте, чтобы автоматически подвязать озвучку, создание кадров и так далее.

Как уже понятно, при желании можно навайбкодить целую структуру с генерацией видесов с людьми, дизайном прототипа вашего сайта и так далее.

Ну и команды изнутри вашего проекта/репозитория.

# Install dependencies
pnpm i

# Start development preview
pnpm run dev

# Lint code
pnpm run lint

# Render a composition (by ID)
pnpm exec remotion render Example1-Landscape

# Render still image
pnpm exec remotion still Example1-Landscape

# Upgrade Remotion
pnpm run upgrade

/new-composition <name> Create a new composition with boilerplate /generate-image <prompt> Generate an image with Nano Banana Pro /generate-video <prompt> Generate a video with Veo 3.1 /transcribe <file> Transcribe audio/video with Deepgram /screenshot <url> Take a full-page screenshot

Вариант Б:

Просим наш Claude взять гитхаб на основу с его структурой и расписать себе подобное, для этого кормим гитхаб проекта. Ну и в целом можете попросить анализ и вдохновиться тем, как он для себя билдить проекты.

И снова повторю мысль: режим планирования > просьба подключить чужие генерашки > личное рабочее пространство под ваш личный проект.

src/
├── components/              # Reusable components (black/white theme, className override)
│   ├── TitleSlide.tsx       # Full-screen title
│   ├── ContentSlide.tsx     # Header + body text
│   ├── CodeSlide.tsx        # Code with title
│   ├── DiagramSlide.tsx     # Mermaid/D2 diagrams
│   ├── VideoSlide.tsx       # Video playback
│   ├── BRollVideo.tsx       # B-roll with zoom
│   ├── ZoomableVideo.tsx    # Video with zoom segments
│   ├── Screenshot.tsx       # Scrolling screenshot
│   ├── Logo.tsx             # Logo overlay (animated)
│   ├── Caption.tsx          # Subtitle/caption overlay
│   ├── AsciiPlayer.tsx      # Terminal recording playback
│   ├── Code.tsx             # Syntax-highlighted code
│   ├── Diagram.tsx          # Diagram renderer
│   └── Music.tsx            # Background music with fade
├── compositions/
│   ├── example1/            # Reference: basic slideshow
│   └── example2/            # Reference: multi-feature demo
├── utils/
│   ├── createComposition.tsx  # Helper to create compositions
│   └── segmentTranscript.ts   # Parse transcripts for timing
├── config.ts                # Timing utilities: secondsToFrames(), framesToSeconds()
├── presets.ts               # VIDEO_PRESETS (aspect ratios, 60fps)
├── content.ts               # Sample content for component previews
└── Root.tsx                 # Composition registry

Video_explainer от prajwal-y

Это тоже вайбкод и тоже готовый пайплайн. Примерно уровня выше в том плане, что подрублены всякие финти-плюшки.

Полный пайплайн: документ (PDF/MD/URL) → explainer-видео уровня 3Blue1Brown. Озвучка, анимации, SFX, фоновая музыка. Создано за ~3 дня с Claude Code Opus 4.5, автором без опыта в видео.

# Prerequisites: Python 3.10+, Node.js 20+, FFmpeg
git clone <https://github.com/prajwal-y/video_explainer.git>
cd video_explainer

python -m venv .venv && source .venv/bin/activate
pip install -e .
cd remotion && npm install && cd ..

export ANTHROPIC_API_KEY=...
export ELEVENLABS_API_KEY=...  # или Edge TTS (бесплатный)

Запускается оно на Python, поэтому либо кормите все клоду для понимания, либо запускайте ручками. Тут точно не подскажу, я еще лично не тестировал, но будем считать, что гайд составлен корректно.

projects/<name>/
├── config.json
├── input/                   # Исходные документы (MD, PDF)
├── script/script.json
├── narration/narrations.json
├── scenes/*.tsx             # React-компоненты (Claude Code)
├── voiceover/*.mp3
├── storyboard/storyboard.json
├── music/background.mp3     # MusicGen
├── short/default/           # Shorts
└── output/video.mp4

Структура сильно проще, а суть примерно такая же. Прописана интеграция с другими сервисами и корректные инструкции, например тут фича — синхронизация голоса с кадрами.

<aside> 💡

Главный инсайт тут в том, чтобы сначала вайбкодить пайплан свой, а уже потом на нем вайбкодить свои проекты. Берите все выше за референсы и удачи!

</aside>

Канал с гайдами и контентом по claude code, выкладываем новости (когда режут лимиты в 10 раз) и какие инструменты через claude реализуем для проектов, канал: https://t.me/claudedevolper