Scroll-world: 3D-лендинг как у Apple и цена за эффект

Страница как кино на колёсике мыши

Вы листаете, и камера не прыгает между блоками. Она летит над миниатюрным городком, ныряет в окно цеха, выныривает с другой стороны и несётся к следующему зданию. Склеек нет. README сравнивает приём со страницами Apple. Пост в канале GitHub Community от 25.09.2026 описывал именно это и не давал ссылки. Репозиторий я нашёл поиском, описание совпало с постом.

Что я проверил

Смотрел 19.10.2026 через страницу репозитория и API GitHub. Файл LICENSE содержит MIT. Репозиторий создан 06.07.2026, в нём 19 коммитов и один автор. Последний коммит от 29.07.2026, то есть почти три месяца назад. Архивным он не помечен, релизов нет, звёзд около 10,2 тысячи, форков около 1,1 тысячи. Открытых задач и pull request'ов десять. README и SKILL.md на английском. Сам навык я не запускал, пишу по документации и коду движка.

Как устроено и откуда берутся сцены

Это видео, WebGL здесь нет. Агент проводит интервью: тема, бренд-кит, стиль, порядок сцен, нужна ли мобильная версия, бюджет. Потом на каждую сцену генерируется изометрическая картинка (GPT Image 2), клип «ныряния» внутрь и соединительные клипы между сценами. Видео делает Seedance через сервис Monid, запасной вариант Higgsfield (Seedance или Kling). Страницу проигрывает небольшой скрипт на чистом JavaScript: положение скролла задаёт время видео.

Нужны CLI Monid с ключом и балансом, CLI Higgsfield с кредитами, ffmpeg и Python с Pillow. Картинки можно делать через Codex CLI по подписке ChatGPT. Навык работает в Claude Code, Codex и других агентах через skills CLI.

Деньги. По README шесть сцен в 1080p обходятся примерно в 27 долларов за видеоцепочку. Это сходится с замерами автора в SKILL.md: 2,99 доллара за восьмисекундный пролёт и 1,87 за пятисекундный соединитель, то есть шесть пролётов и пять соединителей. Мобильная версия отдельной вертикальной цепочкой удваивает видео. Каждая перегенерация тоже стоит денег. Доступность Monid и Higgsfield из России и способы оплаты: уточняйте.

Чем платите по скорости, SEO и доступности

Вес. В SKILL.md автор называет около 8 МБ на восьмисекундный клип при нормальной нарезке ключевых кадров. Шесть сцен дают одиннадцать клипов, и это прикидка по цифре автора, замера не было: выходят десятки мегабайт на всю цепочку. Движок подгружает клипы порциями рядом с текущей позицией, но каждый клип сначала скачивается целиком в память и только потом играет. Реальный вес готовой страницы я не мерил. Метрики и пороги разобраны в статье про PageSpeed. В коде у всех постеров стоит отложенная загрузка, включая первый. Как это отразится на LCP, не замерял.

SEO. Заголовки и тексты сцен движок создаёт скриптом, в исходном HTML их нет, в шаблоне нет и общего h1. Поисковики умеют выполнять скрипты, но краулер, который скрипты не выполняет, увидит пустую страницу. Индексацию такой страницы я не проверял. Картинки в коде идут с пустым alt.

Доступность. При включённом prefers-reduced-motion видео не загружается совсем, остаются постеры. В задаче номер 9 автор страницы жалуется, что для такого посетителя страница превращается в тупик, потому что она и есть полёт камеры. Там же описано, что на сайте с политикой CSP без разрешения blob: в media-src клипы не грузятся и остаются шесть картинок. Атрибутов aria в коде движка я не нашёл. Общая картина по доступности есть в статье про доступность сайта.

Когда это оправдано

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

Если нужен более лёгкий эффект, смотрите в сторону анимации на GSAP. Если нужна живая модель товара вместо ролика, смотрите на 3D-конфигуратор на Three.js.

Что важно учесть

Один человек как единственный автор, проект молодой, последний коммит почти трёхмесячной давности, документация только на английском. MIT разрешает использовать код свободно. Права на сгенерированные картинки и видео определяют условия самих сервисов, в README про это ничего нет, поэтому читайте условия и проверяйте, что можно в коммерческом проекте.

Швы между клипами автор проверяет по метрике схожести кадров. В задаче номер 13 пользователь показывает, что совет из навыка про соотношение сторон ломает стыки выше 480p. Задача открыта, решение не принято. Фильтр Seedance, по записям автора, ложно срабатывает на интерьеры вроде спальни, бассейна и спа. Для отелей это важно.

Что можно сделать уже сейчас

Посмотрите в Метрике, какая доля посетителей приходит с телефонов и из поиска. Чем она выше, тем меньше смысла в тяжёлой странице на главной.

Если решите пробовать, начните с черновой цепочки на дешёвой модели. SKILL.md предлагает уровень seedance_2_0_mini примерно за четверть стоимости основного. Утвердите сцены на нём и только потом платите за финал. Черновик покажите заказчику на его телефоне: подвисания обычно видны именно там.

Готовую страницу прогоните по трём проверкам: мобильный PageSpeed, просмотр исходного кода (виден ли текст), режим сниженного движения в системе. Основной сайт оставьте обычным, а полёт камеры вынесите на отдельный адрес. Собрать такой связанный набор под ваш бренд могу в рамках веб-разработки.

Частые вопросы

Нужен ли платный API?

Да. Видео по README делается через Monid с оплатой за клип или через кредиты Higgsfield, картинки через Higgsfield или Codex CLI по подписке ChatGPT. Бесплатного пути в документации нет.

Есть ли вариант без ИИ-видео?

Существует форк по смыслу, instax-dutta/scroll-3d-world: сцена собирается в Three.js, видео не генерируется. Лицензия MIT, создан 06.08.2026, две звезды. Я его не запускал, зрелость не оценивал.

Подойдёт ли такая страница для SEO?

Как единственная страница сайта нет, по описанным выше причинам. Как отдельная витрина рядом с обычным сайтом можно.

Коротко о главном

Scroll-world под лицензией MIT собирает лендинг-полёт из ИИ-картинок и видео, которые вы оплачиваете сами. Эффект сильный, цена по скорости, поиску и доступности реальная, а вес готовой страницы нужно мерить на вашем проекте.

Если хотите понять, нужна ли вам такая страница или хватит лёгкой анимации, напишите мне в Telegram кодовое слово «СКРОЛЛ».