Remotion и ElevenLabs: кратко о главном
🎯 О чём этот конспект: Пошаговое руководство по созданию профессионального моушн-ролика для SaaS-продукта без видеокамер, актеров, скринкастов и видеомонтажеров. Рассматривается полный конвейер: генерация анимированного интерфейса на React с помощью Remotion и Claude Code, автоматическое создание листа таймингов (cue sheet) и точечный саунд-дизайн каждого действия через ElevenLabs SFX V3 и Music.
👤 Кому будет полезно: Вайбкодерам, инди-хакерам, фаундерам и разработчикам, которым нужно высококонверсионное промо-видео продукта для лендинга или рекламы без бюджета на моушн-агентства ($3,000–$10,000).
✨ Что получите: Готовый пайплайн и промпты для сборки видеоролика на чистом коде: от отрисовки векторных компонентов UI до генерации синхронизированных звуковых эффектов (SFX), фонового эмбиенса и музыки с автосведением громкости.
1. Концепция Video-as-Code: отказ от скринкастов в пользу Remotion
Контекст: Классический подход к созданию демо-ролика продукта через запись экрана (Screen Recording) приводит к трем критическим проблемам: утечка реальных данных клиентов, замыливание интерфейса при зуме и необходимость полностью переснимать ролик при малейшем апдейте дизайна. Альтернативный заказ моушн-графики в агентствах стоит от нескольких тысяч долларов за 30–60 секунд, так как аниматоры вручную перерисовывают каждый элемент UI. Подход Video-as-Code решает эту проблему: видео описывается как набор React-компонентов, где состояние каждого кадра зависит от номера фрейма (frame number), подобно цифровому флипбуку.
Тайминг:
Выгода: Экономия от $3,000 до $10,000 на услугах моушн-студий; идеальная четкость текста при любом масштабировании; возможность изменить тайминг сцены за 2 секунды простой правкой одной цифры в конфигурационном файле.
Как применить:
- Шаг 1: Инициализация Remotion-проекта — Remotion / Claude Code] — Создайте пустую директорию и разверните базовый шаблон Remotion на React с поддержкой TypeScript.
- Шаг 2: Описание интерфейса как параметрических компонентов — React / TypeScript] — Вместо вставки растровых скриншотов попросите Claude переписать ваш UI на чистый React (Tailwind/CSS), используя фейковые данные (mock data), чтобы не раскрывать персональные данные реальных пользователей.
- Шаг 3: Управление анимацией через номер кадра — Remotion API] — Настройте интерполяцию свойств (прозрачность, смещение, набор текста) через хук
useCurrentFrame(). Например, на кадре 90 заголовок начинает печататься, на кадре 180 — завершается.
# Инициализация нового проекта Remotion
npx create-video@latest --template blank my-saas-launch-video
cd my-saas-launch-videoРезультат: Интерфейс приложения оживает в виде чистого векторного React-кода с разрешением 1920x1080 при 30 FPS, где тайминги меняются через переменные, а не перетаскиванием слоев на таймлайне.
2. Промптинг Claude Code в Plan Mode: генерация видео и Cue Sheet по скриншотам
Контекст: Чтобы ИИ-агент точно воссоздал логику и визуальный стиль вашего SaaS, ему необходимо скормить скриншоты реального дашборда и лендинга. Работа ведется строго в режиме планирования (Plan Mode) в Claude Code: нейросеть сначала изучает референсы, пишет пошаговый план архитектуры компонентов и ждет подтверждения пользователя перед созданием файлов. Одновременно с компонентами Claude формирует файл src/cues.ts — реестр всех анимационных событий с привязкой к конкретным фреймам для последующего саунд-дизайна.
Тайминг:
Выгода: Полная автоматизация верстки 40-секундного сложного промо-ролика за 15–20 минут вместо 2 недель ручной работы в After Effects.
Как применить:
- Шаг 1: Сбор референсов интерфейса — Сделайте 3–5 четких скриншотов ключевых экранов продукта (главный экран, таблица данных, карточка сущности, модальное окно).
- Шаг 2: Запуск генерации в Claude Code — Claude Code] — Отправьте промпт с описанием структуры ролика, прикрепив скриншоты, и включите режим планирования.
- Шаг 3: Проверка в Remotion Preview — Remotion Studio] — Запустите локальный сервер предварительного просмотра и проверьте каждый кадр через скраббер таймлайна.
Plan first and wait for my okay. Build a 43-second launch film for my SaaS as code using Remotion React in this empty folder.
Brand off-white background, recreate my product's UI from the images I've given (no raster screenshots in final render, pure React components with mock data).
Keep every scene window and every animation beat defined in src/cues.ts. Generate a complete sound cue sheet with exact frame numbers for all key events (logo reveal, data counter, button click, phone dial, note typing, call end).# Запуск интерактивного плеера для покадровой проверки
npm run startРезультат: Сгенерированный проект с готовыми сценами, плавными анимациями и файлом src/cues.ts, содержащим точные тайминги каждого визуального акцента.
3. Четырехкомпонентная формула промптов для ElevenLabs SFX V3
Контекст: Сгенерированное Remotion видео получается «немым». Если попросить стандартную LLM написать звуки или использовать примитивные промпты («rain sound», «click»), результат будет плоским и неубедительным. Для генерации реалистичного звука профессионального уровня используется модель ElevenLabs SFX V3. Качественный промпт должен строиться по четырехчастной структуре: Действие (Action), Окружение (Setting), Настроение (Mood) и Характер воспроизведения (Performance).
Тайминг:
Выгода: Генерация уникальных кинематографических Foley-эффектов и интерфейсных звуков за секунды без покупки стоковых библиотек и найма саунд-дизайнера.
Как применить:
- Шаг 1: Составление Directed-промпта по формуле 4 частей — Опишите:
- Action (что происходит физически: щелчок реле, шелест бумаги, удар металла);
- Setting (где происходит: тихий современный офис, серверная, просторный холл);
- Mood (какое ощущение передает: технологичное, теплое, сдержанное);
- Performance (атака, хвост реверберации, дистанция, затухание).
- Шаг 2: Генерация пачки вариантов в интерфейсе ElevenLabs — ElevenLabs SFX V3] — Перейдите в раздел
Sound Effects, выберите модельV3, укажите точную длительность (например, 2 секунды) и сгенерируйте 4 варианта. - Шаг 3: Экспорт файлов с именованием по Cue Sheet — Скачайте лучший вариант и назовите файл строго в соответствии с идентификатором из
src/cues.ts(например,dial_ticks.mp3).
# Пример Directed-промпта для фонового шума (Room Tone / Ambience):
A continuous even background tone of a quiet modern office before anyone arrives. Faint air conditioning hum and soft moving air. Warm, steady, non-intrusive, no music and no voices.
# Пример Directed-промпта для анимации счетчика чисел:
A dry mechanical tick speeding up like a desk counter flicking through numbers. Crisp attack, very short decay, tactile, close-mic.
# Пример Directed-промпта для появления логотипа (Logo Reveal / Swoosh):
Modern fast tech swoosh transition into a clean high-frequency digital shimmer sting. Subtle low-end thump on landing.Результат: Набор откалиброванных MP3-файлов, точно передающих динамику и физику каждого элемента интерфейса.
4. Программная сборка аудиодорожки без видеоредактора
Контекст: В классическом продакшене монтажер часами вручную выравнивает каждый звуковой эффект по сетке кадров на таймлайне Premiere или DaVinci. В подходе Remotion звук интегрируется программно: код считывает файлы из папки public/sfx, сопоставляет их с тайм-кодами из src/cues.ts и автоматически позиционирует аудио на нужном фрейме. Критическая ошибка — ставить все звуки на 100% громкости, из-за чего 15–20 наложенных дорожек сливаются в перегруженный кашеобразный шум (clipping). Решение — матрица громкостей в коде с выделенным приглушенным фоновым слоем (room tone bed).
Тайминг:
Выгода: Мгновенная синхронизация десятков звуков с идеальной точностью до 1 кадра (1/30 секунды); устранение клиппинга и фазовых проблем без использования DAW.
Как применить:
- Шаг 1: Размещение ассетов — Поместите все сгенерированные файлы звуковых эффектов в директорию
public/sfx/. - Шаг 2: Генерация аудио-манифеста — Node.js / Claude Code] — Запустите скрипт сканирования директории, который формирует манифест существующих звуков для Remotion.
- Шаг 3: Настройка баланса громкости на уровне cues — Задайте коэффициенты громкости в коде: фоновый шум (0.15–0.25), фоновая музыка (0.2–0.3), UI-клики (0.6–0.7), главный смысловой акцент/звонок (0.85–0.95).
// Пример структуры src/cues.ts для управления звуками и анимациями
export interface SoundCue {
id: string;
frame: number;
fileName: string;
volume: number; // 0.0 to 1.0
}
export const soundCues: SoundCue[] = [
{ id: 'room_ambience', frame: 0, fileName: 'office_ambience.mp3', volume: 0.2 },
{ id: 'logo_swoosh', frame: 12, fileName: 'logo_swoosh.mp3', volume: 0.7 },
{ id: 'counter_speedup', frame: 95, fileName: 'dial_ticks.mp3', volume: 0.5 },
{ id: 'reveal_mobile', frame: 210, fileName: 'ping_reveal.mp3', volume: 0.8 },
{ id: 'dial_tone', frame: 320, fileName: 'phone_dial.mp3', volume: 0.75 },
{ id: 'keyboard_typing', frame: 450, fileName: 'typing_notes.mp3', volume: 0.4 },
{ id: 'bg_music', frame: 0, fileName: 'tech_ambient_track.mp3', volume: 0.25 }
];# Сборка финального видеоролика со всеми сведенными аудиодорожками
npm run buildРезультат: Идеально сведенный видеоряд с микросинхронизацией каждого звука на соответствующем кадре и отсутствием искажений громкости.
5. Мультиформатный экспорт и генерация корпоративной фоновой музыки
Контекст: Для полноценного запуска продукта одного горизонтального видео (16:9 для сайта и YouTube) недостаточно: нужны вертикальные креативы (9:16 для TikTok, Reels, Shorts). При кодовом подходе Remotion позволяет создать вторую композицию (1080x1920), повторно используя те же самые React-сцены и логику таймингов, меняя только CSS-раскладку (Flex/Grid). Чтобы связать ролик воедино, поверх SFX накладывается нейтральный корпоративный трек, сгенерированный в ElevenLabs Music ровно под хронометраж видео (43 секунды).
Тайминг:
Выгода: Производство полного пакета маркетинговых материалов (16:9 и 9:16) из единой кодовой базы с экономией 80% времени на реформатирование.
Как применить:
- Шаг 1: Генерация фонового трека — ElevenLabs Music] — Введите промпт для технологичного минималистичного трека с фиксацией длительности (например, 43 секунды).
- Шаг 2: Добавление музыки в Remotion — Сохраните трек как
public/sfx/bg_music.mp3, подключите через компонент<Audio />с фейд-аутом на последних 30 фреймах. - Шаг 3: Настройка вертикальной композиции — Создайте в
Root.tsxвторую композицию с разрешением1080x1920и оптимизируйте UI-компоненты под мобильный экран.
# Промпт для ElevenLabs Music:
43-second modern tech product background track. Minimal electronic, corporate ambient, uplifting, subtle synth pulses, clean rhythm, non-intrusive, no lead vocals.// Пример регистрации двух форматов в Root.tsx
import { Composition } from 'remotion';
import { MainVideo } from './MainVideo';
export const RemotionRoot = () => {
return (
<>
{/* Горизонтальная версия для YouTube и Landing Page */}
<Composition
id="LandscapePromo"
component={MainVideo}
durationInFrames={1290} // 43 сек * 30 fps
fps={30}
width={1920}
height={1080}
/>
{/* Вертикальная версия для Shorts / Reels */}
<Composition
id="VerticalPromo"
component={MainVideo}
durationInFrames={1290}
fps={30}
width={1080}
height={1920}
/>
</>
);
};Результат: Готовый комплект из двух отрендеренных видеофайлов (горизонтального и вертикального) в студийном качестве с полнодиапазонным звуковым оформлением.
Remotion и ElevenLabs: ответы на частые вопросы
В: Почему нельзя просто записать экран приложения через OBS или Loom и наложить звук?
О: Запись экрана не масштабируется без потери качества при приближении камеры, захватывает артефакты курсора и реальные данные клиентов. При любом изменении кнопки или цвета в интерфейсе ролик придется перезаписывать целиком. Кодовый подход в Remotion генерирует векторные компоненты в идеальном разрешении и позволяет перекрасить или изменить кнопку одной строкой в коде.
В: Нужны ли глубокие знания Remotion, чтобы повторить этот процесс?
О: Нет. Достаточно базового понимания структуры React. Всю тяжелую работу по написанию анимаций, хуков интерполяции и CSS-стилей выполняет Claude Code (или Cursor), если вы передаете ему качественные скриншоты интерфейса и работаете через Plan Mode.
В: Зачем разделять генерацию SFX на Lazy и Directed промпты?
О: Модель ElevenLabs SFX V3 генерирует шум на основе случайных догадок, если промпт слишком короткий (Lazy: «footsteps»). Directed-промпт с описанием действия, окружения, настроения и длительности исключает двусмысленность и генерирует точный кинематографический звук с первого-второго дубля.
В: Как избежать перегрузки по громкости (клиппинга) при наложении 10+ звуков одновременно?
О: Используйте строгую иерархию громкостей в файле src/cues.ts. Фоновый эмбиенс (room tone) и музыку держите на уровне 0.15–0.25 от общей громкости. Мелкие интерфейсные звуки (щелчки, печать) — на уровне 0.4–0.6, а ключевые акцентные события — не выше 0.85.
В: Как вертикальная версия (9:16) использует те же компоненты, если экраны дашборда широкие?
О: Сцены в Remotion верстаются с использованием CSS Flexbox/Grid и относительных единиц. В вертикальной композиции те же компоненты оборачиваются в адаптивные контейнеры с мобильной компоновкой или анимированным панорамированием (camera pan) по горизонтали.
В: Сколько времени занимает полный цикл создания 40-секундного ролика по этому методу?
О: При наличии готовых скриншотов приложения: генерация каркаса и компонентов в Claude Code занимает около 15–20 минут, подбор и генерация 10–15 звуковых эффектов в ElevenLabs — 15 минут, сведение и финальный рендер через npm run build — 2–5 минут.
Remotion и ElevenLabs: инструменты и ссылки из видео
- Remotion — Фреймворк для создания видео и моушн-графики с использованием React, TypeScript и веб-технологий —
https://www.remotion.dev - Claude Code — Консольный AI-агент от Anthropic для автономного написания кода, планирования и рефакторинга —
https://claude.ai - ElevenLabs SFX V3 — Нейросетевая модель генерации кинематографических и интерфейсных звуковых эффектов по текстовому описанию —
https://elevenlabs.io - ElevenLabs Music — Инструмент генерации оригинальных музыкальных треков заданной длительности —
https://elevenlabs.io - BuildSoftware.com — Образовательная платформа и блог автора видео (Oliver) —
https://buildsoftware.com
Конспект создан на основе видео «I Built a $10,000 SaaS Launch Video Using Claude Opus and ElevenLabs» канала Oliver (BuildSoftware). Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=3kcRIOxMot8
