DEV Community

Cover image for 10 Cool CodePen Demos (September 2024)
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at Medium

2

10 Cool CodePen Demos (September 2024)

Fancy Avatar Header With Hover Effect (II)

Temani Afif always has a cool CSS trick up the sleeve. This time, it is an animated notch that adapts to the avatar’s position. And all in just a few lines of HTML and CSS code.


The Hour Hand

Move the stick and see the window change to reflect the time of day. This interactive demo by Rafa is nicely crafted and will adapt to the computer’s time, offering a personalized experience.


Lightweight Pixel Distortion Animation

A fun experiment with shaders by Ksenia Kondrashova. Customize the tile size and offset for different effects. I could see this effect used to simulate water or sand textures. Motion warning: this demo could make you dizzy.


Pine Trees

Guillaume Martigny brings an infinite forest of pine trees created with Pencil.js, a JavaScript 2D drawing library that creates a calming 3D effect with a zenithal view of the trees.


Dancing Bugs (Animated)

Inspired by a cartoon on Dribbble, Grant Jenkins created a beautiful animation with dancing bugs. The drawing is done using <canvas> and JavaScript, and it is smooth and fun (so many details!)


Docker

Some CSS Art by Mergim Ujkani: an animated version of the Docker’s logo whale swimming and jumping in the ocean. It is simple and fun, and coded only with HTML and CSS.


Target Range Inside keyframes— view-timeline ranges

A nice scroll-driven animation demo by Mariana Beldi. The elements move, shrink, and fade out creating a smooth scrolling experience. These little things are what take websites to the next level.


Olympic Medals

An Olympic Medal counter component by Gibson. Created with React and Framer Motion, it would make a cool widget on a sports website, especially if combined with other components for controlling the animations.


Recording Toggle

A new interactive component by Jon Kantner: a recording widget that animates with every user interaction (at the beginning and end) and as time passes. Slick.


Spinning

yuanchuan creates beautiful animated SVG and CSS Doodles, and this one is no exception. The spinning animation is mesmerizing and hypnotic… And the code is so simple! Incredibly amazing.


Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay