Score
San Rita's Topographic Web Design Navigates Projects as Terrain
San Rita's innovative topographic web design transforms the user experience by allowing visitors to navigate projects as if traversing a 3D landscape, utilizing real GPS data and vintage map aesthetics. This approach not only enhances engagement but also positions the brand as a leader in creative web design, emphasizing the importance of unique interfaces in brand strategy.
Abduzeedo: San Rita's Topographic Web Design Navigates Projects as Terrain jeff March 24, 2026 Montreal studio San Rita built their topographic web design around navigable 3D terrain, using real GPS elevation data and vintage map textures for craft. The result is sanrita.ca , a portfolio built on topographic web design principles that refuse every conventional grid. Creative director Julien Sister and developer Sébastien Lempens spent a year prototyping before arriving at an interface where projects live as hotspots on a 3D mountainous landscape. Visitors do not click through a menu. They navigate terrain.
The terrain itself is built from real GPS heightmap data sourced from regions in Canada and California. Lempens used the Unreal Height Map tool to convert that elevation data into Blender topology, baking high-resolution detail onto a lightweight low-poly mesh. The result is a map that looks dense with information but renders efficiently in the browser via React Three Fiber. How San Rita's Topographic Web Design Works The visual language of this topographic web design borrows from vintage cartography. Custom digital textures simulate the grain of aged paper maps, while navigation uses trail terminology: road, fishing spot, viewpoint.
The loading sequence reveals the world in stages, vegetation germinating, water veins appearing. Every phrase reinforces the outdoor metaphor without becoming a gimmick. Project pages take a different approach. Instead of loading more 3D geometry, they switch to lightweight HTML and SVG with custom GLSL shaders applied to photography. The shader effects give each project photo an atmospheric edge, treating images as materials rather than flat assets. The architecture holds the whole thing together. A persistent React Three Fiber canvas sits outside Next.js 16's layout system, preventing remounts. GSAP and Lenis handle motion.
DatoCMS delivers content. The projects page runs an infinite scroll using GSAP's wrap() utility, simulating a trekking trail through the work. San Rita's topographic web design has been featured on Communication Arts and Awwwards. The Codrops case study breaks down the full build.
The article discusses a unique approach to web design that significantly enhances user experience and engagement, making it highly relevant and impactful for brand strategy professionals.