Holographic cards

I wanted to recreate the feel of holographic trading cards on the web, using CSS masks, blend modes, and a bit of perspective.

Below is a small grid of cards using images I generated with ChatGPT. Move your mouse (or touch) to tilt and reveal the foil. Use the toggle to switch between different mask modes. For each, I've created an non-holo overlay manually, making some elements sit apart from the holographic card elements.

Caoman

Frostpup

Lantowl

Spineedle

Twolup

Kitlune

Wombatik

Holo punch 1

Holo punch 2

Holo scrap 1

Holo scrap 2

Holo scrap 3

Holo scrap 4

Holo scrap 5

Holo scrap 6

Holo scrap 7

Holo scrap 8