Задача
Нужно было рассказать о закрытом сообществе без рекламной интонации, соединить историю Барнаула с современным характером клуба и удержать длинную визуальную историю в понятном темпе на разных устройствах.
WEBGL / STORYTELLING / BRAND EXPERIENCE
История города, превращённая в путь внутрь клуба
Клуб 1730 — иммерсивный сайт-приглашение для закрытого мужского сообщества в Барнауле. Пользователь проходит через историю города, его характер и код клуба в единой scroll-driven сцене с трёхмерной Землёй, городским маршрутом, частицами и синхронизированной типографикой.
- React 19
- Three.js
- WebGL
- GLSL
- Vite
- GLTF / PBR
- Web Audio API
- Cloudflare Worker
Для чего создан сайт
Для чего создан сайт
Обычная презентация не передавала бы характер сообщества, где поступок и репутация важнее статуса. Сайт заменяет набор слайдов цельным цифровым опытом: связывает название клуба с Барнаулом, объясняет внутренние принципы и приводит приглашённого человека к личному разговору.
Для кого создан опыт
Сайт предназначен для предпринимателей и руководителей, получивших личную рекомендацию в клуб. Он не продаёт членство широкой аудитории, а помогает приглашённому человеку почувствовать атмосферу, понять правила круга и осознанно перейти к разговору с основателем.
Решение
Реализован цельный React- и Three.js-опыт, в котором прокрутка управляет камерой, Землёй, городским пространством, частицами и текстовыми сценами. Визуальные слои используют одну временную шкалу, поэтому смысл, движение и переходы воспринимаются как единый рассказ.
Возможности
Что умеет продукт
Функции собраны вокруг рабочего сценария и связаны общим состоянием, контролем и аналитикой.
Управляемая прокруткой история
Колесо, жесты и клавиатура последовательно ведут пользователя по истории города, принципам клуба и личному приглашению.
Путь от Земли к Барнаулу
Реалистичная планета с дневной и ночной текстурами, атмосферой и меткой города создаёт кинематографичную точку входа.
Трёхмерный городской маршрут
После вступления камера проходит сквозь GLTF-сцену Барнаула, а глубина, туман и свет поддерживают развитие повествования.
Синхронизация WebGL и текста
Заголовки, пояснения и трёхмерные объекты используют общие окна появления, удержания и исчезновения.
Защита от пропуска сцен
Резкий скролл добавляет движение в очередь, но прогресс кадра ограничен, поэтому важные смысловые этапы не перескакиваются.
Адаптация под устройства
Чувствительность жестов, композиция, качество текстур и элементы управления подстраиваются под desktop и мобильный экран.
Итог
Результат
Клуб получил не презентацию, а самостоятельное цифровое приглашение: история Барнаула естественно приводит к принципам сообщества, а трёхмерная режиссура удерживает внимание без привычной рекламной подачи. Финальный переход к личному разговору встроен в сам сюжет, а не добавлен отдельным продающим блоком.
React 19
Three.js
WebGL
GLSL
Vite
GLTF / PBR
Web Audio API
Cloudflare Worker
Новый проект
Есть похожая задача?
Опишите исходную ситуацию и желаемый результат. Мы разберёмся в контексте и предложим практичный первый этап.