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. Explore the studio's work at sanrita.ca.