кейс · моушн без After Effects

Промо кодом: 13 версий одного ролика

Я монтажёр. Решил проверить, сможет ли Claude собрать для меня рекламный моушн-ролик только кодом, без After Effects и без таймлайна. Ниже вся история по порядку: что я просил, что Claude предлагал и какое видео получалось после каждой правки.

13версий видео
33моих сообщения
1:10финальный хронометраж
2 ч 44 минработа Claude

Чем сделано

Из интернета ничего не бралось: ни фото, ни картинки, ни видео. Нейросетями картинки не генерировались, всё в кадре нарисовано кодом.

M4AДля монтажа1.m4a
→ Higgsfield

Голос

Нейросетевая копия моего голоса, я сделал её в Higgsfield. Claude только ускорил запись в 1,2 и 1,4 раза, тембр не менялся.

90
вжухиударыпечатькликиглитчикамера

Звуки · 90 файлов CC0

Мою папку со звуками собрали с Freesound. У всех файлов лицензия CC0: их можно использовать где угодно, даже без указания автора.

Старый Арбат — кодом в 3D

Без единой фотографии. Улицу построил код по узнаваемым чертам: плитка, фонари с тремя плафонами, особняки с белыми наличниками, высотка МИД.

Предметы — нарисованы кодом

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

Логотип Higgsfield

Логотип Higgsfield

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

OswaldCormorantArchivoMontserratPlayfairRoboto FlexJetBrains Mono

Шрифты

Бесплатные Google Fonts с открытой лицензией OFL.

Программы

Claude Codeпишет код, собирает и проверяет ролики
HyperFramesсобирает ролик из кода и рендерит видео; распознал голос и время каждого слова
three.js3D: объёмные буквы, сцены, город
GSAP · canvasанимация и рисование
Rubber Bandускорение голоса без изменения тембра
ffmpegсклейка видео и звука, сжатие, обложки
Pythonрасставляет звуки по словам и склейкам, собирает раскадровки
Vercel · Тильдахостинг видео и эта страница

Скиллы Claude

mg-victoredit Victor Edit

Скилл моушн-графики в моём фирменном стиле: чистый фон со светом из окна, один предмет, одно огромное слово, тонкая антиква. По нему сделаны версии с v5.

onetake

Скилл про моушн-ролики: ритм, паузы и переходы, чтобы сцены перетекали друг в друга, а ролик не выглядел как слайд-шоу.

Часть 1. Ролик

версии v1–v9
Шаг 1 · v1

Первая сборка по гайду

Виктор

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

Виктор

[прикладываю свою озвучку и промпт из гайда]

А что если без Хиггсфилда, а в HyperFrames? Формат горизонтальный, ролик про меня как монтажёра.

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

Claude предложил
  • распознать голос и сохранить тайминг каждого из 53 слов;
  • 7 сцен на 25 секунд: имя хромовыми буквами на дыме, счётчик «1:30», варп сквозь «Присаживайтесь», полёт через кольца с MOTION, зачёркнутые AFTER EFFECTS и CAPCUT, CLAUDE в червоточине, окно чата, которое печатает под голос;
  • палитра из гайда: чёрный и лайм; генераций нет, кредиты не тратятся.
Виктор

Ок, собирай.

v1длительность 0:25время Claude 24 мин
Шаг 2 · v2

Стиль референса, новая озвучка и звуки

Виктор

[прикладываю папку со звуками]

Мне не понравилась анимация, которую ты применил. Она крайне скучная. Посмотри, пожалуйста, видео оригинала, которое я тебе сейчас прислал. Там совершенно разная интересная анимация. Там двигается фиолетовый курсор по экрану. Там интересные повороты экрана. Там интересная типографика, кастомная, изумительная. Я пришлю новое аудиосообщение, ты добавишь все эти элементы перехода, как из оригинального видео, добавишь озвучку и SFX-звуки.

Claude предложил
  • разобрать референс по кадрам: в нём всё время что-то движется и рисуется;
  • светящийся фиолетовый курсор, который рисует линии, перечёркивает таймлайн и тянет кривые;
  • тонкая сетка на тёмном фоне, весь экран — 3D-плоскость, которая наклоняется и поворачивается;
  • типографика из контура в заливку, слоги, моно-шрифт интерфейса, вставки таймлайна и графика кривых;
  • звуки из папки привязать к словам и склейкам: вжухи, удары, печать, клики.
Виктор

Ок, собирай.

v2длительность 1:38время Claude 32 мин
Шаг 3 · v3

Моя палитра и камера-оператор

Виктор

Звуковые эффекты нужно уменьшить по громкости на 20%. Основная цветовая палитра: c4a1fb, ffffff, 000000 и ec1d1d. Фон можно иногда менять на белый с чёрными буквами.

00:00 — слово «привет» должно быть одно на пустом экране, далее съезжать вверх, и уже потом появляются имя и фамилия, без фразы «с вами». 00:23 — добавь лого Хиггсфилда кодом, что в нём был сделан голос.

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

