\

Implementing a Foil Sticker Effect

374 points - yesterday at 6:47 PM

Source
  • andrewljohnson

    yesterday 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.

      • dalmo3

        yesterday at 8:58 PM

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

          • crazygringo

            yesterday at 11:44 PM

            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

                today at 1:21 AM

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

            • muragekibicho

              today at 9:54 AM

              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.

      • ionwake

        today at 10:34 AM

        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.

        • thombles

          today 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_t48

            today 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.

            • socalgal2

              today at 8:36 AM

              Neat!

              FYI tho, CC strongly recommends not using it for code

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

                • matteason

                  today at 9:00 AM

                  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

              • unglaublich

                yesterday at 8:23 PM

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

                • VenturingVole

                  yesterday at 8:29 PM

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

                  • xnx

                    yesterday at 8:27 PM

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

                      • GuB-42

                        yesterday at 8:36 PM

                        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

                            yesterday at 8:54 PM

                            Hopefully the api has access to the webcam!

                    • Groxx

                      today 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.

                        • sandspar

                          today at 6:25 AM

                          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

                              today at 8:25 AM

                              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.

                      • dmd

                        yesterday 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.

                        • benrbray

                          today 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/

                          • ABNW

                            today at 10:22 AM

                            This is so amazing.

                            • hu3

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

                                • brianpan

                                  today at 5:02 AM

                                  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

                                    today at 8:56 AM

                                    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?

                                    • hofrogs

                                      today at 7:55 AM

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

                                      • petcat

                                        today at 1:21 AM

                                        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

                                            today at 8:02 AM

                                            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

                                              today at 4:41 AM

                                              Why paint when you can just take a picture?

                                      • pmkary

                                        yesterday at 11:10 PM

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

                                        • fitsumbelay

                                          today at 2:48 AM

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

                                          • diego_moita

                                            today at 1:53 AM

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

                                            • darepublic

                                              today at 12:20 AM

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

                                              • rahuldkjain

                                                today at 6:12 AM

                                                loved it

                                                • efilife

                                                  today at 6:54 AM

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

                                                  • pengaru

                                                    today at 12:43 AM

                                                    very neat

                                                    • klajdiereqi

                                                      yesterday at 8:05 PM

                                                      [flagged]