HN Reader

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

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.

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

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.

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

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.

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

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/

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.

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

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

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

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

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

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

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

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

That's pretty F good

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

loved it

very neat

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

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

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.

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.

This is so amazing.

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

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

Neat!

FYI tho, CC strongly recommends not using it for code

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

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

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

I miss that feel from a sticker so much