Plan Select Highlight
The pressed tier lifts and takes the accent while the feature list below resolves its marks one after another.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Plan Select Highlight
*
* Choosing a tier and watching what it actually buys resolve underneath.
* The chosen card lifts a few pixels and takes the accent while theAbout this pattern
Picking a tier and watching what it actually buys resolve underneath. The chosen card lifts a few pixels and the others step back, then the feature list settles its marks in sequence — included, then not included — so the answer arrives as a short sentence rather than as an instant substitution. The wording of the features never changes and never moves; only the small shapes beside it resolve, which means the eye tracks one column instead of re-reading four lines of type on every press. Prices are type and never scale, and the accent on the chosen card is a layer fading in over the resting surface rather than a colour being animated, because the resting border is a theme-derived color-mix() value that no engine can interpolate. The stagger is replayed by remounting the marks on a key, so the pattern carries no timing state at all.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Choosing a bundle and seeing what the choice contains settle beneath it.
Related patterns
- Template Gallery PickThe chosen thumbnail grows in place into a preview of the workspace it would create.
- Persona SelectPicking a role lifts that card while the others step back, and a line below says what the answer changed.
- Value Prop CarouselIntro slides advance on their own, with the artwork crossfading a beat behind the copy.