TIMELESS: A Digital Experience Beyond Time

Creating a website for TIMELESS was not just about giving the brand a digital presence — it became a full-fledged creative and technical experiment. Our goal was to translate the atmosphere of a premium lounge into an online experience, where time seems to stand still and the visitor is immersed in a world of comfort and aesthetics. This article shares how we approached the project, the solutions we discovered, and the challenges we faced.

Timeless is a network of premium lounge spaces founded in 2018 in Moscow. The brand is built around the concept of the “third place”: if home is the first and work is the second, then Timeless becomes a unique space where time seems to stand still.

Each location blends comfort and luxury. Guests come not only for high-quality hookahs and cocktails, but for the chance to unwind, reset, and feel “at home” in the refined atmosphere of a private club. The interiors reflect a premium aesthetic — from Art Deco and Gatsby chic to modern loft styles. It’s a place to spend an evening with friends, play board games, or even work in a relaxed and stylish setting.

The philosophy of Timeless is simple yet powerful: “Welcome Home.” It’s a space you’ll want to return to — a retreat from the rush of everyday life, existing outside of time. Our task was to translate this philosophy into a digital experience.

The main goal of the project was to present Timeless not merely as a network of lounge spaces, but as a complete lifestyle. The digital environment needed to extend the offline experience — atmospheric, mysterious, and premium.

In our search for a visual metaphor for immersion, we explored various ideas: doors, gates, even experimented with neural networks. But the results felt too generic. The breakthrough came when we revisited Timeless’s signature 2D pattern. We decided to transform it into a three-dimensional, dynamic form. This led to the creation of portals — a symbol of transition into the “third place,” an extension of the brand identity, and an original technological solution.

The website’s narrative was designed as a journey beyond the edge of reality. The user seems to fall down a rabbit hole, gliding past floating objects, and landing in a world free from worries and everyday noise. This metaphor, inspired by Alice in Wonderland, captures the feeling of entering the unknown — a place where the usual rules no longer apply.

The visual concept of the website was inspired by the premium design and distinctive style of Timeless establishments.

The color palette combines black and white with shades of ivory and accents of rose gold.
Typography is clean and expressive, reinforcing the sense of refined luxury.
The overall aesthetic is minimalist, with a strong focus on detail, incorporating both 3D elements and high-quality photo content.

We drew inspiration directly from Timeless interiors — soft ambient lighting, rich textures of furniture, and a sense of privacy and comfort. These elements became the foundation of the site’s visual language.

The technical side of the project was just as exciting as the visual creation. We had to seamlessly combine rich 3D graphics, complex animations, and premium visual quality — all while maintaining high performance across various devices.
To achieve this, we chose a tech stack based on React (Next.js), Three.js (R3F), and Framer Motion.

Loading and Converter

One of the first major challenges was handling the loading of heavy assets. During the initial FPS tests, performance dropped to near zero.
To prevent users from experiencing this lag, we implemented an offscreen converter using OffscreenCanvas, which runs in a separate thread. This allowed the experience to remain smooth even during initialization.

The “Live” Interface Button

One of the key interface highlights was a morphing button with wave-shaped edges. At first, we implemented it using Perlin noise, but this approach proved to be too resource-intensive.

The solution came through the Path2D API — it allowed us to preserve the button’s fluid, dynamic behavior while significantly reducing the load on the processor. The result was a smooth, “alive” interface element that didn’t compromise performance.

Portals and 3D Scenes

Portals are the heart of the website. Using shaders, we transformed abstract shapes into dynamic “gateways” to another dimension. To optimize performance, we used GPU instancing, while lighting was enhanced through Three-Custom-Shader-Material, with normals calculated directly in the shader.

The location slider was made cyclic: the camera moves smoothly using Damp and Lerp, and location data is loaded dynamically from the backend.

But here’s the key point — especially for those less familiar with code:
The portals are not pre-rendered. Their shapes are generated procedurally, in real time, at the moment you look at them. They’re not static objects, but living forms — constantly re-created. That’s why the site doesn’t just feel like an image — it feels like a space you can actually enter.

Water as an Atmospheric Element

Water became one of the most striking visual elements of the scene. We created procedural waves using sine and cosine functions, and implemented reflections through our custom Fork of MeshReflectorMaterial.

A key discovery was the “endless water” effect — the water plane moves with the camera, making the edges invisible and creating the illusion of an infinite surface.

And here’s an important clarification:
The water animation is also fully procedural. This means we didn’t use a pre-rendered video or baked simulation. The waves are generated and computed in real time — as the user interacts with the site. Because of this, the surface never repeats and always feels unique — just like real water in nature.

Staircase and Soaring Objects

The spiral staircase scene became one of the most technically challenging parts of the project. The asset was initially too heavy, but after optimization, it ran smoothly across all devices. Carefully crafted lighting highlighted the premium feel of the space, while subtle dynamics brought it to life: as the user scrolls, tables and chairs appear to float gently into place.

This isn’t just a 3D background — it’s a piece of storytelling. The furniture becomes a cast of characters taking the stage, and in that moment, the viewer realizes: this isn’t a website — it’s a living environment, where something is always happening.

Of course, no journey is without its quirks. During development, we discovered the staircase would sometimes mysteriously vanish. This led to a running joke within the team: “The gypsies stole the stairs again.”

The bug came and went a few times, but we finally tracked it down before launch.

Scroll as a Journey Tool

On most websites, scrolling simply moves text or images. But here, it becomes a tool for travel. Instead of the usual page movement, the camera rotates and flies through portals, unveiling new scenes and perspectives — and eventually, the staircase, floating objects, and lifelike environments.

This isn’t a slideshow or animation — it’s a real-time, three-dimensional world rendered directly in the browser.

We deliberately made the scroll directional and controlled, so users can’t just “skip past” key moments. The result is a cinematic experience, where every finger swipe becomes the next frame in a continuous journey.

Optimization and Adaptability

To ensure a premium experience on any device, we implemented dynamic quality adaptation. On lower-end hardware, secondary effects are disabled and resolution is reduced. On high-performance machines, everything is activated — from detailed textures to complex reflections.

We also fine-tuned Gainmap handling and achieved pixel-perfect rendering in the interface — thanks in part to close collaboration with the client.

The Timeless project became a true synthesis of design, technology, and storytelling. We successfully translated the brand’s philosophy into a digital experience — one of mystical immersion, premium aesthetics, meticulous detail, and smooth, intuitive UX.

The website transformed into an online “third place” — a natural extension of the Timeless concept. It doesn’t just tell the story of the venues; it makes you feel the atmosphere — from the portals and endless water to the theatrical staircase scene where the space literally comes to life.

Timeless in digital is an invitation to Welcome Home — a place where time truly stands still.

We created this project not just for the brand, but for ourselves — to prove that we could go further, bolder, and higher. Because new frontiers are only discovered by those willing to challenge themselves.