Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по созданию профессиональных анимационных и объясняющих видеороликов с помощью Claude Code, чистого JavaScript, Playwright и FFmpeg. Автор разбирает математический принцип покадровой отрисовки через функцию времени, цикл автоматической самопроверки нейросетью и упаковку процесса в готовый Claude Code Skill.
👤 Кому будет полезно: Вайбкодерам, разработчикам, контент-мейкерам и инди-хакерам, создающим продуктовые демо, эксплейнеры или вирусную моушн-графику без затрат на дорогой софт вроде After Effects или подписки на генеративные AI-видеосервисы.
✨ Что получите: Готовую архитектуру и промпты для генерации 60 FPS MP4-видео на JavaScript с автоматическим контролем качества кадров, синхронизацией озвучки и переиспользуемым навыком для Claude Code.
1. Концепция «Видео как функция от времени»: Как работает генерация без видеогенераторов
Контекст: Большинство считает, что для AI-видео нужны тяжелые диффузионные модели (Sora, Runway, Kling) или сложные фреймворки вроде Remotion и Adobe After Effects. В реальности Claude Code не генерирует видео напрямую — он пишет детерминированную функцию на JavaScript. Функция принимает временную метку t и возвращает один конкретный кадр. Запрашивая 60 кадров за каждую секунду и проигрывая их по порядку, мы получаем плавное видео. Поскольку для одного и того же значения t всегда генерируется один и тот же кадр, любой фрагмент анимации можно изолированно перерисовать, проверить и исправить без перерендера всего проекта.
Тайминг: ,
Выгода: Нулевая стоимость генерации (нет оплаты кредитов AI-видеосервисов), 100% повторяемость кадров и возможность отрисовки векторной графики в честных 60 FPS.
Как применить:
Шаг 1: Понимание математической модели — JavaScript] — Архитектура строится на создании canvas-сцены, где состояние каждого элемента вычисляется от времени:
// Концептуальный вид функции кадраfunction renderFrame(t) { // t — текущее время в секундах const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, width, height); // Пример вычисления позиции объекта на основе t const x = Math.sin(t * Math.PI) * 200 + center.x; const opacity = Math.min(1, Math.max(0, t / 2)); drawElements(ctx, x, opacity); return canvas.toDataURL('image/png');}
Шаг 2: Настройка конвейера захвата — Playwright + FFmpeg] — Headless-браузер под управлением Playwright вызывает функцию renderFrame(t) с шагом 1/60 секунды, сохраняет PNG-кадры на диск, а утилита FFmpeg собирает их в итоговый контейнер MP4.
Результат: Детерминированный скрипт, способный сгенерировать идеальную 60 FPS анимацию без использования внешних API генерации видео.
2. Уровни усилий (Effort Levels) и золотое правило раскадровки (Storyboard First)
Контекст: При тестировании Claude (Opus / Sonnet) на разных уровнях усилий (Low, High, Ultra) базовое качество кода на всех уровнях остается стабильно высоким. Режим Low справляется за ~20 минут, High — за ~30 минут, а Ultra может работать до 8 часов. Основная проблема неудачных генераций кроется не в вычислительных усилиях модели, а в отсутствии предварительной раскадровки. Если сразу попросить Claude написать код для 30-секундного ролика, вы рискуете потратить 20–30 минут, получить неподходящий визуал и уйти в бесконечные итерации исправлений. Создание раскадровки (Storyboard) до написания кода позволяет утвердить ключевые кадры и структуру за секунды.
Тайминг: , ,
Выгода: Экономия от 1 до 3 часов времени генерации за счет исключения переделок на этапе готового видео.
Как применить:
Шаг 1: Формирование первичного промпта на раскадровку — Claude Code] — Не просите создать MP4 сразу. Сначала запросите список ключевых сцен и статические кадры.
I want to create a 15-second dynamic motion graphics video explaining how [YOUR_TOPIC] works.Do NOT write the full video render code yet.First, create a storyboard: generate a list of the 7 major keyframe scenes/beats across the timeline and render static preview frames for each beat so I can review the visual composition and layout.
Шаг 2: Ревью и корректировка ключевых кадров — Claude Code] — Оцените полученные статические изображения. Укажите, какие элементы сместить, изменить по цвету или удалить.
Шаг 3: Переход к полной кодогенерации — Claude Code] — Только после утверждения раскадровки отдайте команду на сборку полной анимации по таймлайну.
Результат: Утвержденный сценарий и проверенные опорные кадры, гарантирующие предсказуемый результат финального рендера.
3. Архитектура промпта и замкнутый цикл самопроверки (Self-Healing Loop)
Контекст: Чтобы анимация выглядела завершенной, промпт должен четко описывать технические параметры (длина, соотношение сторон, формат вывода). Главная фишка связки Claude Code + Playwright — способность нейросети валидировать собственную работу. Claude не может «смотреть» видео как видеопоток, но может через FFmpeg извлечь контактный лист (contact sheet — сетку кадров) или отдельные тайм-фреймы, проанализировать их через мультимодальный вход, найти баги анимации и самостоятельно скорректировать JS-функцию до финального вывода.
Тайминг: ,
Выгода: Полная автономность пайплайна: нейросеть исправляет съехавшие элементы и визуальные артефакты без ручного вмешательства.
Как применить:
Шаг 1: Подготовка окружения — Терминал] — Установите системные зависимости для рендера и склейки:
npm install playwrightnpx playwright install chromium# Убедитесь, что ffmpeg установлен в вашей ОС (например, через brew или apt)ffmpeg -version
Шаг 2: Запуск комплексного системного промпта — Claude Code] — Используйте шаблон с обязательной инструкцией цикла проверки:
Create a [30-second] animated explainer video about [TOPIC].Aspect ratio: [16:9 / 9:16 vertical for social media].Technology: Pure JavaScript canvas rendering.Pipeline requirements:1. Render frames using a headless browser via Playwright.2. Stitch the frames into an MP4 using ffmpeg.3. CRITICAL QA LOOP: Before marking the task as complete, use ffmpeg to generate a contact sheet of keyframes across the timeline. Inspect the contact sheet visually, identify any alignment, timing, or visual bugs, modify the JavaScript function to fix them, rerender, and repeat until the output is flawless.
Результат: Готовый MP4-файл, прошедший внутреннюю проверку качества и очищенный от артефактов верстки и анимации.
4. Синхронизация звука и визуального ряда (Reverse Engineering от аудио)
Контекст: Анимация без звука или с рассинхронизированной дорожкой выглядит непрофессионально. Есть два подхода: генерация процедурного звука через код или работа от готовой аудиодорожки. Самый эффективный метод — «реверсивный продакшн»: сначала генерируется дикторский голос (озвучка сценария), а затем Claude Code выстраивает тайминги JS-анимации под конкретные временные метки аудиофайла.
Тайминг: , , ,
Выгода: Идеальное попадание визуальных событий в ритм речи диктора без ручной подгонки на таймлайне монтажной программы.
Как применить:
Шаг 1: Генерация озвучки — ElevenLabs / Faster-Whisper] — Сгенерируйте закадровый голос для вашего скрипта в ElevenLabs (доступен официальный MCP-сервер ElevenLabs или веб-интерфейс) и сохраните файл как narration.mp3.
Шаг 2: Передача аудио в Claude Code — Claude Code] — Загрузите аудиофайл в контекст и укажите Claude привязать ключевые события анимации к длительности и паузам дорожки:
Here is the voiceover audio file: narration.mp3.Analyze the audio duration and pacing. Time all JavaScript visual scene transitions, title appearances, and animations precisely to match the narration beats.Combine the rendered canvas video stream with narration.mp3 using ffmpeg so the final MP4 has synchronized high-quality audio.
Результат: Видеоролик с точно синхронизированной озвучкой и переключением сцен под слова диктора.
5. Использование референсов: Копирование композиции и стилей
Контекст: Claude Code отлично справляется с реверс-инжинирингом визуальных стилей по референсным материалам. Вы можете передать модели изображение (скриншот дизайна, цветовую палитру) или видеоролик, сделанный в других инструментах (например, Remotion или 3Blue1Brown). Нейросеть декомпозирует композицию, иерархию элементов и плавность переходов из референса, после чего воспроизводит эту эстетику на чистом JavaScript с вашим новым контентом.
Тайминг: , ,
Выгода: Возможность воссоздавать премиальную графику студийного уровня без навыков моушн-дизайнера.
Как применить:
Шаг 1: Поиск референсов — skillery.dev / X (Twitter)] — Найдите вдохновляющие примеры AI-видео (автор рекомендует профиль Kevin в X и раздел AI Videos на skillery.dev).
Шаг 2: Промпт с подачей референсного видео/изображения — Claude Code] — Передайте референс в проект и запросите адаптацию композиции:
I have provided a reference [video/image] at ./reference.mp4 (or reference.png).Analyze the visual hierarchy, transition styles, color palette, and composition pacing of this reference.Recreate this exact motion design aesthetic using our pure JavaScript/Playwright canvas pipeline, but replace the content entirely with an explainer about: [YOUR NEW TOPIC].
Результат: Уникальный анимационный ролик, перенявший композиционную сетку и плавность движений из эталонного референса.
6. Автоматизация через Claude Code Skill: Готовый генератор полного цикла
Контекст: Чтобы не вводить технические промпты и зависимости вручную для каждого нового видео, процесс упаковывается в специальный Skill для Claude Code. Навык включает встроенный пошаговый опрос (Intake), генерацию раскадровки, 7 предустановленных визуальных стилей (Cut paper, Cross-hatch, Risograph, Sketchbook, Isometric и др.), а также автоматический менеджмент зависимостей (Playwright, FFmpeg, Whisper, ElevenLabs).
Тайминг: , ,
Выгода: Превращение сложного кодового конвейера в интерактивный CLI-мастер, где создание видео сводится к ответам на вопросы агента.
Как применить:
Шаг 1: Установка навыка в Claude Code — Claude Code CLI] — Подключите скилл напрямую через URL или как плагин в рабочей директории:
# Добавление навыка по ссылке в сессии Claude Codeclaude skill add <SKILL_URL>
Шаг 2: Прохождение интерактивного пайплайна (4 этапа) — Claude Code]:
Intake (Опрос): Claude задаст вопросы: тема, хронометраж, соотношение сторон, формат аудио/голоса, наличие главного персонажа/объекта сцены.
Style Selection (Выбор стиля): Выберите один из 7 встроенных стилей (cut paper, cross-hatch, riso, sketchbook, isometric и т.д.) или прикрепите свой референс.
Storyboard (Раскадровка): Агент сгенерирует превью ключевых кадров для аппрува.
Code & Loop QA: Автоматический рендер через Playwright, сборка через FFmpeg, валидация через контактный лист и отдача готового MP4.
Результат: Полностью настроенный локальный видеокомбайн, генерирующий брендированный контент по стандартной процедуре.
FAQ
В: Зачем использовать чистый JavaScript и Playwright вместо Remotion?
О: Remotion — отличный React-фреймворк, но чистый JavaScript не требует установки громоздких зависимостей, специфических библиотек компонентов и сложной сборки. Claude Code манипулирует Canvas API и математическими функциями напрямую, что снижает вероятность ошибок компиляции и делает генерацию максимально легковесной.
В: Сколько стоит создание одного такого видео?
О: Инфраструктурные затраты равны нулю, так как Playwright, Chromium и FFmpeg являются бесплатным Open Source ПО. Вы оплачиваете исключительно токены API Claude (или подписку Claude Code/Anthropic) и при желании генерацию голоса в ElevenLabs (~$5/месяц).
В: Как Claude «видит» видео, если он языковая модель?
О: Claude Code запускает FFmpeg-команду для нарезки видео на контактный лист (contact sheet — сетку из статичных миниатюр ключевых кадров). Полученное единое изображение агент передает в свой мультимодальный контекст, визуально оценивает геометрию и правильность рендера кадров, после чего вносит правки в код.
В: Какая частота кадров и разрешение поддерживаются?
О: Ограничений нет. По умолчанию используется стандарт 60 FPS для максимальной плавности моушн-графики. Разрешение задается размерами HTML5 Canvas (например, 1920x1080 для горизонтальных видео или 1080x1920 для Shorts/Reels/TikTok).
В: Что делать, если генерация идет слишком долго?
О: Всегда запрашивайте Storyboard (раскадровку ключевых сцен) до написания полного таймлайна. Это предотвратит многочасовые циклы перегенераций из-за концептуальных ошибок композиции. Для быстрых драфтов используйте стандартные уровни усилий модели вместо Ultra-режимов.
Ресурсы и ссылки
Playwright — инструмент автоматизации браузеров для покадрового рендера Canvas в headless-режиме — https://playwright.dev/
FFmpeg — кроссплатформенная Open Source утилита для обработки видео, сборки кадров и наложения звука — https://ffmpeg.org/
ElevenLabs — платформа генерации реалистичной AI-озвучки с поддержкой MCP-коннектора — https://elevenlabs.io/
Skillery.dev — каталог AI-видео и промптов для поиска референсов и визуальных стилей — https://skillery.dev/
Faster-Whisper — высокопроизводительная Open Source библиотека распознавания речи и работы с аудио-таймингами — упомянут в видео
Kevin on X (Twitter) — профиль моушн-дизайнера и креатора эталонных AI/JS-анимаций — упомянут в видео
Chase AI Plus — образовательная программа и мастер-класс автора по Claude Code — упомянут в видео
Конспект создан на основе видео «You don't need Remotion. You don't need After Effects.» канала Chase Lean. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=rscb1DgJtNg
