Permission Primer
The page dims and an explanation rises, with a small diagram filling in to show what the permission would actually put on screen.
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 · Permission Primer
*
* The card that earns the system prompt. The page dims, an explanation
* rises over it, and a small diagram fills in to show exactly whatAbout this pattern
The card shown before the system prompt, because the OS dialog can only be spent once. The scrim fades, the card rises on a spring that does not overshoot — a card asking for trust must not look like it is selling something — and only then does the diagram inside fill in, one item at a time, showing the thing the permission would add rather than describing it. Sitting above a scrim, the card cannot be translucent, so it is painted with the CSS system colors Canvas and CanvasText and follows the host app's color scheme. Reduced motion keeps the arrival and the fill, and drops the travel from both.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Permission prompt
An illustrated explanation shown before the operating system's access prompt.
Related patterns
- Notification Opt-inAn example alert drops in and two more fan out behind it, then the permission question reads underneath.
- First Action NudgeAfter a pause with nothing pressed, a slow halo starts breathing out of the one button worth pressing.
- Setup Checklist CompleteA finished task fills its box, draws its mark, sweeps a rule through the label, and moves the counter up by one.