Video wird geladen...
Video konnte nicht geladen werden
product spotlight cards 🔦 w/ depth map lighting + css scroll tricks
135,748 Aufrufe • vor 4 Monaten •via X (Twitter)
15 Kommentare

recently i tried to achieve a similar effect with photoshop and luminosity masks but this seems way more practical

This is the second post I’ve seen about depth maps! Is that a built in CSS thing now or some sort of WebGL magic?

this one's proper depth map usage with a shader 🤙 you can do a similar thing with svg filters and lighting but... that has limited legs outside of chrome for performance if you start transitioning the filters too much, etc. (webgl doesn't hit that)

@TylerNickerson @jh3yy how would the depth map look like for this ?

@TylerNickerson the fun part here is that you can chain the svg filter so you don't need to create a separate depth map as we're just working with the sticker outline 🤙 you could generate a depth map though with a model

Dropping the codepen on this? 👀

Insane!

Your lightning is so good & practical!

wait wait wait wait wait wait wait. what?

🔥🔥🔥

😍

Sick

you sir are a magician

This one's mind-blowing man

CSS beast, 🎩 ⬆️

