Экспериментальный проект Тыквоуин: создан полностью с помощью нейросетей

Этот проект был полностью создал с помощью нейросетей. Раньше на подобный продукт ушла бы пара месяцев совместной работы иллюстратора, аниматора и разработчика. Сейчас от идеи до финальной реализации прошло полторы недели, а для всей работы потребовался один человек.

Итак, сначала идея. Для диджитал-рынка, да и вообще для бизнеса в России, сейчас не самое простое время. Но мы не сдаёмся и продолжаем идти вперёд. Чтобы передать эту мысль, создаём героя — бесстрашного мышонка, который бесконечно идёт сквозь темноту и освещает себе путь.

Что понадобилось для его создания? В первую очередь Midjourney: при поиске визуальной концепции он незаменим. Нам нужен обаятельный мышонок-маг, который смело идёт в темноте. Описываем всё своими словами любой нейросети. Мне проще делать это в Codex, чтобы не перегружать контекст Claude Code обсуждением визуальных идей. Возможно, я зря перестраховываюсь и всё можно делать тем же Клодом, но лично мне так удобнее.
Codex на основании надиктованного создаёт промпт для Midjourney. Отправляемся туда, делаем пару десятков набросков, выбираем лучший и убираем артефакты в Photoshop. Затем создаём зацикленный анимационный ролик в Kling.

Начало положено. Герой есть, темнота есть.
Бесконечный поход начат.

Дальше идём в Figma. Рисуем макеты страницы для разных размеров экрана и вместе с Клодом собираем основу сайта на Next.js — с мышонком, идущим в темноте.
Добавляем форму отправки сообщений. Каждое сообщение превращается на сцене в светлячка, рассеивающего тьму вокруг нашего героя. Анимируем появление сцены, кнопки, формы и вылет светлячков.
Это невероятно, но теперь достаточно придумать, объяснить задачу Клоду и вместе с ним тюнить результат. Весь код он берёт на себя, а мне остаётся настраивать анимацию и логику.
Здесь очень пригодится https://www.easing.dev/. Если не нравятся изинги, которые предлагает Клод, то есть характер ускорения и замедления анимации, находите подходящие на сайте и передаёте ему. Он всё правит.
Сцена и оболочка сайта готовы. Осталось добавить сюжеты, которые будут разворачиваться вокруг мышонка.

Придумываем персонажей и события для фона, с Codex пишем промпты для Midjourney. Выбираем лучшее и дорабатываем результат. Всех персонажей создаём на чёрном фоне, чтобы потом в After Effects накладывать их на зацикленный ролик с идущим мышонком в режиме Screen. В Kling делаем 6-секундные видеоролики для каждого персонажа — тоже на чёрном фоне.

Следующий шаг — открываем After Effects.
Клод прекрасно работает с этой программой, и тут он для нас незаменим. Я всю жизнь работаю с людьми, которые занимаются 2D-анимацией, но сам владею этими инструментами на весьма посредственном уровне: что-то смонтировать, создать маску — не более. Зато ими владеет Клод. Теперь мне достаточно объяснить, что делать и какой результат нужен.
Есть и сложности. Где-то он подтупливает и может зациклиться на простых вещах, которые быстрее поправить руками. При этом покадровую маску для мышонка он создал идеально. Отлично работает с изингами и настройкой финальной сцены. Вы просто говорите ему, где ускорить, где замедлить.
Не забываем, что у нас 6 сюжетов для фонов мышонка, а значит, и 6 файлов. Одни и те же правки можно внести во все одной командой.
Достаточно сказать, что и где правим. Клод сам откроет все 6 файлов по очереди, внесёт изменения и экспортирует видео.
Вы проверяете результат и говорите: «Да, всё клёво, принимаю». После этого он сожмёт файлы и зальёт их на сервер. Через пару минут результат уже на нашем сайте. Как будто вы управляете целой командой.
Итог этого этапа — мышонок и все 6 сюжетных сцен, которые проигрываются друг за другом.

Осталось последнее — настроить загрузку сцен для пользователя. Просим Клода сделать так, чтобы, пока крутится лоадер, загружалась только первая сцена. Как только она загрузилась — запускаем.
Пока первая сцена проигрывается, загружается следующая. Файлы небольшие: 1,5–2 МБ для десктопа и около 800 кБ для мобилки. Если за 6 секунд вторая сцена успела загрузиться, показываем её. Если нет — повторяем первую, пока вторая не будет готова. И так далее.
Четвёртая и пятая сцены показываются только после загрузки обеих: они связаны банкой, которой нужно больше 6 секунд, чтобы пройти через весь экран слева направо. А ролики у нас 6-секундные.

Заливаем финальную версию на сервер.

Вот и всё — в общих чертах. Проект готов к запуску.
Заходите на страницу, запускайте светлячков!