Анимированный сайт с NanoBanana и Claude Code

Пошаговое руководство от идеи и референсов до финальной публикации анимированного первого экрана. Следуй порядку шагов — и сайт заработает без хаоса в коде и файлах.

Содержание6 глав

01Этап 1. Постановка задачи и подбор референсов
02Запрос в ChatGPT для создания промпта
03Этап 2. Промпты, генерация и анимация
04Этап 3. Подготовка проекта и файловая структура
05Этап 4. Встройка анимации в первый экран
06Этап 5. Цикл правок и финальная проверка

Идея и референсы

Генерация и анимация

Интеграция в код

Проверка и публикация

сформируй концепт и собери референсы → создай графику и настрой движения → встрой анимации в проект → тестируй, оптимизируй и опубликуй

Этап 1. Постановка задачи и подбор референсов

Прежде чем открывать редактор или генератор — чётко сформулируй, что именно ты меняешь и как это должно выглядеть. Размытая задача даёт размытый результат.

Определи задачу

Что меняешь: первый экран (hero) и анимация в нём. Какой эффект нужен: видео-фон, анимация «до–после» или интерактивная сцена

Подбери референсы

1–2 референса по стилю сайта. 1 референс по анимации — как именно должно двигаться. Референсы — это якорь. Без них каждая итерация будет уходить в сторону

Запрос в ChatGPT для создания промпта

Смотри, сейчас есть тренд: собирать сайт с веб-кодингом, где Claude Code отвечает за сборку/вёрстку, Nano Banana — за изображения, а Kling — за анимацию при скролле. Механика такая: есть стартовый кадр (сцена 1), есть финальный кадр (сцена 2), и между ними идёт анимация, которая проигрывается при прокрутке первого экрана. Из-за этого сайт выглядит «живым» и современным.

Проанализируй референс, который я прикрепляю, и предложи для моего бизнеса детальный план, как сделать такую же анимацию:

какие идеи и варианты этой анимации подходят под мой бизнес;
какие варианты стартового кадра и финального кадра можно использовать;
какие варианты анимации между кадрами возможны (стили, переходы, длительность, ключевые моменты);
что конкретно нужно сделать по шагам: подготовка кадров, генерация изображений, сборка анимации, интеграция в сайт, проверка на мобилке/десктопе;
какие требования к исходникам (размеры, формат, длительность, качество), чтобы это нормально работало на сайте.

В конце составь один готовый промпт, который я смогу сразу вставить в Claude Code, чтобы начать реализацию под мой бизнес и этот референс.

Этап 2. Промпты, генерация и анимация

На этом этапе ты работаешь с NanoBanana и Kling: формулируешь кадры, генеришь изображения и собираешь финальное видео. Главный принцип — сначала тест, потом финал.

Сформулируй сцену

Опиши кадр А (исходное состояние) и кадр Б (конечное состояние). Что именно меняется между ними?

Сгенерируй в NanoBanana

Сначала тестовые варианты — проверь стиль и детали. Потом — финальные изображения в нужном качестве

Собери анимацию в Kling

Добейся стабильных деталей. Если что-то «плывёт» — перегенерируй. Скачай результат: 1920×1080, mp4

Совет

Если детали в анимации нестабильны (лого, текст, объекты) — не пытайся «починить» в редакторе. Проще перегенерировать кадр с более точным промптом.

Этап 3. Подготовка проекта и файловая структура

Перед тем как встраивать видео в сайт — наведи порядок в проекте. Хаос в файлах = баги в коде, которые сложно найти.

Скачай сайт и открой проект

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

Особый случай: динамическая подгрузка (Tilda и др.)

Если страница «пустая» при открытии через файл — отрендери её через браузерную сборку (Playwright). Проверь, что после рендера видны все блоки и стили

Наведи порядок в файлах

Положи mp4 в папку ассетов. Убедись, что структура читаемая: стили, скрипты и медиа — каждый в своей папке

Этап 4. Встройка анимации в первый экран

Это ключевой шаг — ты объясняешь Claude Code, как видео должно вести себя на странице.

Размер и позиция — куда вставлять видео, какие размеры.
Адаптация под мобилку — как видео ведёт себя на узких экранах.
Скролл и вёрстка — видео не должно ломать скролл и др. блоки.

Не забудь сохранить

Все существующие кнопки и ссылки. Заголовки первого экрана. Кликабельность всех интерактивных элементов. Видео — фон, а не замена контента. Всё важное должно остаться поверх него.