Permission Primer
Your own dialog asks first, so the browser's one-shot permission prompt is only ever spent on someone who already said yes.
Want a ping when a build breaks?
Roughly twice a week, only for your own projects. Nothing else, ever.
Build a permission primer - a soft ask that comes before the browser's real prompt. Three stages in one surface: your primer, the simulated system prompt, and an end state. Why it exists: a browser permission prompt can only be answered ONCE per origin, and a denial is close to permanent. Firing it cold spends that single chance on someone who does not yet know what they are being asked. Stage 1 - the primer. Your own card, in your own style: an icon badge, a question naming the VALUE ("Want a ping when a build breaks?"), and a line naming the FREQUENCY and the scope ("Roughly twice a week, only for your own projects. Nothing else, ever."). Vague value is why people decline permissions they would have wanted. Two buttons: "Not now" and "Yes, ping me". Stage 2 - only after a yes, show the system prompt. Style it as FOREIGN: a different surface colour, a tighter radius, its own shadow, a terse "acme.app wants to / Show notifications" and Block/Allow. It must read as not-your-UI, or the primer teaches nothing about what is coming. Stage 3 - the end state. On allow: a green check and what happens next. On decline (either stage): a neutral "No problem" AND a door left open - "We'll ask again the first time a build breaks." The browser will not ask again, but you still can, at a moment when it matters. Crucially, "Not now" in stage 1 never reaches the browser at all. That is what makes the soft ask honest rather than a funnel. Accessibility: the end-state message is aria-live="polite". Under prefers-reduced-motion, render each stage in place with no slide. Colors as tokens: paper card, one accent for the primer icon, semantic green for the granted state, and a distinctly different surface for the system prompt. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.