> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes.heygen.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Dart Cursor
> A bold outlined arrowhead that dives in from camera depth, flies nose-first with motion blur along its path, squashes on two clicks, and whips out of frame.
**Dart Cursor**
```html dart-cursor.html theme={null}
Dart Cursor
```
Copy npx hyperframes add dart-cursor to the clipboard
That writes one file: `compositions/components/dart-cursor.html`.
## Paste it into your composition
Open `compositions/components/dart-cursor.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 |
| - | - | - | - |
| `tone` | `dark` | `dark`, `light` | |
| `target_x` | `34` | 5% to 95%, step 1% | |
| `target_y` | `58` | 5% to 95%, step 1% | |
| `target2_x` | `64` | 5% to 95%, step 1% | |
| `target2_y` | `46` | 5% to 95%, step 1% | |
| `enter_from` | `right` | `right`, `left`, `top`, `bottom` | |
| `exit_to` | `right` | `right`, `left`, `top`, `bottom` | |
| `blur` | `1` | 0 to 1.5, step 0.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 theme={null}
```
Tagged `cursor` `motion-primitive` `pointer` `click` `motion-blur` `depth`.
## Related topics
* [Browse the complete Catalog](https://hyperframes.heygen.com/catalog.md)
* [Add assets and Catalog items in Studio](https://hyperframes.heygen.com/studio/assets-and-blocks.md)
* [Build a richer composition](https://hyperframes.heygen.com/go-further.md)
## Related topics
- [Multiplayer Cursors](https://hyperframes.heygen.com/catalog/components/multiplayer-cursors.md)
- [Oversized Cursor](https://hyperframes.heygen.com/catalog/components/oversized-cursor.md)
- [Magnetic Cursor](https://hyperframes.heygen.com/catalog/components/magnetic-cursor.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.