codrops
236 subscribers
62 photos
341 videos
1 file
496 links
Fueling web creativity since 2009
Download Telegram
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
This media is not supported in your browser
VIEW IN TELEGRAM
She wanted to be a painter.

Today, she designs immersive digital worlds.

In today's spotlight, Sofia Papadopoulou shares her journey from canvas to code, along with insights and selected works.
3
This media is not supported in your browser
VIEW IN TELEGRAM
What does it really take to design a portfolio that stands out and feels true to your work?

In our latest article, Artem Shcherban shares his two year journey of creating a layered, interaction driven portfolio that moves beyond the traditional gallery.
2
Media is too big
VIEW IN TELEGRAM
Today, Lyon-based Akaru share how they craft digital platforms where design and performance are inseparable. Deliberate work, beautiful results.

Read their studio spotlight
1
This media is not supported in your browser
VIEW IN TELEGRAM
Reverse-engineering animations is one of the best ways to level up your skills.

Today we got Ayotomiwa Wale-Durojaye break down his process of rebuilding Claude AI's mascot animations from scratch, frame by frame, purely in code using SVG and GSAP.

Learn along
2
This media is not supported in your browser
VIEW IN TELEGRAM
Today, Thibault Guignand explores the making of his portfolio redesign, where WebGL shaders, scroll interactions, and UI transitions all sync through a single motion system powered by GSAP.

From flowmaps to text reveals, every effect is driven by code-first design decisions.
1
This media is not supported in your browser
VIEW IN TELEGRAM
Some studios build websites. Others build a feeling.

Le:mma Studio crafts immersive digital experiences shaped by atmosphere, motion, and storytelling.

In our latest spotlight, founder Artemii Lebedev shares a closer look into the studio's world.
1
This media is not supported in your browser
VIEW IN TELEGRAM
Today we’re stoked to have Vittorio Retrivi from basement.studio share an incredible exploration of the emerging HTML in Canvas proposal.

From shader powered UI effects to interactive 3D interfaces, this article is packed with inspiring experiments for the future of creative web development. Read it here
🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
From rethinking their identity to building a motion driven system where type, structure, and interaction work as one, Obys shares the story behind their new website and visual language.

A thoughtful case study on clarity, restraint, and designing systems that evolve over time. Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
From Eurovision Village to Dior and award-winning interactive experiences, Merlin crafts digital work where motion, technology and design move as one.

Explore the story behind the Amsterdam-based Code Boutique in our latest Studio Spotlight.
2
This media is not supported in your browser
VIEW IN TELEGRAM
Beige computers, glossy office ads, golden ties, and the remains of an ironic business rebrand.

Simon Hedlund and Filip Kantedal take us inside the making of Shader Development Studio's website, a scroll-driven 3D experience shaped by corporate satire, 80s business tech, and seamless scene transitions.
🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
To celebrate the launch of 50 new effects, Made With Gsap is breaking down a satisfyingly playful gravity-based mouse trail effect for us today!

Download the effect for free & don’t miss the discount at the end of the article. Read it here
1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Follow a route, animate the journey, and turn scrolling into a cinematic experience.

Tom Miller shows how to create lightweight scroll-driven SVG map animations with GSAP, without relying on a map API.
3
This media is not supported in your browser
VIEW IN TELEGRAM
Learn how to build a scroll-driven 3D cube gallery in Webflow with GSAP.

This in-depth step-by-step tutorial by Francesco Castronuovo shows how to combine CMS-powered content, fullscreen image transitions, Split Text animations, and 3D transforms into one seamless scrolling experience.

Follow the full build and get the clonable.
This media is not supported in your browser
VIEW IN TELEGRAM
For Adrien Vanderpotte, the best interfaces aren’t simply designed — they emerge through experimentation, iteration, timing, and feel.

In our latest Developer Spotlight he reflects on motion, shaders, and crafting digital experiences that stay with people.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Today we have Joe Ben Taylor sharing a great tutorial on building a seamless infinite scroll experience with GSAP and Lenis.

Infinite looping, parallax depth, snap scrolling, and smooth motion, all broken down in a clean and approachable way.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
We taught technology how to inform, entertain, and persuade. But can it help people heal?

Andrew Woan explores a simple but intriguing idea: what if websites could serve as places of care, reflection, and emotional growth rather than tools for attention and engagement?

An interesting perspective on where technology, design, and mental well-being may intersect in the years ahead.
2