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
Top comments (0)