Wallet card

A balance card that counts up on odometer wheels like the chart cards. Switch currency to roll it; the action circles hint at what they do on hover and ripple on press.

Cards, in view, then press and hover, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/wallet-card.tsx https://motion-brew.com/r/wallet-card.tsx

One self contained file for React and Tailwind CSS: wallet-card.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { WalletCard } from "@/components/wallet-card";

export default function Page() {
  return (
    <WalletCard
      balance={12480.2}
      currencies={[
        { code: "EUR", flag: "🇪🇺", name: "Euro", rate: 1, locale: "de-DE" },
        { code: "USD", flag: "🇺🇸", name: "US dollar", rate: 1.09 },
      ]}
      actions={[
        { label: "Send", icon: "transfer", onSelect: () => openSend() },
        { label: "Add", icon: "topup", onSelect: () => openTopUp() },
        { label: "Swap", icon: "exchange" },
        { label: "Later", icon: "paylater" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
balance	number	3840.52	Balance in the first currency's units
currencies	WalletCurrency[]	USD, EUR, GBP, IDR	{ code, flag, name, rate, locale?, digits? }; the first is the base
actions	WalletAction[]	transfer, top up, exchange, pay later	{ label, icon, onSelect? } always shown
moreActions	WalletAction[]	bills, savings, mobile, invest	Revealed by "More features"; empty hides the row
color	string	"#2a2e3c"	Action circle color
duration	number	1.4	Count-up and currency roll length, seconds

More cards

Tilt card: A card that tips in 3D toward your cursor, lifts a little, and catches a glare that slides the other way.
Team morph: A presence pill that morphs into a team card: the shell reshapes while each avatar flies from the stack to its row.
Profile card: A creator profile whose pastel cover flows toward your pointer.
Bill list: Upcoming bills that rise in while the total counts up.

All animated react card components