Challenge
The experience had to describe a private community without an advertising tone, connect Barnaul's history with the club's present-day character and keep a long visual narrative readable across devices.
WEBGL / STORYTELLING / BRAND EXPERIENCE
A city's story transformed into a journey inside the club
Club 1730 is an immersive invitation website for a private men's community in Barnaul. Visitors move through the city's history, its character and the club's code in one scroll-driven scene combining a 3D Earth, a city route, particles and synchronized typography.
- React 19
- Three.js
- WebGL
- GLSL
- Vite
- GLTF / PBR
- Web Audio API
- Cloudflare Worker
Why the site was created
Why the site was created
A conventional presentation could not express a community where actions and reputation matter more than status. The site replaces a slide deck with a cohesive digital experience that connects the club's name to Barnaul, explains its principles and leads an invited visitor toward a personal conversation.
Who the experience serves
The site is designed for entrepreneurs and executives who have received a personal recommendation to the club. It does not market membership to a broad audience; it helps an invited person feel the atmosphere, understand the circle's rules and move intentionally toward a conversation with the founder.
Solution
We built a continuous React and Three.js experience where scrolling controls the camera, Earth, city environment, particles and narrative copy. Every visual layer follows the same timeline, turning meaning, motion and transitions into one coherent story.
Capabilities
Product capabilities
The capabilities support one operating scenario and share common state, control and analytics.
Scroll-driven storytelling
Wheel, touch and keyboard input guide the visitor through the city's origin, the club's principles and the personal invitation.
Earth-to-Barnaul arrival
A realistic planet with day and night maps, atmosphere and a city marker creates a cinematic point of entry.
Three-dimensional city route
After the opening, the camera travels through a GLTF Barnaul scene while depth, fog and light support the evolving narrative.
WebGL and copy synchronization
Headlines, supporting text and three-dimensional elements share the same entrance, hold and exit windows.
Scene-skip protection
Strong scroll input is queued while per-frame progress stays capped, keeping essential narrative beats visible.
Device-aware presentation
Gesture sensitivity, composition, texture quality and controls adapt to desktop and mobile screens.
Outcome
Outcome
The club gained a standalone digital invitation instead of a presentation. Barnaul's story naturally leads into the community's principles, while the three-dimensional direction holds attention without conventional advertising. The final personal conversation is part of the narrative itself rather than an appended sales block.
React 19
Three.js
WebGL
GLSL
Vite
GLTF / PBR
Web Audio API
Cloudflare Worker
New project
Working on a similar task?
Describe the current situation and the outcome you need. We will understand the context and propose a practical first stage.