Permission Request Rise
A permission card rises with its icon settling a beat before the explanation.
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, type Variants } from "motion/react";
/**
* Vibary · Permission Request Rise
*
* The pre-prompt that earns the system dialog: the card rises into
* place, its icon settles a beat ahead of everything else, and the
* explanation arrives in reading order behind it.About this pattern
The primer that earns the system dialog. The card travels up on a flat spring, the icon settles first with a small scale — it is a mark, so it is allowed to — and only then does the sentence about it arrive, row by row, in reading order. The order is the argument: subject, reason, choice. The type itself never scales and never springs, and reduced motion collapses the whole sequence into one short fade, since the pacing was rhythm rather than meaning.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Permission prompt
Explains why it wants desktop notifications in its own card before the browser prompt appears.
Related patterns
- Upload Complete FoldA finished upload's progress track folds away as the tile turns over to its thumbnail.
- Notification Opt-inAn example alert drops in and two more fan out behind it, then the permission question reads underneath.
- Connection RestoredThe offline bar turns green, confirms, and retracts in one continuous move.