For a very long time, we felt a deep-seated have to construct one thing totally different, a digital house that really felt like us. We refused to accept simply one other “traditional” company web site draped within the standard black-and-white minimalism.
As outside fanatics, we wished our website to replicate our particular imaginative and prescient of the digital world and the historical past that formed us. For a full 12 months, we obsessed over tips on how to create a 3D map that might recreate the soul of the locations that left a mark on us, particularly California and Canada, all whereas capturing the appeal of these ultra-detailed, classic Nationwide Park maps.
A Imaginative and prescient Takes Form
Julien Sister – Artistic Director at San Rita
The turning level got here once we met Sébastien whereas engaged on a separate mission; the “click on” was instantaneous. The connection between his technical world and our inventive imaginative and prescient was simple. Whereas the map had been our best problem, Sébastien instantly introduced the options we had been trying to find. At that second, the mission formally took flight, and our world lastly got here to life.
Instruments & Stack
Sébastien Lempens – Artistic developer at Pixila
To convey this mission to life, it was crucial to decide on a coherent stack and instruments for this mission.
DatoCMS was the one requirement for the backend; for every part else, I curated the next tech stack:
Characteristic breakdowns
1. The Map
The concept was easy: show a top-down 3D map with drag-and-drop navigation to discover its hidden particulars. It primarily serves as a hub to entry the location’s totally different sections.
We briefly thought of producing the map completely procedurally through shaders, however wanted extra visible management. So I went with Blender for 3D modeling and Adobe Substance 3D Painter for texturing.
For the reason that Sanrita staff had a exact topology imaginative and prescient, I used this tremendous helpful device to generate a heightmap from geolocation information.
As soon as the heightmap was generated, I imported it immediately into Blender to create the topology.
The important thing query at this stage: “How do you show an ultra-detailed map that’s additionally light-weight?”
The trick: maintain the high-detail model to bake the feel, then apply it to a a lot lighter low-poly mesh.
2. Visible & interplay design
To convey San Rita’s world to life, I moved past static design and into the realm of immersive movement. Our pondering centered on the idea of “digital exploration,”utilizing scroll-based results as a storytelling engine.
As a substitute of a standard linear scroll, the motion acts as a digital camera lens traversing a 3D panorama. By way of customized digital texturing, I recreated the tactile, grainy texture of classic paper maps, mixing the heat of the previous with the sharpness of contemporary code.
By granting customers the liberty to navigate the map at will, we remodeled what started as a regular portfolio right into a dwelling, dynamic expertise. The location evolves into an interactive territory the place the person is now not only a customer, however a real explorer of our digital world.
3. Embarking on Tasks
The “Tasks” web page was designed to replicate the location’s exploratory essence. The expertise is constructed round an infinite scroll that simulates a trekking journey.
To create the path, I used a easy SVG path that repeats indefinitely alongside the vertical axis. Tasks are appended one after one other in real-time because the person scrolls, permitting for larger flexibility when including new content material whereas sustaining a seamless infinite scroll mechanism. The photographs are textures rendered inside materials shaders, enabling a “cloudy” or atmospheric animation on the perimeters. This additional enhances the sense of thriller and journey.
4. Nested scrolling
Implementing infinite scroll on the Playground and mission pages was tough. I wanted to deal with two scroll programs directly: the web page’s pure scroll and the playing cards’ infinite loop.
My first try used GSAP ScrollTrigger with a sticky system, nevertheless it was a bit buggy, particularly on cellular. I wanted one thing less complicated and bulletproof.
The answer: Place your complete infinite grid as place: mounted behind the web page UI. Then lower a “viewport gap” (empty container) the place the grid ought to seem. Need longer scroll? Simply improve the outlet’s peak. Easy. Dependable. Works all over the place.
Professional tip: I saved GSAP’s gsap.utils.wrap() for seamless infinite looping, paired with the Observer plugin for scroll occasions.
const observer = Observer.create({
goal: containerRef.present,
kind: 'wheel,contact,pointer',
onChange: (self) => {
scrollState.present.targetVelocity += self.deltaY * velocityFactor;
},
});
const replace = () => {
const state = scrollState.present;
state.velocity += (state.targetVelocity - state.velocity) * 0.1;
state.targetVelocity *= state.friction;
cols.forEach((col, i) => {
const isOdd = i % 2 !== 0;
const issue = isOdd ? -1 : 1;
state.yPositions[i] += state.velocity * issue;
const halfHeight = col.offsetHeight / 2;
const wrappedY = gsap.utils.wrap(-halfHeight, 0, state.yPositions[i]);
state.yPositions[i] = wrappedY;
gsap.set(col, { y: wrappedY });
});
};
gsap.ticker.add(replace);Structure & Construction
Constructed on Subsequent.js 16’s App Router, the mission makes use of route teams and parallel routes to handle public pages and intercepted contact modals. Server Parts are the usual, with “use shopper” reserved for interactive islands. Information flows from DatoCMS by a typed GraphQL shopper, using ISR through webhooks to make sure content material stays contemporary with out full website rebuilds.
The 3D expertise depends on a persistent React Three Fiber canvas mounted outdoors the format to forestall remounting throughout navigation. Belongings are optimized with Draco compression and KTX2 textures, whereas customized visible results are achieved by injecting GLSL into customary supplies through the onBeforeCompile hook. This mutation method preserves native PBR lighting and tone mapping whereas enabling complicated noise and distortion results pushed immediately by GSAP for zero-overhead efficiency.
Movement is coordinated by a shared RAF loop the place Lenis handles clean scrolling and GSAP manages all property tweening. Web page transitions use a customized CSS clip-path masks managed by a Zustand retailer, intercepting navigation to sequence animations earlier than the router pushes adjustments. Efficiency is additional tuned through the React Compiler for automated memoization and a manifest-driven preloading system that handles property in parallel earlier than the preliminary render.
A Journey By way of the Pages
The structure of sanrita.ca was designed as a multi-layered expertise, the place every part employs a definite technical system to match its narrative function.
On the Homepage, the core of the expertise is a “World Discovery” mode, pushed by a digital camera system that glides over a unified 3D map of Canada and California, syncing high-level storytelling with spatial coordinates.
As customers transition into the Case Research (tasks web page), the location zooms into an in depth format. This part is constructed completely with a light-weight HTML/JS/SVG structure, simulating a zoomed-in view of the path. Whereas the 3D engine is stepped down, we preserve visible continuity by making use of customized shaders on to the mission photographs. This permits for atmospheric edge results and vaporeous animations, preserving the mysterious, adventurous really feel of the principle journey with out the efficiency price of a full 3D scene.
By decoupling the heavy terrain rendering of the principle map from the lighter, interactive elements of the sub-pages, we ensured that essentially the most resource-intensive results are solely lively once they serve the person’s focus, sustaining a blazing-fast expertise throughout your complete website.
Reflections
Julien Sister – Artistic Director at San Rita
Classes from the Path
What we liked most about this journey was the chance to interrupt the mould and create one thing really singular within the digital studio panorama, an area that feels much less like a company portfolio and extra like a private manifesto.
The synergy inside our staff and the collaborative spark with Sébastien turned what might have been a inflexible technical construct right into a fluid, inventive exploration.
Nonetheless, the trail wasn’t with out its hurdles; the hardest half was the self-discipline of “killing our darlings”, deciding which formidable options to put aside for the inevitable “Model 2” to make sure a elegant launch.
Trying forward, if we had been to rethink one side of the structure, it might be the automation of our spatial content material. At present, inserting new landmarks requires a hands-on technical contact; for our subsequent evolution, we goal to construct a bridge between our CMS and the 3D surroundings, permitting new “factors of curiosity” to populate the map mechanically.
It’s a problem we’re already desperate to deal with, proving that for us, the map is rarely really completed, it’s simply ready for the following discovery.
