Guided Walkthrough Onboarding Block for React

A tour points at things and moves on when you press Next; this waits. Each task is complete only when you do it: press the ringed control or the key, and the drawing changes as the real app would. The other controls stay where they are and, when pressed out of order, say what to do first. Skip this step is there for anyone who knows it already.

Only while focus is somewhere inside the window: a capture listener on the window's own element hears them, so nothing is bound to the page and your site's own shortcuts are untouched. The status line says so. Command shows first and becomes Ctrl after the page loads on a system that has no Command key; the Share task uses it.

All of it. Nothing is shared, commented or saved; the drawing is a picture that reacts, and each result is said in a polite status line (“Done: Open search. Next: Add a frame.”). In your app, drop the drawing, point each task's id at a real control in your UI, and mark the task done from the real event, for example when your search opens.

The ring is the cue, not the motion: it is always drawn round the current control, and the three-times draw-in plays only when motion is allowed. Nothing loops, and nothing else in the window moves by itself.

Edit TASKS: each has a title, one sentence on what to do, and the key. A task's control is one of the Target buttons in the drawing, matched by id; to add a fifth, add a control to the drawing and a line to TASKS. Keep the list short: a walkthrough longer than four or five tasks is a course.

The window keeps a fixed height and stacks: the drawn app above (its properties panel is dropped), the guide below with its tasks, the current instruction, Skip and the status line. The guide scrolls inside if it needs to; the window never changes height.