Scrollcraft

Премиальные лендинги, управляемые скроллом; скролл = таймлайн.

Метаданные навыка

Справочник: полный SKILL.md

scrollcraft

Скролл — единственный способ ввода, который знает каждый посетитель. Этот навык обращается с ним как с таймлайном: колесо мыши — это скраббер, страница — фильм с настоящим текстом поверх, а каждая секция ведёт себя достаточно по-разному, чтобы посетитель продолжал листать.

Что вы производите: бриф по итогам интервью, грамматику страницы, карту пути клиента, кривую ощущений с одним спроектированным пиком, скролл-партитуру, один фирменный приём, ассеты, одну настоящую HTML-страницу на дизайн-основе из токенов и полосу скриншотов, доказывающую, что страница держится в каждой позиции скролла.

Используйте для: «скроллителлинг», «сайт со скролл-анимацией», «сайт, где прокрутка проигрывает видео», «лендинг в стиле Apple», «3D-мир на скролле», «сделай из моего бренда скролл-опыт», «это выглядит как шаблон» — и для любого запроса на сайт, который должен ощущаться как переживание, а не как документ.

Чем это не занимается

Это не «сгенерируй пролёт камеры и положи сверху текст». Так получается один приём, натянутый на всю страницу и узнаваемый с первого взгляда. Четыре опорных правила:

1. Разнообразие — это и есть продукт. Минимум четыре семейства приёмов, один и тот же приём никогда не идёт дважды подряд. Читайте references/devices.md.
2. Мир фотографичен, если только бренд не иллюстративный по своей сути. Пластилиновая/low-poly диорама как вариант по умолчанию запрещена. Читайте references/worlds.md.
3. Никакой непрерывной цепочки, если только бриф не говорит буквально «одно непрерывное путешествие» (тогда см. references/worldflight.md).
4. Другой мир — ещё не другая страница. Структура — отдельная ось; выбирайте её осознанно. Читайте references/uniqueness.md.

Шаг 0: интервью

Всегда спрашивайте пользователя в чате, прежде чем что-то строить. Настоящие вопросы, заданные и отвеченные в разговоре и записанные, — а не бриф, домысленный по названию бренда. Восемь вопросов за один проход:

1. Вайб в трёх–пяти словах плюс до трёх референсов из любой среды (фильм, обложка альбома, магазин, журнал, игра — но не «сайты, которые нравятся»).
2. Путешествие по скроллу, секция за секцией, их словами.
3. Кривая энергии — где спокойно, где напряжённо.
4. Что человек должен чувствовать, листая, этап за этапом, и какой ОДИН момент он должен запомнить? Из этого рождаются кривая ощущений и пик. См. references/feel.md.
5. Одна вещь, которую этот сайт должен делать и которой они не видели ни на одном сайте — зерно фирменного приёма.
6. Как далеко уходить от премиального минимализма? Предложите диапазон из references/uniqueness.md §5: брутализм, максимализм, игривость, ретро, плотность, редакционный стиль, премиальный минимализм.
7. Один неразрывный мир или отдельные сцены? Самая крупная структурная развилка, и решать её — им.
8. Какие ассеты у них уже есть? Отснятое видео, фото, предметная съёмка, бренд-кит. «Ничего» — нормальный ответ, он означает полностью сгенерированный мир.

Запишите ответы дословно в <workspace>/builds/<name>/BRIEF.md (через write_file) до любого планирования актов. BRIEF.md должен содержать восемь ответов, кривую ощущений (одна строка на акт: эмоция, затем причина), пик (в виде фразы, которую посетитель сказал бы другу), законченное предложение «Это тот сайт, где ___» и любую намеренную тишину. Если в полностью автономном запуске пользователь действительно недоступен, напишите BRIEF.md сами, пометьте его Self-authored, not interviewed и скажите об этом в отчёте.

Bootstrap

Запустите preflight вместо ручной проверки (он ловит урезанный ffmpeg, который сообщает об отсутствующих фильтрах как о синтаксических ошибках):

node <skill>/scripts/doctor.mjs
node <skill>/scripts/workspace.mjs --ensure   # печатает workspace, засевает реестр

