Создание сайта со скролл-анимацией без кода: Antigravity и Kling AI

Обзор методики создания лендинга

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

Основная фишка — скролл-анимация, которая превращает изображение пустой квартиры в визуализацию готового ремонта. Это создаёт мощный визуальный эффект (вау-момент), полностью соответствующий тематике и делает лендинг запоминающимся.

Ключевой момент: плавный морф из состояния «до ремонта» в состояние «после» — это главный инструмент привлечения внимания посетителя.

Основные этапы:

1. Генерация двух контрастных изображений (бесплатно через Google AI Studio)
2. Создание морфинг-видео, превращающего первое изображение во второе
3. Раскадровка видео на отдельные кадры для интеграции в сайт
4. Автоматическая сборка лендинга с помощью AI-ассистента в Cursor
5. Проверка и запуск готового сайта

Генерация изображений в Google AI Studio

Первый этап — создание двух контрастных изображений с помощью нейросети Imagen, доступной бесплатно в рамках подписки Nano 1 (Google AI Studio).

Промпты для генерации

Для первого изображения («до ремонта»):

Сгенерируй изображение для hero-секции сайта для ремонтной компании. На изображении должна быть пустая квартира с голыми стенами, без мебели и отделки. Профессиональная фотография интерьера.

Для второго изображения («после ремонта»):

В этом же помещении сделан премиальный ремонт. Квартира красивая, с качественной отделкой, современной мебелью и стильным интерьером. Профессиональная фотография в том же ракурсе.

Критические параметры

• Формат: 16x9 (горизонтальный)
• Ракурс: одинаковый для обоих изображений (они должны быть сняты из одной точки)
• Чистота: отсутствие лишних деталей (надписей, мусора, инструментов)
• Освещение: естественное, ровное

Итог: два контрастных изображения, которые станут ключевыми кадрами для морфинг-анимации.

Морфинг-анимация в WIV

Второй этап — создание плавной анимации, трансформирующей первое изображение во второе. Для этого используется сервис WIV, предоставляющий 150 бесплатных кредитов за регистрацию — этого достаточно для создания одного высокого качества видео.

Пошаговый процесс

1. Загрузка исходных изображений: первое (пустая квартира) как начальный кадр, второе (отремонтированная квартира) как конечный
2. Генерация промпта через ChatGPT 3.5: используйте фразу «Напиши промпт для генерации видео, чтобы получился плавный морф из одной картинки в другую»
3. Выбор модели: рекомендуется O1 Pro или 2.5 Turbo Pro для максимального качества
4. Установка длительности: оптимально 5 секунд (достаточно для эффектного скролла)
5. Запуск обработки и экспорт: готовый видеофайл сохраняется (например, hero.mp4)

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

Раскадровка видео для интеграции

Третий этап — разбивка видеофайла на отдельные кадры (JPG-изображения). Это необходимо для реализации скролл-эффекта: сайт будет показывать разные кадры в зависимости от позиции скролла посетителя.

Инструменты и настройки

Рекомендуемые сервисы:

• Ezgif.com
• MiniWebTool

Оптимальные параметры в MiniWebTool:

• Значение извлечения: 0.05 (извлекаются ~20 кадров в секунду)
• Формат выходного файла: JPG для минимизации размера
• Ожидаемый результат: архив (ZIP) с набором кадров (~102 кадра, общий размер ~6.5 МБ)

Совет: сохраняйте архив в удобное место и распакуйте папку перед передачей AI-ассистенту. Каждый кадр должен быть отдельным файлом для корректной работы скролл-анимации.

Автоматическая сборка сайта в Cursor

Четвёртый этап — создание полноценного лендинга с использованием AI-ассистента (например, Cursor в режиме Antigravity). Ассистент генерирует весь HTML/CSS/JavaScript код на основе вашего подробного описания.

Детальный промпт для AI-ассистента

Передайте нейросети следующие требования:

• Создать красивый, премиальный лендинг для компании по ремонту и отделке жилых помещений
• Использовать только кириллические шрифты, без эмодзи
• Применять собственноручно нарисованные SVG-иллюстрации и микроанимации
• Реализовать в hero-секции эффект скролл-анимации, используя подготовленную папку с раскадровкой
• Подобрать премиальную шрифтовую пару и элегантную цветовую палитру
• Использовать библиотеки анимаций (например, GSAP) для плавных переходов и интерактивности

Уточняющий запрос после первой генерации

После создания базовой версии отправьте второй запрос:

1. Починить или правильно подключить скролл-эффект в hero-секции (убедиться, что кадры меняются синхронно со скроллом)
2. Сгенерировать через нейросети и добавить в секцию «Реализованные проекты» 5 реальных кейсов с несколькими фотографиями каждый
3. Реализовать всплывающее окно (modal/pop-up) для просмотра деталей каждого проекта при клике

Pro-совет: чем детальнее и конкретнее ваш промпт, тем лучше результат. Используйте примеры цветов, типов шрифтов, эмоциональные описания желаемого эффекта.

Запуск и финальная проверка сайта

Пятый этап — проверка работоспособности и визуального качества созданного лендинга.

Запуск проекта

Используется стандартная команда для запуска локального сервера:

npm run dev или npm run start (в зависимости от конфигурации проекта)

Сайт открывается в браузере, обычно на адресе localhost:3000 или localhost:5000.

Чеклист проверки

• Скролл-анимация: при прокручивании страницы вверх/вниз кадры морфинга плавно сменяют друг друга, создавая эффект трансформации
• Качество изображений: картинки загружаются без артефактов, текстуры чёткие
• Интерактивные элементы: SVG-анимации срабатывают при наведении курсора
• Pop-up окна: при клике на кейсы открываются модальные окна с детальной информацией и дополнительными фотографиями
• Совместимость: сайт корректно отображается на разных размерах экранов (мобильные, планшеты, десктопы)
• Визуальное впечатление: общий дизайн выглядит премиально, лендинг создаёт нужный эффект и соответствует ожиданиям

Важно: контролируйте качество на каждом шаге. Если что-то выглядит не так, скорректируйте промпт и попросите AI переделать элемент.

Инструменты и технологии

Вывод: Весь процесс выполняется исключительно на бесплатных или минимально платных инструментах. Основной вложение — ваше время на формулировку правильных промптов.