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.