codrops
216 subscribers
60 photos
278 videos
1 file
425 links
Fueling web creativity since 2009
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Curious about how Stefan Vitasović brought his amazing 2025 portfolio to life? 🔮💻

From minimalist design to dynamic shader effects, this case study takes you behind the scenes of a truly unique creative dev journey.

Read it here
🆒1
🌟 In this Designer Spotlight, we're shining the light on Artem Shcherban, a visionary digital designer with a sharp eye for usability, aesthetics, and structure.

From systematization to bold visual experiments, Artem shares his journey, philosophy, and creative process. Read it
This media is not supported in your browser
VIEW IN TELEGRAM
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
2
This media is not supported in your browser
VIEW IN TELEGRAM
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
3👍1
This media is not supported in your browser
VIEW IN TELEGRAM
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
2
This media is not supported in your browser
VIEW IN TELEGRAM
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
🆒2
This media is not supported in your browser
VIEW IN TELEGRAM
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
❤‍🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
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
❤‍🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
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
3
Media is too big
VIEW IN TELEGRAM
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
2
This media is not supported in your browser
VIEW IN TELEGRAM
🇻🇳🎨 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
3
This media is not supported in your browser
VIEW IN TELEGRAM
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
4🆒2
This media is not supported in your browser
VIEW IN TELEGRAM
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
4
This media is not supported in your browser
VIEW IN TELEGRAM
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
5🆒1
This media is not supported in your browser
VIEW IN TELEGRAM
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
👍21
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
This media is not supported in your browser
VIEW IN TELEGRAM
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
🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
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
🔥21🦄1
This media is not supported in your browser
VIEW IN TELEGRAM
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
👍2
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
1