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.
