Back to Dictionary
Onboarding & Tours
●●○Customize
Spotlight / Coach Mark
The entire screen dims with a dark overlay, except for a highlighted "cutout" over a specific UI element, paired with an explanatory tooltip.
Live Demo
Cancel
New Feature
What It Is
The entire screen dims with a dark overlay, except for a highlighted "cutout" over a specific UI element, paired with an explanatory tooltip.
✓When to Use
- First-time user onboarding tours
- Highlighting a massive UI layout change
✕When NOT to Use
- Every single time a user logs in
- For extremely obvious UI buttons
Configuration Tips
- 01Use a mix-blend-mode or SVG mask to "punch a hole" in the dark overlay overlaying the target element's bounding box relative to the viewport
You've Seen It In
FramerSlack onboardingArc Browser
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create an onboarding spotlight that darkens the page but leaves a bright circular cutout over a specific button.
Code Example (Tailwind CSS)
export function SpotlightCoachMarkDemo() {}Related Effects
Pulsing Hotspot
A small circular dot that softly pulses outwards like a sonar ping. Gently draws user attention to unread items or new un-clicked features.
Tooltip Fade & Nudge
A tiny popover label that slides exactly 4-8px outwards from its anchor element while fading in. Used to label icon-only buttons.