A fading trail of dots or a tapered ribbon that follows the cursor on a canvas.
npx shadcn@latest add https://hyperblur.dev/r/cursor-trail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-trail.tsx.
import { CursorTrail } from "@/components/hyperblur/cursor-trail"
<div className="relative"><CursorTrail variant="ribbon" /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Color of the trail. |
| length | number | 24 | Number of recent points kept. |
| size | number | 6 | Thickness at the head in pixels. |
| fade | number | 0.9 | How much the tail fades out, from 0 (no fade) to 1 (fully transparent). |
| variant | "dots" | "ribbon" | "ribbon" | Fading dots or a smooth tapered ribbon. |