Skip Tour Dismiss
Leaving the tour early resolves it in order: the tip drops away, the ring opens and dissolves, the dim lifts last.
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 · Skip Tour Dismiss
*
* Leaving a tour early, without slamming a door. The tip drops away
* first, the ring opens and dissolves, the dim lifts last, and theAbout this pattern
Most tours are dismissed, so the exit deserves as much care as the entrance. Three things leave in a deliberate order rather than at once: the tip goes first because its words stop applying the moment the tour is left, the ring opens outward as it dissolves so the dismissal reads as release rather than retraction, and the dim is given the longest curve because the page coming back is the reassurance. The control that had been raised above the overlay settles flat at the same time, which is what returns it to the page instead of leaving it stranded. Everything is an ease-out; nothing springs, because a bouncy exit argues with a decision already made.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
Guidance that releases the highlighted control gently rather than cutting away.
Related patterns
- Onboarding Step TransitionThe next panel enters from the right as the current one leaves left, with the progress bar advancing behind them.
- First Action NudgeAfter a pause with nothing pressed, a slow halo starts breathing out of the one button worth pressing.
- Notification Opt-inAn example alert drops in and two more fan out behind it, then the permission question reads underneath.