Drag-and-settle card

Make it fit your project.

Capture the pointer on drag start and make the card follow the pointer without easing. On release, choose the closest of three slots and settle with a damped spring. Provide left and right buttons as keyboard alternatives and respect pointercancel.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Capture the pointer on drag start and make the card follow the pointer without easing. On release, choose the closest of three slots and settle with a damped spring. Provide left and right buttons as keyboard alternatives and respect pointercancel.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Do not block vertical page scrolling before the user clearly starts a horizontal drag.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.