Persona Select
Picking a role lifts that card while the others step back, and a line below says what the answer changed.
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 · Persona Select
*
* Choosing a role lifts that card off the stack while the others recede,
* a mark settles into its corner, and a line appears underneath sayingAbout this pattern
The role question every setup flow asks, answered visibly. The chosen card rises a few pixels on a spring and takes an accent border; the ones not chosen fall to under half opacity and settle a pixel lower, which is what makes the stack read as reordered rather than merely recolored. A mark scales into the corner — it is a shape, so it is allowed to — while the label beside it never moves or resizes. The payoff gets its own beat: a line underneath naming the workspace the answer will build, with the continue action beside it, on a reserved row so nothing below shifts when it appears.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Setup checklist
Choice rows that mark themselves and reveal a continue action once answered.
Related patterns
- Name Your WorkspaceTyping a name rolls the monogram to its new initial and slides a fresh address under the header it will appear in.
- Tour Step HopThe tour tooltip travels to the next control instead of vanishing and popping up somewhere else.
- Tutorial Card PlayThe tutorial thumbnail grows into a player, and the controls only arrive once the frame has stopped moving.