Account Switch
The chosen avatar travels up into the header slot while the one it replaces goes back down into the list.
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 · Account Switch
*
* Choosing another account sends its avatar up into the header slot
* while the one it replaces travels back down into the list.About this pattern
A switcher that answers the only question people have after they use it: which account am I in now. Each avatar owns a shared identity, so the incoming one is already mounted in its row and the outgoing one is already in the header — they simply trade slots, with no cloned copy and no crossfade between two faces. Both slots are exactly the same size, which makes the move a pure translate and keeps the initials from ever being rescaled. The row that gives up its avatar keeps a same-size outline in its place so nothing changes height mid-switch, and the header name crossfades in a fixed slot at constant type size.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
A list of signed-in identities where the header always shows the current one.
Related patterns
- Avatar Upload CropA picked image drops into the circular frame and settles oversized, ready to be nudged.
- Sign-in Success HandoffThe panel recedes as the product assembles behind it and the avatar travels into the header.
- Logout ConfirmThe workspace dims and settles back while the sign-out question rises over it and takes focus.