╔══════════════════════════════════════════════════════════════════════╗
║ SCROLL-VIDEO SITE — промпт для ИИ-агента ║
║ Сайт, где фоновое видео проматывается вслед за скроллом ║
║ chi.my/scroll · Анастасия Гюлер ║
╚══════════════════════════════════════════════════════════════════════╝
КАК ПОЛЬЗОВАТЬСЯ
Скопируйте всё, что ниже линии, и отправьте одним сообщением агенту,
который умеет создавать файлы и запускать команды: Claude Code, Cursor,
Codex, Antigravity, Windsurf. Дальше можно ничего не делать — агент
задаст максимум три вопроса, а если вы промолчите, соберёт сайт сам и
покажет, что придумал за вас.
В обычном чате без файлов промпт тоже работает: агент выдаст код блоками,
вы сохраните его руками, а шаг с ffmpeg выполните в терминале сами.
──────────────────────────────────────────────────────────────────────
ТВОЯ РОЛЬ
Ты — фронтенд-разработчик и моушн-дизайнер уровня студии, которая
попадает в Awwwards. Тебе нужно собрать одностраничный сайт, где фоновое
видео проматывается кадр за кадром вслед за скроллом: человек крутит
колесо, на фоне разворачивается сцена, поверх проявляется типографика.
Стек — ванильный HTML, CSS, JS и GSAP ScrollTrigger. Ни сборщиков, ни
React, ни npm.
РЕЖИМ РАБОТЫ ПО УМОЛЧАНИЮ — АВТОПИЛОТ
Я занятой человек и хочу увидеть результат, а не отвечать на анкету.
Поэтому:
· спроси максимум три вещи, без которых ты правда не сдвинешься
(о чём сайт, есть ли доступ к генератору видео, есть ли ffmpeg);
· если я отвечу одной строкой, «делай сам» или вообще промолчу —
решай всё остальное сам, бери разумные умолчания и собирай целиком;
· всё, что ты решил за меня, собери в конце одним коротким списком
«что я придумал сам — поправьте, если мимо». Не спрашивай заранее,
покажи постфактум;
· доводи до конца. Не останавливайся на середине с вопросом «продолжать
ли?». Продолжай.
Разумные умолчания на случай моего молчания: пять экранов, тёмная
холодная палитра с одним светлым акцентным экраном, сцена — медленный
разлом льда с внутренним свечением, тексты на русском, финал — форма
почты. Всё это ты потом покажешь мне в списке.
ГЛАВНЫЕ ПРАВИЛА
1. Факты, цифры, названия и цитаты не выдумывай. Если их нет — ставь
заглушку и отдельно скажи мне, что там нужен реальный текст.
2. Не подставляй ссылки на чужие стоковые видео и картинки. Медиа мы
либо генерируем, либо я даю сам.
3. Каждый файл выдавай целиком. Никаких «...остальное без изменений».
4. Стек не усложняй. Ни Locomotive Scroll, ни Lenis, ни Three.js, ни
Barba, ни сборки на npm. Только HTML, CSS, JS и GSAP с CDN.
5. Если что-то плохо работает на телефонах, скажи прямо и сделай
деградацию. Не выдавай сырое за законченное.
──────────────────────────────────────────────────────────────────────
ЭТАП 1 — ВИДЕО. НА НЁМ ДЕРЖИТСЯ ВЕСЬ РЕЗУЛЬТАТ
──────────────────────────────────────────────────────────────────────
Код здесь короткий, а вот материал решает всё. Нужны три коротких ролика
без звука, без людей, без текста в кадре и без единой склейки.
V1 «дыхание» (6–10 с, зациклен) — почти статичный кадр с еле заметной
жизнью: свечение пульсирует, частицы плывут, камера дышит. Это то,
что человек видит до первого скролла. Первый и последний кадр
должны совпасть, иначе на стыке цикла будет рывок.
V2 «событие» (4–6 с, без зацикливания) — главное необратимое действие,
которое пользователь проматывает рукой: трещина расходится, объект
раскрывается, камера въезжает внутрь. Одно движение в одну сторону,
равномерно. Маятник туда-обратно убивает ощущение управляемости.
V3 «переход» (4–6 с) — атмосферное перекрытие: туман, засветка, дым,
уход в белое или в темноту. Оно прячет стык между сценами и меняет
настроение перед финалом.
ШАБЛОН ПРОМПТА ДЛЯ ГЕНЕРАТОРА ВИДЕО (Veo, Sora, Kling, Runway, Luma) —
подставь свою сцену:
«Cinematic macro shot of [ОБЪЕКТ], [ЧТО ПРОИСХОДИТ] slowly and
continuously in one direction. Extremely slow camera push-in.
[СВЕТ: volumetric light from within / cold rim light / warm sunset
glow]. Photorealistic, shallow depth of field, fine particles in the
air, film grain. No people, no text, no logos, no cuts, no camera
shake. Static tripod feel. 4 seconds, 24fps.»
Что экономит десятки попыток:
· «no cuts, no people, no text» пиши всегда. Генераторы обожают врезать
монтажный стык на середине, и после этого промотка выглядит поломкой;
· тёмный или монохромный кадр удобнее пёстрого, поверх пойдёт текст;
· генерируй V2 первым, остальные подгоняй под его свет и цвет;
· два-три варианта одной сцены дешевле, чем правки одного неудачного.
ЕСЛИ ГЕНЕРАТОРА ВИДЕО НЕТ, движение собирается из двух картинок.
Сгенерируй в любом графическом ИИ кадр «до» и кадр «после» — целый лёд и
треснувший, закрытый бутон и раскрытый, — а переход между ними собери
скриптом:
```python
# make_video.py — превращает две картинки в ролик-«событие»
import math
from PIL import Image, ImageEnhance
im1 = Image.open("before.png").convert("RGB")
im2 = Image.open("after.png").convert("RGB")
W = H = 1280
im1, im2 = im1.resize((W, H)), im2.resize((W, H))
TOTAL = 96 # 4 секунды при 24 fps
for i in range(TOTAL):
t = i / (TOTAL - 1)
ease = t * t * (3 - 2 * t) # плавный старт и финиш
frame = Image.blend(im1, im2, ease) # растворение «до» в «после»
frame = ImageEnhance.Brightness(frame).enhance(1 + 0.35 * math.sin(t * math.pi))
zoom = 1 + 0.12 * ease # лёгкий наезд камеры
cw, ch = int(W / zoom), int(H / zoom)
left, top = (W - cw) // 2, int((H - ch) * 0.6 * ease)
frame.crop((left, top, left + cw, top + ch)).resize((W, H)).save(f"frames/f_{i:04d}.jpg", quality=92)
```
```bash
pip install pillow
mkdir -p frames && python make_video.py
ffmpeg -framerate 24 -i frames/f_%04d.jpg -c:v libx264 -pix_fmt yuv420p v2_raw.mp4
```
──────────────────────────────────────────────────────────────────────
ЭТАП 2 — ПОДГОТОВКА ВИДЕО. ГЛАВНАЯ ТЕХНИЧЕСКАЯ ХИТРОСТЬ
──────────────────────────────────────────────────────────────────────
Обычное видео из интернета проматывается рывками, и обычно на этом месте
люди начинают искать более умную библиотеку. Искать нечего. Браузер умеет
мгновенно прыгать только на опорные кадры, а в обычном файле их один на
две-три секунды. Между ними картинка доигрывает, поэтому фон отстаёт от
руки на полсекунды и выглядит сломанным.
Лечится это перекодированием: флаг `-g 1` делает опорным каждый кадр.
Файл потяжелеет в три-пять раз, зато перемотка попадёт точно в кадр.
```bash
# V2 и V3 проматываются скроллом — каждый кадр опорный
ffmpeg -i v2_raw.mp4 -an -vf "scale=1280:-2" -c:v libx264 -preset slow \
-crf 30 -g 1 -keyint_min 1 -sc_threshold 0 -pix_fmt yuv420p \
-movflags +faststart scrub.mp4
ffmpeg -i v3_raw.mp4 -an -vf "scale=1280:-2" -c:v libx264 -preset slow \
-crf 30 -g 1 -keyint_min 1 -sc_threshold 0 -pix_fmt yuv420p \
-movflags +faststart fog.mp4
# V1 просто играет циклом — здесь -g 1 не нужен, экономим вес
ffmpeg -i v1_raw.mp4 -an -vf "scale=1280:-2" -c:v libx264 -preset slow \
-crf 23 -pix_fmt yuv420p -movflags +faststart idle.mp4
# Первый кадр как постер: он виден, пока грузится видео
ffmpeg -i v1_raw.mp4 -vframes 1 -vf "scale=1280:-2" -q:v 4 poster.jpg
```
Что делает каждый флаг, чтобы ты понимал, что меняешь:
-g 1 -keyint_min 1 -sc_threshold 0 каждый кадр опорный, ради скраба
-an выбрасываем звук: фону он не нужен
и мешает автоплею
-movflags +faststart видео стартует до полной загрузки
-crf качество; меньше число — лучше и
тяжелее (23 хорошо, 30 нормально
для фона под текстом)
scale=1280:-2 для фона ширины 1280 достаточно,
4K не нужен никогда
БЮДЖЕТ ВЕСА жёсткий: три ролика вместе не больше 6 МБ, а лучше 3–4 МБ.
Не влезаешь — опускай ширину до 960 или поднимай crf до 32. Фоновое видео
на 30 МБ никто не дождётся с телефона, и вся красота останется невидимой.
После кодирования покажи мне размеры файлов.
Если ffmpeg в системе нет, скажи об этом сразу, собери сайт на исходных
файлах и предупреди, что промотка будет ступенчатой до перекодирования.
──────────────────────────────────────────────────────────────────────
ЭТАП 3 — АРХИТЕКТУРА. СОБИРАЙ ИМЕННО ТАК
──────────────────────────────────────────────────────────────────────
Структура проекта:
index.html
styles.css
script.js
media/idle.mp4 scrub.mp4 fog.mp4 poster.jpg ambient.mp3 (по желанию)
Скелет страницы:
```html
……………
```
Атрибуты `muted` и `playsinline` обязательны: без них iOS запретит автоплей
и откроет видео на весь экран. Без `preload="auto"` первый скролл упрётся
в пустоту.
CSS-фундамент:
```css
.video-viewport{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#000;}
.bg-video{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;transform:scale(1.02);opacity:0;pointer-events:none;
transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
will-change:transform,opacity;
}
.bg-video.active-video{opacity:1;}
.luxury-overlay{
position:absolute;inset:0;pointer-events:none;transition:background .8s ease;
background:linear-gradient(to bottom,rgba(0,0,0,.25),transparent 25%,transparent 75%,rgba(0,0,0,.4));
}
.section{min-height:100vh;display:flex;flex-direction:column;
justify-content:center;align-items:center;padding:120px 0;}
```
Затемняющий градиент поверх видео и мягкая тень на самом тексте
обязательны. Белые буквы прямо на светлом кадре не читаются, и это первое,
что выдаёт любительскую работу.
ДВИЖОК ПРОМОТКИ — сердце всего. Логику скопируй один в один:
```js
let targetTime = 0, currentTime = 0, duration = 0, ready = false;
scrollVideo.addEventListener('loadedmetadata', () => {
duration = scrollVideo.duration; ready = true;
});
// 1) На скролл только СЧИТАЕМ цель. Ничего не перематываем.
function onScroll(){
const y = window.scrollY;
const vh = window.innerHeight;
const span = Math.max(document.getElementById('s3').offsetTop - vh * 0.1, 1);
const p = Math.min(Math.max(y / span, 0), 1); // 0…1 — доля пройденного
targetTime = p * duration;
}
window.addEventListener('scroll', onScroll, {passive:true});
// 2) Перематываем в отдельной петле, догоняя цель по чуть-чуть.
function loop(){
if (ready) {
const diff = targetTime - currentTime;
if (Math.abs(diff) > 0.0005) {
currentTime += diff * 0.18; // 0.18 — инерция
try { scrollVideo.currentTime = currentTime; } catch(e){}
}
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
```
Почему так, а не `video.currentTime = progress * duration` прямо в
обработчике скролла. Перемотка асинхронна: если дёргать её на каждое
событие, запросы встают в очередь и видео захлёбывается. Отдельная петля
на `requestAnimationFrame` привязывает перемотку к кадрам экрана, а не к
частоте событий тачпада. Коэффициент 0.18 даёт инерцию — видео плавно
догоняет руку вместо телепортации. Меньше значение — вязче, больше —
резче; ниже 0.05 не опускай, появится залипание.
СМЕНА РОЛИКОВ. Видео не монтируй и не удаляй на лету. Все три лежат
стопкой друг на друге, переключаются только `opacity` и `z-index`. V1
живёт до первого экрана и на кроссфейде уступает V2, одновременно чуть
увеличиваясь в масштабе — получится ощущение провала внутрь. V3
включается на границе третьего экрана и проматывается до финала. Каждому
проматываемому ролику нужна своя пара `targetTime` / `currentTime` и своя
петля.
──────────────────────────────────────────────────────────────────────
ЭТАП 4 — ТИПОГРАФИКА И ДВИЖЕНИЕ ПОВЕРХ ВИДЕО
──────────────────────────────────────────────────────────────────────
Подключи GSAP и ScrollTrigger с CDN:
```html
```
Заголовки проявляются побуквенно, абзацы — по словам. Текст разбивай
скриптом, а не руками в HTML, и вешай на него сдвиг с расфокусом:
```js
gsap.fromTo(chars,
{opacity:0, y:35, filter:'blur(8px)'},
{opacity:1, y:0, filter:'blur(0px)', duration:.85, stagger:.025, ease:'power3.out',
scrollTrigger:{trigger:heading, start:'top 85%', toggleActions:'play reverse play reverse'}});
```
При разбивке на буквы поставь контейнеру `aria-label` с полным текстом, а
самим буквам `aria-hidden="true"`. Иначе скринридер прочитает заголовок по
одной букве.
Шрифты решает контраст пары: крупный дисплейный с широким межбуквенным
(Cinzel, Playfair, Dela Gothic One), курсивная антиква для подзаголовка
(Cormorant Garamond) и нейтральный гротеск для мелочи (Montserrat, Inter).
Мелкие подписи — капслоком с межбуквенным интервалом 0.25em.
Детали, по которым видно студийную работу:
· вертикальная навигация справа — номер главы, чёрточка, название;
у активной главы чёрточка удлиняется и подсвечивается;
· кастомный курсор: точка следует мгновенно, кольцо догоняет с инерцией
и раздувается над интерактивным;
· один экран из пяти сделай светлым с тёмной типографикой. Контраст
между главами читается как смена сцены, а не бесконечная лента;
· амбиентный звук на 20% громкости с кнопкой в углу. Включай только
после первого действия человека — браузер иначе заблокирует, и он
прав: звук без спроса раздражает.
──────────────────────────────────────────────────────────────────────
ЭТАП 5 — ДЕГРАДАЦИЯ. БЕЗ НЕЁ САЙТ ЖИВЁТ ТОЛЬКО НА ТВОЁМ КОМПЬЮТЕРЕ
──────────────────────────────────────────────────────────────────────
1. Тач-устройства. Кастомный курсор выключай полностью через
`window.matchMedia('(hover: none)')` — верни системный и не вешай
звуки на наведение. `cursor:none` на планшете с мышью означает просто
потерянный курсор.
2. `prefers-reduced-motion`. Человек попросил меньше движения — оставь
постер или короткий цикл, отключи скраб, покажи текст без анимации.
3. Мобильный интернет. Три ролика суммарно до 6 МБ, `poster` обязателен,
`preload="auto"` только у V1 и V2.
4. Мобильная высота экрана. Панель браузера то появляется, то исчезает, и
`100vh` прыгает. Ставь `min-height:100svh` с запасным `100vh`.
5. Клавиатура и доступность. Ссылки настоящими тегами ``, у полей
формы `