Session Lock Blur
An idle workspace softens behind a scrim while a lock card rises over it, keeping shape but not content.
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 · Session Lock Blur
*
* An idle workspace softens behind a scrim and a lock card rises over
* it: the content is unreadable, but the shape of where you were stays.About this pattern
What an inactivity timeout should feel like: protective, not punitive. The page behind is blurred rather than replaced, so the layout you were working in stays recognisable and coming back is orientation rather than rediscovery — a plain dim cannot do that, which is why blur is the one non-transform property this pattern animates. The scrim and the blur arrive together as a single veil, the card follows a beat later so the eye has somewhere to land, and the shackle strokes closed as it arrives so the glyph performs the verb instead of illustrating it. The card is opaque on purpose: a translucent panel over a blurred page is as unreadable as the page.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sign-in screen
The desktop behind stays visible as shape while becoming unreadable as content.
Related patterns
- Logout ConfirmThe workspace dims and settles back while the sign-out question rises over it and takes focus.
- Sign-in Success HandoffThe panel recedes as the product assembles behind it and the avatar travels into the header.
- Suspicious Login AlertA security alert holds a beat, then arrives slowly — this one is not meant to feel routine.