Approve and deny gate

Use it for

• Access, review and moderation queues worked one item at a time
• Feature sections about permissions or approvals
• Triage screens with a keyboard first workflow

Avoid

• Bulk actions on many items at once
• Destructive decisions that need a confirm step or an undo

How it works

Each card is keyed by its place in an endless queue and reads its depth from a CSS variable, so stepping the head index makes every card behind it ease up one place. The decided card stays mounted with a data attribute that runs a keyframe exit: a stamp lands, then approve slides it right past the lane's clipped edge where the gate glows, and deny shakes it before it slides out left. animationend removes it; an interval decides by itself after a few idle seconds.

Accessibility

Approve and Deny are real buttons, and A and D work while focus is anywhere inside the component, including the focusable card lane. A polite live region announces each decision you make. Reduced motion removes the shake, exit and stamp animations and the autoplay: the next request simply replaces the decided one.