Краткое содержание

🎯 О чём этот конспект: Пошаговое руководство по созданию премиальных интерактивных 3D-сайтов без навыков работы в 3D-редакторах (Blender/Cinema 4D). Разбирается полный стек современного вайбкодинга: генерация multi-view ассетов, авто-риггинг 3D-моделей (GLB), генерация видеофона через Cling/Hicksfield, интеграция WebGL-шейдеров, CSS-блендинг (mix-blend-mode: exclusion), scroll-scrubbing анимации и сборка готового продакшен-кода в Cursor, Claude и Bolt.new.

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

✨ Что получите: Готовые воркфлоу, промпты и архитектурные приёмы для создания интерактивных сайтов уровня Awwwards за считанные часы, а также стратегию дистрибуции и упаковки цифровых ассетов для монетизации.

1. Конвейер генерации интерактивной 3D-модели (GLB) без 3D-софта

Контекст: Создание 3D-моделей традиционным способом требует месяцев изучения Blender, топологии, развертки и риггинга. Современный подход вайбкодера позволяет трансформировать плоское 2D-изображение в готовую к анимации 3D-сетку в формате GLB за пару минут. Для этого генерируется ортографический multi-view (ракурсы спереди, сзади, сбоку), пропускается через нейросетевой генератор геометрии, снабжается авто-ригом и встраивается в веб-интерфейс, где модель привязывается к координатам курсора.

Тайминг: [00:57], [01:34], [02:14], [02:40]

Выгода: Экономия от $500 до $2000 на услугах 3D-моделлера на каждый лендинг; генерация и внедрение интерактивного 3D-персонажа занимает менее 5 минут.

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

• Шаг 1: Подготовка ортографических проекций — Figma / ChatGPT (GPT Image 2) — Возьмите референс объекта и очистите его от UI-элементов и текста, запросив проекции с 4 сторон.

Turn this robot to look forward (front view) and make it standing so I can see the full height of this robot. Remove all text elements, buttons, and UI components from this image. Generate four views: front view, left view, back view, and right view on a clean neutral background.

• Шаг 2: Генерация 3D-модели и риггинг — Multi-view 3D Generator (например, Tripo3D / Rodin / Meshy) — Разрежьте сгенерированное изображение на отдельные ракурсы, переключите инструмент в режим «Multi-view», загрузите проекции в соответствующие слоты и нажмите «Generate». После генерации сетки перейдите во вкладку «Animate», выберите пресет «Humanoid» и примените «Auto-rigging».
• Шаг 3: Экспорт оптимизированного формата — 3D Platform — Экспортируйте результат в формате .glb (GLTF Binary). Модель получается ультралегкой (1–3 МБ), что критично для скорости загрузки веб-страницы.
• Шаг 4: Внедрение и привязка к курсору — Claude Artifacts / Cursor — Загрузите полученный .glb файл в проект и свяжите интерактивность с Three.js / React Three Fiber через промпт:

Replace the hero background image with this attached 3D GLB model. Set up a WebGL canvas using Three.js / @react-three/fiber. Configure the 3D model so that its head and body smoothly rotate and follow the user's cursor movement across the viewport with realistic dampening (lerp).

Результат: Интерактивный Three.js-компонент на сайте, где детализированный 3D-персонаж плавно поворачивается вслед за курсором мыши без просадок FPS.

2. Анимация референсов и интеграция генеративного видеофона

Контекст: Сложные анимации интерфейсов или объектов проще создавать через видеогенераторы с motion-transfer, чем вручную кодить покадровую динамику. Вы можете взять эстетичный референс видео (например, из Pinterest или X), сгенерировать собственное статичное изображение в идентичной композиции через Inpainting/Image-to-Image, а затем анимировать его в Kling AI или Seedance 2.0 (Hickfield), передав исходное видео как референс движения.

Тайминг: [03:25], [03:59], [04:44], [05:20]

Выгода: Создание кинематографичных видео-фонов кинематографического качества без съемок и моушн-дизайна за 3–5 минут.

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

• Шаг 1: Трансформация референса под свой стиль — Figma AI / Midjourney / ChatGPT — Загрузите найденный референс и измените объект или персонажа, сохраняя позу:

Create the same image as this reference, keeping the exact same position of the elements, the hand gesture, lighting, and composition, but use this visual style. Keep the subject as an Asian girl, photorealistic 8k, cinematic studio lighting.

• Шаг 2: Перенос движения через Video-to-Video — Kling AI / Seedance 2.0 — Загрузите исходное референс-видео (длительностью ~7 секунд) и ваше новое изображение.

