Slider Verify
A slide-the-piece-into-the-gap challenge: one gesture to pass, one gesture to retry, and no grid of traffic lights.
Build a slide-to-verify challenge: drag a puzzle piece into the gap it fits. Structure: an image panel above, and a slider track below. The panel: a gradient background (this stands in for a photo), a recessed notch at a fixed horizontal position (a rounded square in darker ink with an inset shadow), and the puzzle piece itself - a paper-colored square with an accent border - starting at the left edge. Drive the piece AND the handle from one fraction value, so the thing you drag and the thing that must land can never be out of sync by a frame. Dragging: use pointer events, with the pointermove and pointerup listeners on the WINDOW, not the handle. This covers finger and cursor together and keeps working when the pointer leaves the track, which is where a real drag ends most of the time. Set touchAction: "none" on the handle so the browser does not take the gesture for scrolling. On release, check the distance to the notch with a GENEROUS tolerance - about 6% either side. A pixel-exact target turns a human check into a dexterity test, which is the opposite of the point. - Pass: snap the piece to the notch, turn the panel border, the track and the handle green, and show a check. - Miss: return the piece to the left, flash the border red, and replace the instruction IN THE TRACK with "not quite, try again" for about 700ms. Nothing new appears on screen to be dismissed. Failing costs one gesture - that is the entire argument against a grid of images. Disable the spring transitions while the pointer is held so the piece tracks the finger exactly, and re-enable them on release so the snap has weight. Accessibility: the handle has an aria-label; the status text in the track is aria-live="polite"; the panel is aria-hidden. Under prefers-reduced-motion, render the solved state. Colors as tokens: paper piece, ink for the notch, one accent for the piece border, semantic red and green for the two verdicts. 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.