Click to enter
Binder Bangers
A Pokémon card collection you can walk through in 3D, and a small storefront built into it.
Binder Bangers started where Wet Dry Digital left off. That project hung my artwork on walls in a 3D gallery you drift through. This one lays my Pokémon card collection out on a long felt table: every binder page becomes a framed case, and every card can be picked up, turned over, and read like a wall label. The difference is what happens next. A visitor can see what is for sale or for trade, what it costs, and send a question, an offer, or a request for close-ups straight to my inbox.
It is a working tool as much as a showcase. Behind the table sit a collection ledger, a desktop binder planner called the Catalogue, and a phone app. One switch moves between the Catalogue, where binders are built, and the Showcase, where they are shown.
One card, two views
The owner and the customer look at the same card. The owner sees what it cost, what it is worth, and the controls to put it on sale or on trade. The customer sees the card, its condition, and either a price or a plain "Not for sale". A switch in the menu shows the owner exactly what customers see.
Walking the binder
Built with Three.js. Drag to look around, pinch to zoom, or slide the Overview handle and the camera follows your finger along the cases. The play button runs a slow tour. Tap a card to fly to it; tap again to open it. The owner dresses the room: felt, frame and wall colours, a plain table, a low-poly room or a studio, and an optional glass lid.
Where the binders are built
In the Catalogue, the desktop side, each binder opens as two facing pages of nine pockets, the way it sits on a shelf. Cards are dragged into place, planned slots mark the ones still wanted, and every card carries its own label (shown here as ID-0001 and so on) that ties it to the ledger. The Match center links cards to catalog pictures. The phone app and the 3D table read these same binders, so cards appear in the order they were arranged here.
Ask about a card
Any card on show has an Ask button: Ask to buy, Offer a trade, Close-ups, or a question. The visitor leaves a name and an email or phone number, and the message lands in the owner's Inbox with an unread badge. No payment happens on the page; the sale is arranged in person or by message. Messages are private to the owner and tied to the card as published, so the price in the message is the price that was shown.
The card itself, not just the catalog picture
Catalog art shows what a card should look like. Buyers want to see the actual copy. The owner can add photos and videos to any card and straighten a scan of the front and back so it sits flat and square. Videos play with a scrub bar under the picture, so a buyer can turn the card in the light frame by frame with nothing in the way. Close-ups can go up before anyone asks, or on request.
From a QR code to the table
At a card show, a QR code opens the public showcase on anyone's phone. The first time, a short guide lights up the controls one at a time with a blinking arrow: how to switch views and filter by For sale, For trade, or Display only; how to open a card and ask about it; and where to search.
Bringing a collection in
An export from Collectr, TCGplayer, tcgpages, or any spreadsheet with card names becomes binder pages in four steps. Nothing is written until the last one.
Setting the room
The owner chooses which binders go on show and which are display only, and styles the table with presets (Classic, Card room, Velvet, Gallery) or by hand.
Tech stack
- Three.js - the 3D table, camera rail, and tour
- JavaScript, HTML, CSS - the phone app, installable from the browser, working offline
- Python and FastAPI - the Showcase server and the owner tools
- PostgreSQL - the collection ledger: every purchase, sale, and trade
- Cloudflare - hosting for the public showcase
- Pillow and ffmpeg - pictures cleaned of photo metadata; video still frames
More than 400 automated tests, including real browser runs on a phone-sized screen.
Progress log. Dated notes on what changed, published from the project's history. The code stays private.
View the log