10 Cool CodePen Demos (July 2024)

#css #webdev #showdev #html

Screen Width/Height (CSS-Only)

Temani Afif usually appears in this list with CSS demos. This time, because of something impressive: combining custom properties with at-property and trigonometric functions, he can display the screen height and width… no JavaScript whatsoever!

WebGL Interactive Blobs

Mouse over these cute blobs to see them react and move (even more than they already do). This is a fun demo with WebGL by Ksenia Kondrashova that could be used as an interactive (and distracting) background on a website.

Movie Quote Hack

If you like movie quotes and fast-paced hang-man games, this demo by Alexandre Vacassin is for you: guess the movie quote by clicking on the letters (no keyboard option, afaik). But be careful: you'll have one minute to complete the task, and every failed attempt will subtract 5 seconds.

Ring Maze

Another game, this time by ZIM. This three-dimensional maze, created with ThreeJS, is shaped like a ring. In this entertaining demo coded for a CodePen challenge, the ball will follow the mouse around the maze (it can be challenging at times).

Navigation Hover Effect

Veronica Hristova coded this interactive navigation. It uses the ::before and ::after pseudo-elements to duplicate the text specified in a data attribute and generate a colorful 3D effect on hover. Simple and cool.

Three.Js Blobby Apple

This is another demo by Ksenia Kondrashova. Spin around this apple that moves fluidly as it rotates, losing its shape and regaining a new one—a nice experiment with ThreeJS.

Bill Splitter App

Inspired by a design found on Dribbble (linked in the codepen description), Dilum Sanjaya coded a live version of this bill splitter using React and Tailwind. It looks neat.

Sparrow

There has been little CSS Art in this series lately, and this beautiful sparrow drawing by Alina is a remarkable comeback. Based on a drawing from Behance (linked in the code), the code's simplicity contrasts with the drawing's cleanliness. Amazing work.

Creature from the IK lagoon

Move the mouse around the screen and see how this creature/blob follows it. Initially attached to the top, this worm(? leech? creature!) will detach and grow as it moves. Liam Egan developed this demo.

3D Jenga — CSS

A 3D CSS game programmed by Josetxu. While the Jenga is not fully playable, you can click on the middle pieces, which will animate and move (you can then push them back inside in "reverse Jenga").

If you like these demos, check out the previous article with 10 Cool CodePen demos from June 2024!