TIMELESS: цифровой опыт вне времени

Создание сайта для TIMELESS стало задачей не просто цифрового представления бренда, а полноценным креативным и техническим экспериментом. Мы стремились перенести в онлайн атмосферу премиального лаунжа, где время будто останавливается, а посетитель погружается в мир уюта и эстетики. Этот материал рассказывает о том, как мы подошли к проекту, какие решения нашли и с какими вызовами столкнулись.

TIMELESS — это сеть премиальных лаунж-пространств, созданных в 2018 году в Москве. Концепция бренда строится вокруг идеи «третьего места»: если дом — это первая точка, работа — вторая, то TIMELESS становится особым пространством, где время словно замирает.

Каждое заведение объединяет уют и роскошь. Гости приходят не только за кальянами и коктейлями, но и за возможностью переключиться, отдохнуть, почувствовать себя «как дома» в эстетике приватного клуба. Интерьеры выдержаны в премиальной стилистике — от ар-деко и гетсби-шика до современных лофтов. Здесь можно провести вечер с друзьями, поиграть в настольные игры или даже поработать в комфортной обстановке.

Философия TIMELESS проста и сильна: «Welcome Home» — место, куда хочется возвращаться, потому что оно вне времени и повседневной суеты. Именно эту философию нам предстояло перенести в цифровую среду.

Главная цель проекта заключалась в том, чтобы показать TIMELESS не просто как сеть лаунж-пространств, а как целый стиль жизни. Цифровое пространство должно было стать продолжением оффлайн-опыта: атмосферным, мистическим и премиальным.

В поисках визуальной метафоры погружения мы экспериментировали с образом дверей, врат, пробовали даже использовать нейросети, но результаты получались слишком банальными. Решение пришло в момент, когда мы обратили внимание на фирменный двухмерный паттерн TIMELESS. Мы решили превратить его в трёхмерную динамическую форму. Так появились порталы — они стали символом перехода в «третье место», продолжением фирменного стиля и оригинальным технологическим решением.

Нарратив сайта строился как путешествие за грань реальности. Пользователь словно проваливается в кроличью нору, пролетает мимо парящих объектов и оказывается в ином мире, где нет забот и суеты. Эта метафора вдохновлена историей про Алису в стране чудес — погружение в неизвестное, где привычные законы перестают действовать.

Визуальная концепция сайта опиралась на эстетику премиального дизайна и стиль самих заведений.

• Цветовая палитра — сочетание чёрного и белого с оттенками слоновой кости и акцентами розового золота.
• Типографика — строгая и выразительная, с акцентом на люксовую подачу.
• Общий стиль — минимализм с вниманием к деталям, использование 3D и фотоконтента.

Вдохновение мы черпали в интерьерах TIMELESS: мягкий свет, фактуры мебели, ощущение приватности и уюта. Всё это легло в основу визуального языка сайта.

Работа над технической частью проекта оказалась не менее увлекательной, чем создание визуала. Нам предстояло совместить насыщенную 3D-графику, сложные анимации и премиальное качество картинки с высокой производительностью на разных устройствах. Для этого мы выбрали стек из React (Next.js), Three.js (R3F) и Framer Motion.

Загрузка и прелоадер

Загрузка тяжёлых ассетов была первым серьёзным вызовом. При старте сцены FPS падал почти до нуля. Чтобы этого не замечал пользователь, мы сделали прелоадер в отдельном потоке через OffscreenCanvas — так он остаётся плавным даже во время инициализации.

«Живая» кнопка интерфейса

Одним из акцентов интерфейса стала morph-button с волнообразными границами. Первоначально мы строили её на основе шума Перлина, но это оказалось слишком ресурсоёмко. Решение пришло через Path2D API: кнопка сохранила динамику, но стала лёгкой для процессора.

Порталы и 3D-сцена

Порталы — сердце сайта. С помощью шейдеров мы превратили абстрактные формы во «врата» в другое измерение. Чтобы оптимизировать производительность, использовали GPU instancing, а освещение улучшили через three-custom-shader-material, пересчитывая нормали в шейдере. Слайдер локаций сделали циклическим: камера плавно перемещается с помощью damp и lerp, а данные о локациях приходят динамически с бэкенда.

И ключевой момент для тех, кто далёк от кода: порталы не нарисованы заранее. Их формы создаются процедурно — в момент, когда вы смотрите на них. Это не статичный объект, а живой организм, постоянно генерируемый заново. Именно поэтому сайт ощущается не как картинка, а как пространство, в которое можно войти.

Вода как элемент атмосферы

Вода стала одним из самых эффектных элементов сцены. Процедурные волны мы построили на синусах и косинусах, отражения реализовали через собственный форк MeshReflectorMaterial. Настоящим открытием стал эффект «бесконечной воды»: плоскость движется вместе с камерой, и её края никогда не видны.

И снова важное уточнение: анимация воды — тоже процедурная. Это значит, что мы не «залили» готовое видео или заранее просчитанную модель. Волны генерируются и пересчитываются прямо в момент взаимодействия пользователя с сайтом. Благодаря этому поверхность никогда не повторяется и каждый раз выглядит по-новому, как в настоящей природе.

Лестница и парящие объекты

Сцена с винтовой лестницей стала сложным вызовом. Ассет оказался тяжёлым, но после оптимизации он засиял на любых устройствах. Освещение подчеркнуло премиальный характер сцены, а динамика оживила пространство: при скролле столы и стулья словно парят в воздухе и мягко занимают свои места. Это не просто 3D-декорация, а настоящая режиссура, где мебель превращается в актёров, выходящих на сцену. В этот момент зритель понимает: сайт — это не страница, а живое пространство, в котором что-то постоянно происходит.

Правда, на этапе разработки мы заметили, что у сайта иногда появлялись и другие «действующие лица». Периодически лестница просто пропадала, и тогда в команде звучала шутка: «Цыгане снова угнали лестницу». Баг возвращался несколько раз, но к релизу мы их всё же отловили.

Управление скроллом

Обычно скролл на сайте — это механика пролистывания текста или картинок. Но здесь он превращается в инструмент путешествия. Вместо банального движения страницы камера вращается и перелетает между порталами, открывая новые перспективы. А дальше — лестница, парящие предметы, оживающая сцена. Это не монтаж, а живая сцена в трёхмерном пространстве, которую браузер формирует в реальном времени.

Мы сознательно сделали скролл режиссируемым, чтобы пользователь не мог просто «проскочить» ключевые этапы. В результате он оказывается втянутым в сюжет, где каждое движение пальцем превращается в новый кадр путешествия.

Оптимизация и адаптивность

Чтобы опыт оставался премиальным на любых устройствах, мы реализовали динамическую адаптацию качества. На слабых машинах сайт отключает второстепенные эффекты и снижает разрешение, а на мощных включает всё: от высоких текстур до сложных отражений. Мы также учли работу с gainmap и добились pixel perfect в интерфейсе не без помощи заказчика.

Проект TIMELESS стал синтезом дизайна, технологий и нарратива. Нам удалось передать философию бренда через цифровой опыт: мистическое погружение, премиальная эстетика, внимание к деталям и плавный UX.

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

TIMELESS в цифре — это приглашение «Welcome Home», туда, где время действительно замирает. Мы сделали этот проект не только ради бренда, но и ради себя — чтобы доказать, что можем идти дальше, выше, смелее. Потому что новые границы открывает лишь тот, кто готов бросить вызов самому себе.