Implementing a Foil Sticker Effect

Posted by ibobev 9/1/2025

Implementing a Foil Sticker Effect(www.4rknova.com)

510 points | 50 comments

andrewljohnson 9/1/2025|

This is neat, I have a simple CSS effect that I apply to foil cards on my Magic card marketplace site, but I have wondered what it would take to replicate all the different foil effects that a Magic card can come in to be both more varied and more true to life, in a performant way that fits into my CRUD svelte UX.

dalmo3 9/1/2025||

Must see: https://github.com/simeydotme/pokemon-cards-css

crazygringo 9/1/2025|||

Link to see it in action: https://poke-holo.simey.me/

Be sure to scroll down to see the advanced foil effects on cards, the top card is a very basic example.

Groxx 9/2/2025||

Ha, and it uses the gyroscope too - that's excellent work

muragekibicho 9/2/2025|||

some people just mastered their domain. i pray i get this good in my area of expertise: elliptic curves. lol im researching curves on random math sites, and learning different implementation tricks (like the subtle diff in MSB and LSB implementations of the double and add algorithm* or that sometimes you can find the weirdest endomorphisms on non-binary Koblitz curves (they're not documented AFAIK and Koblitz the OG is too old to be chasing 1-bit, 2-bit endomorphisms)

This was me in awe of the pokemon card CSS lol. It appears to have been done before AI and this makes it even more impressive tbh.

*The diff is in MSB->LSB the generator remains constant while in LSB->MSB to the generator doubles. Either way, you always know the value of the generator at every bit. I think this is a vulnerability but I just can't find out how.

colechristensen 9/2/2025||

You can run shaders like this in the browser, so you could probably start by directly lifting this code (and practicing in shadertoy)

PStamatiou 9/2/2025||

Related: A fully physics-based version of this with a metal shader https://x.com/jmtrivedi/status/1935807479021289573

thombles 9/2/2025||

Relatedly, Tim Oliver did a great presentation about building a holographic foil effect for the Threads "golden ticket" in Instagram https://www.youtube.com/watch?v=_sHxHz0nVG8

unglaublich 9/1/2025||

Shaders are really fascinating imo. Shadertoy is a nice website to try some out online https://www.shadertoy.com/

a_t48 9/2/2025||

Many years ago I worked on a mobile game with a similar effect for fancy cards you just won, but with a bonus twist - we used the phone orientation to adjust the “shine” like a real 3D object. Looks like from a sibling comment that iOS can do this for stickers now.

xnx 9/1/2025||

Cooler than I expected! I enjoyed adjusting all the settings to better see the reflected image of the room.

GuB-42 9/1/2025|

I did that too, looked up the reflection map.

As it turns out, the room in question is in Jedlinka Palace in Poland. The texture itself is this one: https://polyhaven.com/a/mirrored_hall

mensetmanusman 9/1/2025||

Hopefully the api has access to the webcam!

VenturingVole 9/1/2025||

This is the kind of random things I absolutely love to see here.

ionwake 9/2/2025||

I looked at link with scepticsm ready to complain as I am familiar with previous CSS sticker looks, and was pleasantly blown away by a well executed page which delved deeper into the subject.

Not only that but its one of my favorite topics.

Great work.

dmd 9/1/2025||

ios has a sticker-effect (“shiny”) like this which has the added bonus of responding directly to phone tilt. the first time i saw it I actually gasped.

hbn 9/2/2025|

Paper Mario Sticker Star is not a great or even good game, but I did love the effect where they used the accelerometer so if you moved the 3DS around, foil stickers would reflect back and forth. It's a fun effect.

lucasacosta_ 9/2/2025|

I stood amazed at how real it looks. Incredible job!!

More comments...