logoalt Hacker News

Implementing a Foil Sticker Effect

310 pointsby ibobevyesterday at 6:47 PM27 commentsview on HN

Comments

andrewljohnsonyesterday at 8:52 PM

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.

show 1 reply
thomblestoday at 12:29 AM

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

a_t48today at 4:09 AM

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.

unglaublichyesterday at 8:23 PM

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

Groxxtoday at 1:23 AM

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.

show 1 reply
VenturingVoleyesterday at 8:29 PM

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

xnxyesterday at 8:27 PM

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

show 1 reply
dmdyesterday at 8:47 PM

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.

benrbraytoday at 1:22 AM

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/

hu3today at 1:11 AM

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 :(

show 3 replies
pmkaryyesterday at 11:10 PM

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

fitsumbelaytoday at 2:48 AM

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

efilifetoday at 6:54 AM

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

diego_moitatoday at 1:53 AM

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

rahuldkjaintoday at 6:12 AM

loved it

darepublictoday at 12:20 AM

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

pengarutoday at 12:43 AM

very neat

klajdiereqiyesterday at 8:05 PM

[flagged]