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

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

Используется модель Imagen, доступная бесплатно в рамках Nano 1 версии.

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

Промпт для второго изображения: «Якобы в этом помещении сделали ремонт, и теперь там отличная, красивая, премиальная квартира с расставленной мебелью».

Важные параметры:

• Формат 16x9
• Отсутствие лишних деталей (надписей, мусора, инструментов)

Результат: два контрастных изображения — «до ремонта» и «после ремонта».

Шаг 2. Создание морфинг-анимации в WIV

Сервис WIV предоставляет 150 бесплатных кредитов за регистрацию.

Процесс:

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

Шаг 3. Подготовка раскадровки для сайта

Для интеграции эффекта в сайт видео нужно разбить на отдельные кадры.

Инструменты для конвертации: Ezgif.com или MiniWebTool.

Настройки в MiniWebTool:

• Значение 0.05 для извлечения ~20 кадров в секунду
• Формат JPG для минимального веса

Результат: архив (ZIP) с набором кадров (~102 кадра, ~6.5 МБ).

Шаг 4. Сборка сайта в Cursor/Antigravity AI

Используется AI-ассистент (например, в Cursor с режимом Antigravity).

Детальный промпт для ассистента включает:

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

После генерации базовой версии — уточняющий запрос:

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

Шаг 5. Запуск и финальная проверка

Проект запускается командой npm run и открывается в браузере.

Проверяются:

• Плавность и качество скролл-анимации
• Работоспособность всех секций и интерактивных элементов (SVG-анимации при наведении, pop-up окна)
• Общее визуальное впечатление и премиальность дизайна

Ключевые инструменты и технологии

• Генерация контента: Google AI Studio (Imagen), ChatGPT для промптов
• Анимация: WIV для морфинга
• Подготовка медиа: Ezgif.com, MiniWebTool для создания раскадровки
• Сборка сайта: AI-ассистент в Cursor (режим Antigravity)
• Библиотеки: GSAP для продвинутых анимаций