How it works
During pointermove the card mirrors the finger with pure transform translation. On pointerup, the card's center is divided by the grid pitch and rounded to yield the nearest intersection, then a transition animates the transform to the target using a spring cubic-bezier with mild overshoot - that single curve choice is where the snap sensation lives. The preview highlight runs during the drag: every frame recomputes the nearest crossing, and when the distance drops under half a cell, a dashed outline fades in at that cell. The tilt is proportional to horizontal velocity and clamped to a few degrees, giving the card a subtle lean as it travels.
How to use this prompt
Fits icon re-arrangement, kanban cards settling into columns, form builders placing widgets, gallery sorting - anywhere free placement ends in order. Send the prompt with your cell size and snap radius (half a cell works), plus the touch-action: none instruction, or touch dragging loses every gesture to page scrolling.
Tips for better results
Do not enlarge the spring overshoot; the standard 1.56 factor is already lively, and doubling it bounces twice like a glitch. Keep tilt under three degrees - past that it reads as loss of control, not liveliness. Align the preview cell with the card center, not its top-left corner, or the hint and the landing point will disagree. And the sneaky one: position with transform only during the drag - mixing in left or top writes makes the snap animation start from a stale origin, and the card teleports instead of gliding.