Cursor Image Trail
A hero that spawns a trail of images behind a fast pointer. Once the cursor travels far enough inside the frame, an image is dropped at the interpolated position and slides to the live one, revealed by ten horizontal mask layers that clip open from the center out, then collapse and fade as each image ages out. Desktop only, no dependencies.
npx shadcn@latest add https://ui.aryank.space/r/cursor-image-trail.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | Twenty BLANK-hosted frames | Frames cycled into the pointer trail. |
| heroImage / captionTop / captionBottom | string / string / string | BLANK-hosted backdrop and captions | Dimmed backdrop and the two centered captions. |
imagesasset-urlThe pool of frames cycled through the trail.
heroImageasset-urlDimmed backdrop behind the trail.
captionTop / captionBottomtextThe two centered hero captions.
None.