pro
Yalcin Web
Premium, human-designed sites, themes & components.
New to Contra
Yalcin is ready for their next project!
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
136
Zeyna — A WordPress Theme for Creative People
A multi-purpose creative WordPress theme we designed and built for ThemeForest.
Most WordPress themes that look this animated are one-off custom builds. The challenge here was packaging that level of motion into a product a non-developer can actually operate — every effect controllable from Elementor, every demo importable in one click, and none of it breaking when the buyer swaps the content for their own.
What I Built;
AJAX page transitions and smooth scrolling — the site never fully reloads
WebGL grid and carousel layouts
Spline 3D scene renderer
Lottie, text, masked-image, and SVG-draw animations
Interactive cursor and fullscreen navigation
Parallax and scroll-driven motion effects
Built for real projects 35+ demos spanning creative agency, startup, digital agency (light and dark), corporate, lawyer, construction, and electronics/e-commerce. Full RTL support with WPML language and currency switching, WooCommerce with product swatches and a configurator, Contact Form 7 with reCAPTCHA, and Slider Revolution 6 included.
Optimized for Elementor and Elementor Pro, compatible with WordPress 6.0–6.8 and WooCommerce 7–9, fully responsive and retina-ready.
858 sales · 4.83★ (23 reviews)
1
33
ANGO: Interactive 3D Website Experience
1
0
PeThemes Studio Website Development
1
0
Zeyna: A WebGL Carousel for Creative Portfolios
1
0