Codrops

Golden at sunset, olive at night. ✨ A beautiful blend of editorial design, thoughtful interactions, and immersive motion. Explore how Brandon Yasin and @aaslangm brought this stunning portfolio to life, with @greensock powering the transitions, animations, and details that make it shine. Dive into the full breakdown: tympanus.net/codrops/2026/11… #gsap #motiondesign #portfolio

Who said shaders belong to developers? Designers get to have fun with them too. @stefbrucedesign used shaders in @paper to lift her Mineral Collection posters, and every stone now looks fresh out of a museum drawer. Take a peek into her process: tympanus.net/codrops/?p=1249… #design #shaders #GraphicDesign

Today we have a new demo for you: Text Character Animations with GSAP. Nineteen character by character text animations, four of them in WebGL, made with @greensock SplitText. Demo: tympanus.net/Demos/TextChara… Code: github.com/codrops/TextChara… #webdev #gsap #typography

Coming home to Paris tired of design, one of the founders of @HerveStudio decided he would become a florist. The flower shop never opened. A few projects with an old friend turned into a studio instead, and we love how much fun @rbriaux and @FYI_Im_Vince have telling the story. Pull up a chair: tympanus.net/codrops/?p=1251… #branding #webdesign

What happens to a designer's taste when AI agents start doing the drawing? Jakub Otcenas, co-founder and executive creative director at Diorama, teaches it to them through comments right on the @paper canvas, then picks, combines and refines what comes back. Agents can draft. Taste is still the designer's job. We love how openly he walks us through it all, prompts included: tympanus.net/codrops/?p=1244… #designsystems #ai

We updated our Scroll-Based Layout Animations demo with some fixes and new effects. Demo: tympanus.net/Development/Scr… Article: tympanus.net/codrops/?p=7294… #webdev #gsap #scrollanimation

Lookbook Hover Effects: eight hover effects for a fashion lookbook grid, where a card takes over each photo by melting, peeling, flooding in as liquid glass or flickering like a channel change. Demo: tympanus.net/Demos/LookbookH… Code: github.com/codrops/LookbookH… #webgl #gsap #creativecoding

What will we play in the age of AI? Chrona is betting on worlds you can step into, play in together and keep coming back to. At SF Tech Week, @chronaworld and @MeshyAI brought together creators who build those worlds with AI, for an afternoon of playable showcases, talks and conversations. Step inside: tympanus.net/codrops/?p=1246… Thank you to Chrona for sponsoring this story. #threejs #ai

What if the line between two sections wasn't just a line? Our latest experiment explores eleven scroll-driven ways to animate that edge, using GSAP, WebGL and canvas. Check them out: tympanus.net/Demos/SeamTrans… #gsap #webgl

In an era of instant AI images, what can we learn from a designer who made 50 posters in 21 days? Kuvvat Ashyrov from Moonsight, took on the challenge to break out of a creative block. No brief, no fixed style. Just three weeks of experimenting, chasing ideas, and learning by doing. Because generating is easy. The real work is finding an idea worth bringing to life. Explore the process: tympanus.net/codrops/2026/10… #graphicdesign #design #creativity

Our community can't get enough of @paper right now: devs are designing with their agents, and designers are shipping apps! We've fallen for it too, and it's become the tool we design with at Codrops 💙 So we gathered our favorite tutorials, tips and tools into one guide. Start here: tympanus.net/codrops/?p=1227… #ai #mcp #design

Play Zelda's Lullaby on your keyboard and this browser ocarina recognizes it, plays the little jingle and replays the song back to you. @thibautlfr built most of it with @threejs in three days, right after the Ocarina of Time remake trailer, and shares how it works. Read the full story: tympanus.net/codrops/?p=1247… #threejs #gamedev (sound on ⬇️🎶)

A hand-cranked toy projector taught @carmenansio something worth carrying into interface design: the fun begins when you touch things and see what happens. That instinct runs through her work, from the systems behind Stripe’s dashboard to tiny, gloriously unnecessary motion experiments. Not everything needs a reason to move. Sometimes the movement is the point. Get to know Carmen and her work: tympanus.net/codrops/?p=1246… #css #motiondesign

For years, Juan Mora Romero's portfolio was one sentence and a list of projects. Then creative web design became his job, and the site turned into a world of its own: a Lab you can drag forever, a color split that follows your cursor and posters of his life that ripple like cloth in the wind. Today he shares how it all came together: tympanus.net/codrops/?p=1241… #webgl #threejs

We updated our On-Scroll Column & Row Animations demo with some fixes and new effects. Demo: tympanus.net/Development/OnS… Article: tympanus.net/codrops/?p=7318… #webdev #gsap #webgl

In today's tutorial, Jérémie Nallet walks us through building two pages with Atelier UI, his React library for mixing WebGL and the DOM, with scroll-synced WebGL text and images, a fluid distortion effect and a pixel page transition. Follow along: tympanus.net/codrops/?p=1242… #webgl #react #nextjs

In today's article Maria Vasilyeva and @sryaaditya_ share how they turned her love of music into layouts, motion and sound. Like many designers, Maria found her own portfolio the hardest thing to design. She found her way in through music, the playlists she makes for every project, and started treating each project as a note in a larger melody. Read the full story: tympanus.net/codrops/?p=1243… #webgl #portfolio

What if a shader could bend an entire web page? 👀 We're SO stoked to share this wonderful experiment by @jesper_alpacka, someone we admire for many years! Using @paper as his starting point, Jesper brought its shaders to WebGPU and made the whole page crease beneath your cursor. This is the kind of web magic we live for. And we couldn't be more excited to share it with you! Read the full story: tympanus.net/codrops/?p=1241… #WebGPU #Shaders

Hold a real lighter up to your webcam and the sheet on your screen catches fire 🔥 @noormtir shares how an open-source React library folds sheets without stretching them and burns them with a real fluid simulation. Read the full story: tympanus.net/codrops/2026/10… #threejs #mediapipe

In today's tutorial, Garrick Dee walks us through building a browser-based image compression previewer with libvips-wasm, comparing the original and compressed image in a split view while everything stays on your machine. Read it here: tympanus.net/codrops/2026/10… #webassembly #threejs