23 ms·
Pokemon Card Animation
- batmansmom1 4y agoSince when did so many special cards get introduced wow! I remember back in the day EX was the coolest type of card around
- extasia 4y agoVery cool
- mrwizrd 4y agoThese are absolutely gorgeous. Very well done.
- dom96 4y agowow, 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.
- dwrodri 4y agoSomething 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 4y agoGetting 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 4y agoEspecially 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 4y agoReally cool, a bit glitchy on iOS/safari, but what’s new…
- coolca 4y agoWow, makes me want to collect them. I think that many card websites would be interested in this amazing animations.
- 0xCAP 4y agoTook 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!
- jeroenhd 4y agoIt's deceptively easy, actually: https://github.com/simeydotme/pokemon-cards-css/blob/main/static/cards.css 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/src 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.
- skavi 4y agoAre 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.
- Aeolun 4y agoI 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).
- mrdoob2 4y agoDefinitely not more efficient. The only thing JS would need to do here is updating a 4x4 matrix. Everything else would be in the GPU.
- sktrdie 4y agoCSS 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.
- imwillofficial 4y agoI clicked on it and it did weird flip things seemingly random. Looks cool tho
- jeroenhd 4y agoI 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 4y agongl I think they are broken for me on Firefox for Android. Glad they are working for you
- vanous 4y agoWorking 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
- MitPitt 4y agoWhen clicked, they do look a bit blurry up-close. Very cool otherwise and hopefully easily fixable.
- pell 4y agoTruly brilliant. I'd love to know more about how this was achieved.
- javajosh 4y agoThe github repo[0] has no license - I didn't realize github allowed that. 0 - https://github.com/simeydotme/pokemon-cards-css/blob/main/static/cards.css https://github.com/simeydotme/pokemon-cards-css/blob/main/st...
- lucideer 4y agoWhy would it not allow that? Github has never been exclusively for open source software.
- nness 4y agoI 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.)
- CGamesPlay 4y agoVery 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.
- lelandfe 4y agoYeah – 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 4y agoStrange, 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 4y agoYeah, dunno. Capture of the dropped frames from opening the V cards in Chrome 106: https://imgur.com/a/xB35JVz https://imgur.com/a/xB35JVz
- pxc 4y agoMight 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 4y agosame lag issue on Safari x86 (not sure if the OP was using arm chips) but there you have it
- deleted 4y ago[deleted]
- 4y ago
- HanClinto 4y agoThis is absolutely incredible!
- swayvil 4y ago
- tiagod 4y agoThis kind of thing is the learning exercise that sparks innovative ideas. I think you shouldn't dismiss them as useless dead-ends...
- swayvil 4y ago5 purely defensive statements and a flag-censor. You guys aren't big on self-reflection.
- tiagod 4y agoUnless you're trolling, I don't understand what would be an acceptable response to you. We all spend some of our time in things that don't bring immediate returns to humanity, even you spent some time writing your quick dismissal and replying to me. I didn't flag anyone, in fact I'll usually vouch for flagged content. But I'm curious what you think would be a non-defensive statement (and what does that even mean?). Also, some of the replies seemed genuinely curious at what makes you have this strong opinion and you refused to elaborate...
- bmalicoat 4y agoPeople 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 4y ago<3
- daemon-guide 4y agowe 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
- XCSme 4y agoThey 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).
- thrown_22 4y agoDoes 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 4y agoBest I could find: https://www.nisshametallizing.com/en/how-holographic-paper-made 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.
- tiagod 4y agoHonestly, this is wizardry. I'll be back after figuring out how it works
- diceduckmonk 4y agoIt’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 4y agoI 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 https://gaga.lol
- snakeboy 4y agoI went to try it out, but it looks like your website no longer works? (The gifs don't change in response to new prompts)
- grahamg 4y ago
- timnetworks 4y agoI 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.
- deleted 4y ago[deleted]
- davej 4y agoLinear use a similar effect on their Customers page when you hover over their customer's cards: https://linear.app/customers https://linear.app/customers
- wokwokwok 4y agoOnly vaguely related, but the site (https://pokemontcg.io/ 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 Pokémon 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 4y agoI don't think Nintendo is very involved in the TCG. The Pokémon 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 Pokémon Company.
- deleted 4y ago[deleted]
- darkwater 4y agoI 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).
- driscoll42 4y agoThis 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 4y agoI had no idea there was a sequel to the GB Pokémon 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).
- w-ll 4y agoThis 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 4y agoreproduced, though not with all cards, just ones I'd clicked on already.
- cypherpunks01 4y agoWhy 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)
- im3w1l 4y agoI 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.
- vermarish 4y agoIt 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.
- yieldcrv 4y agothis 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 4y agoHow can I about this to put your words to reality
- yieldcrv 4y agoI’m the biggest fan of the third option, basically you are relying on nft image viewers being so universally compatible with everything that can be returned from the nft getImage protocol standards One is a raster image Two is an interactive 3D file Three is HTML injection you can stuff each into the image method
- CleanCoder 4y ago
- dcchambers 4y agoWow. This is amazing.
- Arch-TK 4y agoLooks nice but runs extremely slowly.
- rtkwe 4y agoWhat's your device it's quite smooth on my desktop.
- iamwil 4y agoI 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.
- dominucco 4y ago
- Omatic810 4y agoThis is spectacular. Well done.
- alin23 4y agoLooks 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 https://twitter.com/alinp32/status/1558855422131507201
- c4ptnjack 4y agoYour work is incredible, thanks for sharing! Mind boggled by the swift card design you did and posted next in the Twitter thread. Im mind boggled by how realistic the 3d effect looks using the gyroscope and tasty design.
- nsxwolf 4y agoThis really goes all out. I really love all the different foil/holo effects.
- TGRush 4y agoVery nice! Though, it also turned my phone into an oven
- par 4y agomy 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!" :)
- n0t3ths81 4y ago
- bjarneh 4y agoI struggle to place elements where I want them on a website with CSS.. hmm
- vsnf 4y agoI'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.
- petarb 4y agoWizards of the Coast needs to do this for Magic cards, especially with all of the new releases that have new types of foils
- petarb 4y agoThe cards keep flickering on my phone - latest iOS
- riskycodes 4y agoThis is really cool!
- halgir 4y agoThis 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.
- elmimmo 4y agoPanini 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 https://paninimegacracksnft.com/token/wnzq
- b3nji 4y agoThis is beautiful, thank you.
- rawoke083600 4y agoVery Cool ! Svelte Rocks :D
- antomeie 4y agoCool, but glitches like crazy on Safari :(
- subroutine 4y agoAlso glitches like crazy on Chrome for iOS.
- tiborsaas 4y agoThat's because Chrome for iOS uses Safari under the well... chrome.
- gynther 4y agoWhat the fuck. This is so good
- Double_a_92 4y agoI 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.
- kuu 4y agoThis looks fantastic!
- FailMore 4y agoWOW!
- aenario 4y agoYou 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
- busyboy 4y agoGreat work
- davide_v 4y agoAMAZING.
- solardev 4y agoWhat is it supposed to look like? On Safari the cards just spin around and pop up and down over some sort of tiny background layer
- Aleksdev 4y agoVery cool! It seems to have a flicker effect on my iPhone. This effect could be used for other things as well not just cards.