Trust This Device
Flipping the switch drops the device into the trusted list below, already marked.
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 · Trust This Device
*
* Flipping the switch does not just change a setting — the device drops
* into the trusted list below, already marked, so the consequence of theAbout this pattern
A switch that only changes its own colour leaves the user guessing what it did. Here the knob slides on a tight spring and the list underneath opens a gap for the device in the same beat, so the setting and its consequence are visible in one glance. The row travels a short distance into the gap while the list height tweens — a genuine size change, so it eases rather than springs, otherwise every row below would rock. The trusted check draws a fraction later, which reads as the system confirming rather than as decoration that arrived with the row. Switching back closes the gap the same way.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Settings
Session and device lists that update in place as a preference changes.
Related patterns
- 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.
- Suspicious Login AlertA security alert holds a beat, then arrives slowly — this one is not meant to feel routine.