Ваш конспект

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

Ключевые тезисы

• Создание сайта-лендинга для ремонтной компании с трендовым эффектом превращения "до" и "после" при скролле.
• Весь процесс выполняется бесплатно с помощью нейросетей, без навыков программирования.
• Основные этапы: генерация изображений, создание морфинг-видео, разбивка на кадры и сборка сайта через AI-ассистента.

Пошаговый процесс создания

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

• Используется модель Imagen (бесплатно в рамках Nano 1 версии).
• Промпт для первого изображения: "Сгенерируй изображение для hero-секции сайта для ремонтной компании. На изображении должна быть изображена пустая квартира, голые стены".
• Промпт для второго изображения: "Якобы в этом помещении сделали ремонт, и теперь там отличная, красивая, премиальная квартира с расставленной мебелью".
• Важно: формат 16x9, отсутствие лишних деталей (надписей, мусора, инструментов).
• Результат: два изображения — "до ремонта" и "после ремонта".

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

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

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

• Для интеграции эффекта в сайт видео нужно разбить на отдельные кадры.
• Сервис для конвертации: ezgif.com или miniwebtool.com.
• В miniwebtool.com настройки: значение 0.05 для извлечения ~20 кадров в секунду, формат JPG для минимального веса.
• Результат: архив (ZIP) с набором кадров (например, 102 кадра ~6.5 Мб).

Сборка сайта в Cursor/Antigravity AI

• Используется AI-ассистент (например, в Cursor с режимом Antigravity).
• Детальный промпт для ассистента:
  • Создать красивый лендинг для компании по ремонту и отделке.
  • Использовать только кириллические шрифты, без эмодзи.
  • Применять собственноручно нарисованные SVG-иллюстрации и анимации.
  • Реализовать в hero-секции эффект скролл-анимации, используя подготовленную папку с раскадровкой (scrolltelling) или видео hero.mp4.
  • Подобрать премиальную шрифтовую пару и цветовую палитру.
  • Использовать библиотеки анимаций (например, GSAP) для улучшения дизайна.
• После генерации базовой версии — уточняющий запрос для доработки:
  • Починить или правильно подключить скролл-эффект в hero-секции.
  • Сгенерировать через нейросети и добавить в секцию "Реализованные проекты" 5 кейсов с несколькими фотографиями каждый.
  • Реализовать всплывающее окно (pop-up) для просмотра деталей каждого проекта.

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

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

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

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

Выводы

• Предложенный метод позволяет быстро создать визуально эффектный и современный лендинг без навыков вёрстки и программирования.
• Ключ к успеху — детальные и последовательные промпты для нейросетей на каждом этапе.
• Наиболее зрелищный элемент — скролл-морфинг, превращающий "голые стены" в "готовый ремонт", который создаёт "вау-эффект" и полностью соответствует тематике сайта.
• Важно контролировать качество промежуточных результатов (изображений, видео, кадров) для финального профессионального вида сайта.