The tour's screen layer. One full-viewport SVG mask dims the page and cuts a padded rounded hole over the target; a highlight ring tracks the element; a coach card sits beside it with the step title, plain-English body, a mono step counter ('03 / 09'), a progress hairline, Back, Next / Skip and an always-visible 'Exit tour' link.
Also called: highlight the button · dim the screen · step card · tooltip tour
- 1The cutout and ring re-measure every animation frame, so they follow scrolling, resizing and layout animations that fire no events
- 2If the spotlit element disappears (view change, modal close) the overlay reports it and the engine re-resolves the step
- 3Card placement picks a side automatically and draws a beak toward the target
- 4Keyboard: Esc pauses, Enter / → advances manual steps, ← goes back
A project screen can carry forty controls, and 'click the little calendar icon' is not enough when three of them look alike. Everything except the one control you need goes dim, and a card beside it says in a sentence what that control does. It was built against these screens rather than dropped in from an off-the-shelf tour kit: the kits locked the page so it could not be scrolled, froze the notifications stacked in the corner, and dragged the highlight across the screen a frame at a time on every step.
- Instructions that describe a button instead of pointing at it
- Highlight rings that drift out of position on scroll or animation
See it on your own jobs
Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.
or keep browsing features →