🎯 О чём этот конспект: Пошаговое руководство по созданию высококачественных веб-сайтов с эффектом «прокрутки 3D-анимации» (как на сайте Apple), используя связку современных AI-инструментов. В основе метода лежит превращение сгенерированного видео в «флипбук» из отдельных кадров для максимальной производительности и плавности.

👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам и создателям SaaS, которые хотят выделить свои продукты на фоне типичного «AI-дизайна» с помощью премиальной визуализации.

✨ Что получите: Вы научитесь генерировать консистентные изображения продукта (целого и в разрезе), создавать плавные видео-переходы между ними и интегрировать их в Next.js проект через Claude Code с автоматической раскадровкой.

1. Концепция «Флипбука» против Видео

Контекст: Многие пытаются реализовать скролл-анимацию, просто запуская видео при прокрутке, но это дает плохой UX: задержки, рывки и огромную нагрузку на браузер. Автор предлагает метод «флипбука»: видео разбивается на 150–200 отдельных кадров (изображений), которые предварительно загружаются и сменяют друг друга в зависимости от позиции скролла. Это обеспечивает «масляную» плавность и мгновенный отклик на действия пользователя.

Выгода: Профессиональный вид сайта уровня Apple, высокая производительность (Core Web Vitals) и полный контроль над каждым кадром анимации.

Как применить:

• Шаг 1: Подготовка инструментов — Убедитесь, что у вас установлены ffmpeg (для извлечения кадров) и Claude Code (или Cursor с доступом к терминалу).
• Шаг 2: Выбор формата — Используйте формат WebP вместо JPEG или PNG. Это критично для того, чтобы 180 кадров не «убили» скорость загрузки страницы.

2. Генерация исходных ассетов в Imagen 3 (Nano Banana 2)

Контекст: Для качественной анимации нужны две ключевые точки: начальное состояние продукта и конечное (например, разобранный на детали девайс или X-ray эффект). Важно, чтобы фон изображения идеально совпадал с фоном вашего сайта (белый к белому, черный к черному), иначе границы картинки будут заметны при скролле.

Выгода: Идеальная консистентность визуального ряда без навыков 3D-моделирования.

Как применить:

• Шаг 1: Генерация первого кадра — В Nano Banana 2 (Google Imagen 3) создайте чистое фото продукта на однотонном фоне.

High-end product photography of a premium mechanical keyboard, minimalist aesthetic, centered, all-white background, 2K resolution, crisp details.

• Шаг 2: Генерация второго кадра — Используйте первое изображение как Reference Image. Это сохранит ракурс и освещение.

X-ray image of the same headphones from the reference image, showing internal components, circuit boards, and wiring in great detail. Keep the exact same position and all-white background.

3. Создание видео-перехода в Kling 3.0

Контекст: Теперь нужно создать мост между двумя изображениями. Инструменты вроде Kling или Luma позволяют использовать функцию "Start Frame" и "End Frame", что гарантирует, что анимация начнется и закончится именно там, где нам нужно.

Выгода: Плавная морфинг-анимация без «галлюцинаций» и изменения геометрии объекта.

Как применить:

• Шаг 1: Загрузка кадров — В Kling 3.0 загрузите начальное изображение в поле "Start Frame" и конечное в "End Frame".
• Шаг 2: Промпт для перехода — Опишите процесс трансформации максимально просто, избегая лишних вращений камеры.

A continuous smooth transition where the keyboard's outer shell gradually becomes transparent, revealing the inner mechanical switches, PCB, and components underneath. Keep the camera static.

• Шаг 3: Настройки — Отключите опцию "Enhance Prompt", чтобы AI не добавил лишних движений, которые испортят скролл-эффект.

4. Сборка сайта через Claude Code и FFmpeg

Контекст: Самый сложный этап — превращение MP4 в набор кадров и написание логики скролла — делегируется Claude Code. Автор использует специальный файл инструкций (Best Practices), который диктует AI, как правильно оптимизировать анимацию.

Выгода: Автоматизация рутинного кодинга и обработки медиафайлов за считанные минуты.

Как применить:

• Шаг 1: Подготовка контекста — Поместите видео (scroll.mp4) в папку проекта и создайте файл scroll-instructions.md с описанием логики (прелоад кадров, использование Intersection Observer).
• Шаг 2: Запуск Claude Code — Используйте промпт для инициализации процесса:

I want to create a product landing page for this keyboard. 
1. Use the provided MP4 file to create a scroll-driven frame animation.
2. Use FFmpeg to extract frames into WebP format.
3. Follow the best practices in the attached MD file for performance (pre-loading frames).
4. Use Next.js and Tailwind CSS. 
5. Make it look premium, not "AI slop". Ask me questions if needed.

• Шаг 3: Тонкая настройка — Если анимация прокручивается слишком медленно, попросите Claude:

Make the scroll animation faster so it completes within fewer scroll increments. Also, add a subtle drop shadow to the content cards that appear over the animation.

Результат: Готовый Next.js компонент, где при скролле продукт плавно «разбирается», а поверх него выплывают карточки с описанием характеристик.

FAQ

В: Почему нельзя просто использовать видео с playbackRate привязанным к скроллу?

О: Видео-кодеки не предназначены для мгновенного перемещения по таймлайну назад-вперед. Это вызывает лаги, "заикания" и высокую нагрузку на CPU. Метод с кадрами (флипбук) работает значительно быстрее и плавнее.

В: Сколько кадров оптимально для такой анимации?

О: Обычно достаточно 120–180 кадров для 3-5 секундного видео. Этого хватает для плавности при стандартной скорости прокрутки.

В: Что делать, если фон изображения не совпадает с фоном сайта?

О: Лучше всего перегенерировать изображения с правильным цветом фона. В крайнем случае можно попросить Claude Code добавить CSS-фильтры или маски, но это может усложнить проект и снизить производительность.

В: Как установить FFmpeg, если Claude Code просит об этом?

О: На Mac: brew install ffmpeg. На Windows: скачайте бинарные файлы с официального сайта и добавьте путь к ним в системную переменную PATH. Claude Code также может попытаться сделать это сам через терминал.

В: Подойдет ли этот метод для мобильных устройств?

О: Да, но важно следить за весом кадров. Используйте агрессивное сжатие WebP и убедитесь, что прелоадер (Loading state) корректно работает, чтобы пользователь не видел пустой экран, пока грузятся 150 картинок.

Конспект создан на основе видео «How To Build Premium Apple-Style AI Websites (Step-By-Step)» канала Chase Lean. Все права на оригинальный материал принадлежат авторам. Источник: https://youtu.be/QutvJAP06-A