| name | 3d-website-builder |
| description | Build a premium MVP website with a hero scroll-driven 3D video animation in one guided pass. Conducts a 5-question interview (brand name, logo, colors, video path, target action), generates clean HTML/CSS/JS scaffold, embeds the user's pre-generated 7-second video bound to mouse scroll, and produces a polished landing page ready for deploy. Trigger when the user has a Kling 3.0 video file ready and says "собери MVP сайта / build the 3D site / scroll stop builder / hook the video to scroll / make hero with this video / привяжи видео к скроллу". Also use right after `scroll-stop-prompter` when frames have been turned into a video, or after `website-intelligence` when the Build Brief is approved and a video is in hand. |
| allowed-tools | Read, Write, Edit, Grep, Glob, Bash |
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>
<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;
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.