Порядок поиска рабочего пространства: переменная окружения SCROLLCRAFT_HOME; ближайший .scrollcraft.json ({ "workspace": "..." }) при подъёме от cwd; <project root>/scrollcraft. Сборки живут в <workspace>/builds/<name>/, реестр отпечатков — в <workspace>/FINGERPRINTS.md (засевается из templates/FINGERPRINTS.md, начинается пустым — этот шлюз не даёт вам повторять самих себя).

Скопируйте engine/scrollcraft.js и engine/scrollcraft.css в папку сборки. Никогда не правьте движок под отдельный проект. Тема — через токены; разметку пишите свою. Уникальное поведение — это собственный JS на странице, управляемый через --sc-p и ваши собственные атрибуты data-sc-*.

Шаг 1: бриф, сначала путешествие

Спросите о предмете открыто, простой прозой. Затем спросите только то, чего не покрыл шаг 0: что это и для кого; одно предложение, которое страница должна вложить в голову; одно следующее действие (одна подпись, везде одна и та же); что у них уже есть; арт-направление из references/worlds.md. Затем напишите путешествие: от четырёх до семи битов, каждый — сдвиг в том, что посетитель знает или чувствует. Биты — это позвоночник; секция, не служащая ни одному биту, вырезается. Согласуйте путешествие с пользователем до генерации ассетов — ассеты здесь самая дорогая часть.

Шаг 2: грамматика, шлюз, затем партитура

Полные подробности — в references/uniqueness.md.

• Выберите грамматику. Их восемь, взаимоисключающих. Выбрать кинематографический one-shot значит объяснить в отчёте, почему проиграли остальные семь. Навигация, hero и финал следуют из грамматики.
• Придумайте фирменный приём. Одно уникальное взаимодействие, закодированное в странице, а не смена параметра у приёма из набора. Зерно — вопрос 5 из интервью.
• Прогоните шлюз отпечатков. Планируемая сборка должна отличаться от каждой строки в <workspace>/FINGERPRINTS.md минимум по 4 из 6 измерений: грамматика, решение навигации, hero-приём, форма последовательности актов, паттерн финала, фирменный приём. Если проверка не проходит — меняйте план, а не журнал.
• Напишите кривую ощущений до таблицы партитуры (метод: references/feel.md). Затем назначьте каждому биту приём в письменной таблице (бит / приём / почему).

Проверки перед сборкой: запреты грамматики соблюдены; 4+ семейства приёмов; ни один приём не идёт дважды подряд; не больше двух актов scrub; нет двух соседних актов с одинаковым ощущением; один пик с самой большой протяжённостью; общая длина страницы 8–14 высот вьюпорта.

Шаг 3: ассеты

Полный конвейер, каркасы промптов и заметки о моделях: references/assets.md.

Сначала — родные пути Hermes:

• Видео и фото от пользователя — без ключа, без затрат, полноценный маршрут. Сделайте цветокоррекцию и закодируйте их.
• Инструмент image_generate для стилей: одна стилевая преамбула, повторённая дословно в каждом промпте, — вот что делает шесть картинок похожими на одну съёмку. Осматривайте каждый ассет (vision_analyze) перед использованием; перегенерировать лучше, чем выпустить плохой кадр.

Опциональный путь из апстрима — kie.ai (вшит дословно как scripts/kie.mjs): фотореалистичные стилы и клипы с движением камеры. Требует переменную окружения KIE_AI_API_KEY (экспортируйте её в своей оболочке; в этом порте нет вложенного env-файла). Баланс проверяется командой node <skill>/scripts/kie.mjs probe; стил стоит центы, 5-секундный клип — дороже.

node <skill>/scripts/kie.mjs still "<style preamble>\n\n<scene>" out/01-hero.png --ar 16:9
node <skill>/scripts/kie.mjs shot  "<camera move>" out/01-hero.png out/01.mp4 --dur 5
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01.mp4
bash  <skill>/scripts/encode.sh out/01.mp4 assets/01-m.mp4 mobile

Кодируйте для скраббинга, а не для воспроизведения. encode.sh выставляет плотный GOP, потому что перемотка идёт от предыдущего ключевого кадра; обычный веб-энкод скраббится как по грязи. Заодно он вырезает звук.

Шаг 4: сборка страницы

