Morphing Tabs

The pill and the curve flowing into the panel are not two shapes sitting next to each other - they are a single path, redrawn as the pill moves. That matters more than it sounds. Drawn separately, the pill's edge and the curve's edge meet at a tangent, and two soft-edged shapes touching at a tangent never quite cover the same pixels, so a faint seam shimmers along the join whenever it moves. One shape has nothing to shimmer.

An earlier version fused them with a blur-and-threshold filter, the usual gooey trick. It cannot line up. That kind of shape is wherever two blurred halos add up past a cutoff, so right at the joint the panel's halo pushes the outline out past the pill's real edge - the same effect that creates the connection is the one that ruins the alignment. Drawing the curve instead gives an exact edge, and costs no filter.

Two details make the shape hold up. The curve starts at the pill's widest line rather than at its bottom - below that line the pill is already narrowing, and a curve joined down there would make the edge go out, then in, then out again. And the size of the curve eases off as it runs out of room near a panel edge, rather than being cut off at a hard limit. That second part matters more than it sounds: cut it off and the radius goes from frozen to moving in a single step, which reads as a snap. Leave it too small and the curve cannot cover the distance to the panel's edge on its own, so the panel's own corner has to finish the job and the two opposite curves stack into a visible notch. Easing it off avoids both.

The label colour swap is a clipping trick. Every tab holds two copies of its own label - the normal dark one, and a light one directly on top of it inside the same button. A window then reveals the light copy only across the part of that button the pill currently covers. Because each light label lives inside its own button rather than in a separate row floating above them, the two copies cannot drift apart, and the colour flips right at the pill's moving edge.

Drop in your own tabs and panel content, set how tight or sweeping the joint is, and pick the travel ease. Keyboard works with both activation styles, and reduced motion turns the whole thing into an instant swap.