Сайт, где видео листается вашей рукой

Просто продолжайте скроллить

Видео ниже не играет само по себе. Каждый его кадр привязан к положению вашего скролла: остановитесь — замрёт, отмотаете назад — пойдёт назад. Дальше по странице разобрано, как это устроено.

На полном демо таких сцен три, плюс звук, курсор и смена глав → chi.my/scroll/demo

Весь маршрут: от пустой папки до готового сайта

Промпт ведёт агента по шести этапам и не даёт ему перескочить к коду, пока не собран материал. В таких сайтах видео решает гораздо больше, чем разметка, поэтому половина текста внутри — про то, как это видео получить и подготовить.

Обычное видео скроллом не листается

Возьмите любой ролик, привяжите его к скроллу — и картинка поедет ступеньками и станет отставать от руки на полсекунды. Тут обычно начинают искать библиотеку поумнее, хотя искать нечего.

Браузер умеет мгновенно прыгать только на опорные кадры, а в обычном файле их один на две-три секунды. Между ними видео вынуждено доигрывать, отсюда и ступеньки. Лечится это перекодированием: одна команда делает опорным каждый кадр.

Вся разгадка в -g 1. Файл после этого тяжелеет в несколько раз, поэтому в промпте рядом лежит бюджет веса и подбор качества. Второй важный приём — перематывать видео не в обработчике скролла, а в отдельной петле кадров, догоняя цель с инерцией. Оба разобраны внутри с готовым кодом.

Заберите и запустите

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

ТВОЯ РОЛЬ
Ты — фронтенд-разработчик и моушн-дизайнер уровня студии, которая попадает в Awwwards. Тебе нужно собрать одностраничный сайт, где фоновое видео проматывается кадр за кадром вслед за скроллом: человек крутит колесо, на фоне разворачивается сцена, поверх проявляется типографика. Стек — ванильный HTML, CSS, JS и GSAP ScrollTrigger.

РЕЖИМ РАБОТЫ ПО УМОЛЧАНИЮ — АВТОПИЛОТ
Я занятой человек и хочу увидеть результат, а не отвечать на анкету. Поэтому:
 · спроси максимум три вещи, без которых ты правда не сдвинешься;
 · если я отвечу одной строкой, «делай сам» или вообще промолчу — решай всё остальное сам, бери разумные умолчания и собирай целиком;
 · всё, что ты решил за меня, собери в конце одним списком «что я придумал сам — поправьте, если мимо»;
 · доводи до конца. Не останавливайся на середине с вопросом «продолжать ли?»…

ЭТАП 1 — ВИДЕО. НА НЁМ ДЕРЖИТСЯ ВЕСЬ РЕЗУЛЬТАТ
Код здесь короткий, а вот материал решает всё. Нужны три коротких ролика без звука, без людей, без текста в кадре и без единой склейки…

Что сделать сегодня

1. Откройте пустую папку в агенте, который умеет создавать файлы.
2. Вставьте промпт целиком одним сообщением.
3. Ответьте одной строкой, о чём сайт. Или напишите «делай сам».
4. Дайте агенту доработать до конца и покажите ему, что не нравится.
5. Проверьте вес видео и прокрутите страницу вперёд и назад.
6. Пришлите готовое мне в директ — интересно посмотреть, что вышло.