Amit Sheen
@amitsheen.bsky.social
Experienced web developer, specializing in design systems, animation, and creative coding. Passionate about pushing CSS to its limits.
Posts (mostly) front-of-the-frontend stuff and animations. Don't follow people who post or share about politics.
Posts (mostly) front-of-the-frontend stuff and animations. Don't follow people who post or share about politics.
Great work!
And yes, I did. 😜
The rotation is nice, but it's old (about 4 years ago), it uses scss, animates the clip-path, and it's very heavy and slow. Not my best code. Maybe I need to redo it with modern CSS...
🔗 codepen.io/amit_sheen/p...
And yes, I did. 😜
The rotation is nice, but it's old (about 4 years ago), it uses scss, animates the clip-path, and it's very heavy and slow. Not my best code. Maybe I need to redo it with modern CSS...
🔗 codepen.io/amit_sheen/p...
September 27, 2025 at 4:44 PM
Great work!
And yes, I did. 😜
The rotation is nice, but it's old (about 4 years ago), it uses scss, animates the clip-path, and it's very heavy and slow. Not my best code. Maybe I need to redo it with modern CSS...
🔗 codepen.io/amit_sheen/p...
And yes, I did. 😜
The rotation is nice, but it's old (about 4 years ago), it uses scss, animates the clip-path, and it's very heavy and slow. Not my best code. Maybe I need to redo it with modern CSS...
🔗 codepen.io/amit_sheen/p...
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...
Live demo on @codepen.io: codepen.io/amit_sheen/f...
September 26, 2025 at 8:23 PM
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...
Live demo on @codepen.io: codepen.io/amit_sheen/f...
✨ New article ✨
Are we at the start of a new era?
Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.
What do you think?
css-tricks.com/css-typed-ar...
Are we at the start of a new era?
Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.
What do you think?
css-tricks.com/css-typed-ar...
September 24, 2025 at 1:04 PM
✨ New article ✨
Are we at the start of a new era?
Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.
What do you think?
css-tricks.com/css-typed-ar...
Are we at the start of a new era?
Chrome 140 introduced CSS Typed Arithmetic. It might seem like a minor change, but I believe it's huge as it opens the door to countless new possibilities and a whole new era of Computational CSS.
What do you think?
css-tricks.com/css-typed-ar...
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...
Live demo on @codepen.io: codepen.io/amit_sheen/f...
September 20, 2025 at 12:37 AM
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...
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 👇)
(Links in comment 👇)
September 5, 2025 at 10:58 AM
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 👇)
(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...
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...
August 30, 2025 at 2:18 PM
✨ 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...
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...
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...
August 22, 2025 at 2:48 PM
✨ 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...
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...
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...
August 20, 2025 at 3:28 PM
✨ 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...
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...
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...
August 18, 2025 at 8:54 PM
✨ 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...
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)
(This demo is from an upcoming article I’m working on)
August 17, 2025 at 11:07 AM
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)
(This demo is from an upcoming article I’m working on)
Should I try the comprehensive exam? 😜
August 12, 2025 at 10:15 PM
Should I try the comprehensive exam? 😜
Does the new `stretch` keyword in CSS mark the end of `box-sizing: border-box;` in our reset files? 🤔
August 8, 2025 at 8:24 AM
Does the new `stretch` keyword in CSS mark the end of `box-sizing: border-box;` in our reset files? 🤔
🚨 New Course Alert 🚨
DevTools for Beginners
@kevinpowell.co and I just released a brand new (and totally free!) email course all about DevTools and how to use them in ways that actually help you debug and improve your CSS.
🔗 Full details and free signup here: devtoolsforbeginners.kevinpowell.co
DevTools for Beginners
@kevinpowell.co and I just released a brand new (and totally free!) email course all about DevTools and how to use them in ways that actually help you debug and improve your CSS.
🔗 Full details and free signup here: devtoolsforbeginners.kevinpowell.co
August 6, 2025 at 3:10 PM
🚨 New Course Alert 🚨
DevTools for Beginners
@kevinpowell.co and I just released a brand new (and totally free!) email course all about DevTools and how to use them in ways that actually help you debug and improve your CSS.
🔗 Full details and free signup here: devtoolsforbeginners.kevinpowell.co
DevTools for Beginners
@kevinpowell.co and I just released a brand new (and totally free!) email course all about DevTools and how to use them in ways that actually help you debug and improve your CSS.
🔗 Full details and free signup here: devtoolsforbeginners.kevinpowell.co
✨ 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...
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...
July 31, 2025 at 4:46 PM
✨ 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...
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...
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...
July 26, 2025 at 10:31 AM
** 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...
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...
The trick is knowing how to combine them in a clever way. 😉
🔗 On @codepen.io: codepen.io/amit_sheen/f...
July 23, 2025 at 9:23 AM
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...
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...
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...
July 11, 2025 at 1:30 PM
✨ 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...
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! 🙏
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! 🙏
July 7, 2025 at 6:32 AM
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! 🙏
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...
(CSS only)
Click the skull to shake it. 🥴
Live demo on @codepen.io: codepen.io/amit_sheen/f...
July 6, 2025 at 10:04 PM
Cute Shaking Skull ☺️🤝☠️
(CSS only)
Click the skull to shake it. 🥴
Live demo on @codepen.io: codepen.io/amit_sheen/f...
(CSS only)
Click the skull to shake it. 🥴
Live demo on @codepen.io: codepen.io/amit_sheen/f...
It’s my CodePen Proniversary! 🎉
Celebrating another year as a PRO member on @codepen.io. So much creativity, learning, and endless inspiration from the community. 🤯
Huge thanks to the team for all the work they’ve done (and keep doing) in building and maintaining this amazing platform. 🤗
Celebrating another year as a PRO member on @codepen.io. So much creativity, learning, and endless inspiration from the community. 🤯
Huge thanks to the team for all the work they’ve done (and keep doing) in building and maintaining this amazing platform. 🤗
July 3, 2025 at 11:47 PM
It’s my CodePen Proniversary! 🎉
Celebrating another year as a PRO member on @codepen.io. So much creativity, learning, and endless inspiration from the community. 🤯
Huge thanks to the team for all the work they’ve done (and keep doing) in building and maintaining this amazing platform. 🤗
Celebrating another year as a PRO member on @codepen.io. So much creativity, learning, and endless inspiration from the community. 🤯
Huge thanks to the team for all the work they’ve done (and keep doing) in building and maintaining this amazing platform. 🤗
✨ 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...
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...
June 23, 2025 at 6:44 PM
✨ 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...
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...
📣 Bluesky, show me your power...
I'm looking for an a11y expert to review two examples for an article. I've done my best, but need a pro's eyes on them. You'll get full credit and my eternal gratitude, and help thousands of developers see a high-quality, accessible example. DM me.
I'm looking for an a11y expert to review two examples for an article. I've done my best, but need a pro's eyes on them. You'll get full credit and my eternal gratitude, and help thousands of developers see a high-quality, accessible example. DM me.
June 18, 2025 at 3:03 PM
📣 Bluesky, show me your power...
I'm looking for an a11y expert to review two examples for an article. I've done my best, but need a pro's eyes on them. You'll get full credit and my eternal gratitude, and help thousands of developers see a high-quality, accessible example. DM me.
I'm looking for an a11y expert to review two examples for an article. I've done my best, but need a pro's eyes on them. You'll get full credit and my eternal gratitude, and help thousands of developers see a high-quality, accessible example. DM me.
We're ba-ack! 🎉
Get ready to have some serious fun with CSS!
@kevinpowell.co and I are thrilled to bring back our CSS Games Workshop. 🤩
Want to build awesome games with just CSS? Now's your chance!
Join us: courses.kevinpowell.co/css-games-wo...
(get 25% off for the next 24 hours)
Get ready to have some serious fun with CSS!
@kevinpowell.co and I are thrilled to bring back our CSS Games Workshop. 🤩
Want to build awesome games with just CSS? Now's your chance!
Join us: courses.kevinpowell.co/css-games-wo...
(get 25% off for the next 24 hours)
June 17, 2025 at 4:01 PM
We're ba-ack! 🎉
Get ready to have some serious fun with CSS!
@kevinpowell.co and I are thrilled to bring back our CSS Games Workshop. 🤩
Want to build awesome games with just CSS? Now's your chance!
Join us: courses.kevinpowell.co/css-games-wo...
(get 25% off for the next 24 hours)
Get ready to have some serious fun with CSS!
@kevinpowell.co and I are thrilled to bring back our CSS Games Workshop. 🤩
Want to build awesome games with just CSS? Now's your chance!
Join us: courses.kevinpowell.co/css-games-wo...
(get 25% off for the next 24 hours)
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...
♾️ Infinite wheel ☸️
Live demo @codepen.io: codepen.io/amit_sheen/f...
June 16, 2025 at 1:49 AM
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...
♾️ Infinite wheel ☸️
Live demo @codepen.io: codepen.io/amit_sheen/f...
@kevinpowell.co and @bell.bz are both live, at the same time (in different locations). So instead of choosing, I just put them next to each other. My ADHD is happy to have multiple screens. 😂
June 12, 2025 at 4:54 PM
@kevinpowell.co and @bell.bz are both live, at the same time (in different locations). So instead of choosing, I just put them next to each other. My ADHD is happy to have multiple screens. 😂