10 Cool CodePen Demos (February 23)

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!

Carousel with Drag and Wheel

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!

Scroll Driven Gallery

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.