Загрузка...
Смарт-конспекты YouTube-видео — ключевые идеи и инсайты без необходимости смотреть часовые ролики
Пошаговый гид по созданию премиальных сайтов с 3D-скролл анимацией. Используем Claude Code, Kling 3.0 и Nano Banana 2 для эффекта как у Apple.
🎯 О чём этот конспект: Пошаговое руководство по созданию высококачественных веб-сайтов с эффектом «прокрутки 3D-анимации» (как на сайте Apple), используя связку современных AI-инструментов. В основе метода лежит превращение сгенерированного видео в «флипбук» из отдельных кадров для максимальной производительности и плавности.
👤 Кому будет полезно: Вайбкодерам, фронтенд-разработчикам и создателям SaaS, которые хотят выделить свои продукты на фоне типичного «AI-дизайна» с помощью премиальной визуализации.
✨ Что получите: Вы научитесь генерировать консистентные изображения продукта (целого и в разрезе), создавать плавные видео-переходы между ними и интегрировать их в Next.js проект через Claude Code с автоматической раскадровкой.
Контекст: Многие пытаются реализовать скролл-анимацию, просто запуская видео при прокрутке, но это дает плохой UX: задержки, рывки и огромную нагрузку на браузер. Автор предлагает метод «флипбука»: видео разбивается на 150–200 отдельных кадров (изображений), которые предварительно загружаются и сменяют друг друга в зависимости от позиции скролла. Это обеспечивает «масляную» плавность и мгновенный отклик на действия пользователя.
Выгода: Профессиональный вид сайта уровня Apple, высокая производительность (Core Web Vitals) и полный контроль над каждым кадром анимации.
Как применить:
Claude Codeffmpeg (для извлечения кадров) и Claude Code (или Cursor с доступом к терминалу).Контекст: Для качественной анимации нужны две ключевые точки: начальное состояние продукта и конечное (например, разобранный на детали девайс или X-ray эффект). Важно, чтобы фон изображения идеально совпадал с фоном вашего сайта (белый к белому, черный к черному), иначе границы картинки будут заметны при скролле.
Выгода: Идеальная консистентность визуального ряда без навыков 3D-моделирования.
Как применить:
High-end product photography of a premium mechanical keyboard, minimalist aesthetic, centered, all-white background, 2K resolution, crisp details.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.Контекст: Теперь нужно создать мост между двумя изображениями. Инструменты вроде Kling или Luma позволяют использовать функцию "Start Frame" и "End Frame", что гарантирует, что анимация начнется и закончится именно там, где нам нужно.
Выгода: Плавная морфинг-анимация без «галлюцинаций» и изменения геометрии объекта.
Как применить:
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.Контекст: Самый сложный этап — превращение MP4 в набор кадров и написание логики скролла — делегируется Claude Code. Автор использует специальный файл инструкций (Best Practices), который диктует AI, как правильно оптимизировать анимацию.
Выгода: Автоматизация рутинного кодинга и обработки медиафайлов за считанные минуты.
Как применить:
scroll.mp4) в папку проекта и создайте файл scroll-instructions.md с описанием логики (прелоад кадров, использование Intersection Observer).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.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 компонент, где при скролле продукт плавно «разбирается», а поверх него выплывают карточки с описанием характеристик.
В: Почему нельзя просто использовать видео с 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