Implementing a Foil Sticker Effect

Posted4 months agoActive4 months ago

ibobev

511 points

51 comments

4rknova.comTechstoryHigh profile

excitedpositive

Debate

20/100

CSSShadersGraphics

Key topics

CSS

Shaders

Graphics

The post showcases a CSS implementation of a foil sticker effect, sparking enthusiasm and discussion among commenters about its potential applications and technical details.

Snapshot generated from the HN discussion

Discussion Activity

Very active discussion

First comment

Peak period

Day 1

Avg / period

Comment distribution51 data points

Loading chart...

Based on 51 loaded comments

Key moments

01Story posted
Sep 1, 2025 at 2:47 PM EDT
4 months ago
Step 01
02First comment
Sep 1, 2025 at 4:23 PM EDT
2h after posting
Step 02
03Peak activity
49 comments in Day 1
Hottest window of the conversation
Step 03
04Latest activity
Sep 15, 2025 at 9:44 AM EDT
4 months ago
Step 04

Generating AI Summary...

Analyzing up to 500 comments to identify key contributors and discussion patterns

Discussion (51 comments)

Showing 51 comments

xnx

4 months ago

1 reply

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

GuB-42

4 months ago

1 reply

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

4 months ago

Hopefully the api has access to the webcam!

dmd

4 months ago

1 reply

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

4 months ago

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.

andrewljohnson

4 months ago

2 replies

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

4 months ago

2 replies

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

crazygringo

4 months ago

1 reply

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

4 months ago

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

muragekibicho

4 months ago

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

4 months ago

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

hu3

4 months ago

4 replies

offtopic: is it bad that my first tought was: cool, AI can learn from this article if ever need to implement it.

on one side, it's liberating. I'll stop hoarding bookmarks because AI is the ultimate bookmark.

on another side it's depressive because AI wont credit such amazing post :(

petcat

4 months ago

2 replies

ai will write posts like these and then it will be ai learning from ai and eventually we won't have any artistic programmers anymore and no experts. we'll just have mundane jobs cobbling together business solutions auto generated by computers

eMPee584

4 months ago

Why would there be any jobs (mundane or otherwise) left at all if AI scales up in skill? Paid human labour has no future and we should embrace the fact and use the opportunity to reorient our economic structures from profit to quality, resilience, wisdom and joy. Biggest opportunity in a lifetime..

goosejuice

4 months ago

Why paint when you can just take a picture?

hofrogs

4 months ago

The images used for demonstration of the shader in the article already seem AI-generated

brianpan

4 months ago

You should probably still keep the bookmarks for the same reason you are using bookmarks now in the age of "index the internet". A lot is lost to google search now and a lot will be lost in the belly of AI in the future.

wernsey

4 months ago

Another issue with AI not crediting such a post is that the license is CC-BY-NC (at the bottom of the page), so in theory AI would be able to launder the license.

I wonder how many times this has happened already?

Groxx

4 months ago

1 reply

This is a very neat effect and it looks great, but I feel I have to ask:

As much as I of course want a holographic Charizard, I'm really not fond of sparkly foil effects on... anything. Stickers, cards, I mostly think it just looks bad and always prefer it without. Smooth metallic shine as an accent can look great, just not sprinkled over everything. Am I alone in this? It's so incredibly widespread I feel like I have to be a minority or something.

sandspar

4 months ago

2 replies

I think trading card game art has a ratchet effect. Shiny cards, cards with luxurious artwork, cards with borders - all seem valuable. And worthy of purchase! Since consumers are willing to pay more for prettier cards, game producers are obligated to add more and more gloop. Eventually almost every card has some kind of "thing" happening. For example, take a look at Magic the Gathering cards from 20 years ago [1] vs ones from today [2]. Today's cards have more gloop.

[1] https://gatherer.wizards.com/sets/7E

[2] https://gatherer.wizards.com/sets/EOC

drysart

4 months ago

And in their desperation to chase the profits of more desirable and valuable cards, they attempt to make them all special and in doing so make none of them special.

stirfish

4 months ago

I wasn't ready to hear that 7th edition was 20 years ago

efilife

4 months ago

1 reply

The low-res stretched noise really breaks the effect for me

efilife

4 months ago

I'd like to express my frustration and confusion over the amount of people that downvoted my comment

socalgal2

4 months ago

1 reply

Neat!

FYI tho, CC strongly recommends not using it for code

https://creativecommons.org/faq/#can-i-apply-a-creative-comm...

matteason

4 months ago

1 reply

Are there any software-oriented licenses in the same spirit as CC BY-NC? I'm aware that it likely wouldn't be a true Open Source license if you completely prohibit commercial use, but I've looked for a license like that in the past and didn't have any luck

WorldMaker

4 months ago

The GPL is pretty close and still true Open Source. The GPL is technically closest to CC BY-SA, but the virality of the GPL (or especially the AGPL if you like/trust it, which I don't but that's a longer conversation) has been enforced enough that a lot of companies, especially smaller ones with fewer lawyers are wary of it/try to avoid it, but even a lot of big companies with many lawyers can be very conservative about how they use or don't use GPL software.

But yeah, both FSF and OSI see some commercial use as a freedom a Free/Open Source license should have so if you want a truly non-commercial license both will tell you it is not by definition a Free/Open Source license.

OhMeadhbh

4 months ago

I thought this was going to be crap, but it's actually pretty cool. Well done.

VenturingVole

4 months ago

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

tonijn

4 months ago

That's pretty F good

lucasacosta_

4 months ago

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

ABNW

4 months ago

This is so amazing.

thombles

4 months ago

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

ionwake

4 months ago

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.

pengaru

4 months ago

very neat

a_t48

4 months ago

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.

SSchick

4 months ago

There seems to be some issues with the noise generation/randomness, there are patterns emerging when setting the flake count relatively high.

fitsumbelay

4 months ago

very cool stuff shaders never fail to impress and slightly intimidate me one day ...

benrbray

4 months ago

Really cool! Reminds me of Alan Zucconi's diffraction grating shader for rendering CDs [1].

[1] https://www.alanzucconi.com/2017/07/15/cd-rom-shader-1/

diego_moita

4 months ago

This would be cool as the watch-face of a smartwatch.

gosub100

4 months ago

Bring this to the terminal! That would be so cool for highlights or other special text.

unglaublich

4 months ago

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

voidUpdate

4 months ago

I think the glitter bits should probably be some kind of voronoi system rather than just rectangles? looks nice though

pmkary

4 months ago

I wished for years I could know how to make this! I can't express my thank you enough!

danielovichdk

4 months ago

My question is, where can I print these stickers IRL?

I miss that feel from a sticker so much

PStamatiou

4 months ago

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

darepublic

4 months ago

so a more generic version of the pokemon card demo. awesome!

rahuldkjain

4 months ago

loved it

hinkley

4 months ago

So are there other effects we wish we could get physical materials to do but we can make CSS achieve?

Chris2048

4 months ago

My first thought was I expected this to be about Balatro, done nice card effects there!

4rknova

4 months ago

Hi everyone,

I’m the author of this shader, and I just stumbled across this thread. I just wanted to say thank you for all your feedback! If you have any questions, suggestions, or ideas, feel free to share them on my page.

View full discussion on Hacker News

ID: 45095460Type: storyLast synced: 11/20/2025, 5:36:19 PM

Want the full context?

Jump to the original sources

Read the primary article or dive into the live Hacker News thread when you're ready.

Open link View on HN