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

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

«Идея и референсы» → «Генерация и анимация» → «Интеграция в код» → «Проверка и публикация»

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

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

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

- 01 «Определи задачу» — Что меняешь: первый экран (hero) и анимация в нём. Какой эффект нужен: видео-фон, анимация «до–после» или интерактивная сцена.
- 02 «Подбери референсы» — 1–2 референса по стилю сайта. 1 референс по анимации — как именно должно двигаться. Референсы — это якорь. Без них каждая итерация будет уходить в сторону.

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

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

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

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

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

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

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

- 01 «Сформулируй сцену» — Опиши кадр А (исходное состояние) и кадр Б (конечное состояние). Что именно меняется между ними?
- 02 «Сгенерируй в NanoBanana» — Сначала тестовые варианты — проверь стиль и детали. Потом — финальные изображения в нужном качестве.
- 03 «Собери анимацию в Kling» — Добейся стабильных деталей. Если что-то «плывёт» — перегенерируй. Скачай результат: 1920×1080, mp4.

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

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

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

- 01 «Скачай сайт и открой проект» — Сохрани текущий сайт в папку на компьютере. Открой проект в Claude Code, запусти режим редактирования и подними локальный просмотр.
- 02 «Особый случай: динамическая подгрузка (Tilda и др.)» — Если страница «пустая» при открытии через файл — отрендери её через браузерную сборку (Playwright). Проверь, что после рендера видны все блоки и стили.
- 03 «Наведи порядок в файлах» — Положи mp4 в папку ассетов. Убедись, что структура читаемая: стили, скрипты и медиа — каждый в своей папке.

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

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

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

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

## Этап 5. Цикл правок и финальная проверка

Не копайся в коде вручную. Работай от результата на экране: увидел — исправил — проверил.

«Открыл страницу» → «Увидел проблему» → «Сделал скрин и описал» → «Повторил»

_Шаг 9 — цикл правок. Одна итерация = одна конкретная правка. Не пытайся исправить всё сразу._

- [ ] Десктоп / мобилка — ничего не съезжает и не перекрывает
- [ ] Скорость — видео не делает страницу тяжёлой
- [ ] Клики — кнопки и формы работают корректно

врезка `// Публикация`: текст «После того как все пункты чек-листа пройдены — можно публиковать. Не раньше.»

---

Источник: https://localhost:3000/m/animirovannyj-sajt-s-nanobanana-i-claude-code