Most agency sites give you a grid of case studies and a "Let's Talk" button. San Rita's site gives you a topographic map. You navigate their world like a hiker reading contour lines, discovering "hot spots" where projects, ideas, and studio lore sit embedded in the landscape. Trails connect them. It's part portfolio, part national park, and it commits fully to the bit.

The map's topography starts with a highly detailed depth texture, brought into Blender and applied to a flat mesh to generate the terrain volume. Since the whole thing needs to run on the web, the challenge was keeping that detail without shipping a massive model. The solution: two versions of the mesh. An ultra-detailed one used solely to bake textures in Adobe Substance Painter (e.g. normal maps, displacement maps, the works) and a drastically simplified one that actually gets loaded in the browser. The detailed textures get applied to the lightweight mesh, dropping file size from around 60 MB down to 3–4 MB. That's web-and-mobile-friendly territory. The model ships as glTF with Draco compression to squeeze it even further. On the rendering side, the site runs on Next.js with React Three Fiber handling the WebGL layer. The more distinctive visual effects come from custom fragment shader work with direct GPU-level control that go far beyond what CSS can achieve.

Atelier San Rita is a Canadian creative studio working across digital design, web development, branding, and content creation. They describe themselves as "hand-crafted digital design purveyors" and "gold ideas seekers," which tracks once you see the level of environmental storytelling baked into the site itself.

Go explore the trail with the dev tools as your guide. The interplay between the navigation metaphor and the underlying rendering is worth poking at, and the studio's craft that makes the web worth building for.