Sign-in Success Handoff
The panel recedes as the product assembles behind it and the avatar travels into the header.
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 { useEffect, useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Sign-in Success Handoff
*
* The last second of signing in. Rather than a spinner, a white flash
* and a new page, the sign-in surface recedes while the product buildsAbout this pattern
The last second of signing in is usually a spinner, a white flash and a new page. Here the two halves overlap instead: the confirmation steps back three percent and dissolves while the workspace behind it assembles from the top bar down, so it reads as the product coming forward rather than a panel being dismissed. The user avatar is the thread between the two states — one disc, mounted in the panel before the handoff and in the header after it, never in both at once, so it travels rather than crossfading. It keeps exactly the same size in both places, which means the initials never rescale during the move. The only scale in the whole pattern belongs to the panel on its way out.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
Signing in resolves straight into the product instead of a loading page.
Related patterns
- Sign-in Form EntranceHeading, fields and button rise into place in one quick sequence as the screen opens.
- Account SwitchThe chosen avatar travels up into the header slot while the one it replaces goes back down into the list.
- Session Lock BlurAn idle workspace softens behind a scrim while a lock card rises over it, keeping shape but not content.