Swipe card stack

Use it for

• Quick yes or no triage, like shortlisting stays
• Onboarding choices where one decision at a time feels lighter

Avoid

• Choices people need to compare side by side
• Destructive actions, since a throw is easy to trigger by accident

How it works

Pointer events on the top card with setPointerCapture, so the drag keeps tracking outside the card. Each move writes translateX(dx) and rotate(dx times 0.06deg) to the card and scales the next card from 0.95 toward 1, with transitions switched off. On release, a drag past 30 percent of the width or a fast flick throws the card off screen; otherwise it springs back. A depth index per card (0 to 3) drives the stack layout in CSS, and the thrown card is parked at the back without a transition so the stack loops.

Accessibility

Pass and Save buttons do the same as a swipe, and a polite live region announces each choice. Cards behind the top one are aria-hidden. touch-action: pan-y keeps vertical page scrolling on phones. Reduced motion drops the tilt and the throw animation.