Claude предложил
  • оставить только четыре цвета; красный — на ударных и «отрицательных» словах;
  • белый фон с чёрными буквами в четырёх сценах;
  • «Привет.» одно на чёрном экране, потом уезжает вверх, и появляется имя;
  • плашка «голос сделан в Higgsfield»;
  • камера как оператор: подлетает к тому, что сейчас звучит, и отъезжает. Повороты остались в двух местах.
v3длительность 1:38время Claude 9 мин
Шаг 4 · v4

Точные правки по таймкодам

Виктор

Эффекты ещё тише на 20%. На фразе «с вами Виктор Хомутовский» фраза должна появиться на белом фоне, то есть после «привет» плавный переход из чёрного фона в белый. В целом периодически меняй чёрный фон на белый, так динамичнее.

На 8 секунде со фразы «что если я скажу» почти секунду на чёрном экране только начало анимации — покажи сразу оси X и Y; фразу «motion графику» сделай красным. Фраза «прости господи» почти не видна. Слово «ни-че-го» не совпадает со звуковыми эффектами удара. На «сделай 15-секундную…» звук печатающей машинки обрывается на середине. Слово «математически» видно не полностью. С 1:11 слишком резко двигается кадр от текста к квадрату. Анимацию исправления анимации сделай более яркой, необычной.

Claude предложил
  • белый круг расходится из центра, и чёрный экран сменяется белым;
  • белый и чёрный фоны чередуются в семи местах;
  • у звуков ударов в начале была тишина 0,4–0,5 с — обрезать её у всех звуков, и «НИ-ЧЕ-ГО» попадает в слоги;
  • машинка звучит до самого Enter, «математически» помещается целиком, камера на 1:11 спокойно дрейфует;
  • правки анимации — со светящимися частицами, скан-полосой, вспышкой и меткой «PATCH».
v4длительность 1:38время Claude 7 мин
Шаг 5 · v5

Перезапуск в моём фирменном стиле

Виктор

Раздели, пожалуйста, все сцены на кадры. Я по ним придумаю интересные переходы.

Виктор

[прикладываю папку с референсами]

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

Папка с референсами · 5 вертикальных роликов
Claude предложил
  • каждая сцена как постер: светлый фон со светом из окна, один предмет, одно огромное слово, мелкая подводка тонкой антиквой;
  • предметы рисует код: хлопушка, секундомер, глаз, ноутбук, микрофон, печатная машинка, лампа, монитор;
  • тёмные кадры — только на поворотах смысла;
  • переходы — сдвиги с размытием, перевороты, отъезд из монитора; глитчи и вспышки убрать.
Виктор

Ок, собирай.

v5длительность 1:38время Claude 23 мин
Шаг 6 · v6

Разные фоны и переходы «одним кадром»

Виктор

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

Давай увеличим скорость ролика — сжать его с 1:38 до 1:20–1:25, не теряя в качестве, тембре и интонации. Звуковые эффекты сделай еле-еле слышными, процентов на 10.

Claude предложил
  • ускорить голос в 1,2 раза с сохранением тембра и высоты; анимацию ускорить так же, чтобы всё попадало в слова;
  • фоны по кругу: светлый, красный, чёрный, сиреневый — два одинаковых подряд не идут;
  • на каждом стыке что-то переходит из старой сцены в новую: камера влетает внутрь предмета (циферблат, зрачок, экран, клавиша Enter) — 14 таких стыков, ещё 6 проездов камеры;
  • эффекты в 10 раз тише.
v6длительность 1:22время Claude 10 мин
Шаг 7 · v7

1:10 и переход каждые 2–2,5 секунды

Виктор

Давай увеличим скорость и сократим видео до 1 минуты 10 секунд. Каждые 2 или 2,5 секунды должен быть переход. Каждое слово, каждая фраза должна быть видна. Переходы делаем не только через объекты, но и смещением экрана вверх, вниз, поворотом на 360, поворотом на 180, через буквы, через растворение, через смахивание ладошки, через взрывы.

Claude предложил
  • голос в 1,4 раза быстрее, тембр сохраняется;
  • 37 сцен, 36 переходов девяти видов, которые чередуются: сдвиг, поворот 360°, переворот 180°, через букву, растворение, ладонь, взрыв, нырок в предмет, отъезд из монитора.
v7длительность 1:10время Claude 13 мин
Шаг 8 · v8

В перечислениях работает камера

Виктор

Уже неплохо. Но давай отойдём от правила «переход каждые 2–2,5 секунды». Когда есть перечисление, ты можешь просто двигать камеру: где-то наезжать, отъезжать. А там, где просто идёт текст, используй правило 2–2,5 секунд. Напиши, как ты меня понял.

Claude предложил

Перечисление — один кадр, по которому ездит камера: наезжает на пункт, который звучит, переходит к следующему, в конце отъезжает на весь список. Таких мест пять: квадраты с видами анимации, плашки After Effects, цепочка «промпт → код → рендер → видео», команды правок, чекбоксы «да / нет / не совсем».

Виктор

