Loading video...

Video Failed to Load

Go Home

product spotlight cards 🔦 w/ depth map lighting + css scroll tricks

135,748 views • 4 months ago •via X (Twitter)

15 Comments

Joan Verhulst's profile picture
Joan Verhulst4 months ago

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

Tyler Nickerson's profile picture
Tyler Nickerson4 months ago

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?

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

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)

Ankur's profile picture
Ankur4 months ago

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

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

@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

Andrew Rowley's profile picture
Andrew Rowley4 months ago

Dropping the codepen on this? 👀

Fredrik Tibbling's profile picture
Fredrik Tibbling4 months ago

Insane!

senik🎈's profile picture
senik🎈4 months ago

Your lightning is so good & practical!

oluwasefunmi.'s profile picture
oluwasefunmi.4 months ago

wait wait wait wait wait wait wait. what?

Matias Baldanza's profile picture
Matias Baldanza4 months ago

🔥🔥🔥

Kathleen McMahon's profile picture
Kathleen McMahon4 months ago

😍

Jordan Dingle's profile picture
Jordan Dingle4 months ago

Sick

Danny Williams's profile picture
Danny Williams4 months ago

you sir are a magician

Rafael Sánchez's profile picture
Rafael Sánchez4 months ago

This one's mind-blowing man

Chuks Gabriel's profile picture
Chuks Gabriel4 months ago

CSS beast, 🎩 ⬆️

Related Videos