# Spotlight onboarding tour > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The first-run tour of Pennant, an invoicing app for small studios. The whole screen dims except a rounded cutout around one real control, ringed in saffron, and a near-black popover beside it says what that control does for this studio, in this studio's numbers. Four stops: New invoice, the Overdue filter, a "Viewed twice" status, the Next payout card. Between stops the cutout does not blink off and on: it glides, changing position, size and corner radius over 460ms, and the popover glides with it while its text cross-fades. The detail worth copying is the cutout itself: one element with a 9999px box-shadow, so the dim, the hole and the ring are a single box that can animate. ## Reference behaviour 1. Initial state: the tour is already running at stop 1. The cutout hugs the "New invoice" button (6px padding, radius = button radius + 6px) with a 2px saffron ring and a soft halo pulse. The popover sits below it, its arrow pointing at the button's centre, reading "Stop 1 of 4", "Start an invoice here", "Pick a client and Pennant fills in their day rate, payment terms and VAT number." Back is hidden. 2. Next (or ArrowRight) moves to the next stop. The popover body fades to 0 over 140ms, the text is replaced, then the cutout and popover move together over 460ms on `cubic-bezier(.16,1,.3,1)` and the body fades back in over 200ms. The four 18 × 3px progress pips fill saffron up to the current stop. 3. Stops and preferred placement: - 1 New invoice, below. 2 the Overdue tab, below ("Late invoices stand out"). 3 the "Viewed twice" status chip on INV-0148, left ("See what the client did"). 4 the Next payout card, left ("Know when money lands"). - If the preferred side lacks room (16px margin), left falls back to below, and below falls back to above. The popover is then clamped inside the viewport and the arrow is clamped 14px from the popover's corners, so it always points at the target. 4. Back (or ArrowLeft) goes to the previous stop. On stop 4, Next reads "Finish". 5. Finish, Skip tour and Escape end the tour. A dark toast confirms: "Tour finished. It is under Take the tour if you want it again." or "Tour skipped. Take the tour is in the sidebar." for 3000ms. Focus goes to the "Take the tour" button in the sidebar's help card, which restarts at stop 1. 6. Before measuring, the target is scrolled into view. On resize the current stop is placed again. 7. The halo is the one loop: a ring that grows from 0 to 12px and fades over 2.4s, behind the saffron line. ## Structure ``` 1280 × 800 ┌───────────┬────────────────────────────────────────────────────────────┐ │ ▶ Pennant │ Invoices (40px condensed) ╔[+ New invoice]╗│ │ Invoices │ Studio Ferro, 48 invoices... ╚═══════════════╝│ │ Clients │ (All 48) Draft 3 Sent 9 Overdue 2 Paid 34 ┌──── tip 320 ──▲┐│ │ Payouts │ ┌ table ──────────────────────────────┐ ┌──│ ━━ ── ── ── │ │ │ Expenses │ │ Number Client Due Status Amt │ │ │ Stop 1 of 4 │ │ │ Settings │ │ INV-0148 Holm & D. 14 Nov Viewed ...│ │ │ Start an ... │ │ │ │ │ ... │ │ │ [Skip] [Next]││ │ │ └──────────────────────────────────────┘ │ └──────────────┘ │ │ ┌ help ─┐ │ │ payout card 300 │ │ │ Take │ │ └──────────────────│ │ │ tour │ │ everything outside ╔══╗ is under rgba(26,26,23,.56) │ └───────────┴────────────────────────────────────────────────────────────┘ ``` - App: `