Loading video...

Video Failed to Load

Go Home

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

842,603 views • 9 months ago •via X (Twitter)

37 Comments

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ9 months ago

s/o to @steve_hayes who sniped me in Slack with a prompt that i felt obliged to explore/prototype quick 😁 it's a play on the glow cards we did a year or so back — you can play with all the controls in this @CodePen 🤙

gandan's profile picture
gandan9 months ago

remember this?

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ9 months ago

sure do!

Nikita's profile picture
Nikita9 months ago

Please share the code to this, this would be so cool in a shadcn registry

Chief Twat's profile picture
Chief Twat9 months ago

Nice, what about shining thru? :)

Steve Hayes's profile picture
Steve Hayes9 months ago

Appreciate the work on this, amazing execution 🙌

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ9 months ago

appreciate you pinging/sniping me! 🙏 can't resist having a go at putting things like this together 😁 hopefully it helps get this feature in the right direction or stirs another idea for us! 💡

Steve Hayes's profile picture
Steve Hayes9 months ago

Hoping we can implement some flavor of this when this work ships! I’ll keep ya updated. There was also some interest from another designer for using this pattern in dev docs 👀

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ9 months ago

keep me posted 👀 always happy to iterate and riff on other ideas 👨‍🍳

Prince Zoho's profile picture
Prince Zoho9 months ago

Thanks guys @jh3yy and @steve_hayes for this inspiration. Very fun stuff

dom's profile picture
dom9 months ago

This is genius. I need to find a reason to use it now!!

OPM's profile picture
OPM9 months ago

that's genius

David Fernandes's profile picture
David Fernandes9 months ago

love to see these type of experimental work! amazing @jh3yy 🙌

Mykhailo Sorochuk's profile picture
Mykhailo Sorochuk9 months ago

Nice effect! Makes the icons pop. Any chance of sharing the code too?

Andrew Krippner's profile picture
Andrew Krippner9 months ago

this is both beautiful and functional, great work

Mukul's profile picture
Mukul9 months ago

🤔This glow effect is super cool! The duplicate-and-scale trick is clever for that dynamic feel. Wondering if it could be adapted for a hover effect on cards with images too? 🤔

Yuma Tanaka's profile picture
Yuma Tanaka9 months ago

@designgurra

Naiza's profile picture
Naiza9 months ago

so cool effect

Vishal G.'s profile picture
Vishal G.9 months ago

@timvandaats

Amol Kelkar's profile picture
Amol Kelkar9 months ago

Loved it!

Jon raRaRa's profile picture
Jon raRaRa9 months ago

What about the border?

Jose's profile picture
Jose9 months ago

It’s beautiful, I’ll implementing in my next landing

Danny Williams's profile picture
Danny Williams9 months ago

Brilliant 👌

D-lan's profile picture
D-lan9 months ago

Wait thats smart af When course drop?

cris's profile picture
cris9 months ago

looks clean

Dreh's profile picture
Dreh9 months ago

such a brilliant way of doing this 😁

Keith Harvey's profile picture
Keith Harvey9 months ago

🤯

Francesco Piccoli's profile picture
Francesco Piccoli9 months ago

cc @benmoha

Stephen Parker's profile picture
Stephen Parker9 months ago

Very cool! 🤙

Dhinesh's profile picture
Dhinesh9 months ago

The effect is magical. And you did reveal it like "The Prestige" movie.

Jordan Dingle's profile picture
Jordan Dingle9 months ago

Nutty 🤙

César Couto's profile picture
César Couto9 months ago

Love it.

origami's profile picture
origami9 months ago

Stealing this

Lúcás's profile picture
Lúcás9 months ago

Thats really goo, I like it! , Would be interesting on input fields

Theo Vararu's profile picture
Theo Vararu9 months ago

@Saadeghi you did something similar with hover-3d recently

Josh Johnson's profile picture
Josh Johnson9 months ago

Geeeeeeeze. That is so dang clever.

stevie's profile picture
stevie9 months ago

@grok what would the html and css look like to make this

Related Videos

CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #​fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.​style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #​fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

1,180,399 views • 2 years ago