С чего начали
Проверить, выдержит ли длинный маршрут формат одной страницы — с кинетикой уровня Site of the Year, но без WebGL, без перехвата прокрутки и так, чтобы на телефоне было удобно. Факты только публичные, никаких расписаний и цен.
Экспериментальный концепт · 2026
Транссиб 9288
- Клиент
- Авторский концепт VERSTA
- Тип
- Экспериментальный концепт
- Год
- 2026
Транссибирская магистраль как одна непрерывная прокрутка: 9 288 км, восемь часовых поясов и семь переводов часов. Счётчик километров, часы, которые сами переходят в новый пояс, и стоп-кран, который можно дёрнуть.
01 — Lando Norris · Awwwards
Референс
Главный референс — сайт гонщика Lando Norris от студии OFF+BRAND. На Awwwards он Site of the Day 17 ноября 2025 года (8,18 из 10) и Site of the Year 2025 вместе с Developer Award. Награды сверены на awwwards.com 24.09.2026. Оттуда взята идея: одна мысль через всю страницу, огромный шрифт и игра жестом.
Что взяли
Систему, не внешний вид. Сквозной сюжет вместо набора блоков. Заголовки в 8–10 раз крупнее текста, межстрочный 0,8. Постоянные приборы в углу экрана. Бегущую строку между сценами и отклик на жест. Ритм тоже оттуда: полноэкранные сцены чередуются с короткими полосами, всего около 14 экранов.
Что не взяли
Логотип, тексты, фото, 3D-модели, шрифты Brier и Mona Sans, лаймовый цвет. Отказались и от техники: у референса WebGL и плавная прокрутка Lenis, которая подменяет собственную прокрутку браузера. У нас обычный 2D-холст и штатная прокрутка.
Как мерили
Страницу референса открыли в браузере без окна и сняли вычисленные стили. Заголовки там 124–147 px на экране 1920, межстрочный 0,81–0,85, трекинг −0,03 em. Поля 1,25 rem. Плавная прокрутка с коэффициентом 0,1. С сайта ничего не скачано.
02 — Шрифт, цвет, приборы
Айдентика
Концепт ничей, поэтому фирменный стиль придуман с нуля. Узкий Tektur похож на трафаретные номера на вагонах. Golos Text — спокойный шрифт для чтения. Цвет один: сигнальный красный на тёплом чёрном.
Ночь#0C0B0A
Купе#15120F
Бумага билета#F2ECE2
Подписи#B0A79B
Сигнал#FF5A24
Сигнальный красный на чёрном даёт контраст 6,3 : 1, мелкие подписи #B0A79B — 8,3 : 1. Лайм нарочно не используем: это цвет референса и самой VERSTA.
03 — Отправление
Первый экран
Слово «Транссиб» на пол-экрана, рельсы уходят к горизонту, справа стоп-кран. Внизу приборы: 0 км, Москва, московское время. Чем быстрее крутишь страницу, тем быстрее бегут шпалы и сильнее наклоняются буквы.
Концепт VERSTA · 2026
Рельсы рисует обычный 2D-холст, без WebGL и без библиотек. Если в системе включено «уменьшить движение», остаётся неподвижный кадр.
04 — Три сцены
Экраны
Перегон едет вбок, прокрутка — вниз
Шесть станций закреплены и едут влево, пока страница прокручивается вниз. Это обычный sticky-блок: колесо, клавиши и полоса прокрутки работают как всегда. На телефоне те же станции выстроены вертикальной линией, без бокового скролла.
Главы с километрами
Каждая фотоглава — отрезок пути с реальными отметками станций. Пока глава проходит через экран, счётчик внизу доходит до отметки её станции, а часы сами переводятся на новый пояс.
Поездка вертикально
Приборы на телефоне сжаты в строку высотой 62 px: километры слева, часы справа, профиль маршрута фоном. Стоп-кран здесь тянется вправо, большим пальцем.
05 — Детали
Решения интерфейса
Часы, которые переводятся сами
Часы показывают настоящее время посетителя в поясе текущего участка пути. Семь раз за прокрутку они перескакивают на час вперёд. Экранный диктор объявляет новый пояс один раз, а не на каждом километре.
Стоп-кран как жест
Рычаг можно дёрнуть мышью, пальцем или с клавиатуры: стрелки, Enter, Escape. Поезд тормозит, заголовок вздрагивает, всплывает подсказка. Отпустишь — рычаг возвращается на место.
Калькулятор без билетов
В конце можно выбрать две станции и получить расстояние по километровым отметкам и разницу во времени. Время в пути и цены концепт не показывает и прямо об этом пишет: они зависят от поезда.
06 — Честно
Границы концепта
Это не заказ
Экспериментальный концепт студии VERSTA, сделанный по своей инициативе. Он не связан с РЖД и перевозчиками и не использует их фирменный стиль. Ничего не продаёт, данные не собирает. Страница закрыта от поисковиков.
Откуда цифры
9 288 км и «самая длинная железная дорога» — Britannica. Километры станций, 1891–1916 годы и Кругобайкальская дорога 1904 года — из статей Википедии о магистрали. Мост через Амур 1916 года, около 2,6 км — статья «Хабаровский мост». Стела 9288 с 1996 года — «Километровый столб 9288». Часовые пояса — те, что действуют с 2016 года.
Что условно
Часы переводятся у первого города нового пояса, а не на точной границе. Профиль маршрута на приборной панели условный, это не рельеф. Фотографии сгенерированы для концепта и не изображают конкретные места. Расписаний, времени в пути и цен нет.
В разных источниках отметки станций расходятся на 1 км: в таблицах Википедии конечная — 9 289 км, на стеле во Владивостоке — 9288. На странице это указано в подвале.
07 — Ход работы
Что было и что сделали
Что изменили
Каждая глава — отрезок пути с реальными отметками станций, а приборы внизу считают километры и переводят часы. Рельсы и профиль маршрута нарисованы на 2D-холсте и ускоряются вместе с прокруткой. Стоп-кран откликается на мышь, палец и клавиатуру. При «уменьшить движение» страница становится спокойным вертикальным маршрутом.
08 — Цифры
Что можно посчитать
10сцен от 0 до 9 288 км
0
0,9 МБвесь концепт со шрифтами и фото
09 — Что входило
Состав работы
- Исследование и структура
- Арт-дирекшн
- UX/UI-дизайн
- Разработка и запуск
Границы кейса
Что показывает эта страница
Снимки сделаны с работающего проекта, а не с макета. Показываем интерфейс и решения, которые сделали сами.
Результат кейса — выпущенный интерфейс. Изменение числа заявок, выручки и позиций в поиске мы этой работой не измеряли и не приводим. Полоса с цифрами появляется только там, где измерение действительно есть.
Создадим продукт, который хочется показывать.
Расскажите о задаче — вернёмся с вопросами и первым направлением решения.
Следующий шаг · ВЕРСТА
Есть задача? Начнём с разговора.
Поможем разобраться в задаче и определить следующий шаг. Без обязательств и готового ТЗ.
В рабочее время · обычно в тот же день