iiinova — where your digital self keeps evolving

Amit Sheen @amitsheen.bsky.social · 24/09/2026

Wavy illusion 〰️ The cyan and magenta lines are the same length and do not change at all. 😵 (CSS only) 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

26410

Amit Sheen @amitsheen.bsky.social · 21/09/2026

Thanks! In terms of physics, it’s far from accurate. There’s no physics engine, collision detection, or anything of the sort, just played around with keyframes until the result looked right to me. 😊

120

Amit Sheen @amitsheen.bsky.social · 21/09/2026

Bounce! 🏐 (CSS only) Live demo @codepen.io: codepen.io/editor/amit_...

3293

Amit Sheen @amitsheen.bsky.social · 25/08/2026

Yet another cool effect inspired by the one and only @akiyoshikitaoka.bsky.social. It’s incredible how our brains ‘fill in’ the outlines, even the curvy ones. 😵‍💫 (Made with CSS only, of course) 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

1163

Amit Sheen @amitsheen.bsky.social · 25/08/2026

As others have mentioned, this is a great way to animate a single variable and then, with a bit of math, move a bunch of divs accordingly. The variable becomes a kind of single source of truth, and everything stays in sync. Here’s an example I made recently: codepen.io/editor/amit_...

040

Amit Sheen @amitsheen.bsky.social · 23/08/2026

That's cool! Reminds me of something I did about 5 years ago... (This was back when I was still using SCSS, but it's still without JS) codepen.io/amit_sheen/f...

010

Reposted by Amit Sheen

React Advanced London @reactadvanced.gitnation.org · 23/08/2026

The web got boring. 🎨 @amitsheen.bsky.social is here to fix that, exploring the wild HTML-in-Canvas API and why the web is fun again — at React Advanced London. Save your spot for React Advanced — Oct 23 & 26, 2026. Tickets are live.

031

Amit Sheen @amitsheen.bsky.social · 22/08/2026

I've seen this contraption in all sorts of places, I thought it was time to make it in #CSS. 😎 🏀 Infinite Roll Live demo on @codepen.io: codepen.io/editor/amit_...

1151

Amit Sheen @amitsheen.bsky.social · 15/08/2026

Div Shuffling... (CSS Only) Anyone who knows me knows how much I love playing with cards, and I've wanted to do something like this for a long time. ☺️ Live on @codepen.io: codepen.io/editor/amit_...

4626

Amit Sheen @amitsheen.bsky.social · 27/07/2026

🏀 Balls rolling down a wavy path (CSS only) There's nothing I like more than combining layers of animations to create a pleasing movement. 😊 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

0232

Amit Sheen @amitsheen.bsky.social · 24/07/2026

Colorful Spiky Sphere 🦔 1 sphere, 32 spikes, 180 sides, #CSS only. 😎 🔗 Live on @codepen.io: codepen.io/editor/amit_...

182

Amit Sheen @amitsheen.bsky.social · 20/07/2026

Line Shadows - #CSS only. It was a nice challenge getting the movement right and animating the shadow when one line goes over the other, but good shading can add a lot to an animation and make everything look better. 😎 Live on @codepen.io: codepen.io/editor/amit_...

2292

Amit Sheen @amitsheen.bsky.social · 08/07/2026

Hold on... I think you're talking about me. 😊 (I wonder if any of our mutual friends here would agree... 🤔)

010

Amit Sheen @amitsheen.bsky.social · 24/06/2026

Opened #ReactNext yesterday with my first-ever keynote! 🤯 The audience was amazing, the response was incredible, and the conversations afterward were even better. Huge thanks to the EventHandler team, the speakers, and everyone who joined.

030

Amit Sheen @amitsheen.bsky.social · 20/06/2026

The ghost of a Klein bottle. 👻 Playing with 'animation-composition' in CSS. 🔗 Live on @codepen.io: codepen.io/editor/amit_...

041

Amit Sheen @amitsheen.bsky.social · 18/06/2026

I built a new cat tower, so naturally I rendered it in 3D with pure CSS first. What, don't you do that too? 😄 📷 The finished build (cat included 🐱) is below 👇 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

160

