First just wanted to say amazing work here, it really is some next-level stuff compared to the stuff you usually see out there. It was so beautiful I had to donate 🔥 🔥

I am trying to get the demo setup locally, all is working fine out of the box. Except...the actual holo-effects are not loading because the mask files are missing -- because I am having issues getting the img_scrape.sh working.

It seems like there is a missing REMOTE_JSON parameter that needs to be given to the script. Potentially from malie.io? Not sure. I found this old file in this repo, but seems to only direct links to the mask images, and not the foils? I did not see this parameter mentioned anywhere else in the code. It is def possible I missed it though!

The script also seems to reference a local copy of Real-ERSGAN that we may want to mention as well.

I am happy to contribute a PR back to the repo adding some instructions to the ReadMe, but just need some clarification on the REMOTE_JSON stuff above.

Thanks dude!

When I run it locally, I can't seem to achieve a similar lighting effect as the official website, why is that?

No idea why, but I assume it's related to the SPA nature (all code is pasted in by JS, and thus the browser thinks all images are in Viewport at time of JS execution?

Eitherway, it's causing a lot of bandwidth and issues, so I need to write custom lazyloading. again. eurgh.

I am trying to study your code to see if I can do something similar on an experiment I'm doing

What would be the bare minimum to test and keep on developing outside of this module ?

If I get the /card base.css and for example, radiant-holo.css with the correspoding images in /img, how does the card html needs to be in order to get this bare minimum as working example ? Also, would this work without mouse interaction since the source of light seems to be guided by the mouse ? I would like to see if i can do something similar but rotating the object instead of using a mouse

Thanks !

Video demonstration:

Having had the tab open in the background for a while, opening the tab up again makes the top card (Morpeko) spin uncontrolably for a while. My assumption is that it is catching up with all of the mouse motion that has happened since the tab was last open but I could be wrong.

I've seen this in Firefox (106.0.3), Safari (16.1), and Chrome (107.0.5304.87).

Why is the index.html blank when I open it in live sever in vscode?
Does anyone have experience?

The current code structure is difficult to be used by other projects ~

I notice when I click on the cards it flips and briely I see the back of the cards. How can I start of with the cards like this?

The cards seems to be all janky on mobile sites :/

The effects look great!

However, on Safari 16.1 on Mac, it glitches and alternates rapidly between backside and frontside as I move the cursor:

It occurs also when the card is expanded by tapping, so it's not isolated to thumbnails only.

On the same machine, Chrome and Firefox render perfectly.

As shown in the figure, the Card are always blocked by the ones with higher order. Can you tell me why?

There's no scenario where this repo will be available on NPM as an installable module.

This is a demo of the unique and cool holographic effects of Pokemon Cards.
So by that measure the CSS, JS and Svelte files in this repo are subject to the following points;

• They will not be available on NPM for you to use in your own projects
• The CSS/JS are dependent for the effect to work, and thus are not separable
• The Svelte files will not be converted to [insert your framework of choice, probably react]
• There is no scenario where this code is useful for your application
• You will need to do significant work to make this useful to your use-case

With that said, I would like at some point, to build a generator for the holographic effect, and an npm module for hoverable-cards Svelte Component (without all the extra demo-specific stuff). But that is subject to my time and energy. I already have a branch for it, so please don't offer to build it for me.

These Pokemon Holo effects are incredibly heavy and terrible for website performance.

Just because I've shown that you can do it in CSS, doesn't mean everyone should do it. They are better left as a demonstration and example and not put on your NFT website. These effects will not take your tokens to the 🌔 .

Do not come back here complaining that your phone exploded, or your website crashed. This is a real possibility.

Browser performance for 3d transforms and filters/blends is severely lacking. I've done the best I can do optimise this demo and not cook your phone, but if you apply them to your own application I cannot say how diligent you will be.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec.

Is anyone else in the same situation as me? How do I fix this? #

I noticed a small issue on chrome browser
When the card is clicked, the search bar display on top of it.
So when the card is active should change its z-index.

I would like to know if it would be possible to be use in a theme project

Currently, the test is available in vue2. Please use

npm i vue-pokemon-cards-css

library (https://github.com/zzy-life/components-pokemon-cards-css)
Thanks again (https://github.com/Maurier/vue-pokemon-cards-css) Vue implementation

Maybe this is a dumb question, but I'm pretty new to css in general.

I loaded the global.css and pokemon.css stylesheets into my react app, and I believe I followed the class names correctly but I'm not seeing the styles being applied to my images.

I would be happy to contribute to a getting started guide if I could get this working correctly.