10 Cool CodePen Demos (March 2024)

This post arrives with a month delay. I selected the demos… and forgot to write the post, and then life happened. On the bright side, you’ll get two sets of 10 Cool CodePen Demos in a row! 😅

Toast

A toast component with a toaster illustration. It makes sense, right? This demo by Rafa is impressive also because the interactive toaster is CSS Art, not SVG or an image. Amazing work with the lights and shadows to generate the toaster… and it’s a fully functional component, too.

Code Reveal

As usual, Jhey Tompkins's demos are impressive and full of small details that take them to the next level. This is a wholesome component, from the eye animation to the revealing transition or the different stages of the copy/clipboard icon.

Penrose Granite Triangle Illusion CSS

This optical illusion is cool for its 3D CSS, but one thing that really caught my attention was the marble texture. Normally, developers use a background image for texture, but Josetxu created a beautiful texture in CSS… using only two conic gradients! 🤯

Code Sketch #2 P5.js

This is an interactive “etch-a-sketch” with a few lines of JavaScript (with P5). Rachel Smith published it in a series in March. It may look simple, but part of its beauty is how simple the code looks.

Code Sketch #3 P5.js

This is a second Code Sketch from Rachel Smith. I liked it. There’s another non-interactive one with animated color triangles, which is also really cool.

Worms Toggle

Josetxu repeats in the list, too! He also created a series of toggle switches with catchy designs like this one. This is one of them. I like the colors and how smooth the shapes and colors look.

The Dark Side of Notifications

The bell icon (commonly associated with notifications) turns into Darth Vader with a light saber in this whimsical component by Konstantin Denerz. Original and fun.

Birds — Three.JS

Based on Mr. Doob's previous work on ThreeJS, Wakana Y.K. presents a demo with hundreds of origami-looking birds flying around the screen in this playful (and peaceful) pen. Just sit and enjoy.

Infinite Portals

Is it a beach inside of a birdhouse or a forest inside of a sand castle? You decide in this beautiful webGL demo made with Three.js and GSAP by Karim Maaloul.

Tumbling Stick

Amit Sheen is a person to follow if you want to practice CSS 3D. From donuts to disks to these tumbling sticks infinitely falling against other sticks… The animation is clean and detailed, and that little bounce when the stick crashes is chef kiss. Another mesmerizing demo.