No text duplication slice and offset

The title of this demo by Ana Tudor says it all: this text effect was achieved with a single HTML element (and an ::after pseudo-element) with an SVG filter and without requiring any text duplication –which is usually needed for this type of effect.

ScrollTrigger DJ

Combining GSAP (and the scrollTrigger plugin) with the Web Audio API, Adam Kuhn creates a fun demo with a vinyl that can be scratched by scrolling over the disc.

CSS Happy Hour: Cat Collage

An animated photo gallery created using HTML and CSS only, with a simple code structure. This demo by Kasey Bonifacio uses cat photos to complete the demo, which is an added plus :)

Social Profile Light with Theme Toggle

Chris Bolson developed an interactive profile card using Tailwind. It works with mouse and keyboard and has a light/dark switch to adapt to different themes. The animation may be a bit rough around the edges, but it is nicely done, and the effect looks interesting.

Animated Slider | Swiper JS & Particles JS

Images grow and text spins as the user interacts with the component in this responsvie demo by Ecem Gokdogan. It uses ParticlesJS to generate a moving background, and SwiperJS to boost interactivity and have smooth animations in the slider.

PATTERNS

A quiz with 30 questions that uses emojis, shapes, and colors to find the element that matches (or doesn’t match) the pattern. This game developed by Pedro Ondiviela is fun, although some times it may be difficult to understand the required pattern.

The how behind pure CSS halftone

Again Ana Tudor with a cool animated demo that showcases how she created a halftone pattern using three CSS properties. Step by step, the screen updates the code, preview, and explanation, making it easy to view and understand.

CSS Slinky?

Script Raccoon with a mesmerizing demo showing an animated slinky(?) created with CSS and HTML. The slinky will spin, rotate, and form different shapes on the screen. It is hard to look away.

On/Off Plugs

In essence, this component is a light/dark mode toggle switch. And a fun one at it, with plugs connecting and disconnecting to switch the theme, with a smooth animation. Great job by Jon Kantner.

CSS Gears (2)

A 3D CSS demo by Amit Sheen (of course). The animation uses HTML and CSS only (no JavaScript or SVG) to move these gears (formed by 10 stacked elements) in an hypnotic way.

If you liked these demos, check last month’s article with another ten cool CodePen demos: https://dev.to/alvaromontoro/10-cool-codepen-demos-april-2024-4a70