Moving a card was an instant jump, with nothing to show what had changed
or where the card went.
Cards now travel between positions using FLIP — measure the old rect,
re-render in the new order, offset each card back to where it was, then
release it. This animates the real layout rather than faking movement, so
a card that shifts because *another* card moved animates too, and the
effect stays correct however the grid reflows. 260ms on a decelerating
curve: quick to leave, gentle to settle.
The card the user acted on is lifted above its neighbours for the
duration, so a swap reads as one card moving rather than two sliding
through each other.
No new dependency — @hello-pangea/dnd is drag-and-drop, not a layout
animation library, and the house style is plain CSS transitions.
Two things this deliberately avoids:
- Animating on anything but a reorder. The effect runs on every render,
so it is gated behind an explicit capture taken at click time; the 30s
SWR refresh, isStale toggles and picker changes all leave cards still.
- Leaving inline styles behind. Transition and z-index are cleared once
settled, or a later unrelated reflow would animate the card again.
prefers-reduced-motion skips the animation entirely.
Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
gorkem-bwl
a0d91abcd0