Inspired by Temani’s brilliant work, where he created a box using only `border-radius` and `corner-shape`, I built on his code, played with different angles, and came up with this dynamic demo.

Live demo on @codepen.io: codepen.io/amit_sheen/f...

I was inspired by another amazing animation from Jon Kantner, so I made a pure CSS version. 400 squares, using sibling-index() and sibling-count(), a bunch of trig functions, and some typed arithmetic. (Currently works in Chrome 140+ only)

Live demo on @codepen.io: codepen.io/amit_sheen/f...

A couple of days ago I came across Jon Kantner’s excellent color palette generator, and it reminded me that a few years back I built something quite similar (great minds and all that) back when HSL was the hot new thing.

(Links in comment 👇)

✨ The `-path` of Least Resistance (part 2) ✨

From shapes that define boundaries to paths that drive motion. We shift to `offset-path`, where elements no longer get clipped but flow along custom routes. 🤩

🔗 Read and share your thoughts on @frontendmasters.com:
frontendmasters.com/blog/the-pat...

✨ Part three (and final) is out now! ✨

This series has been a deep dive into 3D layered text, and in this part we explore some advanced interactions while making the code cleaner and more dynamic with a touch of JS. 🤩

🔗 Read and share your thoughts on @css-tricks.com
css-tricks.com/3d-layered-t...

✨ 3D layered text - Part two is here! ✨

If this series of articles were a meal, this part would definitely be the main course. 😋

19(!) live examples of 3D text animations, and if you want to build them yourself, check it out on @css-tricks.com.

🔗 css-tricks.com/3d-layered-t...

✨ New article! ✨

This time it’s a three-part exploration of 3D layered text. 😎

The first part is all about the basics, from the very first line to text with real depth that feels like it pops off the page. 🤩

Check it out and share your thoughts on @css-tricks.com:
🔗 css-tricks.com/3d-layered-t...

I'm just loving the fact that we can now create such complex interactions with only a few simple lines of CSS. 🤯
(This demo is from an upcoming article I’m working on)

✨ Been waiting for this one! ✨

24 layers on the cannon, 64 balls, and not a single inline variable. All powered by sibling-index() and sibling-count().

Working with multiple elements just got way easier! 🤩
(Currently on Chromium only)

🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

** This animation is 100% linear! **

Sure, there are spheres, curvy lines, and circular motion. Made with a few #CSS animations and some tricky keyframes. But the timing functions? Pure linear easing across the board.

🔗 Live demo on @codepen.io: codepen.io/amit_sheen/f...

This is the simplest complex animation I’ve ever made (with #CSS). It uses only two animations: a single keyframe to rotate on the Y axis, and another with a simple Y-axis translate. That's it.

The trick is knowing how to combine them in a clever way. 😉

🔗 On @codepen.io: codepen.io/amit_sheen/f...

✨ New article! ✨

A few weeks ago, while brainstorming silly things I could do with Scroll Driven Animations, I suddenly remembered that text can be animated too 🤯. That little spark quickly led me to a new idea: a Scroll-Driven Sticky Heading.

🔗 @css-tricks.com: css-tricks.com/scroll-drive...

Hey Bluesky friends, good news! 📣
Starting next week I’ll be available to take on a new project. Anything frontend that could use a creative touch. Development, consulting, and anything in between.

Happy to chat if you have something interesting.
Shares would be appreciated! 🙏

Cute Shaking Skull ☺️🤝☠️
(CSS only)

Click the skull to shake it. 🥴

Live demo on @codepen.io: codepen.io/amit_sheen/f...

✨ New article: Understanding CSS corner-shape and the Power of the Superellipse!

A deep dive into the new property, and a little dig into the math behind it, with lots of cool examples, but they only work on Chrome 139+.

🔗 Check it out on @frontendmasters.com: frontendmasters.com/blog/underst...

When one needs to disconnect a bit from the surrounding reality, one makes a satisfying endless #CSS animation.

♾️ Infinite wheel ☸️

Live demo @codepen.io: codepen.io/amit_sheen/f...