Spotlight Tour

Create a spotlight product tour. Over the interface, a dark veil (ink at ~55% opacity) with a transparent cutout exposing the current tour target. Implement the cutout with an animated clip-path polygon that excludes the target's rectangle (or an SVG mask); animate the cutout's position and size between stops with a soft spring (stiffness 200, damping 26) so the light glides from one element to the next rather than jumping. A 2px accent outline rides along the cutout edges. Beneath each stop, a small dark tooltip springs in (0.15s after the light lands, from 8px below at 95% scale) with the step text and a monospace "2/3" counter; it exits upward quickly when the light moves on. Compute target rectangles from the real DOM (getBoundingClientRect) and re-measure on resize. Advance on the Next and Skip buttons only, never on a timer: a tour that moves on by itself takes the reading speed out of the reader's hands, and the one thing a tour must respect is that they are reading. Accessibility: the tooltip uses aria-live="polite"; keep the veil aria-hidden and trap focus on the tour controls while active. If prefers-reduced-motion is set, move the spotlight and tooltip instantly. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.