Wallet Card Stack

Usage

import { WalletStack } from '@wdzyi/ui';

<WalletStack
  cards={[
    { name: 'Everyday', type: 'Debit', balance: 12480.5, number: '•••• 4821', holder: 'Maya Chen', face: 'graphite' },
    {
      name: 'Savings',
      type: 'Debit',
      balance: 48902.17,
      number: '•••• 5502',
      holder: 'Maya Chen',
      face: 'foil',
      details: [{ label: 'Expires', value: '03/29' }],
    },
  ]}
  format={{ style: 'currency', currency: 'AUD' }}
  locale='en-AU'
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

cardsWalletStackCard[]

Front first. Each has a name, a type such as Debit, a balance, its number as printed, the holder, a brand, a face, which is graphite, foil or chalk, and rows for its details. Three sample cards by default.

front, defaultFrontnumber = 0

Which card is at the front, by its place in cards, when you hold it, or where it starts when the wallet holds it.

onFrontChange(front: number) => void

Called with the place of a card pressed from behind.

open, defaultOpenboolean = false

Whether the front card’s details are open, when you hold it, or where it starts. A card coming forward shuts them.

onOpenChange(open: boolean) => void

Called when the front card or Card details is pressed, and when a card coming forward shuts them.

formatIntl.NumberFormatOptions = { style: 'currency', currency: 'USD' }

How to write the balance. Only its digits roll.

localestring = 'en-US'

Whose commas and decimal points to use.

classNamestring

Added to the wallet. It’s 320px wide at most, and narrows with the space it’s in.

Notes

• Adapted from Jakub Antalik’s Wallet Card Stack on the transitions.dev community, with its timings kept.
• Cards move over 400ms on a strong ease-out. Each one behind peeks 40px above the next, and while the details are open they tuck to 8px and step back 5% a card, as the stack’s height eases over 300ms and the details open in 250ms.
• Each digit of the balance rolls the short way round in 327ms, 19ms after the one on its left, blurred along its reel by an SVG filter that eases off as it slows, while the card’s name swaps in 150ms. Screen readers hear the new balance.
• The cards are buttons: one behind comes forward, and the front one opens its details, as Card details does. With a mouse, a sheen slides across a card over 600ms, and one behind lifts 4px.
• With reduced motion, everything goes straight to where it’s going, and the balance just changes.