Pokemon Card Animation

It really does make them feel that much more collectible. I don&#x27;t know much about NFTs, but this kind of pseudo-3D experience ought to be standard for browsing digital collectible art.<p>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.

Took me a while to REALLY realize this is all CSS no WebGL. You just blew my mind... and ruined my weekend: I&#x27;m not leaving home untilI learn this sort of wizardry!

It’s also really refreshing to see a project done for the love, the passion, the fun.<p>There was a question the other day about how come people, especially programmers, don’t have as much hobbies or frivolous projects anymore.<p>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

Wow, makes me want to collect them. I think that many card websites would be interested in this amazing animations.

This is really cool but I noticed something weird or a bug.<p>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.<p>Is this some delay between events for css or js thats adding maxV?

Looks great, I&#x27;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&#x27;m thankful I don&#x27;t have to do that nowadays.<p>A gyroscope-based parallax effect would complement this well, like the one I tried here: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;alinp32&#x2F;status&#x2F;1558855422131507201" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;alinp32&#x2F;status&#x2F;1558855422131507201</a>

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.

I thought I was doing something wrong or that the cards were broken in Firefox for Android.<p>Turns out the cards use the accelerometer to spin on mobile! That&#x27;s a pretty nice trick, I love these animations!

Really cool, a bit glitchy on iOS&#x2F;safari, but what’s new…

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

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&#x27;s working it looks great! Would make a good module in a card game engine.

wow, these look amazing.<p>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&#x27;ve wondered whether they aren&#x27;t images at all but recreations of the cards in CSS as well.

Only vaguely related, but the site (<a href="https:&#x2F;&#x2F;pokemontcg.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;pokemontcg.io&#x2F;</a>) that the high resolution card images are from is very big and fancy for something that is:<p>&gt; This website is not produced, endorsed, supported, or affiliated with Nintendo or The Pokémon Company.<p>...which surprises me, because in general Nintendo are Not Amused by people making money off of their IP... but, it&#x27;s been around for a while, so I guess they don&#x27;t care?

Linear use a similar effect on their Customers page when you hover over their customer&#x27;s cards: <a href="https:&#x2F;&#x2F;linear.app&#x2F;customers" rel="nofollow">https:&#x2F;&#x2F;linear.app&#x2F;customers</a>

Something like this would look amazing on Scryfall or Gatherer. I&#x27;m not sure how you&#x27;d go about selling this to them, but I think the Magic: the Gathering world would be better off for it.

Since when did so many special cards get introduced wow! I remember back in the day EX was the coolest type of card around

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.

I&#x27;m a little surprised that Ancient Mew, one of the original uniquely holographic cards, isn&#x27;t represented here. It was very unlike any other card seen when it was handed out at the first movie premiere.

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.<p>[0]: <a href="https:&#x2F;&#x2F;paninimegacracksnft.com&#x2F;token&#x2F;wnzq" rel="nofollow">https:&#x2F;&#x2F;paninimegacracksnft.com&#x2F;token&#x2F;wnzq</a>

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.

Wizards of the Coast needs to do this for Magic cards, especially with all of the new releases that have new types of foils

The github repo[0] has no license - I didn&#x27;t realize github allowed that.<p>0 - <a href="https:&#x2F;&#x2F;github.com&#x2F;simeydotme&#x2F;pokemon-cards-css&#x2F;blob&#x2F;main&#x2F;static&#x2F;cards.css" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;simeydotme&#x2F;pokemon-cards-css&#x2F;blob&#x2F;main&#x2F;st...</a>

I stopped playing before all the expansions (there&#x27;s a secret gold rare? is best!) and it&#x27;s really cool to be able to &#x27;handle&#x27; a card to see the cartwheel effect.<p>That may date me a bit, but that also means there&#x27;s a place in my heart for pure css.

You might have some success selling this &quot;technology&quot; to wedding invitation printers and similar websites. They always have trouble demonstrating the various paper options &#x2F; partial glossy &#x2F; metalic cut out options

Does anyone know how the foils work on physical cards?<p>I know it&#x27;s some type of diffraction grading but I have no idea how the foil is made, where you can buy it, etc. I&#x27;m sure there&#x27;s a nice in depth post somewhere explaining it all.

I spent a bit of time doing this effect in CSS, though not to this degree. Quickly abandoned it when I couldn&#x27;t find a way around the glitchy safari and sometimes chrome implementations of this effect.

Honestly, this is wizardry. I&#x27;ll be back after figuring out how it works

This just makes me realize how long it&#x27;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.

Truly brilliant. I&#x27;d love to know more about how this was achieved.

Why are the coolest web demos always using Pokemon? Anyone remember the pokedex.org html5 progressive web app? (Sadly doesn&#x27;t seem to work properly for me anymore)

Very cool! It seems to have a flicker effect on my iPhone. This effect could be used for other things as well not just cards.

I clicked on it and it did weird flip things seemingly random.<p>Looks cool tho

What 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

The cards keep flickering on my phone - latest iOS

Cool, but glitches like crazy on Safari :(

When clicked, they do look a bit blurry up-close. Very cool otherwise and hopefully easily fixable.

What the fuck. This is so good

This really goes all out. I really love all the different foil&#x2F;holo effects.

my first reaction to this was &quot;cmon, wow, y&#x27;all, we need to stop, this is too good&quot;. And then immediately after my second reaction was &quot;we need to bake this into ALL the games!&quot; :)

I struggle to place elements where I want them on a website with CSS.. hmm

Very nice! Though, it also turned my phone into an oven

These are absolutely gorgeous. Very well done.

Looks nice but runs extremely slowly.

This is spectacular. Well done.

This is beautiful, thank you.

This is absolutely incredible!

Very Cool ! Svelte Rocks :D

This looks fantastic!

Wow. This is amazing.

This is really cool!

AMAZING.

Great work

WOW!

Very cool