Tutorial Overlay Highlight

Design an in-app tutorial overlay for mobile that dims the current screen and spotlights specific UI areas one at a time. The overlay should teach by pointing at real controls already on the page, not by replacing the app with a separate lesson screen.

Each step needs a clear focus region, a short callout, and a way to move forward or skip. The mask, highlight shape, and callout placement should work across different target areas: top bars, bottom nav, cards, buttons, and gestures.

This lives on top of the live app state, so the underlying screen still matters. The overlay should feel anchored to the product, with callouts that adapt when the highlighted element sits near edges, in a scrollable area, or close to the keyboard.

The challenge is making the guidance feel interactive without turning the screen into clutter. The tutorial should help first-time users notice what to tap next while keeping the rest of the interface legible enough to understand the context.

Use the highlight shape and callout tail as a single system: if the target moves or sits near an edge, the callout should reflow instead of covering the focus area.