> ## Documentation Index
> Fetch the complete documentation index at: /llms.txt
> Use this file to discover all available pages before exploring further.
# Cursor Glyph Trail
> A tutorial cursor path: on a settings screen the arrow clicks through three steps, leaving a dotted trail spaced evenly by distance and a numbered marker at each click; each step's trail fades as the next move begins.
# Cursor Glyph Trail
A tutorial cursor path: on a settings screen the arrow clicks through three steps, leaving a dotted trail spaced evenly by distance and a numbered marker at each click; each step's trail fades as the next move begins.
**Cursor Glyph Trail**
```html cursor-glyph-trail.html theme={null}
Cursor Glyph Trail
Settings
Notifications
Choose what we email you, and how often.
Email digest
Comments, mentions and file changes in one email.
Frequency
When the digest lands in your inbox.
DailyWeeklyMonthly
Mentions
Email me right away when someone mentions me.
CancelSave changesSaved
1
2
3
```
Copy npx hyperframes add cursor-glyph-trail to the clipboard
That writes one file: `compositions/components/cursor-glyph-trail.html`.
## Paste it into your composition
Open `compositions/components/cursor-glyph-trail.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 |
| - | - | - | - |
| `glyphs` | \`\` | string | Deprecated and ignored: the trail draws evenly spaced dots. |
| `density` | `med` | `low`, `med`, `high` | Spacing between trail dots. |
| `path` | `sweep` | `sweep`, `arc`, `zigzag` | How each move bends: sweep is a gentle curve, arc a deeper one, zigzag a straight line. |
| `fade` | `0.5` | number | Seconds a step trail takes to fade once the next move begins, clamped 0.3 to 1.5. |
| `accent` | `green` | `green`, `blue`, `violet` | Trail and step marker color: green rides --brand, blue rides --accent, violet rides --accent-2. |
| `exit` | `none` | `none`, `fade`, `up` | Optional departure. Default none: the finished screen holds until the frame cuts. |
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` `demonstrate` `trail` `tutorial` `steps` `deterministic`.
## Related topics
* [Browse the complete Catalog](/catalog.md)
* [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md)
* [Put blocks together into one video](/concepts/compositions.md)
## Related topics
- [Zoom Follow Cursor](/catalog/components/cursor-zoom-follow.md)
- [Agent Cursor](/catalog/components/agent-cursor.md)
- [Multiplayer Cursors](/catalog/components/multiplayer-cursors.md)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.