Progress Dots Advance
The dot for the current step stretches into a pill, and moving on hands that width to the next one.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Progress Dots Advance
*
* The dot for the current step is a pill. Moving on stretches the next
* dot open and lets the old one close, so the row reads as one markerAbout this pattern
A row of dots where one is always a pill. Advancing stretches the next dot open while the previous one closes, and because the change is real width rather than scaleX, every dot after it is pushed along — which is what makes the row read as a single marker travelling instead of five lights switching. The width runs on a spring that does not overshoot, since an overshoot here wobbles the whole row. The caption above swaps in the direction of travel at a constant font size, and the accent fill is a layer whose opacity animates rather than an animated color, because theme-adaptive neutrals are color-mix() values and no engine can interpolate those.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
Paging dots where the current page is drawn wider than the rest.
Related patterns
- Connect IntegrationThe switch throws, the status swaps to connected, and the row opens to list what it will now sync.
- Goal PickerChosen goal tiles paint themselves and take a mark, and the continue action rises the moment the first one is picked.
- Invite Team SendEach address leaves the compose box and travels into a waiting seat, then marks itself sent.