10 Cool CodePen Demos (September 2023)

#webdev #html #css #javascript

3D Room — ThreeJS

Ricardo Oliva Alonso has some fantastic 3D rooms coded in HTML and CSS. He built a room using ThreeJS this time, and the results are incredible. It is a beautiful, elegant room that can be rotated and zoomed in to see the details.

Common Application Message Colors

In this demo of a progressively enhanced accordion component, Adrian Roselli shares some past choices for message colors (which coincidentally match the disability pride flag colors… “for funsies”).

Gooey Menu Concept

There are serious components and fun components. This is one of the latter. Ksenia Kondrashova brings an animated menu that would make the Nickelodeon team super-happy. Maybe not to use in production, but as a prototype, it is terrific.

Kurzgesagt submarine

Mergim Ujkani creates an animated (and interactive) piece of CSS Art. Move the mouse in front of this submarine, and the lights will follow around… and all in HTML and CSS, without any JavaScript.

100% CSS Breakout (game)

Prepare to get your mind blown by Jane Ori. She coded an Arkanoid-style game entirely in HTML and CSS, without a single line of JavaScript in view… and the result is, well, you need to check it 😉

Bouncy Pagination

Adam Kuhn (aka Cobra Winfrey) creates beautiful experiences. This month, he shared a fun pagination component for a CodePen Challenge. Click on the different pages, and see the component bend and throw the ball to the correct location.

Physics Playground

Ksenia Kondrashova repeats in this month’s list. In particular with a particle experiment that shows the physics of particles when rotating and shaking a box. The movement is natural and hypnotizing.

Mail form with attachment

Who said that components have to be boring? This form and file-upload component are proof of the contrary. Microinteractions, previews, and animations create a wholesome experience beautifully crafted by Nicolas Jesenberger.

70s ovals

This generative art demo by LoFi is classy and elegant. I like the simplicity in the design and how the colors combine to create an experience reminiscing the 70s—a great job.

Octagon Octahedron Octopus

A low-poly octopus drawn in 3D CSS by Fitz. Click on the Play button to see it animated. The octopus movement is natural (or as natural as it can be for a low-poly version). It makes it an impressive demo if you want to see animations, trigonometric functions, and 3D CSS together in action.

And that’s all for the September list. For more cool CodePen demos, check last month’s article: https://dev.to/alvaromontoro/10-cool-codepen-demos-august-2023-bge