The
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

This week: Crystals, Carts, and Code Names

Fast authoring, stable tests with Testim

AI-stabilized cross-browser UI tests. Get started today for free! Reduce maintenance with automated tests that adjust with code changes.

Crystal Mountains

Manan Tank takes you on a journey through a landscape of crystals with p5.js. Click the button to generate a new image, and download your favorite for your desktop.

Polygon Animation

Russ Pate animates a clip-path over a photo with a slow, satisfying tilt. Refresh the Pen to check out the effect on a new photo.

#CodePenChallenge: Flutter Animations

In the 3rd week of the August Flutter challenge, we worked with implicit animations. Check out the Pens from week three, including Miten Gajjar's "Dancing Squares".

3D Xylophone

Tom Miller turns a Pen into a playable xylophone with a little help from GreenSock.

Make a CSS Sheep - Step by Step

Suzanne Aitchison shared a tutorial on how to create a CSS sheep on dev.to, and collected all of the steps in this Collection! The description has a link to the tutorial, plus the "field of sheepies" Collection where people are sharing the sheep they created from the tutorial.

Code Name: RamBear

jh3y's bear mascot is blasting out code from the keyboard in this animated Pen. Turn on the sound to hear those keys click!

Optimal Overlay Finder

Yaphi shares a tool for creating readable text on a background image. "This is a tool to find the optimal overlay opacity that makes your text readable on a background image without hiding the image too much".

Rainy Day

"Recreating the scene outside my window with CSS", Ryan Mulligan shares a familiar summer sight. Don't miss the detail in the curtains and the subtle shading on the plant's leaves.

Nav Bar Meets Bottom Sheet

"A fusion between a nav bar and a bottom sheet" from Mikael Ainalem. The menu tabs have a friendly slide up animation when you click them.

Canvas Image Hover Interaction

Sikriti Dakua creates an animated particle effect on hover for three different landscapes. Check out the comments in the JS panel for details on how it's made!

Jetpack Search

Jetpack, the WordPress plugin for your self-hosted WordPress sites, can make these search experience on your site dramatically better. We use it on the CodePen documentation to make search have extremely relevant, instant results in a great UI.

Add to Cart

Aaron Iker shares a fun add-to-cart animation concept for a clothing shop. Check out the Pen for a "dark mode" version, too!

Vending Machine

Álex S. Lérida's machine is all set to sell you on some tech! Check out A215.