codrops
216 subscribers
60 photos
282 videos
1 file
429 links
Fueling web creativity since 2009
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
A little Sunday inspiration

Beautiful animations, clever interactions, and playful motion experiments... all in one fresh roundup from the creative community!

Come see what's been moving 👀
3
This media is not supported in your browser
VIEW IN TELEGRAM
Today we have a great deep dive by Arnaud Rocca on how he built his portfolio as a system with reusable GSAP motion, custom text transitions, and fluid WebGL interactions.

A beautiful look at what happens when motion becomes part of the interface itself.
This media is not supported in your browser
VIEW IN TELEGRAM
You can build visuals to turn heads. Or you can build them to explain complex ideas.

Damar Aji Pramudita does the latter beautifully in his latest tutorial, where he breaks down how he turned dithering into a visual experience with Three.js, instancing, and custom shaders.
Follow along, you will learn so much
Media is too big
VIEW IN TELEGRAM
Few developers bring the same level of care, taste, and technical skill to the web as Edoardo Lunardi.

We're stoked to have him share his journey with us today, along with reflections on the projects he's most proud of and the philosophy of craft, performance, and detail behind his work.
2
This media is not supported in your browser
VIEW IN TELEGRAM
Today, Nicolas Garnier shares a behind-the-scenes look at the stunning Maxima Therapy website, walking us through the creative and technical process behind a playful React + GSAP build with a bit of AI dabbling. Read it here
1
This media is not supported in your browser
VIEW IN TELEGRAM
Shaped by more than a year of iteration, R—K '26 brings together editorial layout, measured motion and WebGL atmosphere into an experience built around presence rather than excess.

Ravi Klaassens takes us through the making of it.
1
This media is not supported in your browser
VIEW IN TELEGRAM
In our latest tutorial, Iqbal Muthahhary walks us through building page transitions in Astro with Barba.js and GSAP, starting with a synced reveal and moving into more expressive effects with WebGL, SVG morphing, overlays, and animated pseudo-elements.

Follow along
This media is not supported in your browser
VIEW IN TELEGRAM
A single direct message changed everything.

In our latest spotlight, Chanh M. Ho reflects on the curiosity, persistence, and quiet leaps of faith that led to his first SOTD — and the creative journey that followed, from Vietnam to award-winning work on the web:. Read it here
1
This media is not supported in your browser
VIEW IN TELEGRAM
How do you turn a type specimen into an experience?

For Exat, Studio Size pushed the typography showcase beyond the static page, using scroll, motion, and interaction to reveal the logic, range, and character of Hot Type's most ambitious typeface yet. Read the case study here
Media is too big
VIEW IN TELEGRAM
What started as a self-taught journey grew into a studio known for craft, curiosity, and ambitious experimentation.

In our latest spotlight, Lusion shares how that journey became standout digital work for Porsche, Google, Coca-Cola, and more.
Media is too big
VIEW IN TELEGRAM
Most portfolios show the work.

This one starts with rain, memory, and a world inspired by films that defined a generation.

Today, Giulio Collesei shares the fascinating story of his portfolio shaped by cinematic scenes, cyberpunk atmosphere, and the idea that interaction should feel like storytelling, not decoration.
This media is not supported in your browser
VIEW IN TELEGRAM
He taught himself to build motion, then kept pushing until images began to move like choreography.

What Corentin Bernadou creates isn’t just animation but a new visual language for the web: editorial, refined, and distinctly his own.

Read his story
2
This media is not supported in your browser
VIEW IN TELEGRAM
Today, Bjørn Fjellstad shares the story behind Instorier, a tool built to make immersive storytelling on the web more approachable.

Learn how to use it to build a Moon journey shaped by scroll, timelines, layered scenes, 3D atmosphere, and interaction.
1
Media is too big
VIEW IN TELEGRAM
Today, Ming Jyun Hung breaks down False Earth, an incredible WebGPU-powered world where the heavy lifting happens on the GPU: procedural grass, VAT animation, compute shaders, indirect draw, LOD, and GPU-driven culling.

Go behind the scenes
3
This media is not supported in your browser
VIEW IN TELEGRAM
GSAP's easeReverse lets reversed animations use their own easing instead of simply playing the original curve backward.

In today's demo, we explore how it works in a playful clip-path menu interaction.
2
This media is not supported in your browser
VIEW IN TELEGRAM
Today, Tomoya Okada breaks down the making of 4WIDE, a website that pushes visual expression through distortion, blur, and motion.
Read about the technical decisions, creative risks, and performance trade-offs behind bringing the experience to life.
This media is not supported in your browser
VIEW IN TELEGRAM
Susurrus turns a Three.js scene into a living watercolor world using a Kuwahara shader, post-processing, and subtle interaction to shape mood in real time.

Xianyao Wei breaks down the process behind this meditative experiment.
This media is not supported in your browser
VIEW IN TELEGRAM
In our new spotlight, we step inside Rhumb Studio, the two-person practice of Jack Redley and Mael Ruffini, shaped by curiosity and a shared way of thinking about the web. Working between Bristol and Paris, they're crafting websites that feel less like pages and more like places, guided by curiosity, not trends. Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
What does it look like when a portfolio is shaped by both engineering and belief?

Joseph Santamaria breaks down the process behind an incredible 3D experience built with Three.js, GSAP, and a deeper sense of purpose.
This media is not supported in your browser
VIEW IN TELEGRAM
Have you tried Instorier yet?

It's a different way to build for the web: think scroll-driven timelines, layered scenes, and interactive 3D, all working together without wiring everything up from scratch.

Try it free

#promoted
1