Pokemon Card Animation
deck-24abcd.netlify.app
deck-24abcd.netlify.app
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.
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)
One is a raster image
Two is an interactive 3D file
Three is HTML injection
you can stuff each into the image method
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.
I am also sure that a dedicated renderer optimized for one subject _could_ be even more efficient.
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).
But we're here now and you can do a lot more today with open web tech than was ever possible in flash.
I've never seen something this seamless and realistic built in flash.
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!
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.
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!"
But it also feels great when you can cleverly replace a piece of javascript with a CSS effect.
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
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
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?
A gyroscope-based parallax effect would complement this well, like the one I tried here: https://twitter.com/alinp32/status/1558855422131507201
Turns out the cards use the accelerometer to spin on mobile! That's a pretty nice trick, I love these animations!
105.1.0 (Build #1051020), b1e7cbeeb+ AC: 105.0.7, e2aeb82d54 GV: 105.0-20220922052055 AS: 94.1.0
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
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.
> 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?
0 - https://github.com/simeydotme/pokemon-cards-css/blob/main/st...
(But yes, this could certainly use a MIT or similar.)
That may date me a bit, but that also means there's a place in my heart for pure css.
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.
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.
There is an online version of the TCG, that might do something for you (disclaimer: it didn't do much for me).
Looks cool tho