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.
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.
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".
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".
"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!Sponsored:
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!
Álex S. Lérida's machine is all set to sell you on some tech! Check out A215.