3D Website Builder

Собирает премиальный MVP-сайт с hero-секцией, где scroll-driven видео-анимация управляется прокруткой мыши. Источник паттерна — видео Джека («$10K / $12K сайты»). После работы скилла сайт готов к деплою через ship-to-vercel.

Когда срабатывать

Пользователь говорит «собери MVP», «build the site», «привяжи видео к скроллу», «scroll stop builder», «hero с этим видео»
На входе УЖЕ есть готовое 7-секундное .mp4 от Kling 3.0 (например, после [[scroll-stop-prompter]])
После [[website-intelligence]] когда Build Brief approved и есть видео-файл

Когда НЕ срабатывать

Видео ещё не сгенерировано — отправь в [[scroll-stop-prompter]] сначала
Нужен сложный многостраничный сайт — это для MVP, расширяй позже
Пользователь просит фронтенд-фреймворк — этот скилл выдаёт vanilla HTML/CSS/JS (как в видео Джека). Для Next.js/Vite — пусть пользователь скажет явно

Workflow

Шаг 1. Интервью (5 вопросов)

Задавай по одному. Не спрашивай больше 5.

Название компании / бренд (для <title> и hero)
Логотип (путь к файлу или URL — если нет, сгенерируем плейсхолдер с инициалами)
Цвета бренда (3 hex'а: primary, accent, background — если из Firecrawl-отчёта, попроси вставить)
Путь к 7-секундному видео (./assets/hero.mp4 или абсолютный путь)
Целевое действие (что должна делать кнопка hero: «Get a quote», «Order online», «Book demo», …)

Опционально (только если непонятно из контекста):

Тон голоса (приближённо: friendly / professional / playful / authoritative)
Headline (если есть готовый — иначе сгенерим 3 варианта по AIDA)

Шаг 2. Каркас проекта

Создай в текущей рабочей директории:

project/
├── index.html
├── css/style.css
├── js/scroll.js
├── assets/
│   ├── hero.mp4         (копия видео пользователя)
│   └── logo.svg / .png  (логотип)
├── README.md            (инструкция по деплою)
└── .gitignore

Важно: имя папки и пути — строго без кириллицы (Claude Code ломается).

Шаг 3. HTML

Базовый шаблон index.html (минимум):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{Brand} — {tagline}</title>
  <meta name="description" content="...">
  <meta property="og:title" content="...">
  <meta property="og:description" content="...">
  <meta property="og:image" content="/assets/og.png">
  <link rel="canonical" href="https://...">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="nav">
    <a href="/" class="logo"><img src="/assets/logo.svg" alt="{Brand}"></a>
    <nav>
      <a href="#about">About</a>
      <a href="#services">Services</a>
      <a href="#contact">Contact</a>
    </nav>
    <a href="#cta" class="cta-btn">{CTA}</a>
  </header>

  <section class="hero">
    <video class="hero-video" id="heroVideo" muted playsinline preload="auto">
      <source src="/assets/hero.mp4" type="video/mp4">
    </video>
    <div class="hero-content">
      <h1>{Headline}</h1>
      <p class="subhead">{Subhead}</p>
      <a href="#cta" class="cta-btn primary">{CTA}</a>
    </div>
  </section>

  <!-- Дополнительные секции: about, services, social proof, contact -->

  <script src="js/scroll.js"></script>
</body>
</html>

Single H1 на странице. Семантика: <header>, <section>, <nav>, <main> где уместно.

Шаг 4. Scroll-bound video (КЛЮЧЕВОЕ)

js/scroll.js — привязать currentTime видео к scrollY страницы:

const video = document.getElementById('heroVideo');
const hero = document.querySelector('.hero');

video.addEventListener('loadedmetadata', () => {
  const heroHeight = hero.offsetHeight;
  const videoDuration = video.duration; // 7 секунд

  // Делаем hero высотой ~3 экрана, чтобы пользователь успел доскроллить через всё видео
  hero.style.height = `${window.innerHeight * 3}px`;

  function updateVideoTime() {
    const rect = hero.getBoundingClientRect();
    const scrollProgress = Math.max(0, Math.min(1, -rect.top / (hero.offsetHeight - window.innerHeight)));
    video.currentTime = videoDuration * scrollProgress;
    requestAnimationFrame(updateVideoTime);
  }

  updateVideoTime();
});

Почему так: видео не играет автоматически — currentTime ставится вручную из scrollY. Это даёт scrubbing-эффект «как у Apple».

Mobile fallback: на prefers-reduced-motion: reduce или мобильных (≤768px) — показать первый кадр как статичную картинку (через poster или canvas-снимок), не привязывать к скроллу.

Шаг 5. CSS

css/style.css минимум:

Кастом-проперти под цвета пользователя: --primary, --accent, --bg
Hero: position: relative, video в position: sticky; top: 0; width: 100vw; height: 100vh; object-fit: cover
Верхний блок hero белый (если white background в видео) — для бесшовности
Контент hero: position: absolute поверх видео или display: grid рядом
Mobile: @media (max-width: 768px) — упростить до статичной hero
prefers-reduced-motion: reduce → отключить scroll-binding

Шаг 6. SEO-минимум на старте

Не запускай полный аудит — для этого есть [[seo-optimizer]]. Но сразу пропиши:

Уникальный <title> (≤60 chars)
<meta name="description"> (≤160 chars)
Open Graph (og:title, og:description, og:image)
Twitter Cards (twitter:card, twitter:title)
Canonical URL
<html lang> правильный
Alt на все <img>
Schema.org JSON-LD (Organization или LocalBusiness)

Шаг 7. README + деплой

README.md:

# {Brand}

## Local
Open index.html in browser, or run `python -m http.server 8000`.

## Deploy
1. Push to GitHub: `gh repo create {brand}-site --private --source=. --push`
2. Deploy to Vercel: import repo at vercel.com/new

Or use the `ship-to-vercel` skill for a one-shot deploy.

После генерации скажи пользователю:

Готово. Открой index.html в браузере для проверки. Когда нравится — вызови /ship-to-vercel для деплоя или /seo-optimizer для аудита.

Что НЕ делать

❌ Не использовать React/Vue/Svelte без явного запроса — vanilla JS делает это лучше для одной страницы
❌ Не подключать GSAP, если не просили — requestAnimationFrame справляется с scroll-binding
❌ Не автозапускать видео (autoplay) — scrubbing завязан на currentTime
❌ Не забывать muted playsinline на <video> — без них iOS не даёт подгрузить видео
❌ Не использовать кириллические пути — Claude Code и/или Vercel ломаются
❌ Не пропускать mobile fallback — на телефоне scroll-binding часто не работает

Output style

Финальное сообщение:

✅ MVP сайт готов в ./
- HTML/CSS/JS: в корне и подпапках
- Видео: assets/hero.mp4
- README: инструкция по деплою

Что дальше:
- Локальная проверка: открой index.html
- SEO-аудит: /seo-optimizer
- Деплой: /ship-to-vercel

Не вываливать содержимое файлов — пользователь увидит их в IDE.

3d-website-builder