CodeNewbie Community šŸŒ±

Cover image for 10 Cool CodePen Demos (SeptemberĀ 2023)
Ɓlvaro Montoro
Ɓlvaro Montoro

Posted on • Originally published at alvaromontoro.Medium

10 Cool CodePen Demos (SeptemberĀ 2023)

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:

Top comments (0)