codrops
@codrops.bsky.social
Fueling web creativity since 2009. Free #frontend tutorials, inspiration and creative demos. https://www.codrops.com
In today's tutorial, Sujen Phea shows how to build a GPU-enhanced procedural snake in Three.js, where organic motion emerges from steering behaviors, endless Bézier curves, and shader-driven rendering. 🐍
Follow along: tympanus.net/codrops/?p=1...
Follow along: tympanus.net/codrops/?p=1...
February 10, 2026 at 12:26 PM
In today's tutorial, Sujen Phea shows how to build a GPU-enhanced procedural snake in Three.js, where organic motion emerges from steering behaviors, endless Bézier curves, and shader-driven rendering. 🐍
Follow along: tympanus.net/codrops/?p=1...
Follow along: tympanus.net/codrops/?p=1...
What makes a digital experience feel truly human?
We're so stoked to spotlight Exo Ape today. A studio driven by narrative, motion, and the belief that the most powerful digital journeys are crafted slowly, with care, character, and a very human touch.
Dive in: tympanus.net/codrops/?p=1...
We're so stoked to spotlight Exo Ape today. A studio driven by narrative, motion, and the belief that the most powerful digital journeys are crafted slowly, with care, character, and a very human touch.
Dive in: tympanus.net/codrops/?p=1...
February 9, 2026 at 8:09 AM
What makes a digital experience feel truly human?
We're so stoked to spotlight Exo Ape today. A studio driven by narrative, motion, and the belief that the most powerful digital journeys are crafted slowly, with care, character, and a very human touch.
Dive in: tympanus.net/codrops/?p=1...
We're so stoked to spotlight Exo Ape today. A studio driven by narrative, motion, and the belief that the most powerful digital journeys are crafted slowly, with care, character, and a very human touch.
Dive in: tympanus.net/codrops/?p=1...
A little Sunday inspiration ✨
New Motion Highlights with UI animations and motion design to refresh your creative brain before the week begins: tympanus.net/codrops/2026...
New Motion Highlights with UI animations and motion design to refresh your creative brain before the week begins: tympanus.net/codrops/2026...
February 8, 2026 at 1:43 PM
A little Sunday inspiration ✨
New Motion Highlights with UI animations and motion design to refresh your creative brain before the week begins: tympanus.net/codrops/2026...
New Motion Highlights with UI animations and motion design to refresh your creative brain before the week begins: tympanus.net/codrops/2026...
In today’s spotlight, Vladyslav Penev shares how his work on StringTune, StringTune-3D, and real client projects shaped his approach to building production-ready motion and interaction systems.
Read the full spotlight: tympanus.net/codrops/2026...
Read the full spotlight: tympanus.net/codrops/2026...
February 4, 2026 at 2:46 PM
In today’s spotlight, Vladyslav Penev shares how his work on StringTune, StringTune-3D, and real client projects shaped his approach to building production-ready motion and interaction systems.
Read the full spotlight: tympanus.net/codrops/2026...
Read the full spotlight: tympanus.net/codrops/2026...
Learn how to build a multi-page WebGL image gallery with shader reveals, smooth scrolling & seamless transitions using GSAP, Three.js, Astro & Barba.js. By Chakib Mazouni.
Read it here: tympanus.net/codrops/?p=1...
Read it here: tympanus.net/codrops/?p=1...
February 2, 2026 at 1:20 PM
Learn how to build a multi-page WebGL image gallery with shader reveals, smooth scrolling & seamless transitions using GSAP, Three.js, Astro & Barba.js. By Chakib Mazouni.
Read it here: tympanus.net/codrops/?p=1...
Read it here: tympanus.net/codrops/?p=1...
We’re so excited to spotlight Daniele Buffa today!
From a childhood surrounded by art in Rome to crafting beautifully polished, motion-forward digital work in London, Daniele shares the experiences, influences, and mindset behind his approach to design: tympanus.net/codrops/2026...
From a childhood surrounded by art in Rome to crafting beautifully polished, motion-forward digital work in London, Daniele shares the experiences, influences, and mindset behind his approach to design: tympanus.net/codrops/2026...
January 30, 2026 at 8:52 AM
We’re so excited to spotlight Daniele Buffa today!
From a childhood surrounded by art in Rome to crafting beautifully polished, motion-forward digital work in London, Daniele shares the experiences, influences, and mindset behind his approach to design: tympanus.net/codrops/2026...
From a childhood surrounded by art in Rome to crafting beautifully polished, motion-forward digital work in London, Daniele shares the experiences, influences, and mindset behind his approach to design: tympanus.net/codrops/2026...
One year on, Hector Arellano's WebGPU fluid simulation article is still a gem: a 13-year journey through fluid simulations, WebGL hacks, and modern WebGPU breakthroughs.
If you missed it, it’s well worth the revisit: tympanus.net/codrops/2025...
If you missed it, it’s well worth the revisit: tympanus.net/codrops/2025...
January 30, 2026 at 1:54 AM
One year on, Hector Arellano's WebGPU fluid simulation article is still a gem: a 13-year journey through fluid simulations, WebGL hacks, and modern WebGPU breakthroughs.
If you missed it, it’s well worth the revisit: tympanus.net/codrops/2025...
If you missed it, it’s well worth the revisit: tympanus.net/codrops/2025...
Inspired by the Gommage effect from Clair Obscur: Expedition 33, today's tutorial by Thibault Introvigne breaks down how to create a cinematic dissolve in WebGPU and Three.js, using MSDF text, particle effects, TSL shaders, and selective bloom.
Read it here: tympanus.net/codrops/?p=1...
Read it here: tympanus.net/codrops/?p=1...
January 28, 2026 at 2:54 PM
Inspired by the Gommage effect from Clair Obscur: Expedition 33, today's tutorial by Thibault Introvigne breaks down how to create a cinematic dissolve in WebGPU and Three.js, using MSDF text, particle effects, TSL shaders, and selective bloom.
Read it here: tympanus.net/codrops/?p=1...
Read it here: tympanus.net/codrops/?p=1...
Discover the top 12 web design tools for 2026 – from AI-powered builders to creative resources for designers: tympanus.net/codrops/2026...
#promoted
#promoted
January 27, 2026 at 7:17 AM
Discover the top 12 web design tools for 2026 – from AI-powered builders to creative resources for designers: tympanus.net/codrops/2026...
#promoted
#promoted
Today we are highlighting Dylan Brouwer who spent years in design-led roles before taking the leap into full-time freelance, embracing motion and no-code to build expressive sites without waiting to become a "traditional" developer: tympanus.net/codrops/2026...
January 22, 2026 at 3:38 PM
Today we are highlighting Dylan Brouwer who spent years in design-led roles before taking the leap into full-time freelance, embracing motion and no-code to build expressive sites without waiting to become a "traditional" developer: tympanus.net/codrops/2026...
Today we have a tutorial by Iqbal Muthahhary on creating smooth CSS Grid layout transitions with the GSAP Flip plugin, showing how to resize and reorder items with minimal JavaScript while maintaining clean, continuous motion: tympanus.net/codrops/2026...
January 20, 2026 at 12:13 PM
Today we have a tutorial by Iqbal Muthahhary on creating smooth CSS Grid layout transitions with the GSAP Flip plugin, showing how to resize and reorder items with minimal JavaScript while maintaining clean, continuous motion: tympanus.net/codrops/2026...
Naked City Films needed a site that stayed in motion without losing control.
Today, Savoir Faire takes us behind the scenes of a process where restraint, rhythm, and custom systems shape an experience that behaves like film: tympanus.net/codrops/?p=1...
Today, Savoir Faire takes us behind the scenes of a process where restraint, rhythm, and custom systems shape an experience that behaves like film: tympanus.net/codrops/?p=1...
January 19, 2026 at 9:38 AM
Naked City Films needed a site that stayed in motion without losing control.
Today, Savoir Faire takes us behind the scenes of a process where restraint, rhythm, and custom systems shape an experience that behaves like film: tympanus.net/codrops/?p=1...
Today, Savoir Faire takes us behind the scenes of a process where restraint, rhythm, and custom systems shape an experience that behaves like film: tympanus.net/codrops/?p=1...
Today we’re highlighting art director Victorine Snijders as she shares her creative journey. ✨
From student projects to global brands like Nike, Google, and BMW, she uses design as a tool to solve real, human problems: tympanus.net/codrops/2026...
From student projects to global brands like Nike, Google, and BMW, she uses design as a tool to solve real, human problems: tympanus.net/codrops/2026...
January 16, 2026 at 1:33 PM
Today we’re highlighting art director Victorine Snijders as she shares her creative journey. ✨
From student projects to global brands like Nike, Google, and BMW, she uses design as a tool to solve real, human problems: tympanus.net/codrops/2026...
From student projects to global brands like Nike, Google, and BMW, she uses design as a tool to solve real, human problems: tympanus.net/codrops/2026...
Today we have Valentin Descombes walking us through the creation of a scroll-driven dual-column text animation.
Learn how opposing sine-wave motion, GSAP, and thoughtful performance choices come together to create a smooth, expressive scrolling experience: tympanus.net/codrops/?p=1...
Learn how opposing sine-wave motion, GSAP, and thoughtful performance choices come together to create a smooth, expressive scrolling experience: tympanus.net/codrops/?p=1...
January 15, 2026 at 1:34 PM
Today we have Valentin Descombes walking us through the creation of a scroll-driven dual-column text animation.
Learn how opposing sine-wave motion, GSAP, and thoughtful performance choices come together to create a smooth, expressive scrolling experience: tympanus.net/codrops/?p=1...
Learn how opposing sine-wave motion, GSAP, and thoughtful performance choices come together to create a smooth, expressive scrolling experience: tympanus.net/codrops/?p=1...
A site for sore eyes 👀
Toyfight break down how they showcased Flim with Webflow + GSAP, from clean page transitions and SplitText/ScrollTrigger text reveals to Lottie playback tricks, cursor-follow “eyes,” and Rapier-powered physics.
tympanus.net/codrops/2026...
Toyfight break down how they showcased Flim with Webflow + GSAP, from clean page transitions and SplitText/ScrollTrigger text reveals to Lottie playback tricks, cursor-follow “eyes,” and Rapier-powered physics.
tympanus.net/codrops/2026...
January 14, 2026 at 1:11 PM
A site for sore eyes 👀
Toyfight break down how they showcased Flim with Webflow + GSAP, from clean page transitions and SplitText/ScrollTrigger text reveals to Lottie playback tricks, cursor-follow “eyes,” and Rapier-powered physics.
tympanus.net/codrops/2026...
Toyfight break down how they showcased Flim with Webflow + GSAP, from clean page transitions and SplitText/ScrollTrigger text reveals to Lottie playback tricks, cursor-follow “eyes,” and Rapier-powered physics.
tympanus.net/codrops/2026...
Compare the 8 best WordPress themes for designers in 2026—fast builds, clean UI, dependable updates, and WooCommerce depth for reliable, high-performance sites: tympanus.net/codrops/2026...
#promoted
#promoted
January 13, 2026 at 11:13 AM
Compare the 8 best WordPress themes for designers in 2026—fast builds, clean UI, dependable updates, and WooCommerce depth for reliable, high-performance sites: tympanus.net/codrops/2026...
#promoted
#promoted
We're kicking off this week with a behind-the-scenes look at Obys’ Design Books and how the team transformed a simple reading list into a tactile web library with stacked-page navigation, paper textures, and smooth motion.
Read it here: tympanus.net/codrops/2026...
Read it here: tympanus.net/codrops/2026...
January 12, 2026 at 1:55 PM
We're kicking off this week with a behind-the-scenes look at Obys’ Design Books and how the team transformed a simple reading list into a tactile web library with stacked-page navigation, paper textures, and smooth motion.
Read it here: tympanus.net/codrops/2026...
Read it here: tympanus.net/codrops/2026...
The browser as cinema 🎬
The Spark is a story-first, scroll-driven web experience where motion, sound, UI, and performance work as one.
Learn how The Digital Panda engineered narrative, emotion, and technical restraint into a truly immersive piece: tympanus.net/codrops/?p=1...
The Spark is a story-first, scroll-driven web experience where motion, sound, UI, and performance work as one.
Learn how The Digital Panda engineered narrative, emotion, and technical restraint into a truly immersive piece: tympanus.net/codrops/?p=1...
January 9, 2026 at 10:41 AM
The browser as cinema 🎬
The Spark is a story-first, scroll-driven web experience where motion, sound, UI, and performance work as one.
Learn how The Digital Panda engineered narrative, emotion, and technical restraint into a truly immersive piece: tympanus.net/codrops/?p=1...
The Spark is a story-first, scroll-driven web experience where motion, sound, UI, and performance work as one.
Learn how The Digital Panda engineered narrative, emotion, and technical restraint into a truly immersive piece: tympanus.net/codrops/?p=1...
From "what’s a string?" to Awwwards Sites of the Day 🐐
Meet Nathan Dallaire, a Toronto-based creative frontend turning Next.js, GSAP & Sanity into beautifully obsessive, high-end web experiences.
Honest, funny, and wildly talented: tympanus.net/codrops/2026...
Meet Nathan Dallaire, a Toronto-based creative frontend turning Next.js, GSAP & Sanity into beautifully obsessive, high-end web experiences.
Honest, funny, and wildly talented: tympanus.net/codrops/2026...
January 8, 2026 at 11:53 AM
From "what’s a string?" to Awwwards Sites of the Day 🐐
Meet Nathan Dallaire, a Toronto-based creative frontend turning Next.js, GSAP & Sanity into beautifully obsessive, high-end web experiences.
Honest, funny, and wildly talented: tympanus.net/codrops/2026...
Meet Nathan Dallaire, a Toronto-based creative frontend turning Next.js, GSAP & Sanity into beautifully obsessive, high-end web experiences.
Honest, funny, and wildly talented: tympanus.net/codrops/2026...
Today we have a fantastic masterclass by Edoardo Lunardi on creating an infinite, interactive image space!
Learn how to create a pannable image canvas in R3F using chunk-based rendering and performance-first optimizations for buttery-smooth exploration: tympanus.net/codrops/2026...
Learn how to create a pannable image canvas in R3F using chunk-based rendering and performance-first optimizations for buttery-smooth exploration: tympanus.net/codrops/2026...
January 7, 2026 at 11:57 AM
Today we have a fantastic masterclass by Edoardo Lunardi on creating an infinite, interactive image space!
Learn how to create a pannable image canvas in R3F using chunk-based rendering and performance-first optimizations for buttery-smooth exploration: tympanus.net/codrops/2026...
Learn how to create a pannable image canvas in R3F using chunk-based rendering and performance-first optimizations for buttery-smooth exploration: tympanus.net/codrops/2026...
Discover the best 8 WordPress plugins for 2026 – animation, data UI, maps, grids, forms, builder & booking – to extend your site while keeping pages lean with smart setup: tympanus.net/codrops/2026...
#promoted
#promoted
January 6, 2026 at 12:01 PM
Discover the best 8 WordPress plugins for 2026 – animation, data UI, maps, grids, forms, builder & booking – to extend your site while keeping pages lean with smart setup: tympanus.net/codrops/2026...
#promoted
#promoted
Today we have a tutorial by Junichi Kasahara showing how to turn a video into 3D voxel cubes—then switch into physics so the cubes drop and scatter.
Learn how to create this satisfying drop: tympanus.net/codrops/2026...
Learn how to create this satisfying drop: tympanus.net/codrops/2026...
January 5, 2026 at 12:35 PM
Today we have a tutorial by Junichi Kasahara showing how to turn a video into 3D voxel cubes—then switch into physics so the cubes drop and scatter.
Learn how to create this satisfying drop: tympanus.net/codrops/2026...
Learn how to create this satisfying drop: tympanus.net/codrops/2026...
Pretty epic what Pablo Stanley pulled off with Efecto: a real time WebGL playground for dithering, ASCII, and CRT style effects, built with no prior shader experience.
In our first article of the year, he shares the full story: tympanus.net/codrops/?p=1...
In our first article of the year, he shares the full story: tympanus.net/codrops/?p=1...
January 4, 2026 at 2:35 PM
Pretty epic what Pablo Stanley pulled off with Efecto: a real time WebGL playground for dithering, ASCII, and CRT style effects, built with no prior shader experience.
In our first article of the year, he shares the full story: tympanus.net/codrops/?p=1...
In our first article of the year, he shares the full story: tympanus.net/codrops/?p=1...
What helps teams take creative risks, speak up, and learn faster?
Our latest article is a long read in Andrew Woan's signature style on psychological safety, self-awareness, and why they quietly shape the quality of creative work.
Set aside some time and read it here: tympanus.net/codrops/2025...
Our latest article is a long read in Andrew Woan's signature style on psychological safety, self-awareness, and why they quietly shape the quality of creative work.
Set aside some time and read it here: tympanus.net/codrops/2025...
December 30, 2025 at 1:35 PM
What helps teams take creative risks, speak up, and learn faster?
Our latest article is a long read in Andrew Woan's signature style on psychological safety, self-awareness, and why they quietly shape the quality of creative work.
Set aside some time and read it here: tympanus.net/codrops/2025...
Our latest article is a long read in Andrew Woan's signature style on psychological safety, self-awareness, and why they quietly shape the quality of creative work.
Set aside some time and read it here: tympanus.net/codrops/2025...
In our latest case study, Artemii Lebedev shares how "Frequency Breathwork" became a site that embodies breath with cyclical flow, subtle motion, and WebGL strings powered by Three.js + the Web Audio API.
Read it here: tympanus.net/codrops/2025...
Read it here: tympanus.net/codrops/2025...
December 29, 2025 at 2:12 PM
In our latest case study, Artemii Lebedev shares how "Frequency Breathwork" became a site that embodies breath with cyclical flow, subtle motion, and WebGL strings powered by Three.js + the Web Audio API.
Read it here: tympanus.net/codrops/2025...
Read it here: tympanus.net/codrops/2025...