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
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)
"This is a fantastic take on a location page. Turning directions into an immersive 3D experience makes the journey part of the brand story rather than just a utility. The combination of Mapbox, GSAP, and a CMS-driven approach creates something that's both visually impressive and genuinely useful.
Thanks Victor, that's exactly the framing we were after the trip is part of the offer, so treating it as a utility felt like leaving the best part on the table. The CMS side was the sneaky-hard bit honestly. Making 96 hand-researched POIs editable by a non-technical client...
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
Trending
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
Uhh. Can you help me pick, A or B? 🙏
I'm drafting client's landing page using 2 of the most advanced AI models: Anthropic (Fable) and OpenAI (Sol).
Both delivered a banger result from a single prompt (I'll put it in the comments).
Can you tell which model delivered which output? 😏
31 voted
56%
24 voted
44%
55 votes
Closed
I think both are AI generated UI
correct if I'm worng.
The way the watch rotates as the collateral piece is a smart touch, it makes the loan feel tied to a real object instead of just a number on a screen. What's the fallback for items that don't photograph as well as a watch?
I built Varelo into a small agency. A team of 4.
I thought that was the goal. It sounds good when you say it out loud. "I run a team." "I have people working for me." For a while I believed that was the version of this business I actually wanted.
Then I looked at the last few months and noticed something. I had barely designed anything myself. The team did the design work. I did project management, client calls, keeping things moving. All useful, none of it the reason I started this in the first place.
So I sat with that for a while and got honest with myself. What I actually love is sitting with a client, understanding their vision, and turning that into something real. A website, a brand, a feeling. That process is the entire reason I got into this. Not managing a team. Not scaling headcount. The making.
So I am going back to that. Varelo is becoming a freelance studio again, me doing the design work directly with clients, not handing it off and checking in later.
If you are a business owner with a real vision for your website and you want to work directly with the person actually designing it, not passed between account managers, send me a message. Let's see if we are a fit.
Well done… praying you get the best out of this decision 🤗