Untitled
This piece of generative art doesn’t use any library in particular; it’s just JavaScript generating random sequences that change color and grow (reminding me a little bit of potato stems growing 😳). An amazing and mesmerizing demo by tina.
Cosmic Dreams
Inspired by Anxo Vizcaíno’s video, Konstantin Denerz created a beautiful animation using HTML, CSS, and a little SVG (for filters and textures). Relax, switch on the music, and enjoy the details.
Single Div CSS Parrot
Arman Borkhani creates impressive CSS Art demos. This parrot is a beautiful example of what can be achieved with a single HTML element and some CSS (80 lines).
Doom Scroll
Talking about Adam Kuhn is talking about quality content. He was a Front End Conf 2024 speaker, showcasing this Doom game created in HTML and CSS using scroll-driven animation.
Reorder Song List
Una Kravets built this demo with a practical case for View Transitions in CSS. Move the songs around or click the delete button to see how they animate gracefully instead of the change “just happening.”
Letterboxd Inspired Loading
This is the first loader in the list (there are a few more; I think there was a CodePen Challenge?). Cynthia Costa brings this loader inspired by the Letterboxd logo, which uses mix-blend-mode to combine the colors.
CSS Only 3D Tagcloud V2
I have conflicted feelings about Niklas Knaack’s demo. I really like the use of 3D, the originality of the idea, and how it was coded only with HTML and CSS (no JS, impressive!); I find it a bit difficult to control. The pros beat the cons by far. Also, click outside the tag cloud for some fun 🤩
Emoji Toggle
A toggle switch with feelings is one of Jon Kantner’s fun components. In this animated toggle, you can change between the unhappy and happy emojis. The animation (and the final bounce) is cool.
Mesmerizing Loader Animation
The title says it all. This loader animation is mesmerizing. From the colors to the rotations, it has something hypnotic. It is easily customizable by changing the CSS variables at the top of the code. Neat demo by Jon Christensen.
Loading animation
One last demo and one last loading animation (there were only three, don’t complain!). Scott R McGann created this sparkling double helix loader that moves from left to right while the percentage increases. A cool component to close the list.
