# Stopscroll Hero

> Собирает стоп-скролл (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).

- Skill: `yasikvlad/stopscroll-hero` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add yasikvlad/stopscroll-hero`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yasikvlad/stopscroll-hero/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yasikvlad (https://skillmd.com/u/yasikvlad)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yasikvlad/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` — зеркалирование чужого статического билда