10 Cool CodePen Demos (February 23)

Photo by Kari Shea on Unsplash

10 Cool CodePen Demos (February 23)

A collection of 10 cool and exciting front-end demos shared on CodePen during February 2023

Featured on Hashnode

Gemstone in Time

A really impressive WebGL demo from Matthias Hurrle, with a dodecahedron prism inside of a spinning resin cube. The lights and the reflections are fantastic and take the animation to the next level. Check out more impressive demos on their CodePen profile.

Pencil Preloader

Jon Kantner does impressive demos with interactive components and micro-interactions. This loader is no exception. Simple but full of details (that wiggle of the eraser when deleting the pencil trace is super funny). It looks like Jon played with this circular component idea during February, as there’s another cool circular demo with a battery meter.

Pop-Up Hover Effect (featuring CSS Developers)

Apart from creating impressive CSS art demos, Temani Afif shares patterns in pure CSS and interactive components like these pop-ups. A brilliant combination of borders, outlines, and masks that provide animation on hover… and all with just the <img> tag!

A new animation with cards by Fabio Ottaviani. I recommend testing it on mobile, where the rotations and movements are smooth and beautiful. This demo has collected more hearts in two weeks than some of the most-hearted CodePen demos in 2022!

A few weeks ago, a rotating gallery made the rounds on Twitter. Jhey Tompkins, an expert at whimsical demos, decided to try it and shared his own version of this gallery that rotates and zooms as you scroll on the page.

AI01: Vista

CJ Gammon built this card design with the help of Midjourney (and shared the process on Youtube). The AI provides the design, and CJ creates the code. The wavy animation between the header and the card’s content makes it for me.

Daily Sketch

Yuan Chuan always shares beautiful drawings with SVG and CSS (doodles!). The collection on this demo caught my attention. They looked like snowflakes (they are not), and their shapes and colors were hypnotical.

Falling Words

This small animation by Gayane Gasparyan is catchy and fun. A sentence is generated at the top, then the words fall and crash and spread slowly through the screen. It would be nice if the phrase remained on top longer, but the effect is pretty cool.

Demo Idea Generator

How often have you planned on building something but don’t come up with any idea? Well, Una Kravets has the solution: a demo idea generator! This demo may look simple, but it is fantastic and a great problem solver.

Pure CSS Angled Sections

Ana Tudor shares a way of creating tilted and angled sections using CSS variables and trigonometric functions (heads up: not fully supported by all browsers). And to put the cherry on top, she adds a detailed explanation of the process and how to adapt it, all within the demo.

Did you find this article valuable?

Support Alvaro Montoro by becoming a sponsor. Any amount is appreciated!