Amit Sheen @amitsheen.bsky.social · 14/06/2026

In a world of AI feeds, recommendation engines, and infinite scroll... I just added RSS to my website. It might not be the newest technology on the internet, but it's still one of the best ways to follow content without algorithms, notifications, or platform lock-in. 🔗 amitsh.com/feed/rss.xml

4353

Amit Sheen @amitsheen.bsky.social · 13/06/2026

And don't forget to leave a tip.

010

Amit Sheen @amitsheen.bsky.social · 11/06/2026

Dude, I really get what you mean. Even just scrolling here and seeing the pictures from the event kind of bums me out... Oh well, we'll come back smarter next year. 🙂

130

Amit Sheen @amitsheen.bsky.social · 11/06/2026

So last week I built a Strandbeest, and this week's #CodePenChallenge theme is "sand"... Apparently I submitted my entry a week early, and I'd like partial credit retroactively, please. 😄 Hey @codepen.io, a little insider information next time wouldn't hurt. 😏 codepen.io/challenges/2...

030

Amit Sheen @amitsheen.bsky.social · 09/06/2026

🐎 Galloping Divs I've made many attempts over the years to create a smooth galloping motion, but with CSS trig functions and @property it's much simpler now. 🔗 Live demo on @codepen.io: codepen.io/editor/amit_...

3335

Amit Sheen @amitsheen.bsky.social · 06/06/2026

I can't believe I'm missing it this year. 😭

010

Amit Sheen @amitsheen.bsky.social · 02/06/2026

👣 CSS Strandbeest This one took a while... Somewhere along the way, this stopped being a CSS experiment and became a trigonometry exercise. 😅 But if there was ever a way to find out what CSS trig functions can do, Jansen's linkage is probably it. 🔗 Live on @codepen.io: codepen.io/editor/amit_...

411519

Amit Sheen @amitsheen.bsky.social · 31/05/2026

📄👆 🖊️ Number pool Live demo on @codepen.io: codepen.io/editor/amit_... * Chromium only ** May be a bit performance-heavy 😒

codepen.io

Number pool

A code demo by Amit Sheen created on CodePen

110

Amit Sheen @amitsheen.bsky.social · 31/05/2026

So @alhadis.bsky.social suggested I try creating something similar to a caustic reflection, and I figured it was a great opportunity to play around with the new border-shape property. CSS only. Each part is a div with different content. It's a pretty exciting time to be building for the web. 😀 🔗👇

1170

Amit Sheen @amitsheen.bsky.social · 31/05/2026

Challenge accepted. Maybe. I have an idea that might be worth trying... It's not just in pens, I don't use preprocessors in production projects either. I'm not sure there's much need for them these days.

110

Amit Sheen @amitsheen.bsky.social · 28/05/2026

Have you tried using Camtasia? Simple screen recording, and easy editing.

120

Amit Sheen @amitsheen.bsky.social · 28/05/2026

Playing with light. (which means I’m mostly playing with shadows. 🙃) CSS Only. Live demo on @codepen.io: codepen.io/editor/amit_...

3375

Amit Sheen @amitsheen.bsky.social · 26/05/2026

I went through 4 job interviews this week - 2 as the interviewer, 2 as the interviewee. And the difference between the two worlds was... kind of insane. So I wrote about it. Hopefully it’ll be useful to anyone interviewing developers, or anyone struggling with the interview process themselves.

linkedin.com

The Two Sides of the Table

I’ve had a crazy week. Sat through four job interviews, two as the interviewer and two as the interviewee.

050

Amit Sheen @amitsheen.bsky.social · 17/05/2026

Makes sense... And he’s a great drummer, maybe they’ll join forces at some point.

000

Amit Sheen @amitsheen.bsky.social · 09/05/2026

Thanks! I like your example. Actually, my demo is a part of a full article, in case anyone missed it 😊 frontendmasters.com/blog/css-spo...

frontendmasters.com

CSS Spotlight Effect

We can pass the mouse position from JavaScript to CSS and use it to make unusual and playful effects.

030

Amit Sheen @amitsheen.bsky.social · 30/04/2026

