10 Cool CodePen Demos (November 2023)
Tags: css, webdev, showdev, html
Published: 2023-12-02 21:25:14

---
title: 10 Cool CodePen Demos (November 2023)
published: true
description: A collection of 10 cool demos shared on CodePen during November 2023
tags: CSS,webdev,showdev,html
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfw3mg1mfnyng0ca29pp.png
canonical_url: https://alvaromontoro.medium.com/10-cool-codepen-demos-november-2023-974d1c6b982f
---

## Pure CSS gravity button
[Ana Tudor](https://codepen.io/thebabydino) applies an amazing CSS animation to a button (although it would work with other elements, too). Turn the slow-motion checkbox to view the details in the particles as they approach the button. This demo doesn’t work on Firefox (yet).

{% codepen https://codepen.io/thebabydino/pen/bGzeQrv %}

---

## Encrypted Password Reveal
Creating whimsical experiences is [Jhey](https://codepen.io/jh3y)’s forte. This is an excellent demo for that, transforming something as ordinary as a password reveal into an adventure. It’s the small details. The demo uses GSAP for the animations.

{% codepen https://codepen.io/jh3y/pen/wvNpQJe %}

---

## Generative Wavy Circles
In this generative art piece, [Lea Rosema](https://codepen.io/learosema) animates a circular wavy gradient using six different configurable colors (use the controls on the top right to specify the ones you want). Check her other demos, too!

{% codepen https://codepen.io/learosema/pen/abXWMOW %}

---

## Single Div CSS — Owl
Divtober may be over, but we still see some interesting single-div demos like this cute little owl coded by [Arman Borkhani](https://codepen.io/armanb). I really like CSS Art, and this is one of the nicest I’ve seen this month.

{% codepen https://codepen.io/armanb/pen/oNmpEbM %}

---

## Pure CSS Video Part 1: Solar Sojourn
Creating a short film using HTML and CSS is one of my ridiculous dreams… unfortunately, I’m not good enough at CSS and animations to do it. But do you know who is? [Ben Evans](https://codepen.io/ivorjetski). He brings a CSS-only space-inspired music video. Beware, it may take a while to load on some browsers.

{% codepen https://codepen.io/ivorjetski/pen/JjxNEWp %}

---

## Scroll-based image sequence with GSAP and ScrollTrigger
The [GSAP](https://codepen.io/GreenSock) team has been sharing many demos on CodePen this past month (some of them respond to forums, and some are original). They are good for digging into this library and learning how it works and how to use it. This demo showcases scroll triggers and a helper for sequenced images.

{% codepen https://codepen.io/GreenSock/pen/VwgevYW %}

---

## Sliding reveal effect for images II
[Temani Afif](https://codepen.io/t_afif) shares many interesting demos every month. This one caught my attention because of the animation and the faux 3D effect it has (take into account that it is a single image). I like how he plays with the online padding to create the effect.

{% codepen https://codepen.io/t_afif/pen/rNPZZbK %}

---

## Ghost Disco (updated version)
This demo by [Anna Zeen Scavenger](https://codepen.io/ScavengerFrontend) has A LOT going on: ThreeJS, shaders, shadows, animations, neon lights, interactivity (move the mouse from left to right and vice versa)… but it has something that makes it special and can’t take the eyes from it as I always discover something new.

{% codepen https://codepen.io/ScavengerFrontend/pen/poGZvgr %}

---

## Waves are lines
[Fabio Ottaviani](https://codepen.io/supah) makes it back to the list with a simple and catchy demo. Something hypnotic. This demo reminds me of an animated version of Joy Division’s “Unknown Pleasures” album cover.

{% codepen https://codepen.io/supah/pen/jOdZeEO %}

---

## Untitled
Random generative art by [Paul Slaymaker](https://codepen.io/aymak) to conclude this month’s list. This kaleidoscopic demo is interactive too: refresh the page to get a new experience, click on the canvas to pause and play, and just enjoy the colors and the movement.

{% codepen https://codepen.io/aymak/pen/rNPWoMX %}

---