--- title: "Annotate Cursor" description: "A marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid exactly under its nib, then lifts and leaves." mode: "frame" --- import { CatalogDetail, CatalogSlot } from "/snippets/catalog-detail.jsx"; import { InstallCommand } from "/snippets/install-command.jsx";

Annotate Cursor

A marker pen glides onto the frame and hand-draws a loose loop, an underline, or an arrow around a region, the ink laid exactly under its nib, then lifts and leaves.

```html cursor-annotate.html Annotate Cursor ``` That writes one file: `compositions/components/cursor-annotate.html`.
## Paste it into your composition Open `compositions/components/cursor-annotate.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | --- | --- | --- | --- | | `shape` | `circle` | `circle`, `underline`, `arrow` | | | `color` | `#f43f5e` | color | | | `target_x` | `40` | 0% to 95%, step 1% | | | `target_y` | `38` | 0% to 95%, step 1% | | | `target_w` | `20` | 2% to 90%, step 1% | | | `target_h` | `16` | 2% to 90%, step 1% | | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap
``` {/* hf:generated-footer */} Tagged `cursor` `motion-primitive` `pen` `annotation` `draw-on` `highlight`. ## Related topics - [Browse the complete Catalog](/catalog) - [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks) - [Put blocks together into one video](/concepts/compositions)