buttons
Traveling cutout spotlight tour
Guided walkthrough where a dark veil covers the interface except for a cutout that copies the highlighted element's exact rectangle, size and radius (read via getBoundingClientRect and getComputedStyle) and stretches and shrinks as it travels to the next step; the tooltip always lands on the side with the most free space.
See it live and copy its promptWhat you can adjust
- Scrim darkness
- Cutout padding
- Travel duration
- Minimum radius
- Tooltip color
How this catalog works
Every component ships with its reproduction prompt: the text you paste into an AI builder to get exactly this piece. The values above are editable, and the prompt you copy carries the ones you chose, so what gets generated is what you were looking at.
