Logout Confirm
The workspace dims and settles back while the sign-out question rises over it and takes focus.
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, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Logout Confirm
*
* The workspace dims and settles back while the sign-out question rises
* over it; confirming hands the frame over to a signed-out state.About this pattern
Ending a session is cheap to do and annoying to undo, so the question deserves a moment of stage management. The workspace behind settles a few pixels and dims rather than shrinking: it is a page full of type, and scaling type to say 'this is behind now' softens every glyph on it, while a small settle plus a dim says the same thing without touching legibility. The card then rises into the space that opened, opaque against the scrim, and leaves on a quick ease-in rather than by replaying its entrance backwards. Confirming hands the same frame over to a signed-out state instead of blanking it, so nothing about the layout jumps at the end.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
The page behind steps back a fraction while the question owns the screen.
Related patterns
- Session Lock BlurAn idle workspace softens behind a scrim while a lock card rises over it, keeping shape but not content.
- Account SwitchThe chosen avatar travels up into the header slot while the one it replaces goes back down into the list.
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.