Experience / Application

Exchange

page
play-fn

Exchange — trading cards with someone whose public card you have open.

The sheet opens already exchanging. There is no confirm step, because the tap on "Exchange cards" was the confirmation: asking twice would make a two-second moment into a four-second one while two people stand there. For the same reason there is no form — the signed-in identity is assumed and offered back for correction ("Not you?") rather than requested up front.

The animation is doing work, not decorating: two cards leaning together and then crossing is what makes a mutual exchange legible. A spinner would say "waiting" and not say "both directions".

Under prefers-reduced-motion it renders the receipt immediately. Deck collapses durations to 0ms in that mode, which for a sequence that carries state would flash all three captions in one frame — so this skips the beats rather than shortening them.

Not exported from @meetcard/deck — this is a composed screen, built from the components below rather than shipped as one.

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

The entry point on someone's public card.

Default

Source

const Default = () => <Exchange />;

Tapping Exchange opens the sheet already exchanging — there is no confirm step, because the tap was the confirmation.

Exchanging

Source

const Exchanging = () => <Exchange />;

The receipt. Both beats have run, and the three things you'd actually do next are on the surface rather than behind a dismiss.

Complete

Source

const Complete = () => <Exchange defaultOpen skipAnimation />;

The full sequence, unskipped: greeting → trading → receipt, about two seconds. Asserts the captions arrive in order.

Full Sequence

Source

const FullSequence = () => <Exchange defaultOpen />;

Props

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Open the sheet on mount, for stories and deep links.
`me`	`ExchangePerson`	`{ name: 'Alex Rivera', role: 'Design Lead', company: 'Northwind Studio', }`	The signed-in person, whose card is shared.
`skipAnimation`	`boolean`	`false`	Skip the animation and land on the receipt. Stories set this directly; at runtime `prefers-reduced-motion` does the same thing.
`them`	`ExchangePerson`	`{ name: 'Ben Ackles', role: 'Product Marketing', company: 'MeetCard', }`	Whose card is being collected — the public card you opened.