A few years ago I was pretty addicted to Marvel Snap, which is such a silly thing to be addicted to, but that compulsion to play just one more game is real and powerful. Thankfully, at some point I knew I needed to delete the app, and I just stopped. To be reductive and paraphrase something someone said in The Bear (Bob Odenkirk’s character maybe?): “To break patterns, you have to break patterns.” I don’t remember the exact context in the show but I can only assume this was also in reference to some Marvel Snap-related story arc where Olivia Colman is irate that they nerfed Galactus.

While I’m relieved to no longer be playing I can’t help but admire the impeccably designed gameplay and art direction which includes so many illustrations and creative interpretations of Marvel characters from talented artists. I found Dan Hipp’s art style to be especially compelling—uniquely colorful and playful. His Venom card in particular is just so cool looking:

I’d been thinking for a while it would be neat to replicate this card and its effects, at least in part, on the web with CSS and JS—even if the outcome is not nearly as impressive as in the actual game. And around the same time, this site by Simon Goellner made the rounds, demoing some super nifty holographic and glare hover effects on Pokémon cards. So I did some tinkering and my result isn’t nearly as evocative as the original but I’m satisfied with it as a proof of concept.

The card effect is achieved with four CSS gradient layers: a conic-gradient foil in color-dodge, a scanline holo grid created with a repeating-linear-gradient, a radial glare, and an animated inset edge glow—stacked over the art and all clipped to the same mask. Then GSAP is used to animate custom properties that those gradients read, controlling the idle bob, hover tilt, and 540° card flip. That's an overly terse explanation of the effect, but there's a demo on CodePen to poke at (I made this in React for my site but tried to port it to VanillaJS as faithfully as possible).

Ultimately this was an excuse to finally create a reusable HoloCard component I could hand any images I wanted, to make as many weird cards as my heart desires. Like this infamous curio: a 1990 NBA Hoops card of Mark Jackson “featuring” the Menendez brothers sitting courtside:

What an odd thing to exists. I’ll be dreaming up other weird ones.

🃏