WalletCards

3D wallet with fanning cards

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 ·

3D wallet with fanning cards