Tab Indicator Slide
The active-tab underline travels to the tab you picked instead of blinking out and back.
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 · Tab Indicator Slide
*
* The active-tab underline travels to the tab you picked instead of
* disappearing and reappearing — one shared element, two positions.About this pattern
Orientation for tab strips, segmented filters and sub-navigation. Mounting the underline under the newly selected tab and giving it a shared layout id is the entire mechanism: Motion measures both boxes and animates the rule across the gap, so the eye follows one continuous object and always knows which way it moved. Because a 2px line is tracked the whole way, overshoot shows up here more than anywhere else — the springs stay near critical damping and the panel underneath cross-fades in place rather than sliding, which would drag its text sideways.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
The selection indicator slides between segments rather than jumping.
Related patterns
- Segmented Control SwapA filled pill travels to the segment you picked, and each label inverts as it passes underneath.
- Route Progress TopA top-edge bar advances during navigation and completes with a quick finish.
- Detail Close ReturnClosing a detail view returns the tile to the exact row it came from.