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.

Component

[ The Future Moves in Frames ]

Experiment 457 by BLANK

Install

npx shadcn@latest add @compronents/cursor-image-trail

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

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.

Customize

imagesasset-url

The pool of frames cycled through the trail.

heroImageasset-url

Dimmed backdrop behind the trail.

captionTop / captionBottomtext

The two centered hero captions.

Dependencies

None.