Swipe Button

Build a swipe-to-confirm button (slide to pay). Structure: a pill track about 250px by 52px. Inside it, a round knob (track height minus 8px) at the left, a tinted fill layer behind the knob, and a centered label "Slide to pay $24" followed by a faint double chevron. One value: keep a single fraction f from 0 to 1. The knob's x is f times (track width minus knob width minus padding). The fill's width is the knob's x plus the knob width, so the colour trails the knob. The label opacity is max(0, 1 - f * 1.6), so it is gone by about 60% before the knob covers half a word. Everything reads from f, so nothing drifts. Dragging: pointer events. pointerdown on the knob records the start x and start f; pointermove and pointerup (and pointercancel) listeners live on the WINDOW so the drag keeps working when the finger leaves the pill. Set touch-action: none on the knob so mobile browsers do not scroll the page instead. While held, disable all transitions so the knob tracks the finger exactly, and scale it to 1.06. Release rule: if f is 0.9 or more, complete. Otherwise spring back to 0 (stiffness ~420, damping ~32). Only a deliberate full slide confirms; that is the point of the pattern. Success: the knob snaps to the end, the track background crossfades to the success colour in 300ms, the knob turns white with a check in the success colour, and the label becomes a check icon plus the word "Paid" in white, centered in the space left of the knob. The knob stops accepting drags. Announce "Payment confirmed" in an aria-live="polite" region. Keyboard: the knob is focusable with role="slider", aria-valuemin 0, aria-valuemax 100, aria-valuenow, and aria-valuetext like "25%, slide to the end to pay" (then "Paid"). ArrowRight/ArrowUp add 25%, ArrowLeft/ArrowDown subtract 25%, Home goes to 0, End goes to 100% and completes. Reaching 100% by keyboard completes too. On first render, nudge the knob 14% to the right and back once (at 500ms and 850ms) to show it moves. Once, not in a loop. Reduced motion: the knob still follows the pointer because that is the input, but springs, the nudge and colour fades become instant. Colors as tokens: primary for the knob with on-primary for its chevron, a light text-tinted surface for the track, the accent at ~22% for the trailing fill, and success only for the completed state, always with the check icon and the word, never colour alone. 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.