> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inklyai.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Annotations

> Message, blur, and text annotations for content steps.

Annotations add guidance on top of a product screen. Use them to point at the next action, explain a feature, call out an important area, or hide sensitive information.

Inkly supports three annotation styles: messages, blur masks, and text labels.

## Message

A message can be a pulsing pointer, a pinned callout, or a clickable area. Use messages when the viewer needs a short explanation or a clear next step.

```json theme={null}
{
  "id": "s1_pointer",
  "type": "message",
  "variant": "pointer",
  "x": 0.28,
  "y": 0.34,
  "text": "Just **describe** the flow you want.",
  "anchor": "right",
  "advancesStep": true
}
```

| Field            | Type                                                       | Required | Default     | Notes                                                                                                            |
| ---------------- | ---------------------------------------------------------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------------------- |
| `id`             | `string`                                                   | Yes      | —           | Annotation id.                                                                                                   |
| `type`           | `"message"`                                                | Yes      | —           | Discriminator.                                                                                                   |
| `variant`        | `"pointer"` \| `"callout"` \| `"area"`                     | No       | `"callout"` | `pointer` is a pulsing dot; `callout` is a pinned card; `area` is a clickable rectangle with a pinned card.      |
| `x`              | `number`                                                   | Yes      | —           | Normalized x, `0` to `1`.                                                                                        |
| `y`              | `number`                                                   | Yes      | —           | Normalized y, `0` to `1`.                                                                                        |
| `w`              | `number`                                                   | No       | —           | Width of the hit region, `0` to `1`. Used for `variant: "area"`.                                                 |
| `h`              | `number`                                                   | No       | —           | Height of the hit region, `0` to `1`. Used for `variant: "area"`.                                                |
| `text`           | `string`                                                   | No       | —           | Message body. Inline markdown.                                                                                   |
| `target`         | `object`                                                   | No       | —           | Optional HTML target for HTML demos. `{ type: "html-element", alphaId }` pins the message to a captured element. |
| `advancesStep`   | `boolean`                                                  | No       | `true`      | Whether clicking the hotspot advances the step.                                                                  |
| `anchor`         | `"top"` \| `"right"` \| `"bottom"` \| `"left"` \| `"auto"` | No       | `"auto"`    | Card placement relative to the point.                                                                            |
| `textAlign`      | `"left"` \| `"middle"` \| `"right"`                        | No       | `"left"`    | Message text alignment.                                                                                          |
| `showNavigation` | `boolean`                                                  | No       | `true`      | Whether the card renders prev/next navigation.                                                                   |
| `background`     | `string`                                                   | No       | —           | CSS color override for the card background.                                                                      |
| `textColor`      | `string`                                                   | No       | —           | CSS color override for the message text.                                                                         |
| `borderRadius`   | `string`                                                   | No       | —           | CSS border-radius override.                                                                                      |
| `prevButton`     | `object`                                                   | No       | —           | `{ label?, hidden }`, where `hidden` defaults to `false`.                                                        |
| `nextButton`     | `object`                                                   | No       | —           | `{ label?, hidden }`, where `hidden` defaults to `false`.                                                        |

## Blur

Blur masks a rectangular region.

| Field       | Type     | Required | Default | Notes                           |
| ----------- | -------- | -------- | ------- | ------------------------------- |
| `id`        | `string` | Yes      | —       | Annotation id.                  |
| `type`      | `"blur"` | Yes      | —       | Discriminator.                  |
| `x`         | `number` | Yes      | —       | Normalized x, `0` to `1`.       |
| `y`         | `number` | Yes      | —       | Normalized y, `0` to `1`.       |
| `w`         | `number` | Yes      | —       | Width, `0` to `1`.              |
| `h`         | `number` | Yes      | —       | Height, `0` to `1`.             |
| `intensity` | `number` | No       | `8`     | Blur radius. Range `0` to `20`. |

## Text

Text renders a free-floating label.

| Field      | Type     | Required | Default | Notes                      |
| ---------- | -------- | -------- | ------- | -------------------------- |
| `id`       | `string` | Yes      | —       | Annotation id.             |
| `type`     | `"text"` | Yes      | —       | Discriminator.             |
| `x`        | `number` | Yes      | —       | Normalized x, `0` to `1`.  |
| `y`        | `number` | Yes      | —       | Normalized y, `0` to `1`.  |
| `text`     | `string` | Yes      | —       | Label text.                |
| `fontSize` | `number` | No       | `16`    | Font size in px. Positive. |
| `color`    | `string` | No       | —       | CSS color.                 |