The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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/
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
From the very beginning of the CRL® project, I knew I wanted a wheel to explore the library’s resources, with the option to switch to a more traditional list view.
Once the layouts came together, I started exploring how the wheel could transition from the homepage, how the resource titles would move as you scroll, and how the two views could connect.
Then Bimo Tri got his hands on it and took the whole thing to another level. From the initial transition to the finer details of switching between views, Bimo brought so much more movement, character and feeling to the experience than I could have imagined.
A great reminder of the value of getting a great creative dev on board for a project like this! Couldn’t be happier with how this page turned out!
Love that you gave Bimo credit for pushing the motion further. The wheel is fun, but I'm curious if people actually use it to browse or if most end up flipping to the list view.
Sonder One: product site for a repairable headphone
Sonder One is a headphone built to be taken apart, so this site shows it that way. As you scroll, the headphone comes apart piece by piece, from the finished pair down to its six parts, with each part labelled as it separates.
The site responds to the mouse throughout. The custom cursor holds a small sound wave that grows as you move faster. Headlines are made of soap bubbles that float up under the cursor. Guide boxes with live coordinates follow the pointer, and product photos tilt and catch the light as you pass over them.
There are three pages: Object, Anatomy and Specifications, with smooth transitions between them and a reserve form on the last page. A light and dark mode lets you view the product in chalk white or graphite.
Built with React, GSAP ScrollTrigger, Lenis, Three.js and Vite.
Good work!
Visual direction and hero section for a cybersecurity training platform. (Concept work, not a real project)
