Swipe To Dismiss

Build a stack of notification cards that can be flicked away in either direction. Each card: a small avatar block, a sender line, and a message. The gesture: pointerdown on the card, with pointermove and pointerup on the WINDOW, translating x freely in BOTH directions. Dismissing has no opposite, so both ways are correct here - note that this is the exact inverse of a cart row, where one direction and one destructive action is right. Tie ROTATION to travel: rotate = x / ~14. This gives the flick a pivot and makes the card read as paper rather than as a sliding rectangle. Drop opacity to about 0.75 once the swipe passes the commit threshold, so the commit point is visible before the finger lifts. On release past the threshold, remove the card. Its exit must follow the throw: animate x to a large value with the SIGN OF THE SWIPE, and increase the rotation. Exiting to a fixed side would fight the gesture that was just made. Give the stack depth: each card behind is scaled down slightly (about 0.04 per level) and offset down a few pixels, with a descending z-index. Without depth a list of notifications is a list; with it, it is a pile you are working through. Use `layout` on the cards so the stack closes up as one leaves. Set touchAction: "pan-y" so the card takes the horizontal gesture and gives the page back the vertical one. Under prefers-reduced-motion, drop the tilt, the travel and the layout animation - cards simply fade. Colors as tokens: paper cards, hairline borders, one accent for the avatar block. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.