Developer Spotlight: Mario Sanchez Maselli

Hi everyone, I feel super happy to be here. It’s been about ten years since I started reading this magazine. And I’m truly honoured to share my experiences with you.

My name is Mario, a Guatemalan developer based in Tallinn, Estonia. I specialize in creating bespoke digital experiences, and over the past decade, I’ve had the privilege of developing websites recognized by Awwwards, FWA, the Latin American Design Awards, the European Design Awards, and more. Currently, I’m the Co-Founder of Non-Linear Studio, which I run alongside Quintin Lodge.

Together, we run an independent studio dedicated to crafting digital experiences that connect brand, design, and technology. For the past three years, we’ve worked together to build a studio where each client’s unique needs guide our approach. Naturally, the experiences we create are just as unique as the clients we serve.

Selected Projects

Here’s a selection of projects I’m excited to share some are brand new, others are older favorites, and one has been revamped and is set to launch very soon. Plus, I couldn’t resist including a little shameless self-promotion 🙈: our own Studio portfolio! We finally launched it last year, and I’m proud to have it as part of this showcase.

Elva Design Group

Let’s start with an old project: Elva, completed in 2022. Elva is a Design Group that specializes in creating branded e-commerce experiences, focusing on digital strategy, UX, UI, and motion. They approached us in 2022 with a simple yet exciting pitch: “Please create a cool website, as if it were for your own studio.”

At the time, we didn’t even have our own website, so we poured a lot of effort and passion into this project and we absolutely loved the outcome. It’s not every day a client gives you so much creative freedom and says, “Do whatever you think is cool,” so we seized the opportunity and made it something special.

Back in 2022, our development stack consisted of Sanity for the backend and 11ty for the frontend. For transitions, we used Dog Studio’s Highway, while OGL powered the WebGL features. For general animations, we relied on GSAP. All of this was seamlessly deployed on Netlify.

Interestingly, we still use a very similar approach today—but more on that later.

Until very recently, I was the sole developer at the studio, which meant there weren’t many code reviews or any kind of “strict” structure. This freedom allowed me to develop my own unique way of working and structuring projects.

Even now, I’m not 100% sure what the “right” way of doing things is, but I’ve learned that consistency, organization, and strong communication with your designer can work wonders for your development career.

Integrated Reasoning

The second project is Integrated Reasoning, a YCombinator startup that’s redefining the landscape of combinatorial optimization (and don’t worry if you’re not familiar with that term).

In practical terms, instead of adopting a quantum computing approach to solve complex mathematical problems, Integrated Reasoning is taking a groundbreaking classical computing approach. They’re developing custom hardware and software to tackle these challenges. 🤯🤯🤯

How does one illustrate the complexities of the problems Integrated Reasoning is tackling? Our approach was to use geometric line art combined with timeless, elegant typography to create an experience that sparks curiosity and reflects the mathematical roots of the NP-Complete problems they aim to solve.

The illustrations and some of the animations were crafted by the talented Rocco Dipoppa, and we brought them to life on the web using Lottie to convert them into smooth, interactive animations.

This project was done in early 2024, and it prompted some small but meaningful adjustments to our tech stack. As I mentioned earlier, our stack remains largely the same, but with a few updates. Instead of using Highway for page transitions, we opted for Taxi.js from Unseen Studio.

We also transitioned from OGL to Three.js for WebGL. My friend Robert Borghesi encouraged me to focus on Three.js, and since the beginning of last year, I’ve been working to refine my skills in it though keeping up with Robert is definitely a challenge!

This has been one of my favorite projects so far it had a little bit of everything: WebGL, Lottie, scroll animations (thank you, ScrollTrigger and GSAP ❤️).

I’m not sure if this happens to everyone reading this, but when you’re working on a project you truly enjoy, it’s easy to lose yourself in the process time just flies when you’re deep into the code!

Atria

Atria has been a valued client, entrusting us with various projects over the years. They are driving a movement for proactive, preventive healthcare, powered by cutting-edge science and technology.

One of the projects they commissioned was their website in 2023. We launched it successfully, and they loved the result. However, as their business model evolved and matured, the need for a new site arose. This updated version is set to launch very soon, and we’re looking forward to seeing it go live! (And you’ll be able to check out some of the animations and a preview of the site. 👀)

On the first version of the Atria website, we used the same stack as Elva it was our “default” stack back in 2022/2023. For the new Atria site, however, we’ve introduced our latest stack upgrade. The most significant change is the adoption of Astro. Our base template is now powered by Astro, and we’re really excited about this shift.

