Digital Trading Cards

From April Fool’s Gag to Live Product

In April 2025, I posted a purely conceptual, static graphic on Instagram: a satirical trading card game mock-up designed as an April Fool’s joke for my run club, the Hash House Harriers. The post went viral within the subculture, generating immediate high-intent demand for personalized physical cards.

Exactly one year later, I turned the joke into a reality. Moving past static design constraints, I architected and deployed a live, fully functional web utility that allows users to translate their personal metrics into custom, print-ready collectible assets.

Meet Hash*t Trading Cards: https://antirunningrunning.club/

Role:
Art Direction, Graphic Design, Branding

Client:
Personal Work

How I Built It aka I Learned to Vibe Code

I built the entire web app over the course of a single week using a "vibe coding" workflow. Instead of writing the frontend from scratch, I fed my simplied, SVG card mockups straight out of Adobe Illustrator directly into Google AI Studio. Using the visual mockups as the source of truth, I used with Gemini to generate the core HTML, CSS, and vanilla JavaScript logic. The process was a rapid, seven-day loop of testing, squashing bugs, adjusting layout files, and tweaking the code until the logic matched the exact look and feel of the original design. As a surprise and delight moment, the stats on the back of the card utilizes over 20 pre-made options that are randomly used so each card feels random and unique.

Left: Early UI prototype solving canvas export issues. Right: Final production dashboard with optimized layout logic and custom input fields.

Digital Fun and Usable Exports

The hardest (and most fun) part was making the cards look good in two totally different places: on a phone screen and someone's home printer.

Movement: To make the digital card feel like a real object, I added a 3D tilt effect. On desktop, it follows your mouse. On mobile, I hooked into the phone’s gyroscope so the card physically tilts as you move your device.
The Flip: I added a simple tap-to-flip interaction using hardware-accelerated CSS, so users can quickly switch between the front of the card and the stats on the back.
Printing: I had to get the HTML card to export as both a clean PNG and a card-sized print-ready PDF. Since everyone’s stats and names are different lengths, different devices render fonts differently, and dozens of other issues I ran into, I spent most of my time tweaking the CSS bounding boxes so the text would never overflow or cut off, no matter what someone typed. The goal was to make sure the final downloads were ready to print and trim without any manual layout fixes.

Card Quest

Trainers Hate Him