{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"wallet-cards","type":"registry:component","title":"Wallet cards","description":"Tap the cards peeking out of the home screen and the front one lifts into a carousel as the page changes around it; close it and it drops back into the stack.","author":"Yash Bavadiya ","dependencies":["motion"],"registryDependencies":["utils"],"files":[{"path":"components/wallet-cards.tsx","type":"registry:component","content":"\"use client\";\n\nimport {\n createContext,\n use,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\nimport {\n AnimatePresence,\n LayoutGroup,\n motion,\n useScroll,\n useTransform,\n type MotionValue,\n} from \"motion/react\";\nimport { usePreviewPlay } from \"@/lib/preview-play\";\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\";\nimport { cn } from \"@/lib/utils\";\n\n// After Benji Taylor's money app (https://x.com/benjitaylor): the cards wait\n// in a stack peeking out of the home screen. Tap them and the front one lifts\n// out and straightens into a carousel while the page around it changes over;\n// close it and whichever card you were on drops back to the front of the\n// stack.\n\ntype CardId = \"virtual\" | \"physical\";\n\nconst CARDS: {\n id: CardId;\n name: string;\n last4: string;\n number: string;\n cashback: { lifetime: string; week: string };\n days: { day: string; rows: Txn[] }[];\n}[] = [\n {\n id: \"virtual\",\n name: \"Virtual card\",\n last4: \"4791\",\n number: \"4791 2286 0553 4791\",\n cashback: { lifetime: \"$96.34\", week: \"$1.53\" },\n days: [\n {\n day: \"5 Oct\",\n rows: [\n {\n name: \"Bluestone Lane\",\n kind: \"Coffee\",\n amount: \"$12.40\",\n back: \"$0.37\",\n },\n { name: \"Uber\", kind: \"Travel\", amount: \"$23.80\", back: \"$0.71\" },\n ],\n },\n {\n day: \"4 Oct\",\n rows: [\n { name: \"Figma\", kind: \"Software\", amount: \"$15.00\", back: \"$0.45\" },\n ],\n },\n ],\n },\n {\n id: \"physical\",\n name: \"Physical card\",\n last4: \"8456\",\n number: \"5214 9031 7720 8456\",\n cashback: { lifetime: \"$41.20\", week: \"$4.21\" },\n days: [\n {\n day: \"3 Oct\",\n rows: [\n {\n name: \"Whole Foods\",\n kind: \"Groceries\",\n amount: \"$86.20\",\n back: \"$2.59\",\n },\n { name: \"Shell\", kind: \"Fuel\", amount: \"$54.10\", back: \"$1.62\" },\n ],\n },\n {\n day: \"1 Oct\",\n rows: [\n {\n name: \"Blue Bottle\",\n kind: \"Coffee\",\n amount: \"$6.75\",\n back: \"$0.20\",\n },\n ],\n },\n ],\n },\n];\n\ntype Txn = { name: string; kind: string; amount: string; back: string };\n\n// Screen sizes, in px. The screen gives up width on a narrow phone, and\n// everything card-shaped is worked out from whatever width it has, so the\n// carousel stays centred and the flight lands true at any size.\nconst SCREEN_W = 360;\nconst SCREEN_H = 740;\n// Room either side of a card in the carousel, where the next one peeks.\nconst SIDE = 32;\nconst GAP = 12;\n\ntype Geometry = {\n cardW: number;\n cardH: number;\n step: number;\n // Whether the card can fly between the two screens. Not when the whole\n // thing is drawn scaled down (an index card): the flight is measured on\n // screen but moved in unscaled pixels, so it would land in the wrong\n // place. Scaled, the screens simply cross-fade.\n fly: boolean;\n};\nfunction geometry(width: number, fly = true): Geometry {\n const cardW = width - SIDE * 2;\n // A real card's proportions.\n return { cardW, cardH: Math.round(cardW / 1.6), step: cardW + GAP, fly };\n}\nconst Geo = createContext(geometry(SCREEN_W));\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n// The card's flight: long enough to follow, with a little settle.\nconst FLIGHT = { type: \"spring\", visualDuration: 0.55, bounce: 0.1 } as const;\n// When a flight has landed for good, overshoot included, in ms.\nconst LANDED = 750;\n\nexport function WalletCards({ className }: { className?: string }) {\n const reduceMotion = useReducedMotion();\n const play = usePreviewPlay();\n const group = useId();\n const [own, setOwn] = useState<\"home\" | \"cards\">(\"home\");\n const [show, setShow] = useState<\"home\" | \"cards\">(\"home\");\n const view = play ? show : own;\n const [active, setActive] = useState(0);\n const scroller = useRef(null);\n const setView = play ? setShow : setOwn;\n const screen = useRef(null);\n const [width, setWidth] = useState(SCREEN_W);\n const [scaled, setScaled] = useState(false);\n const geo = geometry(width, !scaled);\n\n // Layout width, not on-screen width: in a scaled index card the two\n // differ, and the cards are laid out in the former. The difference is\n // also how it knows it's been scaled.\n useLayoutEffect(() => {\n const el = screen.current;\n if (!el) return;\n const measure = () => {\n setWidth(el.offsetWidth);\n const drawn = el.getBoundingClientRect().width;\n setScaled(Math.abs(drawn / el.offsetWidth - 1) > 0.02);\n };\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n const flight = reduceMotion ? { duration: 0 } : FLIGHT;\n\n // The card's show: open the cards, swipe across, close on the other one.\n useEffect(() => {\n if (!play) return;\n const timers: ReturnType[] = [];\n let round = 0;\n const loop = () => {\n const to = round % 2 === 0 ? 1 : 0;\n timers.push(setTimeout(() => setShow(\"cards\"), 700));\n timers.push(\n setTimeout(\n () =>\n scroller.current?.scrollTo({\n left: to * geometry(scroller.current.offsetWidth).step,\n behavior: \"smooth\",\n }),\n 2000,\n ),\n );\n timers.push(setTimeout(() => setShow(\"home\"), 3400));\n timers.push(\n setTimeout(() => {\n round += 1;\n loop();\n }, 4600),\n );\n };\n loop();\n return () => {\n timers.forEach(clearTimeout);\n setShow(\"home\");\n };\n }, [play]);\n\n const front = CARDS[active];\n const back = CARDS[1 - active];\n\n return (\n \n \n {\n if (e.key === \"Escape\" && view === \"cards\") setView(\"home\");\n }}\n >\n \n
setView(\"home\")} />\n\n \n {view === \"home\" ? (\n \n setView(\"cards\")}\n />\n \n ) : (\n \n \n \n )}\n \n\n \n \n \n \n );\n}\n\n// Content that isn't a card leaves and arrives around the card's flight.\nconst leaveUp = (reduce: boolean) =>\n reduce\n ? { opacity: 0, transition: { duration: 0.12 } }\n : {\n opacity: 0,\n y: -28,\n filter: \"blur(4px)\",\n transition: { duration: 0.24, ease: EASE_OUT },\n };\nconst arrive = (reduce: boolean, i: number) => ({\n initial: reduce ? { opacity: 0 } : { opacity: 0, y: 26, filter: \"blur(4px)\" },\n animate: {\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\",\n transition: {\n duration: 0.42,\n ease: EASE_OUT,\n delay: reduce ? 0 : 0.14 + i * 0.045,\n },\n },\n exit: reduce\n ? { opacity: 0, transition: { duration: 0.12 } }\n : {\n opacity: 0,\n y: 24,\n filter: \"blur(4px)\",\n transition: { duration: 0.2, ease: EASE_OUT },\n },\n});\n\nfunction Home({\n front,\n back,\n flight,\n reduceMotion,\n onOpen,\n}: {\n front: CardId;\n back: CardId;\n flight: object;\n reduceMotion: boolean;\n onOpen: () => void;\n}) {\n const { cardW, cardH, fly } = use(Geo);\n const fade = (i: number) => ({\n initial: reduceMotion\n ? { opacity: 0 }\n : { opacity: 0, y: -24, filter: \"blur(4px)\" },\n animate: {\n opacity: 1,\n y: 0,\n filter: \"blur(0px)\",\n transition: {\n duration: 0.4,\n ease: EASE_OUT,\n delay: reduceMotion ? 0 : 0.12 + i * 0.04,\n },\n },\n exit: leaveUp(reduceMotion),\n });\n\n return (\n
\n \n

\n Total balance\n \n

\n

\n $1,279.97\n

\n

Your money is protected

\n \n\n \n {ACTIONS.map(({ label, d }) => (\n \n \n {label}\n \n ))}\n \n\n \n
\n

Earnings

\n \n \n
\n
\n

Activity

\n \n \n
\n \n\n {/* The stack: both cards, the one you were last on in front. */}\n \n \n {/* Only the front card travels. The one behind it doesn't fly in\n from wherever it sat in the carousel (off screen, as often as\n not); it settles in behind the stack as the front card lands. */}\n \n \n \n \n \n \n \n \n\n {/* The rest of home slides in over the bottom of the stack. */}\n \n
\n \n \n \n \n \n Set up direct deposit\n \n \n Get paid up to two days early\n \n \n
\n
\n \n \n
\n \n
\n );\n}\n\nfunction Cards({\n active,\n onActive,\n scroller,\n flight,\n reduceMotion,\n}: {\n active: number;\n onActive: (i: number) => void;\n scroller: React.RefObject;\n flight: object;\n reduceMotion: boolean;\n}) {\n const { cardW, cardH, step, fly } = use(Geo);\n const { scrollX } = useScroll({ container: scroller });\n const card = CARDS[active];\n // While the card is flying in, the carousel can't be a scroll box: a\n // scroll box clips, and would slice the card mid-flight. So it starts as\n // a plain row shifted to the card you opened on, and becomes scrollable,\n // at that same spot, once the card has landed.\n const [settled, setSettled] = useState(reduceMotion);\n const [opening] = useState(active);\n\n useEffect(() => {\n if (settled) return;\n const timer = setTimeout(() => setSettled(true), LANDED);\n return () => clearTimeout(timer);\n }, [settled]);\n\n // Lands scrolling on the card you opened, and keeps whichever card you're\n // on centred if the width changes, a phone turning sideways say.\n const current = useRef(active);\n useEffect(() => {\n current.current = active;\n }, [active]);\n useLayoutEffect(() => {\n if (settled) {\n scroller.current?.scrollTo({\n left: current.current * step,\n behavior: \"instant\",\n });\n }\n }, [settled, step, scroller]);\n\n return (\n
\n {/* Above what rises in below it, so the card flies over, not under. */}\n {\n if (!settled) return;\n const i = Math.round(e.currentTarget.scrollLeft / step);\n if (i !== active && i >= 0 && i < CARDS.length) onActive(i);\n }}\n >\n {CARDS.map((c, i) => (\n \n \n \n \n \n ))}\n \n\n {/* The rest of the page scrolls on its own, clear of the tab bar. */}\n
\n \n \n Yash\n \n \n\n \n Manage card\n \n\n \n
\n

Cashback

\n \n \n \n \n
\n
\n

Find ATMs

\n \n
\n \n\n \n \n {card.days.map(({ day, rows }) => (\n
\n

{day}

\n {rows.map((t) => (\n
\n \n \n \n \n \n {t.name}\n \n \n {t.kind}\n \n \n \n \n {t.amount}\n \n \n {t.back}\n \n \n
\n ))}\n
\n ))}\n \n \n
\n
\n );\n}\n\n// A carousel slot: the card in the middle is full size, its neighbours sit\n// back a touch, following the scroll exactly.\nfunction Slide({\n index,\n scrollX,\n still,\n reduceMotion,\n children,\n}: {\n index: number;\n scrollX: MotionValue;\n // Before the carousel can scroll: which card it's resting on.\n still: number | null;\n reduceMotion: boolean;\n children: React.ReactNode;\n}) {\n const { cardW, step } = use(Geo);\n const scale = useTransform(\n scrollX,\n [(index - 1) * step, index * step, (index + 1) * step],\n reduceMotion ? [1, 1, 1] : [0.94, 1, 0.94],\n );\n const resting = reduceMotion || index === still ? 1 : 0.94;\n return (\n // Shifted, not scrolled, until the carousel can scroll. A plain style,\n // so it's gone in the same commit that turns scrolling on: snap points\n // are worked out from the shifted boxes, and a shift that lingered a\n // frame would snap the carousel back to the first card.\n \n \n {children}\n \n \n );\n}\n\n// Swaps a card's numbers with a soft blur as you move between cards.\nfunction Swap({ id, children }: { id: string; children: React.ReactNode }) {\n return (\n \n \n {children}\n \n \n );\n}\n\n// The cards are objects with their own materials, the same in both themes.\nfunction CardFace({ id, details }: { id: CardId; details?: boolean }) {\n const [shown, setShown] = useState(false);\n const card = CARDS.find((c) => c.id === id)!;\n const dark = id === \"virtual\";\n // On a narrow phone the card's name would run into its button, so it\n // keeps just the last four digits.\n const narrow = use(Geo).cardW < 270;\n return (\n \n {dark ? : }\n {dark ? (\n \n Virtual\n \n ) : (\n \n )}\n \n {shown && (\n \n {card.number}\n \n )}\n \n \n {narrow ? `•${card.last4}` : `${card.name} •${card.last4}`}\n \n {details ? (\n setShown((s) => !s)}\n className={cn(\n \"absolute right-3 bottom-2.5 flex h-7 items-center gap-1 rounded-full px-2.5 text-[12px] font-medium outline-hidden transition-[background-color,scale] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-current active:scale-[0.96]\",\n dark\n ? \"bg-white/12 hover:bg-white/20\"\n : \"bg-black/8 hover:bg-black/12\",\n )}\n >\n \n {shown ? \"Hide details\" : \"View details\"}\n \n ) : null}\n \n );\n}\n\n// Fine white rules and a dashed orbit, like a print on dark plastic.\nfunction Linework() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\n// Brushed metal grain with the lab's mark pressed into it.\nfunction Brushed() {\n return (\n <>\n \n {/* The lab's mark, small and pressed into the metal: shadow along\n the top of each dot, light along the bottom. */}\n \n {Array.from({ length: 9 }, (_, i) => (\n \n ))}\n \n \n );\n}\n\nfunction Chip() {\n return (\n \n \n \n \n \n );\n}\n\nfunction MiniMap() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction Row({\n label,\n value,\n tone,\n avatar,\n}: {\n label: string;\n value: string;\n tone?: string;\n avatar?: string;\n}) {\n return (\n

