Wallet Card là pattern hiển thị nhiều thẻ thanh toán trong một “ví” gọn gàng. Khi idle, chỉ phần trên của thẻ peek ra khỏi miệng ví — gợi ý rằng còn nội dung ẩn bên trong. Tap vào ví, các thẻ bung ra phía trên với góc xoay nhẹ, tạo cảm giác vật lý như rút thẻ ra khỏi ví thật.

Prototype

Tap vào ví để mở, tap lại để đóng.

Cấu trúc

Pattern gồm ba lớp xếp chồng:

1. Wallet background — khối màu tối, bo góc lớn, là “thân” ví
2. Cards — các thẻ xếp chồng bên trong, chỉ phần đầu nhìn thấy
3. Front part — hình SVG phủ lên phần dưới, tạo “miệng ví” với đường cong đặc trưng

Khi mở, cards animate bằng transform: translate() rotate() — không thay đổi layout, chỉ thay đổi visual layer.

Chi tiết animation

Hai thẻ animate khác nhau để tạo cảm giác chiều sâu:

• Razorpay (thẻ trên): bay lên 194px, xoay 10° — ra trước, nghiêng nhiều hơn
• PayPal (thẻ dưới): bay lên 42px, xoay 5° — ra sau, nghiêng ít hơn, có delay 40ms

Easing dùng spring cubic-bezier(0.34, 1.15, 0.64, 1) để tạo hiệu ứng nảy nhẹ khi thẻ mở ra.

Khi nào nên dùng

• Ứng dụng ví hoặc fintech cần quản lý nhiều thẻ/tài khoản
• Dashboard cần hiển thị balance tổng mà không chiếm quá nhiều diện tích
• Bất kỳ context nào cần “progressive disclosure” với cảm giác vật lý rõ ràng

Khi nào không nên dùng

• Người dùng cần so sánh các thẻ song song → dùng list hoặc grid
• Hơn 3-4 thẻ → stack quá sâu, khó identify từng thẻ
• Context không có interaction (static display) → animation gây distraction