stopscroll-hero

# Stop-Scroll Hero — кинематографичный хиро на скролле Заменяет статичную первую секцию лендинга на 12–15-секундный ролик, который зритель проматывает сам колесиком. Кадры лежат отдельными webp и рисуются на `<canvas>` — это даёт мгновенную промотку в обе стороны, чего `<video>` не умеет. Техника — «метод Apple» (image sequence + sticky stage). Проверена на боевых проектах. ## Когда какой режим | Ситуация | Что делать | |---|---| | Есть готовый ролик | Начать с шага 5 (нарезка) | | Есть фото героя, ролика нет | Полный пайплайн с шага 1 | | Есть боевой сайт, исходников нет | Шаг 0 — зеркалим статический билд | ## Пайплайн **Шаг 0 — клон сайта (если исходников нет).** Скачать HTML всех страниц, затем вытащить ассеты **и из HTML, и из CSS, и из JS** — шрифты и фоновые картинки живут в `url()` внутри CSS, по одному HTML их не найти. Скрипт — `scripts/mirror.sh`. **Шаг 1 — чистый кадр.** GPT Image 2 (`resolution: 4k`, `quality: high`) по реальному фото в роли `image`. Задача — убрать весь текст из кадра и получить full-bleed картинку. Промт — `references/prompts.md`, блок ЧИСТЫЙ КАДР. **Шаг 2 — идея ролика.** Три волны за 15 секунд — красота (крючок), смысл (жизнь), поворот (дело/оффер). Финал обязательно спокойный: сайт замирает на последнем кадре. **Шаг 3 — раскадровка.** Одна картинка-сетка: 3x3 = 9 кадров (45с) или 4x4 = 16 кадров (60с, когда деталей много), номера в углах. Ячейка — в аспекте финального ролика (сетка из ячеек 9:16 сама 9:16 — вертикаль генерится сразу). Метапромт — `references/prompts.md`, блок СТОРИБОРД. Блоки IDENTITY LOCK / WARDROBE / GLOBAL LOOK / FORMAT неизменны, меняется только список сцен. Генерить 2–3 варианта с одинаковой драматургией и разным GLOBAL LOOK (свет/атмосфера) — клиент утверждает сетку, не клипы. Полный метод (драматургия витрины, диапазоны гардероба, смена образа) — `references/storyboard-method.md`. **Шаг 4 — ролик.** Seedance 2.0, клипы по 15с = 4 бита каждый, `720p`, `mode std`, `bitrate_mode high`, `generate_audio false`, `genre drama`. Сначала мастер-кадр (бит 01 как full-bleed, рефы: фото + утверждённый сториборд) — он `start_image` клипа 1 и постер сайта. Дальше цепочка: `start_image` клипа N+1 = ПОСЛЕДНИЙ кадр клипа N через ffmpeg (пиксель-в-пиксель — шов невидим). Первый клип — проба качества, показать клиенту до генерации остальных. Перед каждым клипом `get_cost`, баланс — до старта. Промт — `references/prompts.md`, блок SEEDANCE; вся механика швов, тактов и экономика — `references/storyboard-method.md`. **Шаг 5 — нарезка.** `scripts/slice.sh hero_v1.mp4` → `frames/` (1440px, 15 fps) и `frames-mobile/` (900px, 8 fps). Скрипт печатает готовые числа для `TOTAL`. **Шаг 6 — вёрстка.** Взять `assets/engine.html`, подставить палитру и шрифты сайта, переписать главы. Полное описание механики — `references/engine.md`. **Шаг 7 — синхронизация глав.** Самый недооценённый шаг. Модель почти никогда не держит тайминг из промта, поэтому границы тактов ищутся по реальному ролику, а не по замыслу: ```bash ffmpeg -i hero_v1.mp4 -vf "select='not(mod(n,40))',scale=640:-2,tile=3x3" -frames:v 1 sheet.jpg ``` Посмотреть контактный лист, найти где начинается и кончается каждый такт, перевести номер кадра в прогресс (`n / общее_число_кадров`) и вписать в `data-start` / `data-end`. **Шаг 8 — проверка и деплой.** QA-хук `?tkp=0.55` фиксирует прогресс без скролла — дальше headless Chrome снимает любую точку ролика: ```bash "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --disable-gpu \ --window-size=1440,810 --screenshot=p.png --virtual-time-budget=12000 \ "http://localhost:4173/?tkp=0.55" ``` Проверить мобайл, `prefers-reduced-motion` (флаг `--force-prefers-reduced-motion`), затем `vercel deploy --prod`. `vercel.json` из `assets/` ставит immutable-кэш на кадры. ## Правила, которые нельзя нарушать 1. **Скролл-хендлер только считает номер кадра.** Рисует отдельный `requestAnimationFrame` и только если кадр реально сменился. Рисование прямо в хендлере роняет FPS. 2. **Слушатель — `{passive: true}`.** Иначе браузер не может оптимизировать скролл. 3. **Кадры грузятся батчами за лоадером с процентами.** Пустой canvas в первую секунду — худшее, что можно показать. 4. **Мобайл получает свою последовательность.** Вдвое меньше кадров и меньше ширина, иначе трафик улетает в десятки мегабайт. 5. **`prefers-reduced-motion: reduce` выключает скраб.** Постер плюс обычная вёрстка. 6. **Обязательная строка в промте на картинку — full-bleed, no borders, no letterbox, no picture-in-picture.** Без неё модели любят вернуть «картинку в картинке» с полями. 7. **AI-кадры нельзя выдавать за съёмку.** Если в ролике реальный человек — нужно его согласие и дисклеймер в футере. ## Вес и бюджет 15 сек → ~226 кадров десктоп (13 МБ webp) и ~120 мобайл (3.8 МБ). Higgsfield — примерно 7 кредитов за картинку 4k и 135 за 15 сек Seedance 2.0 в 1080p. ## Файлы скилла - `references/prompts.md` — четыре промта целиком, готовые к копированию - `references/storyboard-method.md` — метод детально: драматургия витрины, сетки 3×3/4×4, мастер-кадр, швы клипов, смена образа через макро, экономика и гейты утверждения - `references/engine.md` — как устроен движок, построчно - `assets/engine.html` — рабочий шаблон без зависимостей - `assets/vercel.json` — кэш на кадры - `scripts/slice.sh` — нарезка ролика в webp - `scripts/mirror.sh` — зеркалирование чужого статического билда