10 Cool CodePen Demos (January 2024)
Tags: css, webdev, showdev, html
Published: 2024-02-03 15:53:37

---
title: 10 Cool CodePen Demos (January 2024)
published: true
description: A collection of 10 cool demos shared on CodePen during January 2024
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-january-2024-22dfc9c3dac4
---

This month has been interesting for demos. Usually, I shortlist demos during the month and end up with 10–20, from which I pick 10. This month, I had enough demos to write 2 (or even 3) lists like this one. It was tough to pick just 10, and many good ones were left out.

Genuary is a creative coding challenge in January in which participants share generative art based on a prompt. So many generative art demos made the shortlist this month... unfortunately, not all of them made it here.

## 037 - Crystal Grid Redo

[Amy Carrigan](https://codepen.io/amy_e_carrigan) coded this generative art demo using P5. The color choice is beautiful, and the shapes are soft and have a clean design. The shapes at the edges repeat on the other side, so the image creates a repeating pattern that would look beautiful as a background.

{% codepen https://codepen.io/amy_e_carrigan/pen/vYPmMvd %}

----

## View Transitions: Playlist Header: Scroll-Driven View Transition

In this demo, [Bramus](https://codepen.io/bramus) showcases view transitions associated with scroll-driven animations. Scroll up and down and see how the header card adjusts size to make more content visible on the screen. It looks smooth on smaller screens (it may be jumpy at times on larger ones).

{% codepen https://codepen.io/bramus/pen/mdowgYX %}

----

## Genuary 2: No palettes

Another Genuary demo. This time, [David Aerne](https://codepen.io/meodai) brings a generative combination of circles, squares, and colors that really pop up. If it goes too fast, click on the screen, pause it, and advance one by one.

{% codepen https://codepen.io/meodai/pen/qBvOLJa %}

----

## !!

Do you watch anime and like their animated focus speed lines when someone looks shocked? [Wakana Y.K.](https://codepen.io/wakana-k) has something that you will like. Adapted from a previous demo, this is a fun effect to highlight pictures using a little JavaScript and a canvas.

{% codepen https://codepen.io/wakana-k/pen/rNRVbGN %}

----

## Direction-Aware Mickey Mouse

Some of Micky Mouse's original cartoons entered the public domain in January. We saw a surge of Steamboat Willie-related demos and drawings. This one by [Jon Kantner](https://codepen.io/jkantner) is coded in HTML and CSS and uses some JavaScript to animate Mickey and make him look wherever the mouse goes.

{% codepen https://codepen.io/jkantner/pen/zYbBebv %}

----

## Tower of Climbing Cubes

It is possible to create impressive 3D demos just with HTML and CSS… [Amit Sheen](https://codepen.io/amit_sheen) took it one step further and made it live on his YouTube channel for everyone to watch the process and see how it's done. This infinite climbing cube tower is a great example.

{% codepen https://codepen.io/amit_sheen/pen/JjzGGQR %}

----

## Marquees
Missing `<marquee>`? [Cyd Stumpel](https://codepen.io/Sidstumple) shows how to create two marquees using CSS and GSAP. This last one has additional features, like adjusting speed depending on the scroll speed.

{% codepen https://codepen.io/Sidstumple/pen/VwReyZw %}

----

## Top Authors Section

This may not be the most "popping" demo on the list, but it is the most practical. [Kristen](https://codepen.io/kristen17) creates unique designs on CodePen, and this one from January is beautiful. The experience is clean, and the grid adapts nicely to different screen sizes.

{% codepen https://codepen.io/kristen17/pen/KKEvKmm %}

----

## Wooden Toggles

There was a time when the Internet was not "flat colored." Developers experimented with textures, gradients, and unconventional shapes (even if it was using images). [Nicolas Jesenberger](https://codepen.io/nicolasjesenberger) crafted some beautiful toggles with wooden textures that bring back fond memories of older times on the web.

{% codepen https://codepen.io/nicolasjesenberger/pen/mdomqGR %}

----

## S̵w̵e̵e̵t̵H̵o̵m̵e̵, Suit…Home? Diorama

[Ricardo Oliva Alonso](https://codepen.io/ricardoolivaalonso) creates amazing-looking 3D dioramas both in CSS and using ThreeJS. This one is the latter. The textures and how the light is handled make it a well-rounded demo-one of my favorites from Ricardo.

{% codepen https://codepen.io/ricardoolivaalonso/pen/oNVpvJB %}

----