Монтируй.

v8длительность 1:10время Claude 7 мин
Шаг 9 · v9

Без большой буквы и без зачёркиваний

Виктор

У тебя в некоторых переходах появляется большая буква «В». Давай её уберём, она смотрится грязно. Эффект, где ты зачёркиваешь слово, смотрится очень устаревшим. Пускай буквы сползают вниз, стираются или исчезают — какой-то более модный, стильный эффект.

Claude предложил
  • четыре перехода через букву заменить на растворение, поворот 360°, сдвиг вправо и переворот 180°;
  • вместо зачёркивания буквы по очереди с лёгким наклоном проваливаются под строку; кирпичики таймлайна падают и тают.
v9длительность 1:10время Claude 2 мин

Часть 2. Ролик в городе

город v1–v4
Шаг 10 · город v1

Сцены ролика на улицах

Виктор

А что если поместить сцены ролика в городскую среду? Человек как будто идёт по улице и видит ролики, выплывающие буквы и анимацию на билбордах, на автобусах, в окнах, на вывесках, на асфальте, на машинах. Как бы ты это снимал от третьего лица?

Claude предложил

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

Виктор

Давай нарисуй раскадровку кодом, картинками. На первые 10–15 секунд. Город — кодом, через 3D, в нашей палитре.

Раскадровка города v1
город v1длительность 0:12время Claude 7 мин
Шаг 11 · город v2

Старый Арбат

Виктор

Неплохо, но город слишком ненатуральный. Давай возьмём популярную улицу, типа Тверской или Старого Арбата, и сделаем схематично, как будто это настоящая Москва. Город — в цветах города. А надписи на баннерах, такси, билбордах — в моём дизайн-коде.

Claude предложил
  • Арбат по его узнаваемым чертам: пешеходная улица, светлая плитка, фонари с тремя плафонами, пастельные особняки с белыми наличниками, в конце — высотка МИД;
  • фото из интернета не брать — у них есть авторы; всё построено кодом;
  • дизайн-код только на поверхностях: вывеска, тумба, растяжка, сетка, витрина, такси с MOTION на двери.
Раскадровка Арбата v2
город v2длительность 0:12время Claude 7 мин
Шаг 12 · город v3

Буквы целиком и спокойный взгляд

Виктор

Во-первых, некоторые буквы не видны в словах — ты их не умещаешь в эти окошки. Во-вторых, давай уберём правило «за 2 секунды меняется ракурс» и сделаем взгляд человека более медленным, минимум в 2 раза. Иначе кажется, будто он смотрит налево-направо, как голубь.

Claude предложил
  • растяжку и сетку повесить ровно на фасад, лайтбокс и телефон сделать горизонтальными, постер на тумбе сузить;
  • сгруппировать поверхности: вместо девяти поворотов головы — четыре спокойных взгляда, поворот длится 1–1,5 с, между ними паузы.
Раскадровка Арбата v3
город v3длительность 0:12время Claude 4 мин
Шаг 13 · город v4

Вся прогулка: 1:10

Виктор

Делай весь ролик.

Claude предложил
  • прогулка от начала Арбата до Смоленской площади, 13 медленных взглядов, каждый держится 3–8 секунд;
  • CLAUDE на медиаэкране, такси с рекламой на крыше, растяжка поперёк улицы, витрины антиквара, окна второго этажа, афиши театра, мольберт художника, экраны на угловых домах;
  • в финале камера поднимается над площадью, и на высотке МИД загорается «БЕЗУМИЕ»;
  • перед рендером проверить кадры по всему ролику и убрать всё, что закрывает надписи.
Раскадровка всей прогулки
город v4длительность 1:10время Claude 18 мин
итого
2 ч 44 мин

Столько Claude работал над всеми 13 версиями: от первого сообщения до последнего ролика. Считалось только время, пока Claude думал, писал код, проверял кадры и рендерил видео. Время, пока я смотрел версии и писал правки, сюда не входит.

Знакомство с гайдом и пример озвучки1 мин
v1 · первая сборка по гайду24 мин
v2 · стиль референса, новая озвучка, звуки32 мин
v3 · палитра и камера-оператор9 мин
v4 · правки по таймкодам7 мин
v5 · фирменный стиль, нарезка сцен23 мин
v6 · фоны и переходы «одним кадром»10 мин
Вопрос по ходу: как оживить моё фото1 мин
v7 · 1:10, переход каждые 2–2,5 с13 мин
v8 · камера в перечислениях7 мин
v9 · без буквы и зачёркиваний2 мин
Город v1 · раскадровка и 3D-город7 мин
Город v2 · Старый Арбат7 мин
Город v3 · буквы и медленный взгляд4 мин
Город v4 · вся прогулка18 мин

Сделано в Claude Code: HyperFrames, three.js, canvas. Голос — нейросетевая копия моего голоса из Higgsfield, звуки — бесплатная библиотека с лицензией CC0. Картинки и видео нейросетями не генерировались: всё в кадре нарисовано кодом.

Made on
Tilda