Components/Effects
Image Trail
A very smooth and interactive trail of images that follows your mouse cursor with discrete step interpolation.
imagetrailmouseanimation
Preview
Wiggle your mouse around.
Installation
npx shadcn@latest add @grootstudio/image-trailUsage
1
Import the component
2
Use like this
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| items | string[] | [] | An array of image URLs to use in the trail. | |
| distance | number | 40 | The fraction of the window width required to trigger spawning a new image. Larger numbers mean closer images. | |
| maxNumberOfImages | number | 5 | The maximum number of images that can be visible on the screen at the same time. | |
| className | string | undefined | Optional class names for the container section. | |
| imgClass | string | "w-40 h-48" | Class names for individual image elements, particularly for adjusting sizing constraints. |
Dependencies
motion/react