pro
Yalcin Web
Web Designer & Developer for High-end Creative Websites.
pe.supply Design & Development: A Theme Marketplace
1
10
Infinity Studio: a real-time 3D coming soon page for the world's highest recording studio
High above Sölden, at 2,600 metres, Wilderness Studios is building the world's highest alpine recording studio. Before the doors open they needed a page that felt like standing in front of the building.
Instead of a render and a countdown, we built the studio as a live 3D scene in the browser.
What's on the page
The actual building. We made the exterior from the architect's model and checked it against their reference views, then set it on real terrain data for the site.
Real light. The scene works out the sun's height at the studio's coordinates, so it's daytime on the page when it's daytime in Sölden and night when it's night there. A live Vienna clock sits next to the logo, and you can switch between day and night yourself.
An intro drawn in light. Light lines trace the building's edges from the top down, corner labels count up, and then the facade fills in room by room from the terrace to the top floor. A thin blueprint layer (axes, dimensions, levels, north arrow) draws in alongside, like a pen on paper.
Rooms you can find. Hover over the building and each room lights up with its name: Studio, Kitchen, Nest, Terrace.
Atmosphere. Haze that thickens with distance, thin clouds drifting across the sky, and snow blowing across the terrain. We tuned all of it against real photo references so nothing looks procedural.
Drag to explore. You can orbit all the way around the building, with limits so you never end up underground or lose the composition.
Performance was part of the brief
A 3D teaser nobody waits for is useless. We brought the scene from a 30-second freeze down to about one second until it's ready, cut the GPU frame time from 30 ms to about 13 ms on a retina display, and cut the total download from 13 MB to 8.4 MB. The page also adapts its resolution on the fly when a device starts to struggle.
Built with Next.js, React Three Fiber, custom GLSL shaders, GSAP and Listmonk for the waitlist.
This is phase one. Next comes a full 3D tour through the studio.
→ https://infinity-studio-omega.vercel.app/
1
80
Turning "Where Is It?" Into the Best Page on the Site — 3D Mapbox Experience for an Austrian Alps Studio
A custom-built 3D interactive map experience for Wilderness Studios, a recording & event studio in the Austrian Alps. Built on Mapbox GL + @Webflow CMS: animated terrain, a drawn arrival route, live travel directions, and 96 curated points of interest — all editable by the client.
What I built
A full-screen, cinematic 3D map page that replaces the usual "Location & Contact" section — one continuous experience with two modes: The Location and The Surroundings.
1. Cinematic 3D terrain
Mapbox GL JS with custom dark terrain styling, exaggerated elevation and a hand-tuned camera. The page opens on a wide alpine shot with the studio marker sitting in the valley — the mountains do the storytelling before a single line of copy is read.
2. Animated arrival route
Instead of listing distances, the route draws itself across the terrain from the nearest town to the studio, with the camera flying along it. Every marker, label and stat fades in on its own timeline, so the whole intro reads as one choreographed shot rather than a map that happens to load.
3. Live directions panel
Airports, train stations and motorway exits with distances and drive times, each one selectable — pick Innsbruck Airport and the map re-frames to that leg of the journey. "Get Directions" hands off to native maps for the actual trip.
Stack
Webflow (structure + CMS) · Mapbox GL JS (3D terrain, custom style, markers, route layers) · GSAP (camera choreography, sequenced reveals) · vanilla JS (CMS → GeoJSON pipeline, category filtering, gallery, state between the two modes)
2
2
758
ANGO: Interactive 3D Website Experience
1
11