Why the move to Astro? Well, React seems to dominate the space with frameworks like Next.js, but I strongly believe that React isn’t always necessary for the type of websites we build. (I hope this doesn’t upset anyone please keep reading! 😅) To explain my thoughts better, here’s a video that perfectly reflects my perspective.

As I was saying, while React might not be essential, we sometimes need a touch of dynamic functionality. That’s where Astro shines: it focuses on building static websites but allows for just the right amount of interactivity a sprinkle of extra magic to make it all come together.

The new site was built entirely from scratch, both on the frontend and backend. We’re still using Sanity for the backend (in case you’re wondering, you can check out our “default” Sanity setup here).

This revamp has shifted away from some of the “fun” elements of the previous version, reflecting a more mature and serious tone to align with its focus on the healthcare sector. We also made updates to the scrolling experience. While we typically use our own Smooth Scroll on most of our projects, for this site we opted for Lenis, as it’s more accessibility-friendly a crucial consideration for healthcare-related platforms.

Non-Linear Studio

Lastly, let’s talk about our own website and portfolio. As I mentioned earlier, I’m the Co-founder of Non-Linear Studio, a small independent studio (currently we are 3 💪) dedicated to crafting digital experiences.

Creating your own site is always a challenge. Time constraints, differing opinions, varying tastes among the team, and that nagging question, is this enough? all make the process more complex than it seems.

This project actually started quite some time ago and took a long time to be production-ready. Along the way, I ended up building two different homepages, and we even revamped our brand colors.

Given the extended timeline and evolving requirements, the tech stack for this project became a bit of a mixture, reflecting the different stages it went through over time 😅.

The backend for this project is consistent with our usual choice: Sanity. For the frontend, we used 11ty, and Three.js powered the WebGL animations. For page transitions, we relied on Taxi.js, while GSAP is a constant across all our projects for handling animations. For this site, we also used our own SmoothScroll, which dynamically transforms page sections as they come into view.

One of the most interesting parts of this project was the pixelated effect. Since it’s our own portfolio, we had the freedom to experiment more than usual and explore different approaches to creating pixelated visuals. We ultimately found a great solution using a displacement map. The displacement map is a texture made from randomized rectangles, which we import and then distort using noise and random positioning.

The ultimate goal of our site is to showcase the work we do and, hopefully, connect with companies looking to create something unique and innovative in the digital space. We aim to inspire them to reach out and collaborate with us.

Well, that’s it! Those are all the projects I had in mind to share I hope you enjoyed them! If you have any questions or want to know more, please don’t hesitate to reach out. You can find me on social media I’d love to connect!

Background

I started my career a little over 13 years ago in Valencia, Spain, at a small branding studio, where I primarily worked with WordPress. After a couple of years, I moved to Tallinn, Estonia, to work in larger marketing agencies. During this time, I changed jobs a few times, mostly to secure better opportunities and a higher salary.

About five years into my career, I began taking on freelance work alongside my regular job. I quickly realized that I enjoyed my freelance projects more than my full-time role. This led me to start planning a transition to full-time freelancing, though the idea felt a bit scary.

Just as I was about to take the leap, I received an exciting offer to join Bond, a Finnish studio whose work I admire. I decided to postpone my plans for freelancing and took the opportunity. My time at Bond was rewarding, I learned so much about design and typography, and I truly enjoyed the experience.

However, after a year there, the idea of freelancing started to resurface in my mind. Finally, in 2019, after a year and a half at Bond, I decided to fully commit to freelancing.

About a year into freelancing, I met Quintin Lodge, my current partner at Non-Linear Studio. Quintin had already founded the studio and invited me to collaborate with him on a few projects. After working together and without ever meeting in person he asked me to join him in running the studio as partners (yep, he’s that awesome!).

And that’s how my journey into Non-Linear Studio started.

Final Words

Frontend development has changed quite a lot over the past 10 years. These days, there’s far more information available about creative development and how to achieve great animations. But I still believe that mastering the core foundations is key.

If I were to give you any advice, it would be this: focus on mastering layouts and grid systems, prioritize learning Vanilla JS over frameworks, and if you’re into animations, understand what lerp is and experiment with creating your own custom easing functions.

Most importantly, don’t be afraid to break things! Have fun, try out different UIs even if they’re not “user-friendly.” Testing, experimenting, and making mistakes is the best way to learn and grow.

That’s all, folks! Have a great day!