A canvas cursor trail that reads pointer speed: slow moves leave small round dots, fast flicks stretch into long thin streaks that shift in hue.
npx shadcn@latest add https://hyperblur.dev/r/cursor-trail-velocity.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-trail-velocity.tsx.
import { CursorTrailVelocity } from "@/components/hyperblur/cursor-trail-velocity"
<div style={{ height: 320 }}><CursorTrailVelocity slowHue={200} fastHue={330} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| slowHue | number | 200 | HSL hue in degrees used when the pointer is slow. |
| fastHue | number | 330 | HSL hue in degrees used at full speed. |
| size | number | 5 | Base dot size in pixels. |
| life | number | 650 | Base lifetime of a dot in milliseconds. Fast strokes live up to three times longer. |
| maxSpeed | number | 1400 | Pointer speed in pixels per second that counts as full speed. |
| idle | boolean | true | Draw a scripted path with changing speed until the pointer enters. |
| children | ReactNode | Content drawn above the canvas. It ignores pointer events except on interactive children. |