codrops
172 subscribers
33 photos
99 videos
217 links
Fueling web creativity since 2009
Download Telegram
🚀 Big news! The new Collective is here! 🎨💻

We’re excited to bring back the Collective as a daily hub for curated frontend & design links, complete with a visual grid layout that many of you told us you missed!

Check it out
This media is not supported in your browser
VIEW IN TELEGRAM
Today we have a great case study for you!

See how The Blackpepper Studio brought photographer Dondre Green's vision to life through cinematic transitions, WebGL effects & thoughtful interaction design.

A masterclass in digital storytelling by Asmah Mansur-Williams, Nkenna Amadi, Victor Adebisi & Josiah Etuk

Read it here
Today we're welcoming toddle's co-founder Andreas Møller to share his vision for visual web development

Imagine building full web apps with a Figma-like interface, without sacrificing developer control!

Read his article
This media is not supported in your browser
VIEW IN TELEGRAM
🌟 Inspiration coming your way!

We’ve reimagined our motion design roundups with "Motion Highlights" – a broader, more inspiring collection of animation concepts and ideas.

We really hope you enjoy it! 💙

Explore and get inspired
This media is not supported in your browser
VIEW IN TELEGRAM
It's time for devs to shine!

Today, we’re so excited to launch the Developer Spotlight series, celebrating creative web developers! 🎉

We’re starting with the amazing Lorenzo Dossi, a motion designer and front-end developer who shares his creative journey, techniques, and inspiring projects with us. 🌟

Check it out
This media is not supported in your browser
VIEW IN TELEGRAM
Generative art meets Three.js 🖼️

Eduard Fossas shows how to recreate Lygia Clark's geometric minimalism using grid systems and generative techniques.

A must-read for creative coders! Check it out
This media is not supported in your browser
VIEW IN TELEGRAM
🌦️ Hey friends, we’ve got something special to share today: the story of Gentle Rain.

This project by the amazing Zajno crew offers a fresh perspective on learning: creative, warm, and daring. Using Webflow and Unicorn.studio alongside WebGL and AI, it redefines how design meets education.

We hope it inspires you as much as it did us! Read it here
🌟 Today, we’re shining the spotlight on Francesco Michelini!

As a creative developer with a passion for WebGL, interactive experiences, and 3D modeling, Francesco shares his journey from game development to building award-winning websites. Discover his favorite tools, standout projects, and insights into his creative process.

Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
Think WebGL is too complicated? 🤯

We invited @amagitakayosi to share how his VFX-JS library makes stunning visual effects effortless—custom shaders, dynamic interactions, and more!

Read his article
Media is too big
VIEW IN TELEGRAM
Today, Merouane Bali takes us behind the scenes of creating an immersive 3D portfolio! 🎨

Discover how he balances creativity and usability, tackles performance challenges, and designs interactive experiences with WebGL and React! Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
Learn how to create dynamic image transitions with WebGL shaders in our latest tutorial by Arlind Aliu! 💡

Explore circle SDFs, noise patterns, smooth merging, and texture integration—explained step by step.

Read it here
Ever thought about automating website performance monitoring? 🕵️‍♂️

This tutorial shows you how to build a Web Performance Watchdog Agent to detect anomalies and send actionable email reports.

Learn how to set it up step by step. Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
In today’s Developer Spotlight, we shine the light on Mario Sanchez Maselli, co-founder of Non-Linear Studio. 🙌

From WebGL to interactive design, Mario exemplifies excellence and inspires with his ability to transform technology into extraordinary digital experiences.

Explore his amazing journey
This media is not supported in your browser
VIEW IN TELEGRAM
We invited Dan Greenheck to share the incredible technical details behind EZ-Tree, his open-source procedural 3D tree generator! 🌳

From fractals and recursion to Three.js magic, he explains it all! Read the article
This media is not supported in your browser
VIEW IN TELEGRAM
🌊 13 years ago, Hector Arellano accepted a challenge from Felix Martinez to make fluid simulations in the browser.

After years of experimentation, he's finally made it happen with WebGPU. This is his journey through persistence, creativity, and groundbreaking graphics.

We’re honored to have Hector share this incredible story and demo with us! Don’t miss it! Read the article
This media is not supported in your browser
VIEW IN TELEGRAM
Today, we have a new case study on Codrops! 🎨

Gianluca Gradogna shares the process behind his Portfolio ‘25—a thoughtful blend of design & photography. In collaboration with Gabriel Norman, this project brings interactions & storytelling into focus.

Check it out
We’ve invited Ibelick to highlight Nim, a free, open-source personal website template he built with Next.js 15, React 19, Tailwind CSS v4, and Motion-Primitives, featuring subtle, pre-built animations. Check it out
This media is not supported in your browser
VIEW IN TELEGRAM
Today we have an exciting tutorial by David Faure for you!

Learn how to create a dynamic on-scroll 3D circle text animation with Three.js 🎨

Check it out
This media is not supported in your browser
VIEW IN TELEGRAM
🌿The Ebenezer spent 200+ hours crafting the fluffiest grass for his project Elysium—and now he's sharing all the techniques!

Learn how to optimize grass rendering in Three.js for realistic, high-performance results. Read the tutorial
This media is not supported in your browser
VIEW IN TELEGRAM
Today, we have a free Astro template for you! 🚀🎶

Players Club is a minimal, experimental template for showcasing music artists—built as a proof of concept while exploring Astro's capabilities, in design collab with Alex Tkachev 🙌

Read more & download