---
title: "Animated guide marker and hotspot styles"
slug: "/help/demos/edit/guides/animated-guide-marker"
topic: "demos"
last_updated: "2026-07-29T09:43:11.550Z"
---

## **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**

1. Open the demo in the editor.
2. Select the annotation (guide step) whose marker you want to change.
3. In the annotation property panel, find the **Marker style** control.
4. Choose **Beacon**, **Cursor**, or **None**.

The change previews immediately in the editor.

:::tip[Apply globally]

To set the same marker style across every guide step in the demo, use **Apply Globally** from the annotation property panel.

:::

---

## **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.

:::note[Reviewer to confirm]

Confirm the exact control label ("Marker style" vs. "Guide marker" vs. "Hotspot style"), whether the panel calls it "Cursor" or "Pointer," and whether the Glow/Beacon switch is still labeled as such or has been renamed after the CORE-4087 refactor.

:::