5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

made a similar one with canvas a few years back, definitely took more than 5 mins >

would def recommend going the <canvas> route 👏

p.s if you're gonna make a big grid, think about moving to <canvas> 🙏 (can show that one too if you want) the cool thing with using <div> quick like this is it's a nice way to learn about some CSS superpowers ⚡ (scoped custom properties, dynamic transition, etc.)

here's the @CodePen if you wanna make your own 🤙 you'll see it's like ~30 lines of CSS (minus theme stuff)

Cooked hard💥

Isn't this kinda same. btw i build this to practice js.

shader version more perf?

100% if you got it 👨‍🍳

U upgraded it a premium component 🥶

supa cute supa fun

🙏🙏🙏

Off topic but I have a question. How does one do the +s on the corner of the divs to mimick that they are focused? I can't find any information on this on the internet because idk how to search for it or what it's called 😅

got an image?

I could have sworn i bookmarked the post but i cant find but i made a sketch. Basically youd have your usual divs but on the corners you will have plus/crosses. Idk how to do this other than spamming svgs with absolute position...

@jh3yy just add relative property to the div and create 4 “+” spans with absolute positioning

@jh3yy It's fine for one or two div but what about tens or hundreds of divs

This is so cool! Why isn’t the transition-duration: 0s a no-op?

CSS is OP; bit scared that it gets nerfed in next release

How can I make one with custom SVG Icons

swap out the <div> for an <svg> or even an <img> 🤙 same concept applies – you could even do it to an SVG grid that has a bunch of <use> laid out 👨‍🍳

Doesn’t work on mobile well

fixed that 😉

Wow i’m impressed! It works so well on the phone as well. An absolute masterpiece.

thanks for the push 🙏 few lines of JS and a little extra CSS 🤙

ahhhhh

Thanks. But I don't even know i am Thanking you. You guys are I just really good.

Playing with CSS custom properties feels like magic. I remember setting up a background color swap and feeling like I unlocked a secret level.

I've never used this trick. am I understanding it right that transition-duration: 0s; is meant for cases where you hover an element again while its transition is still running? basically to prevent janky animations?

Wow that's great buddy 😊👏

thanks 🤙

There's something so compelling and fun about little UI details like this. Add a useful function to this and you'd have an addictive app.

Finally I've found you 🫵 Loved your designs from @CodePen

@CodePen ahh - appreciate that 🙏

@CodePen I have some issues that I'd love your assistance, I'm in your DM 🙏

STEALING THIS THANKS

Wow!

It looks so good, well done :)

the little spins go a long way, love it!

Love this, so playful

That’s Sick👌🏽

Wow

So cute

This is mesmerizing ⁂

Love the rotate hack

nice

So cute 🥰

Interesting!