[HN Gopher] Pokemon Card Animation
___________________________________________________________________
Pokemon Card Animation
Author : parrot987
Score : 876 points
Date : 2022-10-27 20:09 UTC (1 days ago)
(HTM) web link (deck-24abcd.netlify.app)
(TXT) w3m dump (deck-24abcd.netlify.app)
| petarb wrote:
| The cards keep flickering on my phone - latest iOS
| halgir wrote:
| This is beautiful. Made me realize one of the biggest things that
| the Hearthstone online TCG got right. The overall handling of the
| cards, especially when opening packs, is very well done and
| almost feel tactile. Many online TCGs just take flat pictures of
| cards and pretend to be done.
| grahamg wrote:
| [deleted]
| driscoll42 wrote:
| This just makes me realize how long it's been since I played
| Pokemon TCG (the original Base Set). This is amazing, great work!
| Wish there were another game like the GB Pokemon TCG and TCG2
| games.
| halgir wrote:
| I had no idea there was a sequel to the GB Pokemon TCG Game!
| Loved the first one as a kid.
|
| There is an online version of the TCG, that might do something
| for you (disclaimer: it didn't do much for me).
| thrown_22 wrote:
| Does anyone know how the foils work on physical cards?
|
| I know it's some type of diffraction grading but I have no idea
| how the foil is made, where you can buy it, etc. I'm sure there's
| a nice in depth post somewhere explaining it all.
| jffry wrote:
| Best I could find: https://www.nisshametallizing.com/en/how-
| holographic-paper-m...
|
| I imagine in the case of mixed printed/foil cards that they've
| printed ink on top of whatever clear layer protects the
| diffraction grating, leaving a gap anywhere they want the card
| to be shiny.
| w-ll wrote:
| This is really cool but I noticed something weird or a bug.
|
| As I do on HN went to the next tab, and then the next tab, and
| finally when i started closing tabs landed back on this page. All
| the cards were spinning very crazy.
|
| Is this some delay between events for css or js thats adding
| maxV?
| eganist wrote:
| reproduced, though not with all cards, just ones I'd clicked on
| already.
| imwillofficial wrote:
| I clicked on it and it did weird flip things seemingly random.
|
| Looks cool tho
| gynther wrote:
| What the fuck. This is so good
| swayvil wrote:
| tiagod wrote:
| This kind of thing is the learning exercise that sparks
| innovative ideas. I think you shouldn't dismiss them as useless
| dead-ends...
| swayvil wrote:
| 5 purely defensive statements and a flag-censor.
|
| You guys aren't big on self-reflection.
| bmalicoat wrote:
| People pursuing whatever tickles them is what gives our culture
| its vibrancy. Especially for things that don't hurt anyone, we
| should encourage such expeditions.
| daemon-guide wrote:
| <3
| batch12 wrote:
| Can you give me some examples of the things you devote hours
| to, day-to-day, that aren't tiny empty tickles?
| daemon-guide wrote:
| we are aesthetic creatures. what point is there in pushing
| humanity forward if there's no humanity left after the push
|
| this work is incredible, and will open up new realms of
| artistry in interface design and beyond
| dlivingston wrote:
| This is art and clever engineering mixed into one. I think it's
| one of the coolest things I've seen lately on HN. I wonder why
| you view something so harmless as so culturally damning.
| XCSme wrote:
| They look so good, I love them! You could make this into a
| library and open-source it or sell it (for web-based card games).
| petarb wrote:
| Wizards of the Coast needs to do this for Magic cards, especially
| with all of the new releases that have new types of foils
| par wrote:
| my first reaction to this was "cmon, wow, y'all, we need to stop,
| this is too good". And then immediately after my second reaction
| was "we need to bake this into ALL the games!" :)
| tiagod wrote:
| Honestly, this is wizardry. I'll be back after figuring out how
| it works
| diceduckmonk wrote:
| It's also really refreshing to see a project done for the love,
| the passion, the fun.
|
| There was a question the other day about how come people,
| especially programmers, don't have as much hobbies or frivolous
| projects anymore.
|
| It feels like many projects nowadays are done with some ulterior
| motive or motivation such as buffing up your resume, ego,
| credibility, employment potential, or startup funding. This
| affects the priorities and level of polish you put into certain
| things
| BasilPH wrote:
| I agree with you. Last weekend I had the same realisation and
| thought how that as a programmer it's comparatively very easy
| to make weird stuff for fun. But somehow we rarely do.
|
| I made a page that converts sentences to GIFs a couple of years
| ago[^1]. I remember how I revelled in the fact that I could
| create absurd stuff likes this out of nothing.
|
| I want to do this again.
|
| [^1]: https://gaga.lol
| snakeboy wrote:
| I went to try it out, but it looks like your website no
| longer works? (The gifs don't change in response to new
| prompts)
| dwrodri wrote:
| Something like this would look amazing on Scryfall or Gatherer.
| I'm not sure how you'd go about selling this to them, but I think
| the Magic: the Gathering world would be better off for it.
| bitexploder wrote:
| Getting in touch with Scryfall is easy, go chat with April
| King. She is on Twitter. But is it really all that useful
| beyond looking cool? Granted it seems easy to implement.
| HanClinto wrote:
| Especially with the new foiling types in Magic (etched foil,
| galaxy foils), it can be difficult for people to know what to
| look for when identifying one vs. the other. Having it
| illustrated and animated this way would be really helpful, I
| think.
| monkpit wrote:
| Really cool, a bit glitchy on iOS/safari, but what's new...
| FailMore wrote:
| WOW!
| coolca wrote:
| Wow, makes me want to collect them. I think that many card
| websites would be interested in this amazing animations.
| extasia wrote:
| Very cool
| elmimmo wrote:
| Panini presented the NFTs from their Megacracks 2022-2023 card
| collection in a similar way[0], aesthetically, but using video
| files (MP4) which makes it much less interesting (and even so,
| the visual effects in those are inferior to this CSS
| implementation). The fact that this CSS version does not work
| properly in Safari in unfortunate, though.
|
| [0]: https://paninimegacracksnft.com/token/wnzq
| n0t3ths81 wrote:
| davide_v wrote:
| AMAZING.
| jeroenhd wrote:
| I thought I was doing something wrong or that the cards were
| broken in Firefox for Android.
|
| Turns out the cards use the accelerometer to spin on mobile!
| That's a pretty nice trick, I love these animations!
| uneekname wrote:
| ngl I think they are broken for me on Firefox for Android. Glad
| they are working for you
| vanous wrote:
| Working correctly for me on Fennec 105.1.0 (f-droid version
| of Firefox) on Android 12.
|
| 105.1.0 (Build #1051020), b1e7cbeeb+ AC: 105.0.7, e2aeb82d54
| GV: 105.0-20220922052055 AS: 94.1.0
| alin23 wrote:
| Looks great, I'm always amazed how easy it is to do complicated
| graphics using CSS. It reminds me how outdated my OpenGL CompSci
| college course felt, drawing triangles by defining each point
| coordinates.. I'm thankful I don't have to do that nowadays.
|
| A gyroscope-based parallax effect would complement this well,
| like the one I tried here:
| https://twitter.com/alinp32/status/1558855422131507201
| TGRush wrote:
| Very nice! Though, it also turned my phone into an oven
| 0xCAP wrote:
| Took me a while to REALLY realize this is all CSS no WebGL. You
| just blew my mind... and ruined my weekend: I'm not leaving home
| untilI learn this sort of wizardry!
| bergenty wrote:
| This is so sad. CSS is so hard to do anything in we have to
| gush over basic animations like this. It's sad as a former
| flash developer.
| lucideer wrote:
| Flash supported CSS & JS (ActionScript) so I'm not sure what
| you're comparing. Dynamic rendering like this wasn't possible
| with CSS in Flash - you needed JS (ActionScript).
|
| People aren't gushing over this being possible in modern
| browsers - it's been possible to do this and much more in
| browsers for many years. They're gushing over it being
| possible with just CSS (no rendering using JS).
| bergenty wrote:
| Of course it wasn't possible with CSS in flash (not even
| sure how useful that was) but was child's play with only
| flash (actionscript).
| lucideer wrote:
| as it is now with webgl
| thinkloop wrote:
| Love it or hate it, something was lost with Flash. Sure the
| web can do it, but for some reason it doesn't. The
| combination of tools and language in Flash hit a magic
| sweet spot that let all kinds of people play and create.
| This demo is extra impressive for doing it in CSS, but it's
| also impressive for simply being done at all. You don't see
| stuff like this on the web too often. If this were a Flash
| world, I feel like it would be ancient news. I don't wish
| it were, but it's worth noting.
| lucideer wrote:
| Absolutely no doubt a lot was lost with flash. Regaining
| it has been a slow process, mainly due to the challenge
| of achieving the expressiveness of what flash offered in
| an open, interoperable and secure way (flash was never
| any of those things).
|
| But we're here now and you can do a lot more today with
| open web tech than was ever possible in flash.
| kyle-rb wrote:
| People are gushing because it's a 3D animation with
| holographic effects, which is pretty surprising to be able to
| achieve for a primarily-2D layout language.
|
| I've never seen something this seamless and realistic built
| in flash.
| bergenty wrote:
| It's a layer on top of the card that shifts based on how
| you move it. It's very, very simple to do in flash.
| evan_ wrote:
| So something that used to take a $299 software package
| and required every user to install a browser plugin can
| be done natively in-browser with few lines of CSS, that's
| great!
| bergenty wrote:
| Few lines of esoteric, inaccessible CSS compared to
| something a child could do in flash.
| murukesh_s wrote:
| yup. but after 2 decades and even makes HN devs go wow!
| and still locks the browser after scrolling 2 pages
| (chrome).. its very difficult to understand the point
| that op makes unless you were an experienced developer on
| flash. I get the same feeling when i see nocode/lowcode
| tools..[1]
|
| 1. https://youtu.be/SY3Y8gb3jYA?t=1380
| jeroenhd wrote:
| It's deceptively easy, actually:
| https://github.com/simeydotme/pokemon-cards-css/blob/main/st...
|
| CSS gradients + background images + alpha channel.
|
| There's some supporting JS + CSS as well over here:
| https://github.com/simeydotme/pokemon-cards-css/tree/main/sr...
|
| No WebGL, no <canvas>, just simple CSS. Web developers should
| really learn how to combine CSS effects because the heavy
| WebGL/WASM rendering is often complete overkill and an
| unnecessary battery drain.
|
| I also notice that on older devices, CSS
| animations/transitions/etc. run _way_ smoother than JS-powered
| renderers. I'm assuming this is because the native CSS renderer
| is quite optimized whereas the JS rendering engines are... JS,
| really.
| mrdoob2 wrote:
| At least JS-powered renderers can do something about making
| sure it looks the same in all browsers. With CSS you can't do
| anything about the fact that this simple demo doesn't render
| correctly in Safari/iOS and Firefox/Android.
| CivBase wrote:
| Working for me on Firefox/Android
| apineda wrote:
| I don't know. 1000 lines of CSS doesn't seem particularly
| easy. I'm not a css grokker myself but maybe it's easier for
| others.
| skavi wrote:
| Are we sure this kind of GPU accelerated CSS is actually more
| efficient than WebGL? Besides, CSS is far more prone to being
| impacted by browser quirks.
| mrdoob2 wrote:
| Definitely not more efficient. The only thing JS would need
| to do here is updating a 4x4 matrix. Everything else would
| be in the GPU.
| Aeolun wrote:
| I imagine the browser is better able to limit the redraw
| behavior of CSS effects. WebGL will render as long as your
| tab is open (though as others have said, the speed is
| probably better in WebGL).
| ZiiS wrote:
| I am very sure that the Firefox/Chrome developers have
| written more efficient GPU accelerated rendering for CSS
| then I am likely to bother writing in yet another custom
| WebGL renderer.
|
| I am also sure that a dedicated renderer optimized for one
| subject _could_ be even more efficient.
| BoorishBears wrote:
| in Safari on iOS 16 the effect is clearly bugged, showing a
| weird tiling artifact on the front of the cards
| sktrdie wrote:
| CSS 3d transforms happen on a different thread and don't
| block main thread. Whilst with WebGL you still have to do
| some work on the JS thread. So I would say CSS animations
| are faster.
| rasz wrote:
| Maybe faster as in less potential for frame drop, but not
| more efficient
| mijoharas wrote:
| *not necessarily more efficient.
| Kiro wrote:
| There's a lot of JS involved here though. This is not a
| "pure CSS" demo.
| rasz wrote:
| We are sure it isnt, see my other post
| https://news.ycombinator.com/item?id=33365694 or just look
| at CPU utilization while flipping those cards.
| rasz wrote:
| >all CSS no WebGL
|
| For majority of users (chrome) this is a detriment. Google
| really screwed up GPU Accelerated CSS Transitions. Open taskbar
| and look for yourself. Moving those cards around takes >10% of
| my old GPU (~1050) but 100% of one CPU core (3.4GHz Haswell).
| This is the most basic possible single quad texture being
| tilted around and Chrome eats whole CPU core!
|
| Its just as bad with even simpler 2D primitive operations like
| "animation: linear infinite" used for example here as one line
| text scroller under the video:
|
| https://ustka-panorama.webcamera.pl
|
| ~20% of GPU and ~15% of one CPU core is being eaten by Chrome
| scrolling _one line of text_. Nothing on modern machines Chrome
| devs are used to, but translates to around 30% of whole CPU
| burning cycles on Thinkpad X230 just to move that text around!
| blondin wrote:
| that's not true in my case.
|
| every single webgl demo i open up on my 10 years old macbook
| air sends the fan spinning like crazy. this demo works fine
| and chrome is there sitting under 0.2 cpu usage.
|
| this is one of the most cpu efficient 3D web demo i have seen
| in a while.
| rasz wrote:
| In Safari, right?
| notRobot wrote:
| Parent mentions Chrome.
| coryfklein wrote:
| As a backend engineer with no frontend experience, _why_ do
| folks care so much when something is done "only with CSS"?
|
| Is it because there is some technical advantage, or is it more
| of a "code golf" thing like, "Look at this rainbow quine I
| wrote that renders itself in assembly ascii art!"
| momojo wrote:
| It's a little of both. If I can do something with CSS, like
| animation, I'll take that over trying to do something custom
| with javascript. It's a perform
|
| But it also feels great when you can cleverly replace a piece
| of javascript with a CSS effect.
| im3w1l wrote:
| I had this in a background tab and when I came back to it some
| cards were spinning wildly. Took them like a solid minute to come
| to a stop.
| MitPitt wrote:
| When clicked, they do look a bit blurry up-close. Very cool
| otherwise and hopefully easily fixable.
| nsxwolf wrote:
| This really goes all out. I really love all the different
| foil/holo effects.
| pell wrote:
| Truly brilliant. I'd love to know more about how this was
| achieved.
| javajosh wrote:
| The github repo[0] has no license - I didn't realize github
| allowed that.
|
| 0 - https://github.com/simeydotme/pokemon-cards-
| css/blob/main/st...
| nness wrote:
| I would assume in this instance a lack of license is equivalent
| to all rights reserved (instead of a OSS license) if they're
| within a country where copyright is vested automatically.
|
| (But yes, this could certainly use a MIT or similar.)
| lucideer wrote:
| Why would it not allow that? Github has never been exclusively
| for open source software.
| cypherpunks01 wrote:
| Why are the coolest web demos always using Pokemon? Anyone
| remember the pokedex.org html5 progressive web app? (Sadly
| doesn't seem to work properly for me anymore)
| rawoke083600 wrote:
| Very Cool ! Svelte Rocks :D
| vermarish wrote:
| It really does make them feel that much more collectible. I don't
| know much about NFTs, but this kind of pseudo-3D experience ought
| to be standard for browsing digital collectible art.
|
| I also wonder how this would hold up for viewing artworks on a
| display. Maybe a website or browser extension that gives you a
| similar experience for any image you come across could be useful.
| CleanCoder wrote:
| I'm working on a project around this but am a developer and not
| a business/sales person so I'm actively looking for a
| partner/co-founder. The NFT part is not at the core of it but
| exists as ownership and authenticity validation mechanism,
| which if you consider the actual app is a tremendously valid
| use case. How can I find a co-founder to help drive this to
| market?
| spaceman_2020 wrote:
| How do I get in touch with you?
| CleanCoder wrote:
| Hey, you can shoot me an e-mail to cleancoder@416tech.com.
| Looking forward to hearing from you!
| yieldcrv wrote:
| this would be a big hit with NFTs in a couple ways:
|
| easiest: the team's own website can display the NFT images in
| their own gallery, similar to OP. Anywhere else displaying the
| NFT will not have these effects, like the marketplaces
|
| medium: major NFT marketplaces and displayers allow 3mf file
| format, which is a 3D file format which can also accept mouse
| over movement and other UI interactivity on top of the main
| image (or 3D object). so one would do this in 3D software first
| and then render out distinct files
|
| hard but efficient: you can embed an HTML/SVG viewer into the
| NFT code itself, which could theoretically include all of this
| CSS and mouseover/tap events. This would make it more portable
| to be rendered with these features in more places and wouldn't
| require as much cumbersome processing and file portability to
| do everything needed for the .3mf format. The additional
| benefit is that all of this code could be directly onchain
| (while the raster image still is on IPFS/elsewhere)
| random_kris wrote:
| How can I about this to put your words to reality
| bjarneh wrote:
| I struggle to place elements where I want them on a website with
| CSS.. hmm
| busyboy wrote:
| Great work
| davej wrote:
| Linear use a similar effect on their Customers page when you
| hover over their customer's cards: https://linear.app/customers
| wokwokwok wrote:
| Only vaguely related, but the site (https://pokemontcg.io/) that
| the high resolution card images are from is very big and fancy
| for something that is:
|
| > This website is not produced, endorsed, supported, or
| affiliated with Nintendo or The Pokemon Company.
|
| ...which surprises me, because in general Nintendo are Not Amused
| by people making money off of their IP... but, it's been around
| for a while, so I guess they don't care?
| squeaky-clean wrote:
| I don't think Nintendo is very involved in the TCG. The Pokemon
| Company is a separate company, though with 1/3 ownership by
| Nintendo. Nintendo only really steps in for titles published on
| Nintendo hardware. The card game and the mobile games are fully
| under control of The Pokemon Company.
| [deleted]
| darkwater wrote:
| I don't know elsewhere but where I live it's 10x easier to buy
| pirated Pokemon cards rather then the original ones. You can
| even buy them in Amazon (but that's nothing extraordinary).
| riskycodes wrote:
| This is really cool!
| iamwil wrote:
| I spent a bit of time doing this effect in CSS, though not to
| this degree. Quickly abandoned it when I couldn't find a way
| around the glitchy safari and sometimes chrome implementations of
| this effect.
| vsnf wrote:
| I'm a little surprised that Ancient Mew, one of the original
| uniquely holographic cards, isn't represented here. It was very
| unlike any other card seen when it was handed out at the first
| movie premiere.
| kuu wrote:
| This looks fantastic!
| mrwizrd wrote:
| These are absolutely gorgeous. Very well done.
| batmansmom1 wrote:
| Since when did so many special cards get introduced wow! I
| remember back in the day EX was the coolest type of card around
| b3nji wrote:
| This is beautiful, thank you.
| dcchambers wrote:
| Wow. This is amazing.
| aenario wrote:
| You might have some success selling this "technology" to wedding
| invitation printers and similar websites. They always have
| trouble demonstrating the various paper options / partial glossy
| / metalic cut out options
| dominucco wrote:
| timnetworks wrote:
| I stopped playing before all the expansions (there's a secret
| gold rare? is best!) and it's really cool to be able to 'handle'
| a card to see the cartwheel effect.
|
| That may date me a bit, but that also means there's a place in my
| heart for pure css.
| Arch-TK wrote:
| Looks nice but runs extremely slowly.
| rtkwe wrote:
| What's your device it's quite smooth on my desktop.
| antomeie wrote:
| Cool, but glitches like crazy on Safari :(
| subroutine wrote:
| Also glitches like crazy on Chrome for iOS.
| tiborsaas wrote:
| That's because Chrome for iOS uses Safari under the well...
| chrome.
| HanClinto wrote:
| This is absolutely incredible!
| Omatic810 wrote:
| This is spectacular. Well done.
| Double_a_92 wrote:
| I just noticed that on mobile devices the gyroscope can be used
| to move the cards. Now I wonder if the card could actually stay
| fixed in place, and just make the holo effects move. That would
| probably look more realistic and impressive, as if the card was
| actually on the screen.
| dom96 wrote:
| wow, these look amazing.
|
| The way the images of the cards are compressed is very good, they
| look absolutely crisp and load super fast. In fact, so crisp that
| I've wondered whether they aren't images at all but recreations
| of the cards in CSS as well.
| CGamesPlay wrote:
| Very cool, but it does not look great on Safari. The back of the
| card occludes the front of the card at some angles and
| aggressively flickers between the two images. But when it's
| working it looks great! Would make a good module in a card game
| engine.
| [deleted]
| ar_lan wrote:
| Yep. Looking on mobile Safari and it seems very buggy. But
| looks so cool when it does work!
| lelandfe wrote:
| Yeah - it's exhibiting that problem even in the technology
| preview, so this won't be getting better anytime soon :(
|
| Expanding the card is noticeably laggy in Firefox as well (M1
| MBP), only getting smooth results in Chrome, and even some of
| those, like the "Pokemon V" ones, lag a small bit
| Asdrubalini wrote:
| Strange, for me on Firefox 106 it is as smooth as Chrome
| (also M1 Pro MBP, 32 GB of RAM). Pokemon V doesn't lag
| either.
| lelandfe wrote:
| Yeah, dunno. Capture of the dropped frames from opening the
| V cards in Chrome 106: https://imgur.com/a/xB35JVz
| pxc wrote:
| Might be an Apple Silicon graphics issue. It's very smooth in
| Firefox on Linux on this Dell laptop (Intel integrated
| graphics) from several years ago.
| alanwreath wrote:
| same lag issue on Safari x86 (not sure if the OP was using
| arm chips) but there you have it
___________________________________________________________________
(page generated 2022-10-28 23:02 UTC)