Notification Opt-in
An example alert drops in and two more fan out behind it, then the permission question reads underneath.
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 · Notification Opt-in
*
* A sample notification fans out above the ask, so the person sees what
* they would actually receive before deciding — the value arrivesAbout this pattern
The permission ask that shows its own value first. An example alert lands at the top of the card, two blank cards fan out from behind it to imply the stream it belongs to, and only then does the headline and the pair of buttons settle in. The order is the argument: by the time the question is readable the person already knows what they are agreeing to receive. Nothing bounces and nothing pulses — a prompt that behaves like an interruption is a poor advertisement for permission to interrupt. The example alert is opaque and uses the CSS system colors, so it reads as a real notification on a light or dark page.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Permission prompt
A mock alert is displayed above the ask so the request has visible context.
Related patterns
- Permission PrimerThe page dims and an explanation rises, with a small diagram filling in to show what the permission would actually put on screen.
- 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.