sibling-index staggered animations
sibling-count() and sibling-index() got support on Firefox this month of August, and Josh Collinsworth used them to create this animation in which squares rotate and turn into circles (and vice versa). Something that would have required highly specific CSS rules can now be achieved with 40 lines of code. Nice.
Wave header
Ana Tudor used the shape() function to create wavy patterns in the header and its pseudo-elements, which combined with different colors and the header content positioning creates a beautiful experience. Also, the code for the shape has many comments making this a great demo for learning about that function.
Analog Email Alert
As part of a CodePen Challenge, Zerde Turdybek created this interactive animation with ThreeJS. Move the mouse around to see the letter follow the pointer, then click on the mailbox to drop the letter, and the mailbox will animate. I really like how the demo and the shadow details.
Elastic macOS Traffic Lights
Bálint Ferenczy reimagines the MacOS window buttons and crafts a new interactive version using vanilla HTML, CSS, and JavaScript. Play around with them: move mouse over, click, pull them (yes, pull them). The micro-interactions it has are really smooth. I enjoyed the bounce effects.
Div Shuffling
If you've worked drawing with CSS and doing 3D with CSS, you know how difficult it is to simulate a curved shape without looking weird or fake. But this demo with cards shuffling does exactly that and in such a easy-looking way (just using a ton of divs). Of course, it had to be Amit Sheen, who does magic with 3D CSS, who did it. Amazing!
Banana - Peel Study
An interesting infinite cycle with the word "banana" getting carved and uncarved from a three-dimensional banana. Scan, carve, dissolve, loop. Daniel Muñoz is the author of this original (and a little bit weird) animation with ThreeJS and GreenSock.
Plant Shop - a 3D game about growing and selling plants
I had fun playing this game by Joshua van Boxtel, although I must admit that I didn't go beyond level 2 (and a half). Grow your greenhouse and your business by taking care of the plants and buying newer/better seeds at the market. The 3D is impressive, I wish the transitions were a bit smoother (having to reset the camera each time, ouch!)
Evil Eye
I haven't seen many Lord of the Rings demos lately, so this one by Andry Zirka caught my attention. The tower is a WebP image, but the fiery eye that follows the mouse is coding into a canvas. Really impressive result. Time to so stop messing around and get back to work... but first, two more demos.
Your Package Could Not Be Delivered
Vanessa Victorino coded the template for this "deceptive" demo. It is a realistic-looking Amazon email that tries to trick the viewer to perform an action. The main elements of phishing are present and a short description of them pops up (when you fail and end up clicking what you shouldn't).
Creative login robot
Itay haephrati coded this robot-login form that interacts with the user as they enter the information. I like this type of high micro-interactions demos that are practical enough to be put on a website even if they are a big goofy. This is fun and friendly.
