How it works
FLIP has four beats: First, record every card's old rectangle; Last, mutate the DOM order and let the browser reflow; Invert, write transforms that translate each card back to where it was; Play, animate those transforms to zero. The arc trick rides inside the invert step: the outer wrapper carries translateX driven by an easeOut curve (fast start, gentle landing), while an inner element carries translateY driven by an easeIn (slow start, fast finish). Because the two curves complete at different paces, the composite path bends into an arc. Only transforms are written and the reflow happens exactly once, so even a sizeable grid costs a couple of milliseconds per frame.
How to use this prompt
Target two-dimensional reorders: kanban drag-sorting, photo grids after a delete, tag-cloud shuffles, raffle pools. Tell your AI what action triggers the reorder - a button, a drop, a removal - and it wires the FLIP sequence. For extra physical plausibility, add: scale duration with travel distance so far cards take slightly longer.
Tips for better results
The easing assignment decides the arc's direction: easeOut on X with easeIn on Y bulges one way, and swapping them mirrors it - mismatched pairs produce an awkward S shape. Single-axis reorders cannot show an arc at all; this technique only pays off on grids. Past twenty cards, vary durations between roughly 0.4 and 0.7 seconds by distance instead of one global value. And the classic bug: after mutating the DOM, re-read positions before playing - reusing the pre-shuffle rectangles sends cards flying from the wrong origin.