Tour
Usage
A spotlight product tour, hand-built rather than wrapping intro.js — intro.js is AGPL-3.0, which would require releasing this repo's own source under AGPL to redistribute it, not viable for a commercial component library. The mechanism (measure the target's `getBoundingClientRect()`, ring it, dim everything else) is small enough that owning it outright cost less than the license risk did.import { Tour } from '@summonware/ui';Best practices
DoKeep a tour to 3-5 steps. Past that, most users skip it entirely — a long tour front-loads more than anyone actually retains.
Don'tPoint a step at an element that is not currently mounted/visible. This component reads `getBoundingClientRect()` at step-change time; a hidden target produces no spotlight.
Examples
Common configurations, variations and states.Two-step tour
Click "Start tour" to see the spotlight move between the two buttons.