Animated guide marker and hotspot styles
Animated guide marker and hotspot styles
Overview
Walnut's guide marker is the visual cue that draws a viewer's eye to the element a guide step is describing — the beacon that pulses on a button, the cursor that hovers over a field. You can now pick which marker style your demo uses, and the marker will glide between same-screen steps instead of jumping.
You choose the marker style per demo, and viewers see the marker animate across the screen as they move from one guide step to the next.
Marker Styles
Two marker styles are available on the annotation property panel:
- Beacon — a pulsing dot that glows on the target element. Best when you want a subtle "look here" cue.
- Cursor — a mouse-pointer icon that hovers over the target. Best for tutorial-style guides where you want to mimic a real user's mouse.
- None — no marker. The guide tooltip appears without a visual pointer.
Default: New demos default to None — the animated marker is opt-in. Existing demos keep whatever marker they had before this feature shipped.
Animated Glide Between Steps
When two consecutive guide steps target elements on the same screen, the marker no longer jumps — it glides across the screen from the first target to the next. This makes it easier for viewers to follow the flow and understand which element you're pointing at next.
The glide only applies within a single screen. When a step transition also changes screens, the marker fades and re-anchors on the new screen instead of animating across.
How to Set the Marker Style
- Open the demo in the editor.
- Select the annotation (guide step) whose marker you want to change.
- In the annotation property panel, find the Marker style control.
- Choose Beacon, Cursor, or None.
The change previews immediately in the editor.
When to Use Each Style
| Style | Best for |
|---|---|
| Beacon | Product tours, feature highlights, subtle guidance |
| Cursor | Tutorial-style walkthroughs, "watch how I do it" flows |
| None | Guide tooltips that speak for themselves; screenshots that shouldn't be distracted from |
FAQs
Why doesn't my marker animate between steps?
The glide only applies when both steps target elements on the same screen. If your steps span two screens, the marker fades and reappears on the new screen instead of gliding.
Do viewers need to opt in to see the animation?
No. Once you set the marker style, everyone who plays the demo sees it.
My existing demo has no marker. What happened?
New demos default to None. Existing demos keep their previous marker; if yours looks different, check that a global backfill didn't reset the style — pick Beacon or Cursor in the annotation property panel to opt back in.