First Action Nudge
After a pause with nothing pressed, a slow halo starts breathing out of the one button worth pressing.
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 · First Action Nudge
*
* An empty workspace waits, and after a decent pause a soft halo starts
* breathing out of the one button worth pressing. The loop is slow onAbout this pattern
The empty workspace problem: everything is ready and nobody has done anything. After a hesitation of a couple of seconds a halo begins to grow out of the primary button, once every few seconds, at a low enough contrast that it reads as attention rather than as an alarm. The button itself never moves — it holds a label, and a label that pulses is unreadable exactly when it is being read — so the loop lives entirely in a shape behind it. Engagement ends it: reaching the button with the pointer, focusing it or pressing it retires the halo permanently, because a hint that keeps going after it has been noticed has stopped being a hint.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
An empty list keeps a single soft emphasis on the one control that resolves it.
Related patterns
- Notification Opt-inAn example alert drops in and two more fan out behind it, then the permission question reads underneath.
- Permission PrimerThe page dims and an explanation rises, with a small diagram filling in to show what the permission would actually put on screen.
- Setup Checklist CompleteA finished task fills its box, draws its mark, sweeps a rule through the label, and moves the counter up by one.