[2/2] My talk, “Frontend After the AI Shift,” will explore the skills and methods that help UI developers be responsible, thoughtful, and impactful, and stay relevant as we move into an AI-first workflow. For more details, the full agenda, and tickets, visit the website. 🔗 react-next.com

react-next.com

ReactNext: Israel's largest React Conference

Israels biggest ReactNext conference

010

Amit Sheen @amitsheen.bsky.social · 30/04/2026

📢 Big update… Looks like I’ll be adding a new title to my bio soon: *Keynote Speaker* 🤯 I’m honored (and honestly, pretty excited) to share that I’ve been selected to deliver the opening keynote at ReactNext 2026, the best and largest frontend conference in Israel. [1/2]

A photo from my talk at React Next last year, on a completely different topic.

110

Amit Sheen @amitsheen.bsky.social · 30/04/2026

just submitted three... Hope to see you there. 😀

010

Amit Sheen @amitsheen.bsky.social · 28/04/2026

You can't use `counter-reset` twice; the second overwrites the previous one. The syntax should be: div::after { counter-reset: index sibling-index() count sibling-count(); content: counter(index) ' out of ' counter(count); } But it looks like it produces incorrect values in the demo. 😨

220

Amit Sheen @amitsheen.bsky.social · 28/04/2026

you can use `counter-reset` with the sibling-index() and then the counter function in the content. ``` div::after { counter-reset: index sibling-index(); content: counter(index); } ``` Here's a demo: codepen.io/editor/amit_...

codepen.io

Untitled

A code demo by Amit Sheen created on CodePen

241

Amit Sheen @amitsheen.bsky.social · 26/04/2026

Here is Pas's nose. trust me, it's the best part. 😊

010

Amit Sheen @amitsheen.bsky.social · 24/04/2026

Nice, I did something similar quite a few years ago. codepen.io/amit_sheen/p... It’s a great idea to implement this with the HTML-in-Canvas API, check out my Fire Canvas demo, I think it’ll give you a good direction. hicshowroom.com/showroom.htm... If you have any questions, I’m here.

codepen.io

2D Water

...

020

Amit Sheen @amitsheen.bsky.social · 23/04/2026

Want to turn your content into a rainy puddle? Just wrap it with a `<rain-drops>` web component... and wait for support. 😐 In the meantime, if you’re on a supported browser, you can check out the live component in the HiC showroom: hicshowroom.com/showroom.htm...

191

Amit Sheen @amitsheen.bsky.social · 22/04/2026

The article explores modern UIs without media queries, using fluid design, intrinsic layouts, and container units. It also shows where container queries fit naturally and how to think more intentionally about when a layout needs to adapt. On @frontendmasters.com: frontendmasters.com/blog/buildin...

frontendmasters.com

Building a UI Without Breakpoints

This article covers a layout approach that better fits the modern web: fluid, intrinsic components that adapt by default, and treat conditional rules as local, intentional exceptions.

120

Amit Sheen @amitsheen.bsky.social · 22/04/2026

*Two* of my articles made it into the latest issue of Frontend Focus (@frontendfocus.bsky.social), which is, first of all, an honor, and second, it reminded me that I haven’t shared my article on “Building a UI Without Breakpoints” yet... (👇)

1122

Amit Sheen @amitsheen.bsky.social · 22/04/2026

I ran into a few bugs while working on it, especially with content overflow and during resizing. I think this is a sensitive area that really needs to be solid, since there’s the added complexity of internal vs. external resolution, and the fact that it behaves differently from a regular div.

020

Amit Sheen @amitsheen.bsky.social · 22/04/2026

Great notes, thanks. I’ll check what I can still fix in the article. Honestly, while writing it I was so excited that I kept wanting to jump to the next example, so it’s very possible I missed a few things 😅. But I think the core itself is solid and conveys the idea.

010

Amit Sheen @amitsheen.bsky.social · 21/04/2026

After spending quite a bit of time playing with the new and amazing HTML-in-Canvas API, I’ve pulled together all the experiments, code, and examples into one long, comprehensive article. 🔗 On @frontendmasters.com: frontendmasters.com/blog/the-web... * Best viewed in supported browsers.

4548