from beneath

Sophia Wood (a.k.a. Fractal Kitty) 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!

Diorama — Milk

I like the dioramas that Ricardo Oliva Alonso 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.

Step Indicator

Jon Kantner 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.

Parallax background

This is a simple idea that misala 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.

CSS-Only Custom Range Slider

Temani 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.

No JS char by char on scroll reveal effects

Give Ana Tudor 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.

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.

Scroll Blurred Words

The idea behind this demo is similar to what Ana Tudor did with CSS above. However, Jhey Tompkins used JavaScript and the splitting technique to provide more options and smoother transitions. And the result is simply beautiful.

Sudoku with CSS Grid and :has experiment

The sudoku board coded by Myriam 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.

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. It may not be too practical, but it is really fun for a while. Then, it becomes a bit annoying but still fun.

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