We are kickstarting this week with a tutorial by MisterPrada on rendering a procedural vortex inside a glass sphere using Three.js and TSL.

From shader composition to particle systems, follow the step-by-step breakdown in this great guide. Read it here

Replicating the object-fit: cover behavior in WebGL can be tricky, but Nicolas Giannantonio breaks it down with optimized techniques using shaders for image scaling and positioning. 🖼️

Learn how to do it in our latest tutorial

In our latest case study, see how a simple rebrand ignited a full-scale evolution!

Fiddle.Digital redefined their identity, elevated their design, and pushed performance to new heights—bringing StringTune to life.

A journey of creativity, innovation, and pure web magic. ✨🔥 Read it here

In today’s tutorial, Matt Park explores the magic of light and refraction! ✨💎🪩

Using Three.js, React Three Fiber, and Drei, he breaks down how light bends, refraction works, and how to create a super slick 3D glass torus. Read it here

We're starting this week with a beautiful case study by Meguru Muramoto from Garden Eight, exploring how serendipity and precision come together in the design of Motoyoshi Takamitsu's portfolio—a thoughtful approach filled with innovation. Read it here

We've got an incredible tutorial for you today! 🔥

Samuel Jarry brings Amin Ankward's interactive concept to life, walking us through the step-by-step implementation using Three.js.

A must-read packed with valuable insights and hands-on learning!

Read it here

Today, we’re featuring StringTune—a modular JavaScript animation library born from real-world design agency needs.

Built by Fiddle.Digital Design Agency to solve performance and interaction challenges, it started as an internal tool and evolved into a powerful way to handle smooth scrolling, UI effects, and custom animations.

Big thanks to Dmytro Troshchylo and Vladislav Penev for pulling back the curtain on how it works and what’s possible with it!

Read more

Today, we’re shining the spotlight on web developer Jean Mazouni! 🌟

Jean shares his journey, favorite projects, his passion for WebGL/Three.js, and how he approaches building innovative web experiences. Read it here

🇻🇳🎨 An inspiring story of creativity, persistence, and self-discovery—our latest Designer Spotlight features Huy Phan, who shares his journey from coding in high school to designing award-winning digital experiences.

From personal milestones to standout projects, it's a reminder of what's possible when passion meets craft.

Read it here

Our latest collection of motion gems is here 💫

A vibrant mix of animation concepts—from elegant flows to bold pops of energy!

Give your eyes a treat and get inspired. Check it out

We're starting this week with a beginner-friendly tutorial by Paola Demichelis 🎨

Learn how to create 3D displacement effects with Three.js and shaders — bringing static letters to life with playful interaction.

Read it here

Today, we have a massive hands-on case study by Stas Bondar on his stunning portfolio!

Get an exclusive look at the techniques and code powering his site, from GSAP to Three.js, physics-based animations and so much more!

Don't miss this one—you're going to learn a lot! 🔥

Read it here

We’re featuring Jorge Toloza in today’s spotlight—a creative developer whose motion-focused tutorials and interactive work have inspired the Codrops community. ✨

Explore his story, favorite projects, and the ideas behind his beautifully crafted web experiences 🌄

Read it here

Alright, all you vibe coding aficionados, we’ve got a weekend project for you! 🧑‍💻

Our sponsor Outlier is running the Frontend UI Hackathon 2025 — build a slick mini-app using one of their prompts and you could snag a MacBook Pro M4, PS5, or Ray-Ban Meta Glasses.

🗓️ Submission deadline: March 30, 11:59PM PT

Submit your project via this form: https://tiny.outlier.ai/2p985vwk

Full rules, prompts & guidelines: https://tiny.outlier.ai/2p85xn6e

Troa's new portfolio isn't just beautifully designed — it's built for speed and clarity.

500KB, 12 requests, zero bloat 🤯

Discover how a focus on essentials led to a faster, lighter, more deliberate web experience in our latest case study!

Read it here

Today we have a brilliant new demo by Deadrabbbbit for you! 🌌

It's a super cool scanning light effect built with WebGPU, depth maps, and custom shaders using Three.js and R3F.

Check it out

From playful Dribbble concept to a fully interactive tribute to Warhol—Warhol Arts is more than eye candy 🎨✨

In this in-depth case study, Serhii Polyvanyi from blacklead.studio breaks down how it was built with GSAP + Webflow, sharing hands-on techniques, smart workflows, and performance tips.

Read it here

Today we spotlight designer Vítor Cardoso, a creative guided by intention and shaped by years of thoughtful practice. 🌟

From early drawings to award-winning digital experiences — including standout work during his time at Numbered Studio — his journey is a reminder that design is craft, curiosity, and care.

Read it here

We're kicking off the week with a great case study on Ciel Rose, a beautifully crafted website by Yanis Lebzar and Gabriel Foulon.

Take a look behind the scenes and explore the seriously smooth WebGL work and the challenges they overcame along the way.

Read it here

We're so excited to share one of our most honest, inspiring, and beautiful tutorials yet ✨

Andrew Woan takes us through the mindset, magic and creative chaos behind crafting a 3D world with Blender & Three.js.

It's a must-read for any creative soul 💫

Make sure to carve out some time for this incredible deep dive! Read it here

And check out the amazing Codrops Fan Museum he made!

We’re immensely grateful to Andrew for spending countless hours on this masterpiece and for pouring his heart into this amazing tutorial! Thank you so much! 🙏💙