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
We took Claude for a ride to revamp our 2016 Cinema Seat Preview in Three.js.
Pick a seat, fly there and watch Charge by Blender Studio in a room lit by the film, with 4D effects.
Try it here: tympanus.net/Demos/CinemaSea…
Get the code: github.com/codrops/CinemaSea…
#threejs #webgpu #tsl
From Tokyo, @mount_inc gives us a peek inside their design practice, where research and interviews come first and every motion on a website has a reason behind it.
Read their story: tympanus.net/codrops/2026/10…
#webdesign #studiospotlight
In today's fantastic tutorial, Robert Aperios walks us through building rippling letters that leave outlined ghost trails as you scroll, using @greensock, Canvas 2D and Three.js.
Follow along: tympanus.net/codrops/?p=1237…
#gsap #threejs #typography
We updated our On-Scroll 3D Carousel demo with some fixes and new effects.
Demo: tympanus.net/Development/3DC…
Article: tympanus.net/codrops/?p=9333…
#webgl #gsap #3d

