Building a Personalized Credit Card Experience
Your card, actually yours. A card customizer for a younger audience who own the design.
why customize cards?
I picked this idea on purpose, because it adds the IKEA effect and gives the user a feel of something that they created themselves is actually personalized. It also had the most room for motion, feel, and one real magic moment.
people want things that are personalized
Cash App's magic wand didn't invent a behavior, it productized one. People were gluing tap-to-pay cards inside homemade wands and filming it. The first drop of ten thousand sold out in hours.
early explorations for cards
I prompted Claude with explicit structural constraints on geometry, angle, size rather than asking it for something that simply looked nice. Vague prompts get you vague cards, every single time.
design your own card
Around 54 million combinations, and all of them are unique. The implicit constraints are the real design work, and the user never sees them and still gets something that feels truly personal.
ship your card animation
Thought out loud about exactly what I wanted, then let Claude ask me the questions
Built out a full PRD for the Framer Motion component before writing any code
Created a new branch and let claude hook it into the existing scaffold
Tweaked the easing and the timing by hand until the whole thing felt right
building a playground
Carousel behaviour, colour, typography, card graphics. I tested all of it in a separate playground first, so nothing ever landed in the real build before I already knew how it was going to behave.
exploring range for carousels
Apple's dock, Revolut, and a long tail of my own dead ends that went nowhere. I had to see the entire range before I could commit to a single position, even though almost none of it shipped.
What I learnt
AI got me to ninety percent in two days. The last ten percent took the rest of the week, and it turns out to be the only part of the whole build that anybody actually feels when they use it.
Constraints are invisible work. The user should never see a guardrail anywhere in the product, they should only notice that nothing they manage to make ever comes out looking bad.
Every single choice I removed made the output better. Fewer knobs sitting on the panel, and noticeably stronger cards coming out of the end of it. Restraint did better than more range.
what's next
A sequence that shows the card actually being made, rather than only being shipped
Reduced motion, built properly
Finer control over the way each individual graphic gets tweaked
More variety of micro-graphics
Sound design, because the envelope closing really does deserve a thunk to go with it
what was out of scope
Responsiveness for mobile and keyboard navigation were the trade I made for depth on the core interaction. Both are the first thing I pick back up, and neither one is a hard problem, just an unspent day.
resources and references
Josh Puckett · interfacecraft.dev, dialKit
Emil Kowalski · animations.dev, Claude Skills
Jakub Krehel · oklch.fyi
Disney · The 12 Principles of Animation