Cursor trail
Letters, a word or an emoji follow the pointer, as glowing stamps that shrink away or as a chain that snakes behind it.
- enhancer
- pointer
- trail
- stamps
- emoji
- sparkle
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Cursor trail example
Move the pointer around
Move the pointer around
Code
It follows the controls above: change an option and the code changes with it.
<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>
<p class="m-demo-lg" data-motion="cursor-trail" data-motion-area="parent">Move the pointer around</p>import { CursorTrail } from "./motion/react/CursorTrail";
<CursorTrail>Your content</CursorTrail><script setup lang="ts">
import CursorTrail from "./motion/vue/CursorTrail.vue";
</script>
<template>
<CursorTrail>Your content</CursorTrail>
</template>const el = document.querySelector("#title");
el.dataset.motion = "cursor-trail";The wrappers: CursorTrail.tsx (React, TypeScript) and CursorTrail.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-text | ✦ | What to stamp (letters, a word or an emoji) |
data-motion-mode | stamp | Trail |
data-motion-spacing | 22 | Distance between stamps |
data-motion-life | 1500 | How long a stamp lasts |
data-motion-count | 10 | Links in a chain |
data-motion-size | 1 | Size, in the text's letter heights |
data-motion-turn | false | Turn each stamp with the movement (off: a playful random tilt) |
data-motion-color | #f6a04d | Color |
data-motion-area | self | Where it follows the pointer |
data-motion-idle | true | Draw a slow loop when nobody points |
Accessibility
The trail is an aria-hidden layer that ignores the pointer, so everything under it stays clickable; the text itself is untouched. It follows mouse, pen and touch alike and adds nothing a keyboard user needs. Under reduced motion there is no trail. Only transform, opacity and paint change, so nothing around it moves. Frames run through the shared loop, which stops off screen, in hidden tabs and under reduced motion; reduced motion shows the final state with no movement.
Size
cursor-trail.js is 1.7 KB gzip, with text-kit.js 3.2 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.