Codrops

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

Today we're celebrating @uuuuuulala! 💙 Her playful demos made CodePen's Most Hearted lists two years in a row, and the liquid metal effect she helped build at @paper ended up on logos everywhere. Now she tells us how it all started, with a bored train ride and a round of Chrome Dino: tympanus.net/codrops/?p=1241… #webgl #threejs

Leave the Noho site alone for a minute and a chair starts bouncing around your screen like an old DVD screensaver. Powered by @greensock, the site moves like the chairs it sells and knows when to rest. Eugene Morev and Alex Ivanov share how they built it. Read the full story: tympanus.net/codrops/?p=1238… #gsap #webl