Stopscroll Hero

Stop-Scroll Hero — кинематографичный хиро на скролле

Заменяет статичную первую секцию лендинга на 12–15-секундный ролик, который зритель проматывает сам колесиком. Кадры лежат отдельными webp и рисуются на <canvas> — это даёт мгновенную промотку в обе стороны, чего <video> не умеет.

Техника — «метод Apple» (image sequence + sticky stage). Проверена на боевых проектах.

Когда какой режим

Пайплайн

Шаг 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 — синхронизация глав. Самый недооценённый шаг. Модель почти никогда не держит тайминг из промта, поэтому границы тактов ищутся по реальному ролику, а не по замыслу:

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 снимает любую точку ролика:

"/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 — зеркалирование чужого статического билда