Permission Scope List
A consent screen reveals each requested scope in turn and keeps the approve button inert until they have all landed.
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 Scope List
*
* A consent screen that reveals each requested scope in turn and keeps
* the approve button inert until the last one has landed.About this pattern
Consent screens are the one place in a product where the interface has an interest in being read slowly. The scopes arrive at a deliberate reading pace rather than a decorative one — far enough apart that the eye finishes a line before the next begins — and each one only translates and fades, because a permission that scales into place is asking to be looked at instead of understood. The pace also does something functional: the approve button is armed by the animation itself and stays inert until the whole list has arrived, so nobody grants a scope that was still moving when they clicked. The limits sit on their own second line, which is the line that actually decides the answer.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Permission prompt
Requests paced so the sentence is read before the button is reachable.
Related patterns
- Social Login ButtonsThe separator rules draw outward from their label, then the provider buttons rise in one after the next.
- Guest Mode LimitA guest hits the limit and the gate glides up over a soft fade, offering a way in.
- Login Error RecoverA refused sign-in expands its reason under the field, wipes only the password, and hands the caret back.