| name | stopscroll-hero |
| description | Собирает стоп-скролл (scrollytelling) хиро для лендинга — короткий кинематографичный ролик, который проматывается покадрово по скроллу на canvas, с главами-текстами на своих тактах и развилкой-CTA в финале. Ведёт всю цепочку — чистый кадр через GPT Image 2, раскадровка 3x3 на 9 кадров, ролик через Seedance 2.0, нарезка ffmpeg в webp, вёрстка движка без зависимостей, синхронизация глав по реальным тактам ролика, деплой на Vercel.
Use when — стоп-скролл, стопскролл, scrollytelling, скролл-скраб, scroll scrub, промотка видео скроллом, видео на скролле, кинематографичный хиро, hero из видео, эффект Apple AirPods, раскадровка 9 кадров, сториборд для Seedance, оживить фото на лендинге, «сделай как у Apple».
Do NOT use for — обычные видео-фоны с тегом video и autoplay, генерация ролика без сайта (higgsfield-generate), параллакс и reveal-on-scroll без покадровой промотки, вертикальные рилсы (viral-reels).
|
| allowed-tools | ["Read","Write","Edit","Bash","WebFetch","AskUserQuestion"] |
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 — синхронизация глав. Самый недооценённый шаг. Модель почти никогда не держит
тайминг из промта, поэтому границы тактов ищутся по реальному ролику, а не по замыслу:
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-кэш на кадры.
Правила, которые нельзя нарушать
- Скролл-хендлер только считает номер кадра. Рисует отдельный
requestAnimationFrame
и только если кадр реально сменился. Рисование прямо в хендлере роняет FPS.
- Слушатель —
{passive: true}. Иначе браузер не может оптимизировать скролл.
- Кадры грузятся батчами за лоадером с процентами. Пустой canvas в первую секунду —
худшее, что можно показать.
- Мобайл получает свою последовательность. Вдвое меньше кадров и меньше ширина,
иначе трафик улетает в десятки мегабайт.
prefers-reduced-motion: reduce выключает скраб. Постер плюс обычная вёрстка.- Обязательная строка в промте на картинку — full-bleed, no borders, no letterbox,
no picture-in-picture. Без неё модели любят вернуть «картинку в картинке» с полями.
- 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 — нарезка ролика в webpscripts/mirror.sh — зеркалирование чужого статического билда
