Конструктор сайтов со скролл-анимацией

Одна фраза собирает сайт, где скролл двигает камеру: нырок в сцену, вылет, посадка в следующей — без склеек.

Katagiri High — The Last Light, собран в мире Horimiya для этой страницы. Прокрутите внутри рамки: три сцены, два стыка, один непрерывный полёт.

The Descent — хрустальный мост спиралью уходит в пропасть, на экране текст сцены и навигация

The Hollow Star — тронный зал в конце прохода, заголовок сцены The Hollow Center

Odyssey — циклоп заполняет пещеру, заголовок сцены The Cyclops

Scroll of Colossal Things — кит размером с остров под маленькой лодкой, стиль туши

SENGOKU — Лагерь просыпается — Акт I из трёх. Скролл опускает камеру сквозь знамёна к линии шатров; на странице написано SCROLL TO DESCEND, и она это выполняет. — **Лагерь просыпается** — Акт I из трёх. Скролл опускает камеру сквозь знамёна к линии шатров; на странице написано SCROLL TO DESCEND, и она это выполняет.

SENGOKU — Поле клинков — Акт II. Никакой склейки на поле боя: та же камера пересекает красный мост, копья и барабаны подступают вокруг. — **Поле клинков** — Акт II. Никакой склейки на поле боя: та же камера пересекает красный мост, копья и барабаны подступают вокруг.

SENGOKU — Белый замок — Акт III. Полёт заканчивается на донжоне и предлагает пролететь снова. Три сцены, два стыка, ноль наплывов. — **Белый замок** — Акт III. Полёт заканчивается на донжоне и предлагает пролететь снова. Три сцены, два стыка, ноль наплывов.

Five Realms — Ворота при луне — Первое из пяти царств. Нырок начинается снаружи арки и проходит сквозь неё: ворота — место, через которое камера действительно летит. — **Ворота при луне** — Первое из пяти царств. Нырок начинается снаружи арки и проходит сквозь неё: ворота — место, через которое камера действительно летит.

Five Realms — Бамбуковая тропа — Второе царство. Соединяющий клип оставляет ворота позади, а не растворяет их в следующем кадре. — **Бамбуковая тропа** — Второе царство. Соединяющий клип оставляет ворота позади, а не растворяет их в следующем кадре.

Five Realms — Утёсы над морем облаков — Третье царство. Текст и строки данных читаются, пока камера поднимается сквозь облака. — **Утёсы над морем облаков** — Третье царство. Текст и строки данных читаются, пока камера поднимается сквозь облака.

Homer’s Odyssey — Итака: отплытие — Девять сцен из одного мастер-кадра: порт, корабли и свет принадлежат одному миру. — **Итака: отплытие** — Девять сцен из одного мастер-кадра: порт, корабли и свет принадлежат одному миру.

Homer’s Odyssey — Троя: конь — Вторая сцена. Переход из порта — сгенерированный клип, а не наплыв: огонь приходит раньше, чем вы замечаете смену. — **Троя: конь** — Вторая сцена. Переход из порта — сгенерированный клип, а не наплыв: огонь приходит раньше, чем вы замечаете смену.

Homer’s Odyssey — Винно-тёмное море — Третья сцена. Точки навигации перескакивают между сценами, а колесо всё так же прокручивает каждый кадр между ними. — **Винно-тёмное море** — Третья сцена. Точки навигации перескакивают между сценами, а колесо всё так же прокручивает каждый кадр между ними.

LIVE PROOF

Посмотреть вживую.

Откройте работу и пользуйтесь здесь.

Скролл-сайт — это полёт, а не слайд-шоу.

Studio создаёт мир, по одному кадру 16:9 на сцену и клипы камеры, которые переносят вас между ними. Готовая страница — чистый HTML и ванильный JavaScript: позиция скролла задаёт время видео, поэтому всё работает на телефоне, не требует фреймворка и весит как три коротких ролика.

Стыки, а не склейки — Каждый переход генерируется из последнего кадра одного клипа и первого кадра следующего, поэтому стык совпадает покадрово, а не размывается наплывом.
Один облик на все сцены — Каждый кадр сцены выводится из одного мастер-изображения: порт в первой сцене — тот же порт в третьей.
Страница, а не видео — Вы получаете опубликованный URL, который можно открыть, форкнуть и отправить. Заголовки сцен, надзаголовки, строки данных и подписи навигации — обычный HTML, который можно править.

Что спрашивают перед сборкой.

Что такое сайт со скролл-анимацией?

Страница, где скролл не просто листает страницу, а ведёт камеру. Каждая позиция скролла — кадр видео, поэтому посетитель пролетает сцену в своём темпе, а не смотрит ролик.

Нужны ли GSAP или Three.js?

Нет. Движок — чистый JavaScript, который прокручивает заранее отрендеренные клипы по позиции скролла. Его можно встроить в сайт на GSAP или Next.js, но здесь ни то, ни другое не требуется.

С какого числа сцен начать?

С трёх. Это около 25 МБ видео в 16:9 — быстро грузится и уже читается как путешествие. Каждая лишняя сцена добавляет два клипа, примерно 9 МБ.

Будет ли работать на телефоне?

Да. На маленькие экраны отдаётся версия 640×360, прокрутка следует за касанием, а тяжёлые десктопные клипы там не загружаются.

Из чего состоит одна сборка?

Три кадра, три клипа-нырка и два соединяющих клипа — восемь сгенерированных файлов. Спросите у Studio число клипов и модель до старта: видео — медленная и платная часть.

Можно ли потом менять текст?

Да. Заголовки сцен, надзаголовки, строки данных и подписи навигации — обычный HTML в опубликованной странице. Меняете слова, не перерисовывая ни одного кадра.

Что если генерация сорвётся?

Сборка останавливается и говорит, какой клип не вышел. Она не затыкает дыру заглушкой: фальшивая сцена ломает стык, а вместе с ним и иллюзию.

Можно взять готовый IP или свою графику?

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

Дайте одному месту три остановки.

Studio генерирует сцены, нырки и стыки, а затем публикует страницу, которую можно прокрутить и отправить. Начните с порта ниже или опишите своё место.

Собрать ночной рынок Ли Юэ