Tab Overview

a terminal-style tab strip with three stages of one window: a row of labels, a taller strip where every tab shows what it holds on hover, and an overview grid filling the window so a tab can be picked by its shape rather than its title.

key insight: a tab is one element in all three stages, so a shared layoutId carries it between the strip and the grid. Motion tracks a card from where it was picked up to where it lands instead of one node vanishing while another appears in place, and tab order never changes, which is what makes that readable.

everything that moves runs on one spring, so the card, the strip and the window resize together. At different speeds they read as three pieces rather than one window. The previews are one component at two sizes, and a card keeps the smaller one in both the strip and the grid, so crossing between them changes its box and nothing else.