Codrops

Fueling web creativity since 2009. 🔥
✽ Open source demos: Website inspiration:

[Codrops @codrops]

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: https://t.co/OYmsZ0qiCv

#webgl #react #nextjs

[Codrops @codrops]

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: https://t.co/zGcpnSDcfF

#webgl #portfolio

[Codrops @codrops]

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: https://t.co/y8P1PztTNa

#WebGPU #Shaders

[Codrops @codrops]

@noormtir 🫶

[Codrops @codrops]

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: https://t.co/S7Ks2pqCcc

#threejs #mediapipe

[Codrops @codrops]

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: https://t.co/sx92HyLqoL

#webassembly #threejs

[JesperLandberg @jesper_alpacka]

Bringing @paper shaders to the DOM.
Story on @codrops Monday.

[Codrops @codrops]

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: https://t.co/xEzooo8Pz7

#webgl #threejs

[Codrops @codrops]

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: https://t.co/GgKwxf3yua

#gsap #webl

[Codrops @codrops]

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: https://t.co/cTkImQuPsr

Get the code: https://t.co/XlsbK37NF1

#threejs #webgpu #tsl

[Codrops @codrops]

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: https://t.co/Z5trC6OIww

#webdesign #studiospotlight

[Codrops @codrops]

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: https://t.co/TgAuqhXjQ1

#gsap #threejs #typography

[Codrops @codrops]

We updated our On-Scroll 3D Carousel demo with some fixes and new effects.

Demo: https://t.co/AuBy5GJWrx
Article: https://t.co/rh2aAyju2L

#webgl #gsap #3d

[Codrops @codrops]

For Heron, an AI agent that works inside architects' design models, @bearplus_agency built a site that speaks in floor plans, redline markup and technical drawings instead of the usual look of AI products.

Read how they made it: https://t.co/1eX0pmhg7F

#gsap #webdesign

[Codrops @codrops]

Chasing the Moment is a short film that plays in the browser, and today Canberk Polat (@byHOLMstudio) shares the story behind it and how its scenes came together with Three.js, GLSL and GSAP.

Read the full story: https://t.co/IAefCat509

#threejs #gsap

[Codrops @codrops]

We updated our Motion Trail Animations demo with some fixes and new effects.

Demo: https://t.co/UhKOGPYa43
Article: https://t.co/c1mI1jbDlw

#webdev #gsap #webgl

[Codrops @codrops]

In today's tutorial, Kaisei Sadatoki walks us through building a minimal architecture studio landing page with Astro and GSAP, blending thoughtful layouts with scroll-driven pixel transitions and image reveals.

Read it here: https://t.co/v4hBeN2P4z

#gsap #astro

[Codrops @codrops]

What if a page transition wasn’t just a way to get from A to B, but a little choreography of its own?

@ismamz explores parallel page transitions with React Router and @greensock, bringing pages, UI elements, and a persistent 3D scene together in one seamless timeline.

Dive in: https://t.co/GPEEfhfsfP

#gsap #react

[Codrops @codrops]

@miguderp @astrodotbuild Thanks Miguel! It's public now 😊

[Codrops @codrops]

Interlude is a new starter that brings custom page transitions to @astrodotbuild, using the framework's own client router and GSAP for the animation.

It comes with 21 example transitions to choose from.

Check it out: https://t.co/wr4qjjg54Z

#astro #gsap #threejs