Tour Step Hop
The tour tooltip travels to the next control instead of vanishing and popping up somewhere else.
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 { useId, useState } from "react";
import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Tour Step Hop
*
* The tour tooltip travels to the next control instead of disappearingAbout this pattern
A product tour where the tip is one object moving through the screen rather than a series of unrelated popups. Each stop remounts the tooltip at new coordinates, but both instances carry the same layoutId, so Motion matches them and animates the new one from where the old one stood — the travel is the continuity, and it is the whole point. Its arrow rides a second shared element because the tooltip clamps to the stage while the control it points at does not. The cutout that dims the rest of the screen moves and resizes on the same spring, so the hole and the tip arrive together. The tooltip keeps one fixed size at every stop: a shared-layout box that changes size scales its own contents, and scaling text is never acceptable — only the copy inside crossfades.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Onboarding flow
A single tour card that repositions itself around the canvas between steps.
Related patterns
- Name Your WorkspaceTyping a name rolls the monogram to its new initial and slides a fresh address under the header it will appear in.
- Persona SelectPicking a role lifts that card while the others step back, and a line below says what the answer changed.
- Tutorial Card PlayThe tutorial thumbnail grows into a player, and the controls only arrive once the frame has stopped moving.