\n \n {avatar && (\n \n )}\n {label}\n \n \n {value}\n \n

\n );\n}\n\nfunction Account({\n name,\n apy,\n amount,\n tint,\n}: {\n name: string;\n apy: string;\n amount: string;\n tint: string;\n}) {\n return (\n
\n

\n \n {name}\n

\n

\n {apy}\n

\n

\n {amount}\n

\n
\n );\n}\n\nfunction Header({\n view,\n onClose,\n}: {\n view: \"home\" | \"cards\";\n onClose: () => void;\n}) {\n return (\n \n \n {view === \"home\" ? (\n \n \n \n ) : (\n \n \n \n )}\n \n {/* Centred over the whole bar, so it can't take the close button's\n clicks. */}\n \n \n \n {view === \"home\" ? \"Money\" : \"Cards\"}\n \n \n \n \n \n \n \n );\n}\n\nfunction StatusBar() {\n return (\n \n 9:41\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction TabBar() {\n return (\n \n {TABS.map((d, i) => (\n \n ))}\n \n \n );\n}\n\nfunction Glyph({ d, className }: { d: string; className?: string }) {\n return (\n \n \n \n );\n}\n\nconst ACTIONS = [\n { label: \"Deposit\", d: \"M8 2v8M4.5 6.5 8 10l3.5-3.5M2.5 13.5h11\" },\n { label: \"Send\", d: \"M14 2 7 9M14 2l-4.5 12-2.5-5-5-2.5L14 2Z\" },\n {\n label: \"Request\",\n d: \"M2.5 2.5h4v4h-4zM9.5 2.5h4v4h-4zM2.5 9.5h4v4h-4zM9.5 9.5h4v4h-4z\",\n },\n {\n label: \"Transfer\",\n d: \"M5 2.5v11M2.5 5 5 2.5 7.5 5M11 13.5v-11M8.5 11l2.5 2.5 2.5-2.5\",\n },\n];\n\nconst TABS = [\n \"M2.5 7 8 2.5 13.5 7v6.5h-4v-4h-3v4h-4z\",\n \"M7 12.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11ZM11 11l3.5 3.5\",\n \"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13ZM8 4.5v3.5l2.5 1.5\",\n \"M4 6.5a4 4 0 1 1 8 0c0 4 1.5 5 1.5 5h-11S4 10.5 4 6.5ZM6.5 13.5a1.5 1.5 0 0 0 3 0\",\n \"M2.5 4.5h11v7h-6l-3 2.5v-2.5h-2z\",\n];\n\nexport default function WalletCardsDemo() {\n return ;\n}\n"},{"path":"lib/preview-play.ts","type":"registry:lib","target":"lib/preview-play.ts","content":"\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\n// Lets a demo know whether it's showing in an index card, and whether that\n// card is hovered or focused. Demos use it to act themselves out on hover:\n// a star button stars itself, a checkbox scribbles, and so on.\n//\n// null: not in a preview (the component's own page, or real use).\n// false: in a preview, at rest.\n// true: in a preview, being hovered or focused: play the show.\nexport const PreviewPlayContext = createContext(null);\n\nexport function usePreviewPlay() {\n return useContext(PreviewPlayContext);\n}\n"},{"path":"hooks/use-reduced-motion.ts","type":"registry:hook","target":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n"}],"cssVars":{"light":{"shadow-raised":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"},"dark":{"shadow-raised":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"},"theme":{"shadow-raised":"var(--shadow-raised)"}},"categories":["cards"],"docs":"From ui lab: https://lab.xevrion.dev/lab/wallet-cards"}