Designed as a digital landscape to explore, San Rita’s portfolio combines 3D terrain, vintage map textures, and immersive motion with a strong sense of place.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

A case study on building San Rita's immersive portfolio website, combining a 3D topographic map of Canada and California with vintage map aesthetics. The technical stack includes Blender for 3D modeling, Adobe Substance 3D Painter for texturing, React Three Fiber with a persistent canvas, GSAP for motion and scroll coordination, Lenis for smooth scrolling, and Next.js 16 App Router with DatoCMS. Key engineering challenges covered include baking high-detail textures onto low-poly meshes, implementing nested infinite scroll using a fixed-position grid with a viewport hole, injecting GLSL into PBR materials via onBeforeCompile, and managing page transitions with Zustand and CSS clip-path masks.

Digital Craft, Wild Soul: Building San Rita’s Topographic Web Experience