CursorTrail
A short trail of glowing dots that follows the cursor with a slight lag, each dot progressively smaller and fainter toward the tail.
Installation
npx dafink-ui add cursor-trailDemo
Move your cursor here
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Required. Content the trail overlays. |
| trailLength | number | 6 | Number of dots in the trail. |
| size | number | 12 | Diameter in pixels of the leading (largest) dot. |
| className | string | '' | Additional CSS classes. |
Accessibility
CursorTrail checks prefers-reduced-motion once on mount via window.matchMedia into a ref, mirroring Magnetic's pattern; when it matches, the pointermove handler's positioning logic short-circuits immediately and the trail dots stay at their initial opacity: 0 rest state for the component's lifetime. All trail dots are aria-hidden and pointer-events-none, so they're invisible to assistive technology and never block interaction with the wrapped children, whose own keyboard and focus behavior is untouched.