Пишите настоящий HTML — настоящий <h1>, настоящий <p>, настоящий порядок чтения. Движок читает атрибуты data-sc-* с вашей разметки и управляет ею; DOM он не генерирует никогда. Начинайте с references/template.html. Паттерны приёмов: references/devices.md. Отступы, типографика, глубина, цвет: references/taste.md — прочитайте до того, как писать разметку. Тема задаётся переопределением токенов: шесть значений и два шрифта:

:root {
  --sc-canvas: #0A0806;  --sc-surface: #16110E;
  --sc-ink:    #F5EBDD;  --sc-ink-soft: #A2968A;
  --sc-accent: #FF5A3D;  --sc-accent-ink: #15110F;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
}

Шаг 5: проверка прокруткой

Не опционально. Каждая позиция скролла — отдельный кадр; поломки живут между двумя, на которые вы посмотрели. Полная процедура: references/verify.md.

cd <build project> && npm i playwright-core     # один раз
node <skill>/scripts/serve.mjs --root . --port 4500 &
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/mobile --width 390 --height 844
node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/reduced --reduced-motion

Обвязка проходит каждый акт в шести позициях, ждёт, пока скраб-видео устаканится, сообщает о мёртвом скролле, о подсказках, которые так и не доходят до полной непрозрачности, и о композитном контрасте; на выходе — контактный лист. Затем прочитайте sheet.png сами (vision_analyze) — обвязка доказывает, что клип продвигается, а не что страница что-то значит. Прогоните проверку ощущений (references/feel.md §6): пролистайте «холодным взглядом», одно слово на акт, сравните с BRIEF.md. Там, где они расходятся, неправа страница, а не бриф.

Зелёный прогон не покрывает настоящий телефон (видеодекодер, политика автовоспроизведения, режим энергосбережения). При любом сообщённом дефекте на мобильном выложите references/device-diag.html рядом с сайтом уже в первом раунде и дайте устройству ответить самому.

Жёсткие правила (блокируют выпуск)

Никакой пластилиновой диорамы по умолчанию; никаких подсказок «scroll to explore» и анимированных иконок мыши; никаких счётчиков секций 01 / 06; не больше одного надзаголовка (eyebrow) на три секции; никаких видимых длинных тире; варьируйте привязку текста; ни один приём не повторяется дважды подряд; никогда не строить до интервью; один спроектированный пик, а не ноль и не три; финал разрешается, а не растворяется в футер; кривая раньше приёмов; один уникальный фирменный приём; проходной балл 4 из 6 по отпечатку против каждой строки; никогда не править движок; никакого полнокадрового тёмного оверлея ради контраста (скрим только там, где сидит текст); никакого текста, впечённого в изображения; никакой выдуманной статистики; никаких transition: all и анимации width/height/top/left (только transform/opacity; clip-path для шторок); никакого градиентного текста и неонового свечения; никакого звука в скраб-клипах; никогда не выпускать без шага 5.

Результат

Папка сборки вместе с BRIEF.md, затем короткий отчёт: грамматика и почему проиграли остальные семь, фирменный приём, результат шлюза отпечатков по каждой строке, путешествие, кривая ощущений и пик, расхождения проверки ощущений, таблица партитуры, что вы сгенерировали, что проверили скриншотами и что проверить не смогли. Допишите строку сборки в <workspace>/FINGERPRINTS.md.

Подводные камни

• scripts/shoot.mjs нужен Playwright (npm install playwright или playwright-core плюс установленный Chrome). Инструмент Hermes browser_exec — более лёгкая альтернатива для проверки скриншотами по скроллу: поднимите сборку, прокручивайте шагами, снимайте скриншоты и осматривайте их сами.
• scripts/kie.mjs нужен KIE_AI_API_KEY и платный баланс; когда бюджет неясен, предпочитайте image_generate или ассеты пользователя.
• encode.sh и doctor.mjs ожидают полную сборку ffmpeg; урезанный дистрибутивом ffmpeg сообщает об отсутствующих фильтрах как о синтаксических ошибках команды — сначала запустите scripts/doctor.mjs.
• Вызовы апстримных скриптов выше скопированы из документации апстрима, и этот порт проверил их только синтаксически через node --check — если что-то разошлось, доверяйте --help и исходникам.
• Апстримный репозиторий поставляет разобранные примеры и журнал изменений, которые в этот порт не вшиты; если они нужны, смотрите апстримный репозиторий.