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.
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
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
Animation
Hover effects toggle · Entry animation toggle
Entry animation duration · Shadow strength
Layout
Fixed · Auto · Fit content sizing modes
CSS 3D transforms for card fan and wallet lift effects
Staggered entry animation via viewport detection
useInView for entry animation trigger
React.memo prevents unnecessary re-renders
useMemo for expensive style calculations
startTransition for non-blocking state updates
Static renderer detection shows preview without animations
ARIA labels and semantic role attributes throughout
Card 1 — Stripe · Purple accent
Card 2 — Wise · Green accent
Card 3 — PayPal · Blue accent
Financial dashboards · Payment management interfaces · Fintech product portfolios · Interactive card selection UI · Account overview sections · Banking app mockups · Wallet app prototypes · SaaS billing pages
SEO Keywords
framer wallet component · framer payment card · framer card stack · framer wallet UI · framer fintech component · framer credit card · framer payment UI · framer card animation · framer wallet animation · framer 3d card · framer banking component · framer card hover · framer finance component · framer code component · framer interactive card
Hamim Reza
