Developer Spotlight: Robin Payot

Creative Developer Robin Payot shares his journey, standout projects, and insights into WebGL, animation, and building award-winning interactive web experiences.

Hey, I’m Robin, a Creative Developer since 2015, based in Paris and a former HETIC student.

I’ve worked at agencies like 84.Paris and Upperquad, and I’ve also freelanced with many others, picking up a few web awards along the way. I created Wind Waker.js and started a YouTube channel where I teach WebGL tutorials.

What really excites me about development is having an idea in mind and being able to see it come to life visually, tweaking it again and again until I find the right solution to achieve the result I want.

Projects I’m Proud Of

Wind Waker JS

When I was a kid, I was a huge fan of a GameCube video game called Zelda: The Wind Waker. It was a vibrant, colorful game where you sailed a boat to explore the world, with a really cool pirate vibe! I wanted to challenge myself, so I decided to try recreating it in Three.js to see how far I could go.

Luckily for me, a brilliant creative coder named Nathan Gordon had already written an article back in 2016 about recreating the game’s water. That gave me a solid foundation to start from.

After a lot of effort, I managed to create something I was really proud of, including six islands with LOD (Level of Detail) logic, dynamic day/night and weather cycles, fake physics with objects floating on water, a mini-game similar to Temple Run, and a treasure hunt where you search for the Triforce.

I faced many challenges along the way, and if you’re curious about how I tackled them, I made two videos explaining everything:

The project received a lot of positive feedback, and I’m truly grateful I got the chance to pay tribute to this incredible Nintendo game.

McDonald’s Switzerland – The Golden Slide Game

Last December, I had the opportunity to create a mobile video game for McDonald’s Switzerland with the Swipe Back team.

The 3D designer provided us with some really fun, toon-style assets, which made the game look both playful and professional—especially exciting for me, as it was my first time working on a real game project.

I worked alongside David Ronai, just the two of us as developers, and it was quite a challenge! The game featured weekly quests, unlockable cosmetics, real-world rewards for top players, and a full server-side backend (which David handled).

David also had this wild idea: to build the game using TSL, a new language in the Three.js ecosystem that automatically converts your JS shaders to WebGPU. I learned it during the project and used it to create the 3D game. At the time, documentation was sparse and the tech was very fresh, but it promised much better performance than WebGL. Despite the challenge, we made it work, and the result was amazing—WebGPU ran incredibly smoothly on Android.

With all the 3D assets we had, we needed to optimize carefully. One of the key techniques we used was Batched Mesh, combining all obstacles into a single mesh, which didn’t require TSL but helped a lot with performance.

The website is no longer available since it was part of a Christmas event, but I captured a video of the project that you can check out here.

Issey Miyake – Le sel d’Issey

Last year, I worked on a 3D project where users could create their own salt crystal using different ingredients, all as part of a campaign for a new Issey Miyake perfume. It was a really fun experience, and the main technical challenge was achieving a beautiful refraction shader effect.

I handled the front-end development alone and used React Three Fiber for the first time, a WebGL framework based on Three.js that lets you build 3D scenes using React-style components.

The library was super helpful for setting things up quickly. As I got deeper into the project, however, I ran into a few minor issues, but I managed to solve them with some custom code. I’d definitely recommend React Three Fiber if you already know a lot about WebGL/Three.js and enjoy working in the React ecosystem.

This project was awarded Site of the Day (SOTD) on FWA.

Portfolio 2021

I’ve included my portfolio as the final case study. Even though it’s an older project and not always up to date, it still means a lot to me.

I started working on it during a break right after the pandemic. I had a very vague idea at first, so I began designing and programming at the same time. It was a curious way of working because I was never quite sure how it would turn out. With lots of back and forth, trial and error, and restarts, I really enjoyed that creative, spontaneous process—and I’d definitely recommend it if you’re working on a personal project!

This project received a Site of the Day (SOTD) award on both Awwwards and FWA.

About me

I’m a Creative Web Developer with 10 years of experience, based in Paris.

I studied at a French school called HETIC, where I learned a wide range of web-related skills including design, project management, marketing, and programming. In 2015, I had the chance to do a six-month internship at UNIT9. This is where I discovered WebGL for the first time, and I immediately fell in love with it.

My very first project involved building a VR version of a horror movie on the web using Three.js, and I found it absolutely fascinating.

After that, I worked at several agencies: first at 84.Paris in France, then for a year and a half at Upperquad in San Francisco. At these agencies, I learned a lot from other developers about creative development, clean code architecture, and fine-tuning animations. I contributed to multiple award-winning websites (Awwwards, FWA), and in 2021, I finally decided to start freelancing.

I won my first award solo with my portfolio, and since then I’ve worked with clients around the world, occasionally winning more awards along the way.

Eventually, I decided it was my turn to share knowledge, so I created a YouTube channel where I teach how to build WebGL effects. I’ve also been part of the FWA jury since 2018, and I had the opportunity to publish Creating a Risograph Grain Light Effect in Three.js and Creating a Bulge Distortion Effect with WebGL on Codrops.

Philosophy & Workflow

As a front-end developer, I’ve always enjoyed pushing the limits of web animation. I love experimenting with different effects and sharing them with the team to inspire new ideas. I don’t have a specific workflow, because I work with many agencies all over the world and always have to adapt to new frameworks, workflows, and structures. So I wouldn’t recommend any specific workflow—just try different ones and pick the one that fits best for your project!

Current learning & challenges

Currently, I’m learning TSL, a Three.js-based approach that compiles your Three.js code to WebGPU (with a WebGL fallback) for even better performance! For my current and future challenges, I would love to create a 3D web development course!

Final Thoughts

Thank you Codrops for inviting me, I’ve always been a fan of the amazing web animation tutorials.

If you have a project in mind, don’t give up on it! Try to find some free time to at least give it a shot. Stay creative!

Robin Payot

I'm Robin Payot, a french freelance Creative Developer in Paris. I'm a WebGL fan and I worked in different agencies as a front-end developer: UNIT9 (UK), 84.Paris (FR), Upperquad (USA) before focusing on personal projects and freelancing. I graduated at HETIC (FR) in 2016 and did my first 3D WebGL project in 2015.

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.