Codrops

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

[Codrops @codrops]

For more than 15 years, Codrops has been a place for sharing experimental demos that push the boundaries of web design and development. Over time, we've also highlighted many creative demos from the community in our demo roundups and newsletter.

For this reason we have evolved our Demos Hub into the new Creative Hub, which brings everything together in one place: a growing collection of hand-picked, open-source demos from Codrops and beyond.

It's a space to discover, learn from, and celebrate the creativity of the web community.

We're curating this collection carefully, but we also welcome submissions from creators who'd like to share their work.

Come and explore the new Creative Hub: https://t.co/ZkAjXh6ybv

[Three.js Conf Paris @threejsconf]

It was not easy to find the perfect place for this conference, we wanted something iconic and special for our Three.js community! ❤️‍🔥

Discover Maison de la Chimie, an historical Parisian hub of innovation with spacious lounge, private garden, and amphitheater.

For the occasion, the team re-dress the entire venue to create a dedicated space to quality time, exchange & fun around Three.js!

1/3

[Codrops @codrops]

Make sure to follow Dominik for more amazing work: @_fojcik 🌟

[Codrops @codrops]

🗼 Paris is calling, and our little Three.js Conference party rolls on!

This time, Dominik Fojcik has a neat trick up his sleeve: what if your images could actually feel the light?

He explores depth maps, TSL, and WebGPU to make flat images respond like 3D surfaces, complete with lighting, detail, and shadows.

Read the tutorial: https://t.co/4pVxlUUuG1

[Codrops @codrops]

Audio-reactive motion is easy. Making it feel intentional is the hard part.

For Run Rob Run, Robert Aperios built a system that decides which sounds should move the form, how strongly they should hit, and how the object settles back.

Today, he gives us a closer look at the thinking behind the motion—from custom deformation and damping to scroll morphing and WebGPU: https://t.co/TIYfrjP1GQ

[Three.js Conf Paris @threejsconf]

You spent weeks perfecting your portfolio... now let us roast it 🔥

Join our live Roast My Folio session featuring:
✦ @bruno_simon
✦ @cassiecodes
✦ mystery guest! 👀

👉 Open to all @threejsconf participants
👉 Submit your link to [email protected] 📩
👉 Special gifts to all participants 🎁

[Codrops @codrops]

A @webflow CMS collage with a slot-machine counter, looping member swaps, and a 3D GSAP animation? Yes, please. ✨

Built for his stunning course page, @jonasarleth's animated member showcase brings real CMS data to life through playful motion, 3D effects, and clever Webflow techniques.

Learn how he brought it all together with Webflow CMS, CSS container queries, JavaScript, and the visual GSAP timeline → https://t.co/ZtrtlDL3Uf

[Codrops @codrops]

What does it take to stay creatively ambitious as a studio grows?

@itsoffbrand has gone from two founders in a small Glasgow office to a 30-person studio working with names like Microsoft, Lando Norris and Trevor Noah.

Today, they take us through the work, the journey, and what they’ve learned about making great digital experiences at scale: https://t.co/ZPzwVQp2xa

[Codrops @codrops]

A childhood fascination with the iMac G3 became one of the sparks behind @wenhaoqi's portfolio.

Haoqi takes us into the technical thinking behind the work, from synchronizing DOM and WebGL to building custom shaders, refraction, pointer interactions, and performance conscious effects.

A fantastic weekend read: https://t.co/OEERhky4e8

[Codrops @codrops]

Motion, typography, and visual storytelling are at the heart of Denis Avramenko’s approach to creating immersive digital experiences.

Today he takes us behind the scenes of his creative process, exploring the ideas, experimentation, and technology that shape his award-winning digital work: https://t.co/5Ya9B6ldg9

[Codrops @codrops]

Summer is turning out Three-mendous! ☀️🎨

We continue our @threejsconf celebration with yet another amazing tutorial!

Today, @fra_michelini takes us step-by-step through the process of turning a simple icosahedron into a dynamic, interactive 3D cluster, exploring Three.js, TSL, WebGPU, and three-start along the way.

Follow along: https://t.co/o5e4GtHCXY

[Codrops @codrops]

We’re continuing our celebration of the first @threejsconf in Paris with more creative work from the Three.js community. ✨

Today, @chirovisuals takes us behind his Geometry Painter, an exploration of painting, procedural growth, and WebGPU/TSL.

Read the tutorial & explore the demos: https://t.co/XBgBSh7hoJ

[David Ronai @makio64]

Say hello to Cinematic Zoom !🎬✨

Powered by:
🔹 @threejs
🔹 3D Tiles renderer by @garrettkjohnson
🔹 @CesiumJS
🔹 Open source ( link in thread )
🔹 made for @threejsconf

Put your best shot👇
https://t.co/WQLravu3Vc

[Codrops @codrops]

Two independent studios, one shared culture: @antinomystudio and 27b build brands across strategy, design, technology, film, fashion, entertainment, and culture.

From reimagining i-D to creating digital worlds for NEON and A24, their work explores what happens when a brand becomes more than an identity and turns into a living cultural experience: https://t.co/WL481cvRXx

[Codrops @codrops]

Today, Nicolas Leuliet explores the design of https://t.co/ARFFWx77PF’s new website, bringing together film, photography, creative direction and set design through a quiet, flexible visual system built to evolve with the studio.

Read the story: https://t.co/Wi6zKAR4jr

[Codrops @codrops]

Today, @wbbr_ takes us behind the build of the @_pxpush website, from the ideas that shaped it to the architecture and implementation that brought it to life.

See how a CRT interface, WebGL scenes, GSAP animations, and a custom page lifecycle come together to create a cohesive experience: https://t.co/x7zNHxTkpm

[Codrops @codrops]

As part of our celebration of the upcoming @threejsconf, we're highlighting wonderful creators from the Three.js community.

This time, @_pwd_ shares Garden Anomaly, a playful WebGPU & TSL experiment combining physics, glass deformations, and procedurally generated sound into a mesmerizing interactive sphere.

Take a look: https://t.co/a2A5B4TLkA

[Codrops @codrops]

Desperate for some truly human-designed website inspiration?

Together with our friends at @readymag, we picked out a collection of websites that are playful, unique, unexpected, and full of personality.

An antidote to the sameness of the web, with a little treat from Readymag waiting for you at the end: https://t.co/PpITtXj0qo

[Codrops @codrops]

✨ The first @threejsconf is coming to Paris!

To celebrate, we’re highlighting the incredible creativity of the community with a series of Three.js gems from wonderful people who are generously sharing their experiments, techniques, and creative ideas with us.

First up: @sujen_p and her endlessly scrolling glass xylophone, a mesmerizing experiment built with Three.js, shaders, fluid simulation, interaction, and sound.

Explore the tutorial and join us for more Three.js inspiration from the community: https://t.co/hEsGXEbXPr

🎟️ Going to Paris? Use CODROPS for 15% off your ticket.

#threejs #webgl #creativecoding

[Codrops @codrops]

Luxury brands have no shortage of beautiful websites. The harder part is making the interaction say something.

That's the problem @BonhommeParis has been working on for the past decade, with projects for TAG Heuer, Lacoste, Cartier, and others.

Today, the studio shares how they approach the work, what they think digital is for, and why the details matter: https://t.co/tmHA1LQI5g

[Codrops @codrops]

Some interactions feel effortless, but they're often made up of several small systems working together.

In today's tutorial, @sryaaditya_ breaks down an infinite scrolling gallery built with GSAP, from the looping scroll to the parallax, reveal animations, and FLIP transitions: https://t.co/jLkGpEtiYK

@greensock