Tour · onboarding
A guided tour: the page dims, a spotlight glides from element to element and follows them as you scroll, a card with steps and progress sits beside each, targets can stay clickable, and it remembers who has seen it.
Revenue$48.2k
Users2,931
Churn2.4%
Usage
import { html } from "./index.js";import { Tour } from "./components/tour.js"; const tour = Tour({ steps: [ { title: "Welcome 👋", content: "A quick look around." }, // no target: centred { target: "#search", title: "Search", content: "Press / anywhere.", placement: "bottom" }, { target: () => document.querySelector(".chart"), title: "Trends", interactive: true }, { target: "#menu", title: "Menu", onEnter: () => openMenu() }, // may return a Promise ], storageKey: "seen-tour", // tour.seen() → true after the first time onFinish: () => …, onSkip: (index) => …,});if (!tour.seen()) tour.start();// → / Enter next · ← back · Esc leaves · the spotlight follows the target as the page scrolls