Permission Needed
The shape of the content stays visible out of focus while a lock closes over it and offers a way to ask.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Permission Needed
*
* Content you are not cleared for should look like content, not like an
* error. The shape of what is behind stays visible and out of focus, theAbout this pattern
Restricted content should read as content held back, not as a page that failed. The rows behind stay in place, blurred and still, so the reader can see there is something real here; a scrim settles over them, the shackle of the lock draws closed in one stroke, and the request action follows. Sending the request swaps the button label inside a slot sized for both readings, so the card holds its exact size — nothing has actually changed yet, and motion that implied otherwise would be a lie. Reduced motion presents the closed lock without the stroke.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- File browser
A folder you are not shared on shows a locked panel with a request-access action.
Related patterns
- Coming SoonA locked preview of an unreleased area, crossed once by a gloss and dated by a badge that lands last.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Archive EmptyOne fade and a lid settling three pixels onto a box — the least motion a state can have and still arrive.