# stopscroll-hero
Скилл для Claude Code. Собирает **стоп-скролл-хиро** — короткий кинематографичный ролик,
который проматывается покадрово по скроллу, с главами-текстами на своих тактах.
Эффект как на страницах Apple AirPods.
Ведёт всю цепочку: чистый кадр через GPT Image 2 → раскадровка 3×3 (9 кадров) или
4×4 (16 кадров) → ролик через Seedance 2.0 → нарезка ffmpeg в webp → вёрстка движка
без зависимостей → синхронизация глав по реальным тактам ролика → деплой на Vercel.
**v2 — метод целиком.** В `references/storyboard-method.md` — детальный метод Влада Яско:
драматургия витрины для продуктовых роликов, сетки 3×3/4×4 с вариантами по свету,
мастер-кадр, невидимые швы клипов через last-frame chaining, смена образа через макро,
экономика в кредитах и гейты утверждения. Иллюстрированная методичка на живом прогоне
(Zarmilkas «Троянда») — [docs/method.html](docs/method.html).
## Установка
```bash
npx skills add github.com/yasikvlad/stopscroll-hero
```
Или вручную — склонировать в `~/.claude/skills/stopscroll-hero/`.
## Зависимости
**1. Higgsfield MCP** — для генерации кадров и видео.
```bash
claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp
```
При первом вызове откроется браузер для OAuth — войти в аккаунт Higgsfield.
Проверить: `claude mcp list` или `/mcp` внутри чата.
Инструкция целиком: https://higgsfield.ai/blog/Generate-AI-Videos-From-Claude-with-Higgsfield-MCP
**2. ffmpeg** — нарезка ролика в кадры.
```bash
brew install ffmpeg
```
**3. Vercel CLI** — деплой, опционально.
```bash
npm i -g vercel
```
## Как вызвать
Скилл поднимается сам на фразах: «стоп-скролл», «scrollytelling», «скролл-скраб»,
«видео на скролле», «сделай как у Apple», «раскадровка 9 кадров», «оживить фото на лендинге».
## Что внутри
| Файл | Что делает |
|---|---|
| `SKILL.md` | Основной сценарий, все шаги пайплайна |
| `references/engine.md` | Как устроен canvas-скраб, почему не `<video>` |
| `references/prompts.md` | Промты для GPT Image 2 и Seedance 2.0 |
| `assets/engine.html` | Готовый шаблон движка, ванильный JS, ноль зависимостей |
| `assets/vercel.json` | Кеш-хедеры на папки с кадрами |
| `scripts/slice.sh` | Нарезка ролика в две webp-секвенции — десктоп и мобайл |
| `scripts/mirror.sh` | Вспомогательный |
## Что важно знать до старта
**Скраб идёт по картинкам, не по видео.** Тег `<video>` не умеет мгновенно мотать
назад — на обратном скролле он дёргается. Поэтому ролик режется в последовательность
webp и рисуется на canvas.
**Дефолты нарезки рассчитаны на 15-секундный горизонтальный ролик** (15 fps / 1440 px
→ ~226 кадров / 13 МБ). Для длинного или вертикального ролика их надо тюнить, иначе
секвенция раздувается. Ориентир: 44 секунды вертикали при 10 fps / 810 px = 440 кадров / 17 МБ.
**Тайминги глав берутся из готового ролика, а не из замысла.** Снять контактный лист
через `ffmpeg ... tile=3x3` и расставить границы по нему. Между главами зазор 0.02–0.03.
**Seedance 2.0 даёт максимум 15 секунд за генерацию.** Длиннее — только склейкой.
Стык через `end_image → start_image` работает, но модель может перечитать стартовый кадр
в своём масштабе — тогда стык прикрывается кроссфейдом.
**QA-хук.** `?tkp=0.55` фиксирует прогресс без реального скролла — можно снять скриншот
любой точки трека.
## Пример работы
Лендинг коллекции украшений: 44-секундный ролик, 7 глав с ценами и кнопками в корзину,
440 кадров на десктопе / 352 на мобайле.
Полный разбор пайплайна с промтами и граблями — в описании проекта.
## Лицензия
MIT