Cart Swipe Away
Swipe a cart line away and the row collapses, with an undo that makes the gesture safe enough to be worth having.
swipe a row left to remove
Build a cart list whose rows swipe away, with an undo. Each row: a thumbnail, a name and variant, and a price. Behind each row, a full-bleed red action panel with a trash icon aligned to the trailing edge. The swipe: track pointerdown on the row and pointermove/pointerup on the WINDOW, translating the row's x. Clamp x at 0 so it only travels one way - a row that drags both directions implies an action that is not there. Set touchAction: "pan-y", NOT "none": the row must give the page its vertical scroll back, or the finger gets trapped in a list that can no longer be scrolled. The red panel sits UNDER the row and is uncovered as the row travels; do not draw it over the top. Deepen its color once the swipe passes the removal threshold, so the commit point is visible before the finger lifts. On release: past the threshold, remove; short of it, spring back to 0 (stiffness ~420, damping ~34). Disable the spring while the pointer is held so the row tracks the finger exactly. Removal collapses the row - animate height and opacity to 0 with `layout` on the siblings so the rows below close the gap. Fading in place leaves a hole that reads as a rendering bug. The undo is not optional. Show a dark bar naming what was removed with an Undo action, for about 4 seconds. A swipe is fast, accidental and irreversible-looking; without an undo it is a trap. Reserve the bar's height in the layout so nothing jumps when it appears and leaves. Accessibility: the removal message is aria-live="polite". Under prefers-reduced-motion, fade instead of collapsing and sliding; the swipe still works. Colors as tokens: paper rows, hairline borders, a reserved status red for the destructive panel, one accent for the undo action. 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.