Small photo tiles drop along the pointer path every few dozen pixels, then tilt, drift away and fade.
Field Notes
npx shadcn@latest add https://hyperblur.dev/r/cursor-image-trail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-image-trail.tsx.
import { CursorImageTrail } from "@/components/hyperblur/cursor-image-trail"
<CursorImageTrail className="h-80" images={["/a.jpg", "/b.jpg", "/c.jpg"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | Image URLs for the tiles. Without it a set of built-in gradient scenes is used. | |
| size | number | 64 | Tile width in pixels. Height is 1.22 times the width. |
| spacing | number | 44 | Distance in pixels the pointer travels between two tiles. |
| duration | number | 950 | Lifetime of each tile in milliseconds. |
| max | number | 14 | Most tiles on screen at once, up to 40. |
| idle | boolean | true | Play a slow scripted path while the pointer is away. The effect hands over to the real pointer when it enters and eases back when it leaves. |
| children | ReactNode | Content rendered inside the stage. The stage fills its parent, so give the parent a height. |