Suspicious Login Alert
A security alert holds a beat, then arrives slowly — this one is not meant to feel routine.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Suspicious Login Alert
*
* A security alert that deliberately takes longer to arrive than a
* routine notice. The extra beat before it moves, and the slow settle
* once it does, are the whole point: speed is what makes a message feelAbout this pattern
Everything else in an interface competes to be fast. This deliberately is not: there is a held beat before anything moves, and the card then travels on the softest spring in the library — low stiffness, heavy damping, a long approach and no rebound at the end. Speed is what makes a message feel dismissible, and this one is asking for a decision. The tone is serious rather than alarming: amber along one edge instead of a red card, a shield that strokes in slowly instead of a pulsing icon, and detail rows that arrive one at a time so the device, place and time are read rather than skimmed. Nothing shakes, nothing flashes, nothing repeats.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
Security messages written and paced to be read, not dismissed.
Related patterns
- Session Lock BlurAn idle workspace softens behind a scrim while a lock card rises over it, keeping shape but not content.
- Sign-in Success HandoffThe panel recedes as the product assembles behind it and the avatar travels into the header.
- Trust This DeviceFlipping the switch drops the device into the trusted list below, already marked.