CursorsProNew
Image Trail
A chain of images follows the cursor, popping in and fading out. Great for portfolios and galleries.
Customize
tileColor
tileAccentColor
tileHighlightColor
Based on Image Trail (MIT license) · Terms of use
Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| threshold | number | 100 | Pixels the mouse must travel before the next image appears. |
| intensity | number | 0.3 | How strongly an image catches up with the cursor. |
| repeatChildren | number | 3 | How many times the set of images repeats in the trail. |
| zIndexDirection | 'new-on-top' | 'old-on-top' | "new-on-top" | Whether new images stack on top or below. |
| baseZIndex | number | 0 | Base z-index for all images. |
| keyframes | DOMKeyframesDefinition | — | Animation of each image, e.g. fade in and out. |
| keyframesOptions | AnimationOptions | — | Duration and timing for the keyframes. |
| as | ElementType | "div" | HTML tag of the container. |
| children | ReactNode | — | ImageTrailItem elements with images inside. |
| tileColor | string | "#ffffff" | Main colour of the trail tiles. Tiles read it as var(--trail-c1). |
| tileAccentColor | string | "#9a9a9a" | Second tile colour, var(--trail-c2). |
| tileHighlightColor | string | "#d4d4d4" | Light tile colour for highlights, var(--trail-c3). |
Dependencies
3 required packages
npm install motion clsx tailwind-merge