Рекламный ролик без монтажа: только Claude Code и твой голос

Ролик выше целиком собран через Claude Code. Сначала он написал веб-страницу с анимациями, потом превратил её в видео и добавил мой голос. Сцены, движение текста и звук я правил сообщениями в чате.

Здесь разберём принцип и сделаем первую простую анимацию. Полную последовательность промптов для ролика со своим голосом, точными таймингами и экспортом в MP4 я собрал в отдельную инструкцию для Клуба Незаменимых.

Как веб-страница становится роликом

У страницы уже есть всё для такой анимации: текст, картинки, цветные фоны, окна интерфейса. Claude Code пишет код, который двигает эти элементы и меняет сцены.

Дальше браузер открывает страницу и сохраняет её кадры. Из них собирается видео со звуком. Зритель получает обычный MP4, который можно загрузить в соцсети.

В моём ролике ритм задаёт голос. Сначала программа определяет, когда звучит каждое слово. Затем к нужным словам привязываются события: появляется заголовок, меняется фон, открывается окно. Если перезаписать озвучку, её нужно заново разметить и обновить тайминги.

Что можно сделать таким способом

Начни с короткого ролика, где главную мысль можно показать текстом и простой графикой:

• Анонс продукта: что ты сделал, кому это нужно и где попробовать.
• Объяснение одной идеи: короткий тезис, наглядный пример, вывод.
• Приглашение на эфир или запуск: тема, дата и одно действие для зрителя.

В примере выше я показываю сам процесс: пишу задачу, запускаю анимацию, объясняю связь с голосом. Для другого продукта меняются сценарий и сцены, а принцип остаётся тем же.

Попробуй: первая анимация в браузере

Для начала понадобятся компьютер, работающий Claude Code и браузер. Создай пустую папку, открой её в Claude Code и вставь промпт ниже. Замени три строки в квадратных скобках на свои.

Создай простую анимированную карточку в одном файле index.html.
Весь HTML, CSS и JavaScript должны быть внутри этого файла,
без внешних библиотек, шрифтов и установки пакетов.

Карточка горизонтальная, 16:9, подстраивается под размер окна.
Фон — плавный цветной градиент, текст крупный и контрастный.

За 12 секунд последовательно покажи три экрана:
1. [НАЗВАНИЕ МОЕГО ПРОЕКТА]
2. [ОДНА ГЛАВНАЯ ПОЛЬЗА ДЛЯ ЧЕЛОВЕКА]
3. [ЧТО СДЕЛАТЬ ДАЛЬШЕ]

Каждый экран держится примерно 4 секунды.
Текст мягко появляется снизу, затем уступает место следующему.
Не показывай тексты разных экранов одновременно.

Под карточкой добавь кнопку «Смотреть ещё раз».
Анимация запускается при открытии файла, кнопка повторяет её с начала.
Пока без звука и экспорта в видео.

Сохрани файл и объясни, как открыть его в браузере.

Открой созданный index.html двойным щелчком. Посмотри, успеваешь ли прочитать каждую фразу и понятна ли польза проекта. Нажми «Смотреть ещё раз»: анимация должна повториться с начала.

Если строка не помещается, сначала сократи её. Если цвет или движение не нравятся, опиши Claude одну конкретную правку. Так проще увидеть, что изменилось.

У тебя получится первая анимированная страница. На ней удобно проверить идею и текст перед тем, как браться за озвучку и сборку видео.

Что делает ролик убедительным

В готовом примере много движения, но каждая сцена поддерживает конкретную фразу. На слове «сайт» появляется окно браузера. Когда я говорю о голосе, зритель видит звуковую волну. В конце остаётся одно понятное действие.

Перед тем как добавлять эффекты, проверь три вещи:

1. Понятна ли первая фраза? Зрителю нужно быстро разобраться, что ты показываешь и зачем смотреть дальше.
2. Помогает ли картинка словам? Если в кадре одновременно заголовок, три окна и летящие плашки, внимание рассеивается.
3. Успевает ли человек прочитать главное? Красивый переход бесполезен, если он съедает время, отведённое на смысл.

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

От первой анимации к готовому MP4

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

В клубной инструкции этот путь разобран по шагам. Внутри:

• промпт для подготовки проекта и проверки рендера;
• промпты для сценария, обработки голоса и разметки слов;
• основной промпт для сборки сцен, анимаций и звука;
• готовые запросы для исправления таймингов, текста и громкости;
• настройки финального MP4, вертикальной версии и чек-лист перед публикацией.

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