For a very long time, we felt a deep-seated have to construct one thing totally different, a digital area 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 fans, we wished our website to mirror our particular imaginative and prescient of the digital world and the historical past that formed us. For a full yr, we obsessed over how you can create a 3D map that would 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 – Inventive Director at San Rita
The turning level got here after we met Sébastien whereas engaged on a separate venture; the “click on” was prompt. The connection between his technical world and our inventive imaginative and prescient was simple. Whereas the map had been our biggest problem, Sébastien instantly introduced the options we had been trying to find. At that second, the venture formally took flight, and our world lastly got here to life.
Instruments & Stack
Sébastien Lempens – Inventive developer at Pixila
To convey this venture to life, it was vital to decide on a coherent stack and instruments for this venture.
DatoCMS was the one requirement for the backend; for every little thing 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 positioning’s totally different sections.
We briefly thought of producing the map solely procedurally through shaders, however wanted extra visible management. So I went with Blender for 3D modeling and Adobe Substance 3D Painter for texturing.
Because the Sanrita crew had a exact topology imaginative and prescient, I used this tremendous useful software to generate a heightmap from geolocation knowledge.
As soon as the heightmap was generated, I imported it instantly 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: hold 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 conventional linear scroll, the motion acts as a digital camera lens traversing a 3D panorama. By means of customized digital texturing, I recreated the tactile, grainy texture of classic paper maps, mixing the heat of the previous with the sharpness of recent code.
By granting customers the liberty to navigate the map at will, we reworked what started as a normal 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 Initiatives
The “Initiatives” web page was designed to mirror the positioning’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. Initiatives 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 sides. This additional enhances the sense of thriller and journey.
4. Nested scrolling
Implementing infinite scroll on the Playground and venture pages was tough. I wanted to deal with two scroll techniques directly: the web page’s pure scroll and the playing cards’ infinite loop.
My first try used GSAP ScrollTrigger with a sticky system, but it surely was a bit buggy, particularly on cell. I wanted one thing less complicated and bulletproof.
The answer: Place your complete infinite grid as place: mounted behind the web page UI. Then reduce a “viewport gap” (empty container) the place the grid ought to seem. Need longer scroll? Simply improve the opening’s peak. Easy. Dependable. Works in all places.
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 venture makes use of route teams and parallel routes to handle public pages and intercepted contact modals. Server Elements 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 exterior the format to forestall remounting throughout navigation. Property are optimized with Draco compression and KTX2 textures, whereas customized visible results are achieved by injecting GLSL into commonplace supplies through the onBeforeCompile hook. This mutation strategy preserves native PBR lighting and tone mapping whereas enabling advanced noise and distortion results pushed instantly by GSAP for zero-overhead efficiency.
Movement is coordinated by a shared RAF loop the place Lenis handles easy 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 modifications. Efficiency is additional tuned through the React Compiler for computerized memoization and a manifest-driven preloading system that handles property in parallel earlier than the preliminary render.
A Journey By means 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 goal.
On the Homepage, the core of the expertise is a “International 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 (initiatives web page), the positioning zooms into an in depth format. This part is constructed solely 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 venture photographs. This permits for atmospheric edge results and vaporeous animations, preserving the mysterious, adventurous really feel of the primary journey with out the efficiency value of a full 3D scene.
By decoupling the heavy terrain rendering of the primary map from the lighter, interactive parts of the sub-pages, we ensured that probably the most resource-intensive results are solely lively after they serve the person’s focus, sustaining a blazing-fast expertise throughout your complete website.
Reflections
Julien Sister – Inventive Director at San Rita
Classes from the Path
What we beloved most about this journey was the chance to interrupt the mildew and create one thing actually 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 crew and the collaborative spark with Sébastien turned what might have been a inflexible technical construct right into a fluid, inventive exploration.
Nevertheless, 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.
Wanting forward, if we have 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 setting, permitting new “factors of curiosity” to populate the map mechanically.
It’s a problem we’re already desirous to deal with, proving that for us, the map is rarely actually completed, it’s simply ready for the following discovery.
