10 Cool CodePen Demos (June 2024)
Tags: css, webdev, showdev, html
Published: 2024-07-04 15:14:22

---
title: 10 Cool CodePen Demos (June 2024)
published: true
description: A collection of 10 cool demos shared on CodePen during June 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-june-2024-228a94f56e04
---

## from beneath
[Sophia Wood (a.k.a. Fractal Kitty)](https://codepen.io/fractalkitty) mixes poetry and code in her pieces. Don’t just run the p5.js demo! Review the code, explore the comments, and interpret JavaScript differently!

{% codepen https://codepen.io/fractalkitty/pen/KKLjGxj %}

---

## Diorama — Milk
I like the dioramas that [Ricardo Oliva Alonso](https://codepen.io/ricardoolivaalonso) creates in ThreeJS. This time, it is a cozy coffee shop in a milk carton with whimsical vibes from Ghibli movies. The shadows and lines make this demo amazing.

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

---

## Step Indicator
[Jon Kantner](https://codepen.io/jkantner) always builds beautifully crafted components that are full of small details and micro-interactions. This step indicator exemplifies how having a clean design and soft animations can go a long way.

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

---

## Parallax background
This is a simple idea that [misala](https://codepen.io/p0waqqatsi) smoothly implemented. Scroll up and down to see the background levels move at different speeds, creating a depth effect that helps transition into the content. It uses some vanilla JS; it would be interesting to see if it’s possible with scroll-driven animations.

{% codepen https://codepen.io/p0waqqatsi/pen/vYwqQxV %}

---

## CSS-Only Custom Range Slider
[Temani Afif](https://codepen.io/t_afif) combines modern CSS features like scroll-driven animations, anchor positioning, and the at-property rule (sorry, not all of them will be available in all browsers at the moment) to create this cool slider with three HTML tags and no JavaScript.

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

---

## No JS char by char on scroll reveal effects
Give [Ana Tudor](https://codepen.io/thebabydino) an SVG filter and a scroll-driven animation, and she will perform CSS magic. Do you want an example? Check this text reveal that would have been unthinkable not long ago without breaking all words (and letters) into spans. CSS Magic, I tell you.

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

---

## 3D truchet
Lose yourself in this infinite labyrinth of traces and intersections. Pull the mouse around, pinch in and out to move forward and backward, and interact with it. Try as you may, you won’t escape this self-generating maze created by [Liam Egan](https://codepen.io/shubniggurath/).

{% codepen https://codepen.io/shubniggurath/pen/xxNLPxg %}

---

## Scroll Blurred Words
The idea behind this demo is similar to what Ana Tudor did with CSS above. However, [Jhey Tompkins](https://codepen.io/jh3y/) used JavaScript and the splitting technique to provide more options and smoother transitions. And the result is simply beautiful.

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

---

## Sudoku with CSS Grid and :has experiment
The sudoku board coded by [Myriam](https://codepen.io/mynimi) is not playable (yet), but it showcases the power of CSS selectors in a fun way. When you select a cell, all the other cells that could impact its value will be highlighted to facilitate the number selection.

{% codepen https://codepen.io/mynimi/pen/rNgErxj %}

---

## Spray Paint Trail
Imagine that your mouse leaves a spray paint trail as you move it around the screen. Now, stop imagining it and try this demo by [Ethan](https://codepen.io/pleasedonotdisturb/). It may not be too practical, but it is really fun for a while. Then, it becomes a bit annoying but still fun.

{% codepen https://codepen.io/pleasedonotdisturb/pen/NWVZMya %}

---

If you like these demos, check the article with 10 Cool CodePen demos from May 2024: https://dev.to/alvaromontoro/10-cool-codepen-demos-may-2024-1cpb