On layout choreography

Interfaces teleport all the time. Remove an item from a list and everything below it snaps upward; insert a row and the existing content jumps down. Expand a panel and the neighbouring blocks instantly reflow around it. The layout is technically correct, but for one frame the reader loses the connection between the state change and the objects that moved. Layout choreography gives that reflow a visible path. The jump The simplest version of a dynamic list is just state: const [items, setItems] = useState(initialItems); return ( <ul> {items.map((item) => ( <li key={item.id}> {item.label} <button onClick={() => remove(item.id)}>Remove</button> </li> ))} </ul> );React removes the item. The browser recalculates layout. The siblings appear in their new positions on the next paint. Nothing is wrong in the DOM; the problem is perceptual. The user saw four objects, removed the second, and expected the third and fourth to move into the empty space. Instead they simply arrive there, so the…