Sign Out Other Sessions
One press ends every other session: the rows slide out in turn, the list closes up, and only this device is left.
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 · Sign Out Other Sessions
*
* One action ends every session but this one, and the list shows it
* happen: the other rows slide out in turn and the list closes upAbout this pattern
Signing out everywhere else is a security action, and a list that just blinks to one row leaves the person unsure it worked. This belongs in account security settings, the active sessions panel, and the step after a password change. Each other session slides a short way left and fades, one after another, so the person can watch every device go. The gap each row leaves closes as a short eased height tween, a real size change, and only after the row is gone, so the rows below never rock. The current device never moves. A confirmation line fades in once the list is still, and its check draws a beat later. There are no springs and no text ever scales. Under reduced motion the rows fade and the list closes without travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Settings
The other sessions slide out one by one and the list closes up under the current device.
- Team members
An admin ends a member's sessions and their device rows leave in turn before a confirmation fades in.
Related patterns
- Trust This DeviceFlipping the switch drops the device into the trusted list below, already marked.
- Two Factor Method SwitchChoosing another second factor slides the selection ring, crossfades the instructions and re-arms the field.
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.