Animate this image exactly as shown in video 1. Replicate the motion dynamics, camera movement, and speed. Do not change the subject or scene elements. Duration: 7s, bitrate: standard.

• Шаг 3: Встраивание видео в кодовую базу — Claude / Cursor — Добавьте сгенерированный MP4 в hero-секцию и настройте цветовую палитру текста для идеального контраста:

Replace the hero section video with this generated MP4. Make all content in the first section pure white (#FFFFFF), except the main product title badge and the primary 'Reserve' button with its border — make those two elements pure black (#000000) for sharp contrast against the video background.

Результат: Кастомный видеоряд в hero-секции лендинга, идеально подогнанный под тайминги и композицию дизайнерского референса.

3. Продакшен-разработка в Cursor: CSS-блендинг exclusion и мультистраничность

Контекст: Частая проблема интеграции видео в темные темы сайтов — несовпадение черного цвета фона видео (часто сжатого кодеком до темно-серого #111111) с чистым черным фоном страницы (#000000). Из-за этого видны жесткие прямоугольные границы видеоплеера. Использование CSS-свойства mix-blend-mode: exclusion полностью устраняет эту границу, бесшовно растворяя ролик в интерфейсе.

Тайминг: [06:21], [07:46], [08:09], [10:41], [12:54]

Выгода: Устранение визуальных артефактов видеоплеера без ручного перерендера или маскирования в After Effects. Мгновенная генерация согласованной дизайн-системы для всех подстраниц.

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

• Шаг 1: Инициализация проекта в Cursor — Cursor — Откройте чистую папку, выберите модель (например, Grok 4.5 High / Fast или Claude 3.5 Sonnet / 3.7 Sonnet) и задайте каркас:

Build a landing page for an AI-driven vehicle company. Structure: 4-5 sections. Background: pure black (#000000). Use ultra-clean typography, modern minimalist aesthetic, premium spacing.

• Шаг 2: Применение дизайн-токенов из готовых шаблонов — Motion Sites / Палитра — Передайте AI эталонный промпт со стилями и укажите применить только визуал, не ломая контент:

I am providing a design reference prompt below. DO NOT change the current page structure, vehicle copy, or section layouts. Extract ONLY the typography rules, font sizes, colors, and button styles from this reference prompt and apply them to our current website.

• Шаг 3: Бесшовное встраивание видео через CSS Exclusion — Cursor — Внедрите видео и примените блендинг:

Add this video as the background of the hero section. Apply the CSS property `mix-blend-mode: exclusion` to the video element and set opacity to 0.7 so it seamlessly merges with the pure black #000000 background without any visible frame edges.

• Шаг 4: Избавление от «AI-рамок» и выравнивание иерархии — Cursor — Удалите дефолтные обводки, которые нейросети ставят на каждый блок:

Remove the border strokes around the cards and the divider line above the footer. Center-align the text horizontally inside the image container, make the image full-width, and add vertical linear gradients on top and bottom (from #000000 to transparent) for a smooth transition.

• Шаг 5: Масштабирование на подстраницы в Max Mode — Cursor — Переключитесь в режим максимального контекста (Max Mode) для генерации связанных страниц:

In the navbar, we have two links: 'Model' and 'Experience'. Build separate dedicated pages/routes for each. Maintain the exact design tokens, typography scale, padding system, and visual language established on the home page. Each page should contain 4-6 fully styled sections.

Результат: Полнофункциональный мультистраничный сайт с глубоким черным фоном, адаптивной версткой и видеофонами, плавно перетекающими в интерфейс без видимых рамок.

4. Как избежать «AI-синдрома» в веб-дизайне: Интерактивные 3D-карточки в Bolt.new

Контекст: Сайты, сгенерированные AI «в лоб» по простым запросам («Сделай сайт для финтеха»), мгновенно распознаются и выглядят дешево. Автор выделяет «Четыре всадника апокалипсиса AI-дизайна»:

1. Хаотичный и неестественный letter-spacing в заголовках.
2. Грязные серо-белые фоны со стандартными размытыми радиальными градиентами.
3. Кислотно-зеленые или фиолетовые бессмысленные акцентные цвета.
4. Однотипные карточки с глянцевой обводкой (glassmorphism border-gradient).

Чтобы избежать этого, используются готовые интерактивные WebGL-компоненты и точные референсы структуры.

Тайминг: [13:58], [14:38], [15:10], [15:58]

Выгода: Переход от уровня шаблонного MVP к коммерческому визуалу уровня топовых финтех-стартапов (Revolut, Cash App).

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

• Шаг 1: Промптинг на основе структуры референса — Bolt.new — Сделайте скриншот удачной структуры (с сайтов вроде Seesaw или Land-book) и отдайте его нейросети с контекстом:

Build a hero section based on the structural layout of this screenshot. Rewrite all copy to fit a premium mobile-first fintech bank: 'Send and receive money instantly from your phone anywhere'. Keep the exact character count per line to maintain typography balance. Background: pure black (#000000). Avoid generic AI green gradients.

• Шаг 2: Внедрение готового шейдерного компонента — Twiders Dev / Shaders.com / Motion Sites — Скопируйте готовый компонент анимированных 3D-карточек:

Add this interactive 3D animated cards component to the hero section. Move the entire component 100px to the right so it does not collide with the three-line headline.

• Шаг 3: Подключение шейдеров вместо тяжелых видео — Bolt.new — Активируйте коннектор Shaders и привяжите интерактив:

Enable shader effects on the card surfaces. Instead of static videos inside the cards, render interactive WebGL canvas shaders that react to cursor hover with smooth ripple and distortion effects without dropping frames.

Результат: Премиальный финтех-лендинг с отзывчивыми 3D-карточками, реагирующими на мышь через WebGL/шейдеры, без типичных визуальных штампов дешевых AI-генераций.

5. Эффект маскирования текста сквозь 3D-ассет (SVG Subtraction)

Контекст: Один из трендовых приемов в веб-дизайне — эффект, когда трехмерный объект (например, планета или продукт) перекрывает нижнюю часть типографики, либо текст кажется вырезанным внутри объекта. Реализация через видеомонтаж не дает гибкости верстки. Решение: генерация зацикленного видео с жестко зафиксированными границами и применение булевой операции вычитания (Subtract) в Figma с последующим экспортом SVG-маски в код.

Тайминг: [16:48], [17:30], [17:58], [18:42]

Выгода: Реализация сложных многослойных эффектов глубины (depth masking) чистым кодом без утяжеления бандла.

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

• Шаг 1: Генерация бесшовного цикличного видео — Cling AI — Загрузите изолированное изображение (например, черная луна на прозрачном/черном фоне) и жестко ограничьте движение камеры:

Animate this image. Make it spin continuously. The spinning must be noticeable and perfectly looped. CRITICAL: Do not change the position, scale, or camera angle during the animation. Keep the subject locked in the absolute center.

• Шаг 2: Создание геометрической маски — Figma — Нарисуйте прямоугольник по размеру экрана поверх текста, поместите поверх векторный контур вашего объекта, выделите оба слоя и нажмите Subtract Selection (логическое вычитание). Экспортируйте результат как SVG.
• Шаг 3: Сборка в коде — Bolt.new / Cursor — Передайте SVG-маску и видео AI-агенту:

Apply this exported SVG as a CSS mask over the headline text layer. Layer 1 (bottom): Video background. Layer 2: Main headline text. Layer 3 (top): The 3D spinning moon asset, perfectly aligned so the typography appears to pass behind its silhouette.

Результат: Глубокая многослойная сцена, где текст визуально проходит «за» вращающимся 3D-объектом, сохраняя при этом доступность (текст остается выделяемым в DOM).

6. Воркфлоу Figma AI: От комьюнити-шаблона к коду через Figma Make и Parallax

Контекст: Figma перестала быть просто инструментом для статичных макетов. Комбинация встроенного AI Figma, базы бесплатных UI-китов комьюнити и конвертера Figma Make позволяет взять топовый дизайнерский концепт и превратить его в работающий стек (React/Tailwind) за несколько кликов.

Тайминг: [18:02], [19:02], [20:43], [22:20], [23:00]

Выгода: Нулевые затраты времени на подбор сетки, шрифтовых пар и отступов; готовый интерфейс переносится в чистый код с поддержкой скролл-анимаций.

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

• Шаг 1: Подбор и модификация готового экрана — Figma Community — Найдите качественный макет по тегам (например, travel website или automotive). Удалите лишнее, оставив 2 ключевых блока.
• Шаг 2: AI-модификация графики прямо на холсте — Figma AI / Edit with Prompt — Выделите объект (например, дневное авто) и трансформируйте его:

Edit with prompt: Change this scene to deep night time, cinematic dark lighting, headlights turned on casting realistic light beams on the road.

• Шаг 3: Автоматический перевод в Dark Mode — Плагин Dark Mode Magic — Выделите фрейм и запустите плагин для инверсии цветов с сохранением контраста, скорректируйте прозрачность плашек до rgba(255, 255, 255, 0.15).
• Шаг 4: Конвертация в код через Figma Make — Figma Make — Выделите готовые артборды, откройте Figma Make и выберите целевую модель (Gemini Flash или Claude 3.5 Sonnet):

Build out this website into clean semantic HTML/Tailwind CSS. Ensure full responsiveness.

• Шаг 5: Добавление скролл-параллакса на слои — Figma Make / Cursor — Привяжите слои к скроллу:

Identify the mountain element layer ('image 4'). When the user scrolls, lock the hero text in place and translate 'image 4' upwards so it covers the text. Reveal the next section seamlessly from underneath the mountain layer.

Результат: Готовый фронтенд с кинематографичным эффектом параллакса при скролле, перенесенный из векторных слоев Figma в код за считанные минуты.

7. Scroll-Scrubbed видеофон: Создание плавной анимации по скроллу страницы

Контекст: Сайты премиум-класса (уровня Apple) часто используют видеоряд, таймлайн которого жестко привязан к позиции ползунка скролла (scroll-scrubbing). Однако тяжелое MP4-видео на мобильных устройствах или слабых GPU часто дергается и имеет высокий input lag при обратном скролле. Оптимальное решение для вайбкодера: генерация абстрактного 3D-видео с последующей конвертацией в секвенцию кадров JPEG или оптимизированный скраббинг через Canvas.

Тайминг: [27:00], [28:26], [30:28], [30:46], [31:15]

Выгода: Плавность анимации 60 кадров/сек при прокрутке вверх и вниз на любых устройствах, исключение задержек декодирования видео.

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

• Шаг 1: Генерация видео с направленным движением — Hicksfield / Kling AI — Сгенерируйте абстрактные подвешенные кабели или формы:

Abstract 3D white cables hanging in dark space. Use image frame 1 and frame 2. The top of the cables stay completely fixed in place, never moving. The bottom ends of the cables extend, growing longer and moving downward continuously. Clean minimalistic studio lighting.

• Шаг 2: Оптимизация видеоряда — MP4 to JPEG Sequence — Если целевой сайт критичен к производительности, переконвертируйте полученный 7-секундный ролик в секвенцию JPEG-изображений (от 60 до 120 кадров).
• Шаг 3: Сборка скраббинг-движка в Cursor — Cursor — Подключите видео или секвенцию через Canvas с привязкой к скроллу:

Implement a scroll-scrubbed video background on this page using HTML5 Canvas / GSAP ScrollTrigger. As the user scrolls down, scrub the video timeline proportionally to the scroll depth. Ensure 100% opacity, no dark overlays over the video, and keep all typography pure white (#FFFFFF) with high z-index.

• Шаг 4: Распределение контента по сетке — Cursor — Сбалансируйте пустое пространство сцены:

In the second section, keep the center area completely empty so the 3D asset remains visible. Position half of the text blocks pinned to the left edge and the other half pinned to the right edge. Ensure full opacity across all text elements.

Результат: Интерактивный скролл-лендинг, где 3D-элементы «растут» или трансформируются в такт движению пальца/колесика мыши без лагов.

8. Монетизация и вирусная дистрибуция вайбкодинг-проектов в X (Twitter)

Контекст: Создание красивых сайтов с AI не приносит денег, если о них никто не знает. Автор показывает, как X (Twitter) генерирует 90% его клиентов (при 66 000 подписчиков за 1 год), работая лучше Upwork и YouTube. Главная ошибка новичков — тегать десятки компаний сразу или выкладывать немодифицированные чужие промпты.

Тайминг: [32:31], [33:23], [34:38], [34:58], [35:19]

Выгода: Поток входящих лидов на разработку ($3k–$10k за сайт) и пассивный доход от $14 000 в месяц на продаже сгенерированных ассетов.

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

• Шаг 1: Запись качественного демо — CleanShot X / Screen Studio (Mac) / альтернативы на Windows — Запишите плавную работу интерфейса с курсором, без системных панелей, в разрешении 4K/60fps.
• Шаг 2: Правильная структура вирусного твита — X (Twitter) — Сформулируйте твит строго в минималистичном формате:

AI-driven interactive 3D landing page built with @cursor_ai and @claudeai.
 
Scroll-scrubbed video dynamics + WebGL canvas.
 
Insp: [Ссылка на автора референса]

Правило дистрибуции: Тегайте только одну профильную компанию или создателя инструмента (например, команду Cursor, Bolt или автора оригинального дизайна). Если тегнуть 5 конкурирующих компаний (Google, Anthropic, Bolt) — никто не сделает репост, так как платформы не пиарят конкурентов.

• Шаг 3: Продажа паков скролл-видео (Цифровой продукт) — Lemon Squeezy / Gumroad — Соберите лендинг-каталог готовых scroll-based фонов:
  • 20 зацикленных видео-ассетов = $9
  • 40 видео = $19
  • 100 видео = $49

Математика: При 10 продажах пака за $49 в день выручка составляет $490/день (~$14 700/месяц).

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

FAQ

В: Нужна ли мощная видеокарта для запуска 3D-моделей и WebGL-шейдеров на сайтах? О: Нет, в этом ключевое преимущество подхода. Вся генерация 3D-сетки и рендер видео происходят в облаке (AI-сервисы). В коде используются оптимизированные форматы .glb весом 1–3 МБ и легковесные шейдеры на Three.js/Canvas, которые аппаратно ускоряются браузером даже на смартфонах.

В: Почему видеофон через mix-blend-mode: exclusion выглядит лучше обычного прозрачного WebM? О: Формат WebM с альфа-каналом (прозрачностью) имеет большой вес, плохо поддерживается в Safari на iOS и часто приводит к артефактам по краям. Обычный MP4 с черным фоном и CSS-режимом exclusion весит в разы меньше, декодируется аппаратно и гарантированно сливается с фоном #000000.

В: В чем разница между использованием Claude Artifacts и Cursor для сборки сайта? О: Claude Artifacts идеален для быстрой проверки изолированных концептов и компонентов (один HTML/JSX файл). Cursor — это полнофункциональная IDE, где через агентские режимы (Composer) вы можете строить масштабируемые мультистраничные проекты, подключать npm-пакеты, настраивать сборку и деплоить на Vercel.

В: Что делать, если видео по скроллу (scroll-scrubbing) дергается на мобильных устройствах? О: Браузеры на мобильных устройствах троттлят постоянный вызов video.currentTime. Решение — конвертировать MP4-ролик в секвенцию сжатых кадров (JPEG sequence) и отрисовывать текущий кадр в зависимости от window.scrollY на <canvas>. Это обеспечивает стабильные 60 FPS.

В: Законно ли продавать видео-паки или сайты, сделанные на основе референсов из Pinterest? О: Если вы копируете чужой арт «пиксель в пиксель» — это нарушение авторских прав. Но если вы используете композиционный скелет референса для генерации принципиально новых ассетов через собственные промпты (новый объект, текстуры, свет), это считается производной добросовестной работой.

В: Как сделать так, чтобы сгенерированная 3D-модель точно следовала за курсором мыши без рывков? О: Используйте линейную интерполяцию (LERP) в Three.js. При движении мыши вы обновляете целевые координаты (targetX, targetY), а в цикле рендера (requestAnimationFrame) плавно сдвигаете текущий угол поворота модели к целевому с коэффициентом затухания 0.05–0.1.

Ресурсы и ссылки

• Cursor — AI-первый редактор кода для вайбкодинга — https://cursor.com
• Bolt.new — Браузерная AI-среда разработки полного цикла — https://bolt.new
• Claude (Anthropic) — Нейросеть для генерации логики и компонентов фронтенда — https://claude.ai
• Motion Sites — Платформа с базой промптов, дизайн-систем и UI-компонентов автора — https://motionsites.ai (упомянут в видео)
• Kling AI — Генератор кинематографичного видео с motion-control — https://klingai.com
• Hicksfield — Платформа для генерации видео по изображениям — упомянут в видео
• Figma — Графический редактор с AI-функциями генерации и плагинами — https://figma.com
• Twiders Dev — Библиотека анимированных веб-компонентов — упомянут в видео
• Shaders.com — Каталог WebGL-шейдеров для интеграции в веб — упомянут в видео
• Land-book — Галерея референсов сайтов для вдохновения — https://land-book.com
• Seesaw — Подборка креативных интерактивных сайтов — упомянут в видео
• CleanShot X — Инструмент захвата экрана и записи видео для Mac — упомянут в видео
• Screen Studio — Программа для записи премиальных демо-видео — упомянут в видео
• Lemon Squeezy — Платформа для продажи цифровых продуктов — https://lemonsqueezy.com

Конспект создан на основе видео «How to Build 3D Animated Websites with AI (Full Course)» канала Victor Odin. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=IR1tzLU-r_4