most credit cards look boring
Customizable cards give an IKEA effect to the user with a feel of something personal that they created themselves. It adds a real magic moment for the user.
building a playground
I built a seperate playground first to explore carousel behaviour, colour, typography, card graphics. Nothing ever landed in the real build before I already knew how it was going to work.
early explorations
I prompted Claude with explicit structural constraints on geometry, angle, size rather than asking it for something that simply looked nice. Vague prompts got me 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
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 realy quick. The last ten percent took the most time, and it turns out to be the only part that anybody actually feels when they use it.
Constraints are the 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 on the panel and noticeably stronger cards. Restraint did better than 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