Segmented Control Swap
A filled pill travels to the segment you picked, and each label inverts as it passes underneath.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Segmented Control Swap
*
* The filled pill travels to the segment you picked, and each label
* inverts as it passes underneath. One pill, two positions — the sharedAbout this pattern
The two-or-three-way switch that sits above a set of figures. A shared layout id is the whole mechanism: the pill is unmounted from the old segment and mounted in the new one, and Motion measures both boxes and animates between them rather than cross-fading two pills. What lifts it above a plain indicator is the handover — the arriving label waits a beat before it inverts, so the colour change reads as the pill passing under the type rather than a flick unrelated to the movement. Both label copies share one grid cell so their metrics are identical and the swap is pure opacity, with nothing shifting by a subpixel; the panel below cross-fades in place, because a solid block travelling is the only thing worth watching here.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
The selection block slides between segments and the labels invert.
Related patterns
- Tab Indicator SlideThe active-tab underline travels to the tab you picked instead of blinking out and back.
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.
- Breadcrumb Trail AppendGoing one level deeper slides a new crumb in from the right while the trail behind it recedes.