About WalletCards
An interactive 3D wallet with up to 3 stacked payment cards that fan out on hover. Balance reveals with an animated eye toggle. Cards slide into the pocket on viewport entry with staggered timing. Individual card hover scales up and reveals the full card number. Built for fintech dashboards, payment interfaces, and portfolio showcases that need a premium interactive card experience.
Features
Up to 3 stacked payment cards inside a wallet pocket
Hover fans cards out with rotation and translation
Wallet lifts slightly on hover for depth effect
Balance display hidden by default — reveals on hover
Animated eye icon toggles between hidden and visible state
Individual card hover scales up and rotates to center
Full card number reveals on individual card hover
Entry animation — cards slide into pocket with staggered timing on viewport entry
Toggle hover effects and entry animations independently
Configurable entry animation duration and shadow strength
30+ property controls organized into logical sections
React.memo and useMemo for performance optimization
startTransition for React 18 state updates
Static preview in Framer canvas — no animation during export
Accessible — ARIA labels on wallet, cards and interactive elements
No dependencies
Property Controls
Cards Each of the 3 cards configures independently.
Brand name · Accent color · Background color · Text color
Label and value pairs · Last 4 digits · Full card number
Chip tint · Label color
Wallet Styling
Wallet back color · Top and bottom border radius separately
Pocket fill and stroke colors · Stroke width · Dash pattern
Balance
Hidden text — default asterisks
Actual balance amount · Caption text
Hidden state color · Revealed state color
Typography
Separate font controls for brand name, labels, values, card numbers, balance and caption
SEO Keywords
framer wallet component · framer payment card · framer card stack · framer wallet UI · framer fintech component · framer credit card ·